calcom/pages/auth/forgot-password/index.tsx
Syed Ali Shahbaz 8bbfc0c7f0
Adds complementing text color for various brand colors that the user might choose (#1289)
* added contrast evaluator

* added brandtext --WIP

* further changes and fixes

* fixed type err

* fixed datepicker bug

* changed brandtext to brandcontrast

* further dark mode changes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2021-12-14 10:39:32 +00:00

175 lines
6.1 KiB
TypeScript

import debounce from "lodash/debounce";
import { GetServerSidePropsContext } from "next";
import { getCsrfToken } from "next-auth/client";
import Link from "next/link";
import React, { SyntheticEvent } from "react";
import { getSession } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
import { HeadSeo } from "@components/seo/head-seo";
export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
const { t, i18n } = useLocale();
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState<{ message: string } | null>(null);
const [success, setSuccess] = React.useState(false);
const [email, setEmail] = React.useState("");
const handleChange = (e: SyntheticEvent) => {
const target = e.target as typeof e.target & { value: string };
setEmail(target.value);
};
const submitForgotPasswordRequest = async ({ email }: { email: string }) => {
try {
const res = await fetch("/api/auth/forgot-password", {
method: "POST",
body: JSON.stringify({ email: email, language: i18n.language }),
headers: {
"Content-Type": "application/json",
},
});
const json = await res.json();
if (!res.ok) {
setError(json);
} else {
setSuccess(true);
}
return json;
} catch (reason) {
setError({ message: t("unexpected_error_try_again") });
} finally {
setLoading(false);
}
};
const debouncedHandleSubmitPasswordRequest = debounce(submitForgotPasswordRequest, 250);
const handleSubmit = async (e: SyntheticEvent) => {
e.preventDefault();
if (!email) {
return;
}
if (loading) {
return;
}
setLoading(true);
setError(null);
setSuccess(false);
await debouncedHandleSubmitPasswordRequest({ email });
};
const Success = () => {
return (
<div className="space-y-6">
<h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900">{t("done")}</h2>
<p>{t("check_email_reset_password")}</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>
);
};
return (
<div className="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">
<HeadSeo title={t("forgot_password")} description={t("forgot_password")} />
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="px-4 py-8 mx-2 space-y-6 bg-white rounded-lg shadow sm:px-10">
{success && <Success />}
{!success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900 font-cal">
{t("forgot_password")}
</h2>
<p>{t("reset_instructions")}</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>
<form className="space-y-6" onSubmit={handleSubmit} action="#">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
{t("email_address")}
</label>
<div className="mt-1">
<input
onChange={handleChange}
id="email"
name="email"
type="email"
inputMode="email"
autoComplete="email"
placeholder="john.doe@example.com"
required
className="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-black focus:border-brand sm:text-sm"
/>
</div>
</div>
<div>
<button
type="submit"
disabled={loading}
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-brandcontrast bg-brand hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
loading ? "cursor-not-allowed" : ""
}`}>
{loading && (
<svg
className="w-5 h-5 mr-3 -ml-1 text-white animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
)}
{t("request_password_reset")}
</button>
</div>
<div className="space-y-2">
<Link href="/auth/login">
<button
type="button"
className="flex justify-center w-full px-4 py-2 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
{t("login")}
</button>
</Link>
</div>
</form>
</>
)}
</div>
</div>
</div>
);
}
ForgotPassword.getInitialProps = async (context: GetServerSidePropsContext) => {
const { req, res } = context;
const session = await getSession({ req });
if (session) {
res.writeHead(302, { Location: "/" });
res.end();
return;
}
return {
csrfToken: await getCsrfToken(context),
};
};