style forgot password form

app/auth/components/auth-form.tsx

@@ -79,19 +79,21 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 
 						{children}
 
-						<button
+						{texts.submit ? (
-							type="submit"
+							<button
-							disabled={ctx.formState.isSubmitting}
+								type="submit"
-							className={clsx(
+								disabled={ctx.formState.isSubmitting}
-								"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",
+								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,
+										"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>
+						) : null}
 					</form>
 				</FormProvider>
 			</div>

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 { AuthForm as Form, FORM_ERROR } from "../components/auth-form";
-import { Form, FORM_ERROR } from "../../core/components/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>
+		<Form
-			<h1>Forgot your password?</h1>
+			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>
+				<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
-					<h2>Request Submitted</h2>
-					<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
-				</div>
 			) : (
-				<Form
+				<LabeledTextField name="email" label="Email" />
-					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>
 			)}
-		</div>
+		</Form>
 	);
 };
 

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;

app/auth/pages/sign-in.tsx

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

app/auth/pages/sign-up.tsx

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