router and fix backend cors

taskncoffee-app/src/pages/Login.jsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
     Card,
@@ -10,8 +11,35 @@ import {
 } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { login } from "@/apiv1/auth.service"
+
 
 export function LoginPage({ className }) {
+    const [username, setUsername] = useState("")
+    const [password, setPassword] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState("")
+    const [success, setSuccess] = useState("")
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setError("")
+        setSuccess("")
+        setIsLoading(true)
+
+        try {
+            const result = await login(username, password)
+            setSuccess("Login successful!")
+            console.log("Logged in:", result)
+
+        } catch (err) {
+            setError(err.detail || "Login failed. Please check your credentials.")
+            console.error("Login error:", err)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
     return (
         <div className={className}>
             <Card className="w-full max-w-sm">
@@ -25,15 +53,28 @@ export function LoginPage({ className }) {
                     </CardAction>
                 </CardHeader>
                 <CardContent>
-                    <form>
+                    <form onSubmit={handleSubmit}>
                         <div className="flex flex-col gap-6">
+                            {error && (
+                                <div className="text-sm text-red-500 bg-red-50 p-2 rounded">
+                                    {error}
+                                </div>
+                            )}
+                            {success && (
+                                <div className="text-sm text-green-500 bg-green-50 p-2 rounded">
+                                    {success}
+                                </div>
+                            )}
                             <div className="grid gap-2">
                                 <Label htmlFor="username">Username</Label>
                                 <Input
                                     id="username"
-                                    type="username"
+                                    type="text"
                                     placeholder="username"
+                                    value={username}
+                                    onChange={(e) => setUsername(e.target.value)}
                                     required
+                                    disabled={isLoading}
                                 />
                             </div>
                             <div className="grid gap-2">
@@ -46,14 +87,26 @@ export function LoginPage({ className }) {
                                         Forgot your password?
                                     </a>
                                 </div>
-                                <Input id="password" type="password" required />
+                                <Input
+                                    id="password"
+                                    type="password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                    required
+                                    disabled={isLoading}
+                                />
                             </div>
                         </div>
                     </form>
                 </CardContent>
                 <CardFooter className="flex-col gap-2">
-                    <Button type="submit" className="w-full">
-                        Login
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        onClick={handleSubmit}
+                        disabled={isLoading}
+                    >
+                        {isLoading ? "Loading..." : "Login"}
                     </Button>
 
                 </CardFooter>