style registration form

app/auth/components/auth-form.tsx

@@ -71,14 +71,14 @@ export function AuthForm<S extends z.ZodType<any, any>>({
 						className="form"
 						{...props}
 					>
-						{children}
-
 						{formError ? (
-							<div role="alert" className="mt-8 sm:mx-auto sm:w-full sm:max-w-sm">
+							<div role="alert" className="mb-8 sm:mx-auto sm:w-full sm:max-w-sm">
 								<Alert title="Oops, there was an issue" message={formError} variant="error" />
 							</div>
 						) : null}
 
+						{children}
+
 						<button
 							type="submit"
 							disabled={ctx.formState.isSubmitting}

app/auth/components/labeled-text-field.tsx

@@ -54,7 +54,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
 				</div>
 
 				{error ? (
-					<div role="alert" style={{ color: "red" }}>
+					<div role="alert" className="text-red-600">
 						{error}
 					</div>
 				) : null}

app/auth/components/signup-form.tsx

@@ -1,44 +0,0 @@
-import { useMutation } from "blitz";
-
-import { LabeledTextField } from "../../core/components/labeled-text-field";
-import { Form, FORM_ERROR } from "../../core/components/form";
-import signup from "../../auth/mutations/signup";
-import { Signup } from "../validations";
-
-type SignupFormProps = {
-	onSuccess?: () => void;
-};
-
-export const SignupForm = (props: SignupFormProps) => {
-	const [signupMutation] = useMutation(signup);
-
-	return (
-		<div>
-			<h1>Create an Account</h1>
-
-			<Form
-				submitText="Create Account"
-				schema={Signup}
-				initialValues={{ email: "", password: "" }}
-				onSubmit={async (values) => {
-					try {
-						await signupMutation(values);
-						props.onSuccess?.();
-					} catch (error: any) {
-						if (error.code === "P2002" && error.meta?.target?.includes("email")) {
-							// This error comes from Prisma
-							return { email: "This email is already being used" };
-						} else {
-							return { [FORM_ERROR]: error.toString() };
-						}
-					}
-				}}
-			>
-				<LabeledTextField name="email" label="Email" placeholder="Email" />
-				<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
-			</Form>
-		</div>
-	);
-};
-
-export default SignupForm;

app/auth/mutations/signup.ts

@@ -4,11 +4,12 @@ import db, { GlobalRole, MembershipRole } from "../../../db";
 import { Signup } from "../validations";
 import { computeEncryptionKey } from "../../../db/_encryption";
 
-export default resolver.pipe(resolver.zod(Signup), async ({ email, password }, ctx) => {
+export default resolver.pipe(resolver.zod(Signup), async ({ email, password, name }, ctx) => {
 	const hashedPassword = await SecurePassword.hash(password.trim());
 	const encryptionKey = computeEncryptionKey(email.toLowerCase().trim()).toString("hex");
 	const user = await db.user.create({
 		data: {
+			name: name.trim(),
 			email: email.toLowerCase().trim(),
 			hashedPassword,
 			role: GlobalRole.CUSTOMER,

app/auth/pages/sign-up.tsx

@@ -0,0 +1,54 @@
+import type { BlitzPage } from "blitz";
+import { useRouter, Routes, useMutation, Link } from "blitz";
+
+import BaseLayout from "../../core/layouts/base-layout";
+import { AuthForm as Form, FORM_ERROR } from "../components/auth-form";
+import { LabeledTextField } from "../components/labeled-text-field";
+import signup from "../mutations/signup";
+import { Signup } from "../validations";
+
+const SignUp: BlitzPage = () => {
+	const router = useRouter();
+	const [signupMutation] = useMutation(signup);
+
+	return (
+		<Form
+			texts={{
+				title: "Create your account",
+				subtitle: (
+					<Link href={Routes.SignIn()}>
+						<a className="font-medium text-primary-600 hover:text-primary-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+							Already have an account?
+						</a>
+					</Link>
+				),
+				submit: "Sign up",
+			}}
+			schema={Signup}
+			initialValues={{ email: "", password: "" }}
+			onSubmit={async (values) => {
+				try {
+					await signupMutation(values);
+					router.push(Routes.StepOne());
+				} catch (error: any) {
+					if (error.code === "P2002" && error.meta?.target?.includes("email")) {
+						// This error comes from Prisma
+						return { email: "This email is already being used" };
+					} else {
+						return { [FORM_ERROR]: error.toString() };
+					}
+				}
+			}}
+		>
+			<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" />
+		</Form>
+	);
+};
+
+SignUp.redirectAuthenticatedTo = Routes.StepOne();
+
+SignUp.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>;
+
+export default SignUp;

app/auth/pages/signup.tsx

@@ -1,21 +0,0 @@
-import type { BlitzPage } from "blitz";
-import { useRouter, Routes } from "blitz";
-
-import BaseLayout from "../../core/layouts/base-layout";
-import { SignupForm } from "../components/signup-form";
-
-const SignUp: BlitzPage = () => {
-	const router = useRouter();
-
-	return (
-		<div>
-			<SignupForm onSuccess={() => router.push(Routes.StepOne())} />
-		</div>
-	);
-};
-
-SignUp.redirectAuthenticatedTo = Routes.StepOne();
-
-SignUp.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>;
-
-export default SignUp;

app/auth/validations.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 export const password = z.string().min(10).max(100);
 
 export const Signup = z.object({
+	name: z.string(),
 	email: z.string().email(),
 	password,
 });