Dashboard & Error Login Message

app/page.tsx

@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils"
+"use client";
+
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -9,8 +10,50 @@ import {
 } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { AlertCircle } from "lucide-react"
+ 
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert"
+
+import { useState, useEffect } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+
 
 export default function Home() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const [error, setError] = useState('');
+  const [errorVisible, setErrorVisible] = useState(false);
+
+  useEffect(() => {
+    const token = Cookies.get('token');
+    if (token) {
+      router.push('/dashboard');
+    }
+  }, [router]);
+
+  interface LoginResponse {
+    token: string;
+  }
+
+  const login = async () => {
+    try {
+      const response = await axios.post('/api/auth/login', { username, password });
+      const { token } = response.data as LoginResponse;
+      Cookies.set('token', token);
+      router.push('/dashboard');
+    } catch (error: any) {
+      setError(error.response.data.error);
+      setErrorVisible(true)
+    }
+  }
+
   return (
     <div className="flex flex-col min-h-screen items-center justify-center gap-6 ">
       <Card className="w-1/3">
@@ -21,7 +64,21 @@ export default function Home() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form>
+        {errorVisible && (
+          <>
+            <div className="pb-4">
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>
+                  {error}
+                </AlertDescription>
+              </Alert>
+            </div>
+          </>
+        )}
+
+          <div>
             <div className="flex flex-col gap-6">
               <div className="grid gap-2">
                 <Label htmlFor="email">Email</Label>
@@ -30,19 +87,20 @@ export default function Home() {
                   type="email"
                   placeholder="mail@example.com"
                   required
+                  onChange={(e) => setUsername(e.target.value)} 
                 />
               </div>
               <div className="grid gap-2">
                 <div className="flex items-center">
                   <Label htmlFor="password">Password</Label>
                 </div>
-                <Input id="password" type="password" required placeholder="* * * * * * *"/>
+                <Input id="password" type="password" required placeholder="* * * * * * *" onChange={(e) => setPassword(e.target.value)}/>
               </div>
-              <Button type="submit" className="w-full">
+              <Button className="w-full" onClick={login}>
                 Login
               </Button>
             </div>
-          </form>
+          </div>
         </CardContent>
       </Card>
     </div>