cal.pub0.org/apps/web/pages/auth/forgot-password/index.tsx

148 lines
4.2 KiB
TypeScript

import debounce from "lodash/debounce";
import { GetServerSidePropsContext } from "next";
import { getCsrfToken } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/router";
import React, { SyntheticEvent } from "react";
import { EmailField, Button } from "@calcom/ui/v2";
import { getSession } from "@lib/auth";
import { useLocale } from "@lib/hooks/useLocale";
import AuthContainer from "@components/v2/ui/AuthContainer";
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 router = useRouter();
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 if ("resetLink" in json) {
router.push(json.resetLink);
} 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 text-sm leading-normal ">
<p className="">{t("password_reset_email", { email })}</p>
<p className="">{t("password_reset_leading")}</p>
{error && <p className="text-center text-red-600">{error.message}</p>}
<Button color="secondary" className="w-full justify-center" href="/auth/login">
{t("back_to_signin")}
</Button>
</div>
);
};
return (
<AuthContainer
showLogo
title={!success ? t("forgot_password") : t("reset_link_sent")}
heading={!success ? t("forgot_password") : t("reset_link_sent")}
description={t("request_password_reset")}
footerText={
!success && (
<>
<Link href="/auth/login">
<a className="font-medium text-neutral-900">{t("back_to_signin")}</a>
</Link>
</>
)
}>
{success && <Success />}
{!success && (
<>
<div className="space-y-6">{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 />
<EmailField
onChange={handleChange}
id="email"
name="email"
label={t("email_address")}
placeholder="john.doe@example.com"
required
/>
<div className="space-y-2">
<Button
className="w-full justify-center"
type="submit"
disabled={loading}
aria-label={t("request_password_reset")}
loading={loading}>
{t("request_password_reset")}
</Button>
</div>
</form>
</>
)}
</AuthContainer>
);
}
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),
};
};