Login Site

app/LoginPage.tsx

@@ -1,49 +1,71 @@
 "use client";
 
 import Image from "next/image"
-import Link from "next/link"
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+import Cookies from "js-cookie";
+import ErrorToast from "@/components/Error";
 
 export default function LoginPage() {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [remember, setRemember] = useState(false);
+
+    const [error, setError] = useState("");
+    const router = useRouter();
+
+    const login = async () => {
+        try {
+            const response = await axios.post("/api/user/login", { email, password, remember });
+            
+            if (response.status === 200) {
+                const token = response.data.token;
+                if (token) {
+                    Cookies.set("token", token);
+                    router.push("/dashboard");
+                } else {
+                    setError("No login token received");
+                }
+            }
+        } catch (error: any) {
+            setError(error.response.data.error);
+        }
+    };
     
   return (
     <div className="min-h-screen flex flex-col lg:flex-row">
       <div className="flex-1 flex items-center justify-center p-6 lg:p-10">
-        <div className="w-full max-w-md space-y-8">
+        <div className="w-full max-w-md space-y-8 bg">
           <div className="text-center">
             <h1 className="text-3xl font-bold">Welcome back</h1>
             <p className="mt-2 text-gray-600">Please login with your account</p>
           </div>
 
-          <form className="mt-8 space-y-6">
+          <div className="mt-8 space-y-6">
             <div className="form-control w-full">
               <label className="label">
                 <span className="label-text">Email</span>
               </label>
-              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required />
+              <input type="email" placeholder="email@example.com" className="input input-bordered w-full" required value={email} onChange={(e) => setEmail(e.target.value)} />
             </div>
 
             <div className="form-control w-full">
               <label className="label">
                 <span className="label-text">Password</span>
               </label>
-              <input type="password" placeholder="Your password" className="input input-bordered w-full" required />
-              <label className="label">
-                <span className="label-text-alt"></span>
-                <Link href="/forgot-password" className="label-text-alt link link-hover">
-                  Forgot password?
-                </Link>
-              </label>
+              <input type="password" placeholder="Your password" className="input input-bordered w-full" required value={password} onChange={(e) => setPassword(e.target.value)} />
             </div>
 
             <div className="form-control">
               <label className="label cursor-pointer justify-start gap-2">
-                <input type="checkbox" className="checkbox checkbox-primary" />
+                <input type="checkbox" className="checkbox checkbox-primary" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
                 <span className="label-text">Stay logged in</span>
               </label>
             </div>
 
-            <button className="btn btn-primary w-full">Login</button>
-          </form>
+            <button className="btn btn-primary w-full" onClick={login}>Login</button>
+          </div>
         </div>
       </div>
 
@@ -68,6 +90,8 @@ export default function LoginPage() {
           priority
         />
       </div>
+
+      <ErrorToast message={error} show={error !== ""} onClose={() => setError("")} />
     </div>
   )
 }

package-lock.json

@@ -9,10 +9,12 @@
       "version": "2.0.0",
       "dependencies": {
         "@prisma/client": "^6.8.2",
+        "@types/js-cookie": "^3.0.6",
         "@types/jsonwebtoken": "^9.0.9",
         "axios": "^1.9.0",
         "bcryptjs": "^3.0.2",
         "daisyui": "^5.0.35",
+        "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.511.0",
         "next": "15.3.2",
@@ -1016,6 +1018,12 @@
         "tailwindcss": "4.1.7"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/jsonwebtoken": {
       "version": "9.0.9",
       "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.9.tgz",
@@ -1483,6 +1491,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/jsonwebtoken": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@prisma/client": "^6.8.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/jsonwebtoken": "^9.0.9",
     "axios": "^1.9.0",
     "bcryptjs": "^3.0.2",
     "daisyui": "^5.0.35",
+    "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.511.0",
     "next": "15.3.2",