mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style reset password form

Browse Source
This commit is contained in:
m5r
2021-09-25 22:05:39 +08:00
parent d8acd6c37c
commit 9d30930f96
2 changed files with 61 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/auth/pages/reset-password.tsx
View File

@ -2,57 +2,55 @@ 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 { 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();
console.log("client query", query);
const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword);
return (
<div>
<h1>Set a New Password</h1>
<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 ? (
<div>
<h2>Password Reset Successfully</h2>
<p>
Go to the <Link href={Routes.LandingPage()}>homepage</Link>
</p>
</div>
<p>
Go to the <Link href={Routes.LandingPage()}>homepage</Link>
</p>
) : (
<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>
</Form>
);
};