| 58 | }) |
| 59 | |
| 60 | function SignUp() { |
| 61 | const { signUpMutation } = useAuth() |
| 62 | const form = useForm<FormData>({ |
| 63 | resolver: zodResolver(formSchema), |
| 64 | mode: "onBlur", |
| 65 | criteriaMode: "all", |
| 66 | defaultValues: { |
| 67 | email: "", |
| 68 | full_name: "", |
| 69 | password: "", |
| 70 | confirm_password: "", |
| 71 | }, |
| 72 | }) |
| 73 | |
| 74 | const onSubmit = (data: FormData) => { |
| 75 | if (signUpMutation.isPending) return |
| 76 | |
| 77 | // exclude confirm_password from submission data |
| 78 | const { confirm_password: _confirm_password, ...submitData } = data |
| 79 | signUpMutation.mutate(submitData) |
| 80 | } |
| 81 | |
| 82 | return ( |
| 83 | <AuthLayout> |
| 84 | <Form {...form}> |
| 85 | <form |
| 86 | onSubmit={form.handleSubmit(onSubmit)} |
| 87 | className="flex flex-col gap-6" |
| 88 | > |
| 89 | <div className="flex flex-col items-center gap-2 text-center"> |
| 90 | <h1 className="text-2xl font-bold">Create an account</h1> |
| 91 | </div> |
| 92 | |
| 93 | <div className="grid gap-4"> |
| 94 | <FormField |
| 95 | control={form.control} |
| 96 | name="full_name" |
| 97 | render={({ field }) => ( |
| 98 | <FormItem> |
| 99 | <FormLabel>Full Name</FormLabel> |
| 100 | <FormControl> |
| 101 | <Input |
| 102 | data-testid="full-name-input" |
| 103 | placeholder="User" |
| 104 | type="text" |
| 105 | {...field} |
| 106 | /> |
| 107 | </FormControl> |
| 108 | <FormMessage /> |
| 109 | </FormItem> |
| 110 | )} |
| 111 | /> |
| 112 | |
| 113 | <FormField |
| 114 | control={form.control} |
| 115 | name="email" |
| 116 | render={({ field }) => ( |
| 117 | <FormItem> |