shellphone.app/app/auth/pages/reset-password.tsx

75 lines
2.0 KiB
TypeScript
Raw Normal View History

2021-09-25 13:47:30 +00:00
import type { BlitzPage, GetServerSideProps } from "blitz";
2021-08-01 03:05:40 +00:00
import { useRouterQuery, Link, useMutation, Routes } from "blitz";
2021-07-31 14:33:18 +00:00
import BaseLayout from "../../core/layouts/base-layout";
2021-09-25 14:05:39 +00:00
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";
2021-07-31 14:33:18 +00:00
const ResetPasswordPage: BlitzPage = () => {
const query = useRouterQuery();
const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword);
2021-07-31 14:33:18 +00:00
return (
2021-09-25 14:05:39 +00:00
<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.",
};
}
}
}}
>
2021-07-31 14:33:18 +00:00
{isSuccess ? (
2021-09-25 14:05:39 +00:00
<p>
Go to the <Link href={Routes.LandingPage()}>homepage</Link>
</p>
2021-07-31 14:33:18 +00:00
) : (
2021-09-25 14:05:39 +00:00
<>
2021-07-31 14:33:18 +00:00
<LabeledTextField name="password" label="New Password" type="password" />
2021-08-01 14:03:49 +00:00
<LabeledTextField name="passwordConfirmation" label="Confirm New Password" type="password" />
2021-09-25 14:05:39 +00:00
</>
2021-07-31 14:33:18 +00:00
)}
2021-09-25 14:05:39 +00:00
</Form>
);
};
2021-07-31 14:33:18 +00:00
2021-08-01 03:05:40 +00:00
ResetPasswordPage.redirectAuthenticatedTo = Routes.Messages();
ResetPasswordPage.getLayout = (page) => <BaseLayout title="Reset Your Password">{page}</BaseLayout>;
2021-07-31 14:33:18 +00:00
2021-09-25 13:47:30 +00:00
export const getServerSideProps: GetServerSideProps = async (context) => {
if (!context.query.token) {
return {
redirect: {
destination: Routes.ForgotPasswordPage().pathname,
permanent: false,
},
};
}
return { props: {} };
};
export default ResetPasswordPage;