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
@@ -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>
  );
 }