style forgot password form

app/auth/components/auth-form.tsx

@@ -79,6 +79,7 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 
 						{children}
 
+						{texts.submit ? (
 							<button
 								type="submit"
 								disabled={ctx.formState.isSubmitting}
@@ -92,6 +93,7 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 							>
 								{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 { 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,17 +11,12 @@ const ForgotPasswordPage: BlitzPage = () => {
 	const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword);
 
 	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"
+			texts={{
+				title: isSuccess ? "Request submitted" : "Forgot your password?",
+				subtitle: "",
+				submit: isSuccess ? "" : "Send reset password instructions",
+			}}
 			schema={ForgotPassword}
 			initialValues={{ email: "" }}
 			onSubmit={async (values) => {
@@ -34,10 +29,12 @@ const ForgotPasswordPage: BlitzPage = () => {
 				}
 			}}
 		>
-					<LabeledTextField name="email" label="Email" placeholder="Email" />
-				</Form>
+			{isSuccess ? (
+				<p>If your email is in our system, you will receive instructions to reset your password shortly.</p>
+			) : (
+				<LabeledTextField name="email" label="Email" />
 			)}
-		</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="password"
-				label="Password"
-				placeholder="Password"
-				type="password"
-				showForgotPasswordLabel
-			/>
+			<LabeledTextField name="email" label="Email" type="email" />
+			<LabeledTextField name="password" label="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="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>
 	);
 };