feat: add password change functionality and dependencies

package.json

@@ -9,9 +9,11 @@
     "start": "next start"
   },
   "dependencies": {
+    "bcryptjs": "^3.0.3",
     "express": "^5.2.1",
     "fs": "^0.0.1-security",
     "http-proxy-middleware": "^3.0.5",
+    "jose": "^6.1.3",
     "lowdb": "^7.0.1",
     "next": "^15.2.0",
     "node-machine-id": "^1.1.12",

src/app/(dashboard)/dashboard/profile/page.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Card, Button, Badge, Toggle } from "@/shared/components";
+import { Card, Button, Badge, Toggle, Input } from "@/shared/components";
 import { useTheme } from "@/shared/hooks/useTheme";
 import { APP_CONFIG } from "@/shared/constants/config";
 
@@ -9,6 +9,9 @@ export default function ProfilePage() {
   const { theme, setTheme, isDark } = useTheme();
   const [settings, setSettings] = useState({ fallbackStrategy: "fill-first" });
   const [loading, setLoading] = useState(true);
+  const [passwords, setPasswords] = useState({ current: "", new: "", confirm: "" });
+  const [passStatus, setPassStatus] = useState({ type: "", message: "" });
+  const [passLoading, setPassLoading] = useState(false);
 
   useEffect(() => {
     fetch("/api/settings")
@@ -23,6 +26,41 @@ export default function ProfilePage() {
       });
   }, []);
 
+  const handlePasswordChange = async (e) => {
+    e.preventDefault();
+    if (passwords.new !== passwords.confirm) {
+      setPassStatus({ type: "error", message: "Passwords do not match" });
+      return;
+    }
+
+    setPassLoading(true);
+    setPassStatus({ type: "", message: "" });
+
+    try {
+      const res = await fetch("/api/settings", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          currentPassword: passwords.current,
+          newPassword: passwords.new,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        setPassStatus({ type: "success", message: "Password updated successfully" });
+        setPasswords({ current: "", new: "", confirm: "" });
+      } else {
+        setPassStatus({ type: "error", message: data.error || "Failed to update password" });
+      }
+    } catch (err) {
+      setPassStatus({ type: "error", message: "An error occurred" });
+    } finally {
+      setPassLoading(false);
+    }
+  };
+
   const updateFallbackStrategy = async (strategy) => {
     try {
       const res = await fetch("/api/settings", {
@@ -59,6 +97,57 @@ export default function ProfilePage() {
           </div>
         </Card>
 
+        {/* Routing Preferences */}
+        <Card>
+          <h3 className="text-lg font-semibold mb-4">Security</h3>
+          <form onSubmit={handlePasswordChange} className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium">Current Password</label>
+              <Input
+                type="password"
+                placeholder="Enter current password"
+                value={passwords.current}
+                onChange={(e) => setPasswords({ ...passwords, current: e.target.value })}
+                required
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium">New Password</label>
+                <Input
+                  type="password"
+                  placeholder="Enter new password"
+                  value={passwords.new}
+                  onChange={(e) => setPasswords({ ...passwords, new: e.target.value })}
+                  required
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <label className="text-sm font-medium">Confirm New Password</label>
+                <Input
+                  type="password"
+                  placeholder="Confirm new password"
+                  value={passwords.confirm}
+                  onChange={(e) => setPasswords({ ...passwords, confirm: e.target.value })}
+                  required
+                />
+              </div>
+            </div>
+
+            {passStatus.message && (
+              <p className={`text-sm ${passStatus.type === "error" ? "text-red-500" : "text-green-500"}`}>
+                {passStatus.message}
+              </p>
+            )}
+
+            <div className="pt-2">
+              <Button type="submit" variant="primary" isLoading={passLoading}>
+                Update Password
+              </Button>
+            </div>
+          </form>
+        </Card>
+
         {/* Routing Preferences */}
         <Card>
           <h3 className="text-lg font-semibold mb-4">Routing Strategy</h3>

src/app/api/auth/login/route.js

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import { getSettings, updateSettings } from "@/lib/localDb";
+import bcrypt from "bcryptjs";
+import { SignJWT } from "jose";
+import { cookies } from "next/headers";
+
+const SECRET = new TextEncoder().encode(
+  process.env.JWT_SECRET || "9router-default-secret-change-me"
+);
+
+export async function POST(request) {
+  try {
+    const { password } = await request.json();
+    const settings = await getSettings();
+
+    // Default password is '123456' if not set
+    const storedHash = settings.password;
+
+    let isValid = false;
+    if (!storedHash) {
+      isValid = password === "123456";
+    } else {
+      isValid = await bcrypt.compare(password, storedHash);
+    }
+
+    if (isValid) {
+      const token = await new SignJWT({ authenticated: true })
+        .setProtectedHeader({ alg: "HS256" })
+        .setExpirationTime("24h")
+        .sign(SECRET);
+
+      const cookieStore = await cookies();
+      cookieStore.set("auth_token", token, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === "production",
+        sameSite: "lax",
+        path: "/",
+      });
+
+      return NextResponse.json({ success: true });
+    }
+
+    return NextResponse.json({ error: "Invalid password" }, { status: 401 });
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/api/auth/logout/route.js

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function POST() {
+  const cookieStore = await cookies();
+  cookieStore.delete("auth_token");
+  return NextResponse.json({ success: true });
+}

src/app/api/settings/route.js

@@ -1,10 +1,13 @@
 import { NextResponse } from "next/server";
 import { getSettings, updateSettings } from "@/lib/localDb";
+import bcrypt from "bcryptjs";
 
 export async function GET() {
   try {
     const settings = await getSettings();
-    return NextResponse.json(settings);
+    // Don't return the password hash to the client
+    const { password, ...safeSettings } = settings;
+    return NextResponse.json(safeSettings);
   } catch (error) {
     console.log("Error getting settings:", error);
     return NextResponse.json({ error: error.message }, { status: 500 });
@@ -14,8 +17,37 @@ export async function GET() {
 export async function PATCH(request) {
   try {
     const body = await request.json();
+
+    // If updating password, hash it
+    if (body.newPassword) {
+      const settings = await getSettings();
+      const currentHash = settings.password;
+
+      // Verify current password if it exists
+      if (currentHash) {
+        if (!body.currentPassword) {
+          return NextResponse.json({ error: "Current password required" }, { status: 400 });
+        }
+        const isValid = await bcrypt.compare(body.currentPassword, currentHash);
+        if (!isValid) {
+          return NextResponse.json({ error: "Invalid current password" }, { status: 401 });
+        }
+      } else {
+        // First time setting password, check if it matches default 123456
+        if (body.currentPassword !== "123456") {
+           return NextResponse.json({ error: "Invalid current password" }, { status: 401 });
+        }
+      }
+
+      const salt = await bcrypt.genSalt(10);
+      body.password = await bcrypt.hash(body.newPassword, salt);
+      delete body.newPassword;
+      delete body.currentPassword;
+    }
+
     const settings = await updateSettings(body);
-    return NextResponse.json(settings);
+    const { password, ...safeSettings } = settings;
+    return NextResponse.json(safeSettings);
   } catch (error) {
     console.log("Error updating settings:", error);
     return NextResponse.json({ error: error.message }, { status: 500 });

src/app/login/page.js

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { Card, Button, Input } from "@/shared/components";
+import { useRouter } from "next/navigation";
+
+export default function LoginPage() {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ password }),
+      });
+
+      if (res.ok) {
+        router.push("/dashboard");
+        router.refresh();
+      } else {
+        const data = await res.json();
+        setError(data.error || "Invalid password");
+      }
+    } catch (err) {
+      setError("An error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-bg p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-primary mb-2">9Router</h1>
+          <p className="text-text-muted">Enter your password to access the dashboard</p>
+        </div>
+
+        <Card>
+          <form onSubmit={handleLogin} className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium">Password</label>
+              <Input
+                type="password"
+                placeholder="Enter password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                autoFocus
+              />
+              {error && <p className="text-xs text-red-500">{error}</p>}
+            </div>
+
+            <Button
+              type="submit"
+              variant="primary"
+              className="w-full"
+              isLoading={loading}
+            >
+              Login
+            </Button>
+
+            <p className="text-xs text-center text-text-muted mt-2">
+              Default password is <code className="bg-sidebar px-1 rounded">123456</code>
+            </p>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/middleware.js

@@ -0,0 +1,37 @@
+import { NextResponse } from "next/server";
+import { jwtVerify } from "jose";
+
+const SECRET = new TextEncoder().encode(
+  process.env.JWT_SECRET || "9router-default-secret-change-me"
+);
+
+export async function middleware(request) {
+  const { pathname } = request.nextUrl;
+
+  // Protect all dashboard routes
+  if (pathname.startsWith("/dashboard")) {
+    const token = request.cookies.get("auth_token")?.value;
+
+    if (!token) {
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+
+    try {
+      await jwtVerify(token, SECRET);
+      return NextResponse.next();
+    } catch (err) {
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+  }
+
+  // Redirect / to /dashboard if logged in, or /dashboard if it's the root
+  if (pathname === "/") {
+    return NextResponse.redirect(new URL("/dashboard", request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/", "/dashboard/:path*"],
+};

src/shared/components/Header.js

@@ -2,6 +2,7 @@
 
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { ThemeToggle } from "@/shared/components";
 import { APP_CONFIG, OAUTH_PROVIDERS, APIKEY_PROVIDERS } from "@/shared/constants/config";
 
@@ -36,8 +37,21 @@ const getPageInfo = (pathname) => {
 
 export default function Header({ onMenuClick, showMenuButton = true }) {
   const pathname = usePathname();
+  const router = useRouter();
   const { title, description, breadcrumbs } = getPageInfo(pathname);
 
+  const handleLogout = async () => {
+    try {
+      const res = await fetch("/api/auth/logout", { method: "POST" });
+      if (res.ok) {
+        router.push("/login");
+        router.refresh();
+      }
+    } catch (err) {
+      console.error("Failed to logout:", err);
+    }
+  };
+
   return (
     <header className="flex items-center justify-between px-8 py-5 border-b border-border bg-bg/80 backdrop-blur-md z-10 sticky top-0">
       {/* Mobile menu button */}
@@ -102,6 +116,15 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
       <div className="flex items-center gap-3 ml-auto">
         {/* Theme toggle */}
         <ThemeToggle />
+
+        {/* Logout button */}
+        <button
+          onClick={handleLogout}
+          className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-red-500 hover:bg-red-500/10 transition-all"
+          title="Logout"
+        >
+          <span className="material-symbols-outlined">logout</span>
+        </button>
       </div>
     </header>
   );