import { debounce } from "lodash"; import type { GetServerSidePropsContext } from "next"; import { getCsrfToken } from "next-auth/react"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import Link from "next/link"; import { useRouter } from "next/router"; import type { CSSProperties, SyntheticEvent } from "react"; import React from "react"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button, EmailField } from "@calcom/ui"; import PageWrapper from "@components/PageWrapper"; import AuthContainer from "@components/ui/AuthContainer"; export default function ForgotPassword({ csrfToken }: { csrfToken: string }) { const { t } = 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 }), 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 (

{t("password_reset_email", { email })}

{t("password_reset_leading")}

{error &&

{error.message}

}
); }; return ( {t("back_to_signin")} ) }> {success && } {!success && ( <>
{error &&

{error.message}

}
)}
); } ForgotPassword.isThemeSupported = false; ForgotPassword.PageWrapper = PageWrapper; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const { req, res } = context; const session = await getServerSession({ req, res }); if (session) { res.writeHead(302, { Location: "/" }); res.end(); return { props: {} }; } return { props: { csrfToken: await getCsrfToken(context), ...(await serverSideTranslations(context.locale || "en", ["common"])), }, }; };