From d8acd6c37c391143db90c3ab997e88617e5cd3dc Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sat, 25 Sep 2021 21:47:30 +0800
Subject: [PATCH] style forgot password form

---
 app/auth/components/auth-form.tsx  | 28 +++++++++--------
 app/auth/pages/forgot-password.tsx | 49 ++++++++++++++----------------
 app/auth/pages/reset-password.tsx  | 16 +++++++++-
 app/auth/pages/sign-in.tsx         | 10 ++----
 app/auth/pages/sign-up.tsx         |  6 ++--
 5 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/app/auth/components/auth-form.tsx b/app/auth/components/auth-form.tsx
index 571b5d1..5b0e7c3 100644
--- a/app/auth/components/auth-form.tsx
+++ b/app/auth/components/auth-form.tsx
@@ -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>
diff --git a/app/auth/pages/forgot-password.tsx b/app/auth/pages/forgot-password.tsx
index 398793e..59f66b7 100644
--- a/app/auth/pages/forgot-password.tsx
+++ b/app/auth/pages/forgot-password.tsx
@@ -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>
 	);
 };
 
diff --git a/app/auth/pages/reset-password.tsx b/app/auth/pages/reset-password.tsx
index b2c49dc..d5cb9d6 100644
--- a/app/auth/pages/reset-password.tsx
+++ b/app/auth/pages/reset-password.tsx
@@ -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;
diff --git a/app/auth/pages/sign-in.tsx b/app/auth/pages/sign-in.tsx
index ed4abcc..ce36a52 100644
--- a/app/auth/pages/sign-in.tsx
+++ b/app/auth/pages/sign-in.tsx
@@ -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>
 	);
 };
diff --git a/app/auth/pages/sign-up.tsx b/app/auth/pages/sign-up.tsx
index 37d51b6..291f01a 100644
--- a/app/auth/pages/sign-up.tsx
+++ b/app/auth/pages/sign-up.tsx
@@ -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>
 	);
 };