feat: multi-user authentication (dual mode)

Add optional login protection for the web UI/API, intended for shared machines (e.g. AI servers). Dual mode: with no users configured the API and web UI are open (as before); once at least one user exists, every /api/* and /ws/* endpoint requires a valid session. - bcrypt password hashing: passwords stored as $2b$ hashes in /etc/nvcurve/users.json (0600, root-owned); plaintext never persisted. - 24-hour sessions: HttpOnly cookie for browsers, Authorization: Bearer token for CLI/scripts; in-memory, invalidated on server restart. - Multi-user: multiple named accounts (no shared-password mode). - New CLI: nvcurve user add|list|remove|set-password (root for mutating ops; password always prompted, never a CLI argument). - New endpoints: GET /api/ping (public), /api/auth/status|login|logout|users. - Web UI: sign-in screen when auth is enabled; status bar shows the signed-in user with sign-out; expired sessions (401) re-show sign-in. - Brute-force lockout: 10 failed logins/IP within 5 min -> 15 min lockout. - New dependency: bcrypt. Also: LSP config (pyrightconfig.json) pointing at the project .venv, and small error-handling cleanups in daemon.py/server.py.
2026-09-02 15:21:35 +02:00
1 parent af23a10f25
commit bbd692ea2e
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Loader, Lock, User } from "lucide-react";
+import { api, ApiError } from "../../api/client";
+
+interface Props {
+  onSuccess: (username: string) => void;
+}
+
+export function LoginScreen({ onSuccess }: Props) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await api.login(username, password);
+      onSuccess(res.username);
+    } catch (err) {
+      if (err instanceof ApiError && err.status === 401) {
+        setError("Invalid username or password.");
+      } else if (err instanceof ApiError && err.status === 429) {
+        setError(
+          "Too many failed attempts. Please wait a moment and try again.",
+        );
+      } else {
+        setError(err instanceof Error ? err.message : "Login failed.");
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center mb-8">
+          <img src="/logo.svg" alt="NVCurve" className="w-12 h-12 mb-3" />
+          <h1 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-fuchsia-400 tracking-tight">
+            NVCurve
+          </h1>
+          <p className="text-sm text-zinc-500 mt-1">Sign in to continue</p>
+        </div>
+
+        <form
+          onSubmit={submit}
+          className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 shadow-[0_8px_30px_rgb(0,0,0,0.6)] flex flex-col gap-4"
+        >
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="username"
+              className="text-xs font-medium text-zinc-400"
+            >
+              Username
+            </label>
+            <div className="relative">
+              <User
+                size={15}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500"
+              />
+              <input
+                id="username"
+                type="text"
+                autoComplete="username"
+                autoFocus
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full bg-zinc-950 border border-zinc-700 rounded-lg pl-9 pr-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/40"
+                placeholder="username"
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label
+              htmlFor="password"
+              className="text-xs font-medium text-zinc-400"
+            >
+              Password
+            </label>
+            <div className="relative">
+              <Lock
+                size={15}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500"
+              />
+              <input
+                id="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full bg-zinc-950 border border-zinc-700 rounded-lg pl-9 pr-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500/40"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={busy || !username || !password}
+            className="mt-1 flex items-center justify-center gap-2 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg py-2.5 transition-colors"
+          >
+            {busy && <Loader size={15} className="animate-spin" />}
+            {busy ? "Signing in…" : "Sign in"}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-zinc-600 mt-4">
+          Sessions last 24 hours, then you will be asked to sign in again.
+        </p>
+      </div>
+    </div>
+  );
+}
@@ -1,13 +1,24 @@
-import { Cpu, Wifi, WifiOff, Loader, Terminal, ChevronDown } from 'lucide-react';
-import type { GpuInfo, MonitoringSample } from '../../types';
-import { fmt } from '../../utils/units';
-import { useCurveStore } from '../../store/curveStore';
-import { useState, useRef, useEffect } from 'react';
+import {
+  Cpu,
+  Wifi,
+  WifiOff,
+  Loader,
+  Terminal,
+  ChevronDown,
+  LogOut,
+  User,
+} from "lucide-react";
+import type { GpuInfo, MonitoringSample } from "../../types";
+import { fmt } from "../../utils/units";
+import { useCurveStore } from "../../store/curveStore";
+import { useState, useRef, useEffect } from "react";

 interface Props {
  gpuInfo: GpuInfo | null;
-  wsStatus: 'connecting' | 'connected' | 'disconnected';
+  wsStatus: "connecting" | "connected" | "disconnected";
  monitor: MonitoringSample | null;
+  user?: string | null;
+  onLogout?: () => void;
 }

 const statusIcon = {
@@ -17,19 +28,29 @@ const statusIcon = {
 };

 const statusText = {
-  connected: 'Connected',
-  connecting: 'Connecting…',
-  disconnected: 'Disconnected',
+  connected: "Connected",
+  connecting: "Connecting…",
+  disconnected: "Disconnected",
 };

-export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {
-  const { availableGpus, selectedGpuIndex, setSelectedGpuIndex } = useCurveStore();
+export function StatusBar({
+  gpuInfo,
+  wsStatus,
+  monitor,
+  user,
+  onLogout,
+}: Props) {
+  const { availableGpus, selectedGpuIndex, setSelectedGpuIndex } =
+    useCurveStore();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
        setIsOpen(false);
      }
    }
@@ -47,20 +68,26 @@ export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {
            NVCurve
          </span>
          <div className="w-px h-4 bg-zinc-700 mx-1 hidden sm:block"></div>
-          
+
          {availableGpus.length > 1 ? (
            <div className="relative" ref={dropdownRef}>
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="flex items-center gap-1.5 px-2 py-1 -ml-2 rounded hover:bg-zinc-800 transition-colors group"
              >
-                <Cpu size={14} className="text-zinc-400 group-hover:text-zinc-300 transition-colors" />
+                <Cpu
+                  size={14}
+                  className="text-zinc-400 group-hover:text-zinc-300 transition-colors"
+                />
                <span className="font-medium text-zinc-200 truncate group-hover:text-white transition-colors">
-                  {gpuInfo?.name ?? 'No Device'}
+                  {gpuInfo?.name ?? "No Device"}
                </span>
-                <ChevronDown size={14} className={`text-zinc-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+                <ChevronDown
+                  size={14}
+                  className={`text-zinc-500 transition-transform ${isOpen ? "rotate-180" : ""}`}
+                />
              </button>
-              
+
              {isOpen && (
                <div className="absolute top-full left-0 mt-1 w-64 bg-zinc-800 border border-zinc-700 rounded-lg shadow-xl overflow-hidden z-50 py-1">
                  {availableGpus.map((gpu) => (
@@ -71,12 +98,23 @@ export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {
                        setIsOpen(false);
                      }}
                      className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 hover:bg-zinc-700 transition-colors ${
-                        gpu.index === selectedGpuIndex ? 'text-cyan-400 font-medium bg-zinc-700/50' : 'text-zinc-300'
+                        gpu.index === selectedGpuIndex
+                          ? "text-cyan-400 font-medium bg-zinc-700/50"
+                          : "text-zinc-300"
                      }`}
                    >
-                      <Cpu size={14} className={gpu.index === selectedGpuIndex ? 'text-cyan-400' : 'text-zinc-500'} />
+                      <Cpu
+                        size={14}
+                        className={
+                          gpu.index === selectedGpuIndex
+                            ? "text-cyan-400"
+                            : "text-zinc-500"
+                        }
+                      />
                      <span className="truncate flex-1">{gpu.name}</span>
-                      <span className="text-xs text-zinc-500 font-mono">GPU {gpu.index}</span>
+                      <span className="text-xs text-zinc-500 font-mono">
+                        GPU {gpu.index}
+                      </span>
                    </button>
                  ))}
                </div>
@@ -84,9 +122,12 @@ export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {
            </div>
          ) : (
            <>
-              <Cpu size={16} className="shrink-0 text-zinc-400 ml-1 hidden sm:block" />
+              <Cpu
+                size={16}
+                className="shrink-0 text-zinc-400 ml-1 hidden sm:block"
+              />
              <span className="font-medium text-zinc-200 truncate">
-                {gpuInfo?.name ?? 'No Device'}
+                {gpuInfo?.name ?? "No Device"}
              </span>
            </>
          )}
@@ -101,28 +142,75 @@ export function StatusBar({ gpuInfo, wsStatus, monitor }: Props) {

        {/* Centre: live stats */}
        <div className="flex-1 flex items-center justify-center gap-5 min-w-0 hidden lg:flex">
-          <StatPill label="Temp" value={fmt.celsius(monitor?.temp_c)} color="text-orange-400" />
-          <StatPill label="Power" value={fmt.watts(monitor?.power_w)} color="text-pink-400" />
-          <StatPill label="Fan" value={fmt.pct(monitor?.fan_pct)} color="text-blue-400" />
-          <StatPill label="GPU Util" value={fmt.pct(monitor?.gpu_util_pct)} color="text-yellow-400" />
-          <StatPill label="Mem Util" value={fmt.pct(monitor?.mem_util_pct)} color="text-sky-400" />
+          <StatPill
+            label="Temp"
+            value={fmt.celsius(monitor?.temp_c)}
+            color="text-orange-400"
+          />
+          <StatPill
+            label="Power"
+            value={fmt.watts(monitor?.power_w)}
+            color="text-pink-400"
+          />
+          <StatPill
+            label="Fan"
+            value={fmt.pct(monitor?.fan_pct)}
+            color="text-blue-400"
+          />
+          <StatPill
+            label="GPU Util"
+            value={fmt.pct(monitor?.gpu_util_pct)}
+            color="text-yellow-400"
+          />
+          <StatPill
+            label="Mem Util"
+            value={fmt.pct(monitor?.mem_util_pct)}
+            color="text-sky-400"
+          />
        </div>

-        {/* Right: connection status */}
-        <div className="flex items-center gap-1.5 text-zinc-400 shrink-0">
-          {statusIcon[wsStatus]}
-          <span className="hidden sm:inline">{statusText[wsStatus]}</span>
+        {/* Right: user + connection status */}
+        <div className="flex items-center gap-3 shrink-0">
+          {user && (
+            <div className="flex items-center gap-1.5 text-zinc-400">
+              <User size={14} className="text-zinc-500" />
+              <span className="hidden sm:inline text-zinc-300">{user}</span>
+              {onLogout && (
+                <button
+                  onClick={onLogout}
+                  title="Sign out"
+                  className="p-1 rounded hover:bg-zinc-800 hover:text-zinc-200 transition-colors"
+                >
+                  <LogOut size={14} />
+                </button>
+              )}
+            </div>
+          )}
+          <div className="flex items-center gap-1.5 text-zinc-400">
+            {statusIcon[wsStatus]}
+            <span className="hidden sm:inline">{statusText[wsStatus]}</span>
+          </div>
        </div>
      </div>
    </header>
  );
 }

-function StatPill({ label, value, color }: { label: string; value: string; color: string }) {
+function StatPill({
+  label,
+  value,
+  color,
+}: {
+  label: string;
+  value: string;
+  color: string;
+}) {
  return (
    <div className="flex items-baseline gap-1">
      <span className="text-zinc-500 text-xs">{label}</span>
-      <span className={`font-mono font-semibold text-sm ${color}`}>{value}</span>
+      <span className={`font-mono font-semibold text-sm ${color}`}>
+        {value}
+      </span>
    </div>
  );
 }