Merge branch 'feature/form-validation' into frontend

frontend/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/vite": "^4.0.6",
+    "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.5.2",

frontend/src/api/axios.ts

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export const axiosInstance = axios.create({
+    baseURL: 'http://localhost:3000',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+});

frontend/src/components/password-input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Eye, EyeClosed } from 'lucide-react';
+import { Eye, EyeOff } from 'lucide-react';
 import { cn } from '@/lib/utils'
 import { Button } from './ui/button'
 
@@ -28,7 +28,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
           className='absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground'
           onClick={() => setShowPassword((prev) => !prev)}
         >
-          {showPassword ? <Eye size={18} /> : <EyeClosed size={18} />}
+          {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
         </Button>
       </div>
     )

frontend/src/components/user/auth/components/user-auth-form.tsx

@@ -4,13 +4,15 @@ import { type FC, useState } from "react"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { PasswordInput } from "@/components/password-input"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/cn"
 import { Loader2 } from "lucide-react"
 import { toast } from "sonner"
+import { AuthService } from "@/services/authServices"
+import { useNavigate } from "react-router-dom"
 
 interface UserAuthFormProps {
     authState: "login" | "register"
@@ -50,6 +52,7 @@ const registerSchema = z
 
 export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }) => {
     const [isLoading, setIsLoading] = useState(false)
+    const navigate = useNavigate()
     const formSchema = authState === "login" ? loginSchema : registerSchema
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -61,9 +64,13 @@ export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }
         try {
             // Simulate API call
             await new Promise((resolve) => setTimeout(resolve, 2000))
-
-            console.log(data)
+            if (authState == 'login') {
+                await AuthService.loginService(data)
+            } else {
+                await AuthService.registerService(data as { email: string; password: string; name: string; confirmPassword: string })
+            }
             toast.success(authState === "login" ? "Logged in successfully" : "Account created successfully")
+            navigate('/home')
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (error) {
             toast.error("An error occurred. Please try again.")
@@ -83,9 +90,8 @@ export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }
                                 name="name"
                                 render={({ field }) => (
                                     <FormItem className="space-y-1">
-                                        <FormLabel>Name</FormLabel>
                                         <FormControl>
-                                            <Input placeholder="John Doe" {...field} />
+                                            <Input placeholder="Name" {...field} />
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>
@@ -97,9 +103,8 @@ export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }
                             name="email"
                             render={({ field }) => (
                                 <FormItem className="space-y-1">
-                                    <FormLabel>Email</FormLabel>
                                     <FormControl>
-                                        <Input placeholder="name@example.com" {...field} />
+                                        <Input placeholder="Email" {...field} />
                                     </FormControl>
                                     <FormMessage />
                                 </FormItem>
@@ -110,9 +115,8 @@ export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }
                             name="password"
                             render={({ field }) => (
                                 <FormItem className="space-y-1">
-                                    <FormLabel>Password</FormLabel>
                                     <FormControl>
-                                        <PasswordInput placeholder="********" {...field} />
+                                        <PasswordInput placeholder="Password" {...field} />
                                     </FormControl>
                                     <FormMessage />
                                 </FormItem>
@@ -124,9 +128,8 @@ export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }
                                 name="confirmPassword"
                                 render={({ field }) => (
                                     <FormItem className="space-y-1">
-                                        <FormLabel>Confirm Password</FormLabel>
                                         <FormControl>
-                                            <PasswordInput placeholder="********" {...field} />
+                                            <PasswordInput placeholder="Confirm Password" {...field} />
                                         </FormControl>
                                         <FormMessage />
                                     </FormItem>

frontend/src/pages/auth/Auth.tsx

@@ -1,7 +1,6 @@
 import UserAuth from "@/components/user/auth";
 
 export default function LoginPage() {
-  // const [signin, setSignin] = useState<"register" | "login">("login");
 
   return (
     <div className='container relative grid h-svh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0'>

frontend/src/services/authServices.ts

@@ -0,0 +1,18 @@
+import { axiosInstance } from "@/api/axios"
+
+export const AuthService = {
+    loginService: async (data: { email: string, password: string }) => {
+        try {
+            return await axiosInstance.post('/login', data)
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    registerService: async (data: { email: string; password: string; name: string; confirmPassword: string; }) => {
+        try {
+            return await axiosInstance.post('/register', data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+}