77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import type { BlitzPage, GetServerSideProps } from "blitz";
|
|
import { useRouterQuery, Link, useMutation, Routes } from "blitz";
|
|
|
|
import BaseLayout from "../../core/layouts/base-layout";
|
|
import { LabeledTextField } from "../../core/components/labeled-text-field";
|
|
import { Form, FORM_ERROR } from "../../core/components/form";
|
|
import { ResetPassword } from "../validations";
|
|
import resetPassword from "../../auth/mutations/reset-password";
|
|
|
|
const ResetPasswordPage: BlitzPage = () => {
|
|
const query = useRouterQuery();
|
|
console.log("client query", query);
|
|
const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword);
|
|
|
|
return (
|
|
<div>
|
|
<h1>Set a New Password</h1>
|
|
|
|
{isSuccess ? (
|
|
<div>
|
|
<h2>Password Reset Successfully</h2>
|
|
<p>
|
|
Go to the <Link href={Routes.LandingPage()}>homepage</Link>
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<Form
|
|
submitText="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.",
|
|
};
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<LabeledTextField name="password" label="New Password" type="password" />
|
|
<LabeledTextField name="passwordConfirmation" label="Confirm New Password" type="password" />
|
|
</Form>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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;
|