shellphone.app/app/auth/components/signup-form.tsx

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) {
						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;