import type { BlitzPage, GetServerSideProps } from "blitz"; import { useRouterQuery, Link, useMutation, Routes } from "blitz"; import BaseLayout from "../../core/layouts/base-layout"; import { AuthForm as Form, FORM_ERROR } from "../components/auth-form"; import { LabeledTextField } from "../components/labeled-text-field"; import { ResetPassword } from "../validations"; import resetPassword from "../../auth/mutations/reset-password"; const ResetPasswordPage: BlitzPage = () => { const query = useRouterQuery(); const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword); return ( <Form texts={{ title: isSuccess ? "Password reset successfully" : "Set a new password", subtitle: "", submit: "Reset password", }} schema={ResetPassword} initialValues={{ password: "", passwordConfirmation: "", token: query.token as string, }} onSubmit={async (values) => { try { await resetPasswordMutation(values); } catch (error: any) { if (error.name === "ResetPasswordError") { return { [FORM_ERROR]: error.message, }; } else { return { [FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.", }; } } }} > {isSuccess ? ( <p> Go to the <Link href={Routes.LandingPage()}>homepage</Link> </p> ) : ( <> <LabeledTextField name="password" label="New Password" type="password" /> <LabeledTextField name="passwordConfirmation" label="Confirm New Password" type="password" /> </> )} </Form> ); }; ResetPasswordPage.redirectAuthenticatedTo = Routes.Messages(); ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>; export const getServerSideProps: GetServerSideProps = async (context) => { if (!context.query.token) { return { redirect: { destination: Routes.ForgotPasswordPage().pathname, permanent: false, }, }; } return { props: {} }; }; export default ResetPasswordPage;