Implement signup function

Author: rickkoh

frontend/src/app/signup/page.tsx

@@ -13,27 +13,48 @@ import {
   FormMessage,
   FormField,
 } from "@/components/ui/form";
-
-interface FormData {
-  username: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-}
+import { z } from "zod";
+import { signup } from "@/services/authService";
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const SignupFormSchema = z
+  .object({
+    username: z
+      .string()
+      .min(2, { message: "Name must be at least 2 characters long." })
+      .trim(),
+    email: z.string().email({ message: "Please enter a valid email." }).trim(),
+    password: z
+      .string()
+      .min(8, { message: "Be at least 8 characters long" })
+      .regex(/[a-zA-Z]/, { message: "Contain at least one letter." })
+      .regex(/[0-9]/, { message: "Contain at least one number." })
+      .trim(),
+    confirmPassword: z.string().trim(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords must match",
+    path: ["confirmPassword"],
+  });
 
 export default function SignUpPage() {
-  const methods = useForm<FormData>({
-    defaultValues: {
-      username: '',
-      email: '',
-      password: '',
-      confirmPassword: '',
-    },
+  const router = useRouter();
+
+  const methods = useForm<z.infer<typeof SignupFormSchema>>({
+    resolver: zodResolver(SignupFormSchema),
+    defaultValues: {},
   });
 
-  const { handleSubmit, control, formState: { errors } } = methods;
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = methods;
 
-  const onSubmit: SubmitHandler<FormData> = async (data) => {
+  const onSubmit: SubmitHandler<z.infer<typeof SignupFormSchema>> = async (
+    data
+  ) => {
     if (data.password !== data.confirmPassword) {
       methods.setError("confirmPassword", {
         type: "manual",
@@ -42,20 +63,15 @@ export default function SignUpPage() {
       return;
     }
 
-    try {
-      const response = await fetch('/api/signup', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      });
-
-      if (response.ok) {
-        alert('Sign up successful!');
-      } else {
-        alert('Sign up failed.');
-      }
-    } catch (error) {
-      console.error('Error:', error);
+    const accessTokenResponse = await signup(data);
+    if (accessTokenResponse.statusCode === 200 && accessTokenResponse.data) {
+      localStorage.setItem(
+        "access_token",
+        accessTokenResponse.data.access_token
+      );
+      router.push("/dashboard");
+    } else {
+      // TODO: Display error message
     }
   };
 
@@ -73,7 +89,6 @@ export default function SignUpPage() {
             <FormProvider {...methods}>
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="flex flex-col gap-y-2">
-
                   {/* Username Field */}
                   <FormField
                     control={control}
@@ -91,7 +106,9 @@ export default function SignUpPage() {
                             />
                           </div>
                         </FormControl>
-                        {errors.username && <FormMessage>{errors.username.message}</FormMessage>}
+                        {errors.username && (
+                          <FormMessage>{errors.username.message}</FormMessage>
+                        )}
                       </FormItem>
                     )}
                   />
@@ -114,7 +131,9 @@ export default function SignUpPage() {
                             />
                           </div>
                         </FormControl>
-                        {errors.email && <FormMessage>{errors.email.message}</FormMessage>}
+                        {errors.email && (
+                          <FormMessage>{errors.email.message}</FormMessage>
+                        )}
                       </FormItem>
                     )}
                   />
@@ -137,7 +156,9 @@ export default function SignUpPage() {
                             />
                           </div>
                         </FormControl>
-                        {errors.password && <FormMessage>{errors.password.message}</FormMessage>}
+                        {errors.password && (
+                          <FormMessage>{errors.password.message}</FormMessage>
+                        )}
                       </FormItem>
                     )}
                   />
@@ -160,15 +181,22 @@ export default function SignUpPage() {
                             />
                           </div>
                         </FormControl>
-                        {errors.confirmPassword && <FormMessage>{errors.confirmPassword.message}</FormMessage>}
+                        {errors.confirmPassword && (
+                          <FormMessage>
+                            {errors.confirmPassword.message}
+                          </FormMessage>
+                        )}
                       </FormItem>
                     )}
                   />
                 </div>
 
                 {/* Forgot password link */}
                 <div className="text-right pt-2 pb-2">
-                  <Link href="/forgotpassword" className="hover:underline text-sm">
+                  <Link
+                    href="/forgotpassword"
+                    className="hover:underline text-sm"
+                  >
                     Forgot password?
                   </Link>
                 </div>