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

55 lines
1.4 KiB
TypeScript
Raw Normal View History

2021-08-01 03:05:40 +00:00
import type { BlitzPage } from "blitz";
import { Routes, useMutation } from "blitz";
2021-07-31 14:33:18 +00:00
import BaseLayout from "../../core/layouts/base-layout";
import { LabeledTextField } from "../../core/components/labeled-text-field";
import { Form, FORM_ERROR } from "../../core/components/form";
import { ForgotPassword } from "../validations";
import forgotPassword from "../../auth/mutations/forgot-password";
2021-07-31 14:33:18 +00:00
const ForgotPasswordPage: BlitzPage = () => {
const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword);
2021-07-31 14:33:18 +00:00
return (
<div>
<h1>Forgot your password?</h1>
{isSuccess ? (
<div>
<h2>Request Submitted</h2>
<p>
If your email is in our system, you will receive instructions to reset your
password shortly.
</p>
</div>
) : (
<Form
submitText="Send Reset Password Instructions"
schema={ForgotPassword}
initialValues={{ email: "" }}
onSubmit={async (values) => {
try {
await forgotPasswordMutation(values);
2021-07-31 14:33:18 +00:00
} catch (error) {
return {
[FORM_ERROR]:
"Sorry, we had an unexpected error. Please try again.",
};
2021-07-31 14:33:18 +00:00
}
}}
>
<LabeledTextField name="email" label="Email" placeholder="Email" />
</Form>
)}
</div>
);
};
2021-07-31 14:33:18 +00:00
2021-08-01 03:05:40 +00:00
ForgotPasswordPage.redirectAuthenticatedTo = Routes.Messages();
2021-07-31 14:33:18 +00:00
ForgotPasswordPage.getLayout = (page) => (
<BaseLayout title="Forgot Your Password?">{page}</BaseLayout>
);
2021-07-31 14:33:18 +00:00
export default ForgotPasswordPage;