added zod for signup validation

auth/components/signup/signup.tsx

@@ -10,14 +10,44 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import * as z from "zod";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/use-toast";
-
 import { signUp } from "./action";
+import { useForm, SubmitHandler, FieldValues } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const signUpSchema = z
+  .object({
+    username: z.string().min(1, "Username is required"),
+    email: z.string().email("Invalid email address"),
+    accessCode: z
+      .string()
+      .regex(/^\d{20}$/, "Access Code must be exactly 20 numeric characters"),
+    password: z.string().min(8, "Password must be at least 8 characters"),
+    confirmPassword: z.string().min(8, "Please confirm your password"),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    path: ["confirmPassword"],
+    message: "Passwords do not match",
+  });
 
 export default function SignUpForm() {
-  const submit = async (data: FormData) => {
+  const {
-    const { error } = await signUp(data);
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(signUpSchema),
+  });
+  const onSubmit: SubmitHandler<FieldValues> = async (data) => {
+    // Convert FieldValues to FormData
+    const formData = new FormData();
+    for (const [key, value] of Object.entries(data)) {
+      formData.append(key, value);
+    }
+
+    const { error } = await signUp(formData);
     if (error) {
       toast({
         title: "Error",
@@ -40,55 +70,75 @@ export default function SignUpForm() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form action={submit} className="grid gap-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="grid gap-4">
           <div className="grid gap-2">
             <Label htmlFor="username">Username</Label>
             <Input
-              name="username"
+              {...register("username")}
               type="text"
               placeholder="username"
               required
             />
+            {errors.username?.message &&
+              typeof errors.username.message === "string" && (
+                <p className="text-red-600">{errors.username.message}</p>
+              )}
           </div>
 
           <div className="grid gap-2">
             <Label htmlFor="email">Email</Label>
             <Input
-              name="email"
+              {...register("email")}
               type="email"
               placeholder="mail@mail.com"
               required
             />
+            {errors.email?.message &&
+              typeof errors.email.message === "string" && (
+                <p className="text-red-600">{errors.email.message}</p>
+              )}
           </div>
 
           <div className="grid gap-2">
             <Label htmlFor="accessCode">Access Code</Label>
             <Input
-              name="accessCode"
+              {...register("accessCode")}
               type="text"
               placeholder="*******************"
               required
             />
+            {errors.accessCode?.message &&
+              typeof errors.accessCode.message === "string" && (
+                <p className="text-red-600">{errors.accessCode.message}</p>
+              )}
           </div>
 
           <div className="grid gap-2">
             <Label htmlFor="password">Password</Label>
             <Input
-              name="password"
+              {...register("password")}
               type="password"
               placeholder="********"
               required
             />
+            {errors.password?.message &&
+              typeof errors.password.message === "string" && (
+                <p className="text-red-600">{errors.password.message}</p>
+              )}
           </div>
 
           <div className="grid gap-2">
             <Label htmlFor="confirmPassword">Confirm Password</Label>
             <Input
-              name="confirmPassword"
+              {...register("confirmPassword")}
               type="password"
               placeholder="********"
               required
             />
+            {errors.confirmPassword?.message &&
+              typeof errors.confirmPassword.message === "string" && (
+                <p className="text-red-600">{errors.confirmPassword.message}</p>
+              )}
           </div>
 
           <Button type="submit" className="w-full">