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

45 lines
1.2 KiB
TypeScript
Raw Normal View History

import { useMutation } from "blitz";
2021-07-31 14:33:18 +00:00
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";
2021-07-31 14:33:18 +00:00
type SignupFormProps = {
onSuccess?: () => void;
};
2021-07-31 14:33:18 +00:00
export const SignupForm = (props: SignupFormProps) => {
const [signupMutation] = useMutation(signup);
2021-07-31 14:33:18 +00:00
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?.();
2021-07-31 14:33:18 +00:00
} catch (error) {
if (error.code === "P2002" && error.meta?.target?.includes("email")) {
// This error comes from Prisma
return { email: "This email is already being used" };
2021-07-31 14:33:18 +00:00
} else {
return { [FORM_ERROR]: error.toString() };
2021-07-31 14:33:18 +00:00
}
}
}}
>
<LabeledTextField name="email" label="Email" placeholder="Email" />
2021-08-01 14:03:49 +00:00
<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
2021-07-31 14:33:18 +00:00
</Form>
</div>
);
};
2021-07-31 14:33:18 +00:00
export default SignupForm;