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

style forgot password form

Browse Source
This commit is contained in:
m5r 2021-09-25 21:47:30 +08:00
parent 767c2e3966
commit d8acd6c37c
5 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/auth/components/auth-form.tsx
View File

@ -79,19 +79,21 @@ export function AuthForm<S extends z.ZodType<any, any>>({
{children}
<button
type="submit"
disabled={ctx.formState.isSubmitting}
className={clsx(
"w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
{
"bg-primary-400 cursor-not-allowed": ctx.formState.isSubmitting,
"bg-primary-600 hover:bg-primary-700": !ctx.formState.isSubmitting,
},
)}
>
{texts.submit}
</button>
{texts.submit ? (
<button
type="submit"
disabled={ctx.formState.isSubmitting}
className={clsx(
"w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
{
"bg-primary-400 cursor-not-allowed": ctx.formState.isSubmitting,
"bg-primary-600 hover:bg-primary-700": !ctx.formState.isSubmitting,
},
)}
>
{texts.submit}
</button>
) : null}
</form>
</FormProvider>
</div>

49
app/auth/pages/forgot-password.tsx
View File

@ -2,8 +2,8 @@ import type { BlitzPage } from "blitz";
import { Routes, useMutation } 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 { ForgotPassword } from "../validations";
import forgotPassword from "../../auth/mutations/forgot-password";
@ -11,33 +11,30 @@ const ForgotPasswordPage: BlitzPage = () => {
const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword);
return (
<div>
<h1>Forgot your password?</h1>
<Form
texts={{
title: isSuccess ? "Request submitted" : "Forgot your password?",
subtitle: "",
submit: isSuccess ? "" : "Send reset password instructions",
}}
schema={ForgotPassword}
initialValues={{ email: "" }}
onSubmit={async (values) => {
try {
await forgotPasswordMutation(values);
} catch (error: any) {
return {
[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
};
}
}}
>
{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>
<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
) : (
<Form
submitText="Send Reset Password Instructions"
schema={ForgotPassword}
initialValues={{ email: "" }}
onSubmit={async (values) => {
try {
await forgotPasswordMutation(values);
} catch (error: any) {
return {
[FORM_ERROR]: "Sorry, we had an unexpected error. Please try again.",
};
}
}}
>
<LabeledTextField name="email" label="Email" placeholder="Email" />
</Form>
<LabeledTextField name="email" label="Email" />
)}
</div>
</Form>
);
};

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

@ -1,4 +1,4 @@
import type { BlitzPage } from "blitz";
import type { BlitzPage, GetServerSideProps } from "blitz";
import { useRouterQuery, Link, useMutation, Routes } from "blitz";
import BaseLayout from "../../core/layouts/base-layout";
@ -9,6 +9,7 @@ import resetPassword from "../../auth/mutations/reset-password";
const ResetPasswordPage: BlitzPage = () => {
const query = useRouterQuery();
console.log("client query", query);
const [resetPasswordMutation, { isSuccess }] = useMutation(resetPassword);
return (
@ -59,4 +60,17 @@ 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;

10
app/auth/pages/sign-in.tsx
View File

@ -47,14 +47,8 @@ const SignIn: BlitzPage = () => {
}
}}
>
<LabeledTextField name="email" label="Email" placeholder="Email" type="email" />
<LabeledTextField
name="password"
label="Password"
placeholder="Password"
type="password"
showForgotPasswordLabel
/>
<LabeledTextField name="email" label="Email" type="email" />
<LabeledTextField name="password" label="Password" type="password" showForgotPasswordLabel />
</Form>
);
};

6
app/auth/pages/sign-up.tsx
View File

@ -40,9 +40,9 @@ const SignUp: BlitzPage = () => {
}
}}
>
<LabeledTextField name="name" label="Name" placeholder="Name" type="text" />
<LabeledTextField name="email" label="Email" placeholder="Email" type="email" />
<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
<LabeledTextField name="name" label="Name" type="text" />
<LabeledTextField name="email" label="Email" type="email" />
<LabeledTextField name="password" label="Password" type="password" />
</Form>
);
};