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>

taskncoffee-app/src/pages/SignUp.jsx

@@ -0,0 +1,68 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+const Signup1 = ({
+    heading = "Signup",
+    logo = {
+        url: "https://www.shadcnblocks.com",
+        src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-wordmark.svg",
+        alt: "logo",
+        title: "shadcnblocks.com",
+    },
+    buttonText = "Create Account",
+    signupText = "Already a user?",
+    signupUrl = "https://shadcnblocks.com",
+}) => {
+    return (
+        <section className="bg-muted h-screen">
+            <div className="flex h-full items-center justify-center">
+                {/* Logo */}
+                <div className="flex flex-col items-center gap-6 lg:justify-start">
+                    <a href={logo.url}>
+                        <img
+                            src={logo.src}
+                            alt={logo.alt}
+                            title={logo.title}
+                            className="h-10 dark:invert"
+                        />
+                    </a>
+                    <div className="min-w-sm border-muted bg-background flex w-full max-w-sm flex-col items-center gap-y-4 rounded-md border px-6 py-8 shadow-md">
+                        {heading && <h1 className="text-xl font-semibold">{heading}</h1>}
+                        <Input
+                            type="email"
+                            placeholder="Email"
+                            className="text-sm"
+                            required
+                        />
+                        <Input
+                            type="password"
+                            placeholder="Password"
+                            className="text-sm"
+                            required
+                        />
+                        <Input
+                            type="password"
+                            placeholder="Confirm Password"
+                            className="text-sm"
+                            required
+                        />
+                        <Button type="submit" className="w-full">
+                            {buttonText}
+                        </Button>
+                    </div>
+                    <div className="text-muted-foreground flex justify-center gap-1 text-sm">
+                        <p>{signupText}</p>
+                        <a
+                            href={signupUrl}
+                            className="text-primary font-medium hover:underline"
+                        >
+                            Login
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export { Signup1 };