import { ResetPasswordRequest } from "@prisma/client"; import debounce from "lodash/debounce"; import { GetServerSidePropsContext } from "next"; import { getCsrfToken } from "next-auth/react"; import Link from "next/link"; import React, { useMemo } from "react"; import dayjs from "@calcom/dayjs"; import prisma from "@calcom/prisma"; import { Button, TextField } from "@calcom/ui"; import { useLocale } from "@lib/hooks/useLocale"; import AuthContainer from "@components/ui/AuthContainer"; type Props = { id: string; resetPasswordRequest: ResetPasswordRequest; csrfToken: string; }; export default function Page({ resetPasswordRequest, csrfToken }: Props) { 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 [password, setPassword] = React.useState(""); const submitChangePassword = async ({ password, requestId }: { password: string; requestId: string }) => { try { const res = await fetch("/api/auth/reset-password", { method: "POST", body: JSON.stringify({ requestId: requestId, password: password }), 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 debouncedChangePassword = debounce(submitChangePassword, 250); const Success = () => { return ( <>

{t("password_updated")}

); }; const Expired = () => { return ( <>

{t("whoops")}

{t("request_is_expired")}

{t("request_is_expired_instructions")}

); }; const isRequestExpired = useMemo(() => { const now = dayjs(); return dayjs(resetPasswordRequest.expires).isBefore(now); }, [resetPasswordRequest]); return ( {isRequestExpired && } {!isRequestExpired && !success && ( <>
{ e.preventDefault(); if (!password) { return; } if (loading) { return; } setLoading(true); setError(null); setSuccess(false); await debouncedChangePassword({ password, requestId: resetPasswordRequest.id }); }} action="#">
{ setPassword(e.target.value); }} id="password" name="password" type="password" autoComplete="password" required />
)} {!isRequestExpired && success && ( <> )}
); } export async function getServerSideProps(context: GetServerSidePropsContext) { const id = context.params?.id as string; try { const resetPasswordRequest = await prisma.resetPasswordRequest.findUniqueOrThrow({ where: { id, }, select: { id: true, expires: true, }, }); return { props: { resetPasswordRequest: { ...resetPasswordRequest, expires: resetPasswordRequest.expires.toString(), }, id, csrfToken: await getCsrfToken({ req: context.req }), }, }; } catch (reason) { return { notFound: true, }; } }