Dashboard & Error Login Message

app/api/auth/login/route.ts

@@ -10,8 +10,8 @@ export async function POST(request: NextRequest) {
     try {
         const body: LoginRequest = await request.json();
         const { username, password } = body;
-
-        if(username !== process.env.LOGIN_USERNAME || password !== process.env.LOGIN_PASSWORD) {
+        
+        if(username !== process.env.LOGIN_EMAIL || password !== process.env.LOGIN_PASSWORD) {
             throw new Error('Invalid credentials');
         }
         

app/dashboard/Dashboard.tsx

@@ -0,0 +1,9 @@
+"use client";
+export default function Dashboard() {
+    return (
+        <div>
+            <h1 className="text-2xl font-bold text-primary">Dashboard</h1>
+            <p>Welcome to your dashboard</p>
+        </div>
+    );
+}

app/dashboard/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import Dashboard from "./Dashboard"
+import axios from "axios";
+
+export default function DashboardPage() {
+    const router = useRouter();
+    const [isAuthChecked, setIsAuthChecked] = useState(false);
+    const [isValid, setIsValid] = useState(false);
+
+    useEffect(() => {
+        const token = Cookies.get("token");
+        if (!token) {
+            router.push("/");
+        } else {
+            const checkToken = async () => {
+                try {
+                    const response = await axios.post("/api/auth/validate", {
+                        token: token,
+                    });
+
+                    if (response.status === 200) {
+                        setIsValid(true);
+                    }
+                } catch (error: any) {
+                    Cookies.remove("token");
+                    router.push("/");
+                }
+            }
+            checkToken();
+        }
+        setIsAuthChecked(true);
+    }, [router]);
+
+    if (!isAuthChecked) {
+        return (
+            <div className="flex items-center justify-center h-screen">
+                <span className="loading loading-infinity loading-xl"></span>
+            </div>
+        )
+    }
+
+    return isValid ? <Dashboard /> : null;
+}

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>