signup-form

1"use client";
2 
3import { useForm, Controller } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { toast } from "sonner";
11import { Checkbox } from "@/components/ui/checkbox";
12import { signUp } from "@/lib/auth-client";
13 
14const formSchema = z.object({
15  fullName: z.string().min(1, "Full Name is required"),
16  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
17  password: z.string().min(1, "Password is required"),
18  confirmPassword: z.string().min(1, "Confirm Password is required"),
19  agreeToTerms: z.boolean().refine((val) => val === true, { message: "You must agree to I agree to the terms and conditions" }),
20});
21 
22type FormValues = z.infer<typeof formSchema>;
23export function SignupFormForm() {
24  const form = useForm<FormValues>({
25    resolver: zodResolver(formSchema),
26    defaultValues: {
27      fullName: "",
28      email: "",
29      password: "",
30      confirmPassword: "",
31      agreeToTerms: false,
32    },
33  });
34 
35  const onSubmit = async (data: FormValues) => {
36    await signUp.email({
37      email: data.email,
38      password: data.password,
39      name: data.fullName,
40      callbackURL: "/dashboard",
41      fetchOptions: {
42        onResponse: () => {
43          // toast.loading("Creating account...");
44        },
45        onRequest: () => {
46          toast.loading("Creating account...");
47        },
48        onSuccess: () => {
49          toast.dismiss();
50          toast.success("Account created successfully!");
51        },
52        onError: (ctx) => {
53          toast.dismiss();
54          toast.error(ctx.error.message);
55        },
56      },
57    });
58  };
59 
60  return (
61    <Card className="w-full max-w-md mx-auto">
62      <CardHeader>
63        <CardTitle>Signup Form</CardTitle>
64        <CardDescription>User registration with email and password</CardDescription>
65      </CardHeader>
66      <CardContent>
67        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
68          <div className="space-y-2">
69            <Label htmlFor="fullName">Full Name</Label>
70            <Input
71              id="fullName"
72              type="text"
73              placeholder="John Doe"
74              {...form.register("fullName")}
75            />
76// … truncated