Users, with their own settings, and a list of where each is signed in

The login is a user name and a password. The old single password becomes the account named after the OS user on first boot, along with its sessions and the machine-wide look. Settings gains Users (add, remove, reset a password — your own password confirms) and Sessions (device, IP, last seen; revoke one or sign out everywhere else). Theme, accents and the dashboard layout follow the account; the refresh rate, graph history and alerts stay the machine's. Pairing a machine takes a user on it. Log lines name the actor. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-22 18:20:30 -07:00
parent db214ebc2b
commit 2b54a06821
15 changed files with 1059 additions and 170 deletions
@@ -2,7 +2,10 @@ import { FormEvent, useState } from 'react'
 import { api } from './api'
 import { Spinner } from './ui'

+const USER_KEY = 'hamlab.user' // the last account signed in on this device, offered again
+
 export default function Login({ onLogin }: { onLogin: () => void }) {
+  const [user, setUser] = useState(localStorage.getItem(USER_KEY) ?? '')
  const [pw, setPw] = useState('')
  const [err, setErr] = useState('')
  const [busy, setBusy] = useState(false)
@@ -10,15 +13,20 @@ export default function Login({ onLogin }: { onLogin: () => void }) {
  async function submit(e: FormEvent) {
    e.preventDefault()
    setBusy(true); setErr('')
-    try { await api.login(pw); onLogin() }
-    catch (e) { setErr((e instanceof Error && e.message) || 'login failed'); setBusy(false) }
+    try {
+      const r = await api.login(user.trim(), pw)
+      localStorage.setItem(USER_KEY, r?.user ?? user.trim())
+      onLogin()
+    } catch (e) { setErr((e instanceof Error && e.message) || 'login failed'); setBusy(false) }
  }

  return (
    <div className="center">
      <form className="login" onSubmit={submit}>
        <img className="login-logo" src="/icons/logo.png" alt="Ham Lab" width={176} height={176} />
-        <input type="password" autoFocus autoComplete="current-password" placeholder="password"
+        <input type="text" autoFocus={!user} autoComplete="username" placeholder="user" spellCheck={false} autoCapitalize="off" autoCorrect="off"
+          value={user} onChange={(e) => setUser(e.target.value)} disabled={busy} />
+        <input type="password" autoFocus={!!user} autoComplete="current-password" placeholder="password"
          value={pw} onChange={(e) => setPw(e.target.value)} disabled={busy} />
        <button disabled={busy || !pw}>{busy && <Spinner />}{busy ? 'Signing in…' : 'Sign in'}</button>
        {err && <div className="error">{err}</div>}
@@ -14,6 +14,7 @@ export default function Machines({ hub, onChanged, onOpen }: { hub: Me; onChange
  const [err, setErr] = useState('')
  const [name, setName] = useState('')
  const [url, setUrl] = useState('https://')
+  const [user, setUser] = useState('')
  const [pw, setPw] = useState('')
  const [adding, setAdding] = useState(false)
  const [addErr, setAddErr] = useState('')
@@ -30,9 +31,9 @@ export default function Machines({ hub, onChanged, onOpen }: { hub: Me; onChange
    e.preventDefault()
    setAdding(true); setAddErr('')
    try {
-      const st = await api.addMachine(name.trim().toLowerCase(), url.trim(), pw)
+      const st = await api.addMachine(name.trim().toLowerCase(), url.trim(), user.trim(), pw)
      toast(`${st.name} added${st.online ? ` · ${st.host} v${st.version}` : ' (offline)'}`)
-      setName(''); setUrl('https://'); setPw('')
+      setName(''); setUrl('https://'); setUser(''); setPw('')
      await load(); onChanged()
    } catch (e) { setAddErr(e instanceof Error ? e.message : 'failed') }
    finally { setAdding(false) }
@@ -111,11 +112,12 @@ export default function Machines({ hub, onChanged, onOpen }: { hub: Me; onChange
      <form className="card addform" onSubmit={add}>
        <label>Name <input value={name} onChange={(e) => setName(e.target.value)} placeholder="grid" pattern="[a-z0-9][a-z0-9_\-]*" title="lower-case letters, digits, - and _" required /></label>
        <label>Address <input value={url} onChange={(e) => setUrl(e.target.value)} placeholder="https://10.0.0.214:8100" required /></label>
-        <label>Its Ham Lab password <input type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="off" required /></label>
+        <label>A user on it <input value={user} onChange={(e) => setUser(e.target.value)} placeholder="core" autoComplete="off" spellCheck={false} autoCapitalize="off" /></label>
+        <label>Their password <input type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="off" required /></label>
        {addErr && <div className="error">{addErr}</div>}
        <div className="svc-actions">
          <button className="btn on" disabled={adding || !name || !pw}>{adding ? 'Pairing…' : 'Add machine'}</button>
-          <span className="muted small">The password is used once to obtain an access token and is not stored. The machine's certificate is pinned on first contact.</span>
+          <span className="muted small">The password is used once to obtain an access token and is not stored. The user may be left blank on a machine with a single account. The machine's certificate is pinned on first contact.</span>
        </div>
      </form>
    </div>
@@ -1,6 +1,7 @@
 import { FormEvent, useCallback, useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
 import { fetchCatalog } from './sensors'
-import { api, Me } from './api'
+import { api, Me, Session, TokenInfo, User } from './api'
 import { savePrefs } from './accents'
 import { applyTheme, currentThemeId, THEMES } from './themes'
 import { Btn, Loading, askYes, toast, useEscape } from './ui'
@@ -35,7 +36,7 @@ export default function Settings({ me }: { me: Me }) {
  const [refresh, setRefresh] = useState(getRefreshMs())
  const [history, setHistory] = useState(getHistorySec())
  const [histErr, setHistErr] = useState('')
-  const [tokens, setTokens] = useState<{ name: string; created: string; scope?: string; sensors?: string[] }[] | null>(null)
+  const [tokens, setTokens] = useState<TokenInfo[] | null>(null)
  const [fresh, setFresh] = useState<{ name: string; token: string } | null>(null)
  const [making, setMaking] = useState(false)
  const [cur, setCur] = useState('')
@@ -116,15 +117,18 @@ export default function Settings({ me }: { me: Me }) {
        </div>
      </section>

-      <div className="dash-bar"><h2 className="section">Account · {me.host}</h2></div>
+      <div className="dash-bar"><h2 className="section">Account · {me.account ?? '?'}@{me.host}</h2></div>
      <form className="card addform" onSubmit={changePassword}>
        <label>Current password <input type="password" value={cur} onChange={(e) => setCur(e.target.value)} autoComplete="current-password" required /></label>
        <label>New password <input type="password" value={pw1} onChange={(e) => setPw1(e.target.value)} autoComplete="new-password" required /></label>
        <label>New password again <input type="password" value={pw2} onChange={(e) => setPw2(e.target.value)} autoComplete="new-password" required /></label>
        {pwErr && <div className="error">{pwErr}</div>}
-        <div className="svc-actions"><button className="btn on" disabled={!cur || !pw1 || !pw2}>Change password</button><span className="muted small">Changes the login for this host only. Other machines keep their own password. Existing sessions stay signed in.</span></div>
+        <div className="svc-actions"><button className="btn on" disabled={!cur || !pw1 || !pw2}>Change password</button><span className="muted small">Your login on this host only. Other machines keep their own accounts. Your sessions stay signed in.</span></div>
      </form>

+      <Sessions />
+      <Users me={me} />
+
      <div className="dash-bar"><h2 className="section">Access tokens</h2></div>
      <section className="card">
        <div className="muted small" style={{ marginBottom: 8 }}>A <b>full</b> token lets another Ham Lab (a hub) manage this host; hubs issue and revoke their own. A <b>read-only</b> token can only read sensors — that's the one to give a dashboard.</div>
@@ -134,7 +138,7 @@ export default function Settings({ me }: { me: Me }) {
          <div className="row" key={t.name}>
            <span className="k mono">{t.name}</span>
            <span className="badge" style={{ marginLeft: 0 }} title={t.sensors?.length ? t.sensors.join(', ') : undefined}>{t.scope ? (t.sensors?.length ? `read-only · ${t.sensors.join(' ')}` : 'read-only') : 'full'}</span>
-            <span className="muted small">issued {new Date(t.created).toLocaleString()}</span>
+            <span className="muted small">issued {new Date(t.created).toLocaleString()}{t.issued_by ? ` by ${t.issued_by}` : ''}</span>
            <Btn className="btn danger" onClick={() => revoke(t.name)}>Revoke</Btn>
          </div>
        ))}
@@ -167,6 +171,153 @@ export default function Settings({ me }: { me: Me }) {
  )
 }

+// Where this account is signed in. Revoking one signs that device out at its next request.
+function Sessions() {
+  const [list, setList] = useState<Session[] | null>(null)
+  const load = useCallback(async () => { try { setList(await api.sessions()) } catch { setList([]) } }, [])
+  useEffect(() => { load() }, [load])
+  const revoke = async (s: Session) => {
+    if (s.current && !await askYes('Sign out this device? You will be back at the login form.')) return
+    try { await api.revokeSession(s.id); toast(s.current ? 'signed out' : 'session revoked'); if (s.current) window.dispatchEvent(new Event('hamlab:unauthenticated')); else load() }
+    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  const others = list?.filter((s) => !s.current).length ?? 0
+  const revokeOthers = async () => {
+    if (!await askYes(`Sign out ${others} other ${others === 1 ? 'device' : 'devices'}? This one stays signed in.`)) return
+    try { const r = await api.revokeOtherSessions(); toast(`${r.revoked} signed out`); load() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  return (
+    <>
+      <div className="dash-bar"><h2 className="section">Sessions</h2><span className="spacer" /><span className="muted small">where you are signed in</span></div>
+      <section className="card">
+        {list === null && <Loading label="Loading…" />}
+        {list && list.map((s) => (
+          <div className="row" key={s.id}>
+            <span className="k">{device(s.agent)}{s.current && <span className="badge" style={{ marginLeft: 6 }}>this device</span>}</span>
+            <span className="muted small">{s.ip ?? '?'} · seen {ago(s.last_seen)} · since {new Date(s.created).toLocaleDateString()}</span>
+            <Btn className={'btn' + (s.current ? '' : ' danger')} onClick={() => revoke(s)}>{s.current ? 'Sign out' : 'Revoke'}</Btn>
+          </div>
+        ))}
+        {others > 0 && <div className="svc-actions" style={{ marginTop: 8 }}><Btn className="btn danger" onClick={revokeOthers}>Sign out everywhere else</Btn></div>}
+      </section>
+    </>
+  )
+}
+
+// The accounts on this host. Anyone signed in may add one; removing one, or resetting a
+// password, asks for your own password first.
+function Users({ me }: { me: Me }) {
+  const [list, setList] = useState<User[] | null>(null)
+  const [name, setName] = useState('')
+  const [pw, setPw] = useState('')
+  const [err, setErr] = useState('')
+  const [reset, setReset] = useState<User | null>(null)
+  const load = useCallback(async () => { try { setList(await api.users()) } catch { setList([]) } }, [])
+  useEffect(() => { load() }, [load])
+  const add = async (e: FormEvent) => {
+    e.preventDefault(); setErr('')
+    if (pw.length < 12) { setErr('At least 12 characters.'); return }
+    try { await api.addUser(name.trim(), pw); toast(`${name.trim()} added`); setName(''); setPw(''); load() }
+    catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }
+  const remove = async (u: User) => {
+    const cur = await askPassword(`Remove the account "${u.name}"? Their sessions end and their settings are gone. Your password to confirm:`)
+    if (cur === null) return
+    try { await api.removeUser(u.name, cur); toast(`${u.name} removed`); load() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  return (
+    <>
+      <div className="dash-bar"><h2 className="section">Users · {me.host}</h2><span className="spacer" /><span className="muted small">each with their own look and dashboard</span></div>
+      <section className="card">
+        {list === null && <Loading label="Loading…" />}
+        {list && list.map((u) => (
+          <div className="row" key={u.name}>
+            <span className="k mono">{u.name}{u.self && <span className="badge" style={{ marginLeft: 6 }}>you</span>}</span>
+            <span className="muted small">{u.sessions} {u.sessions === 1 ? 'session' : 'sessions'} · seen {ago(u.last_seen)} · since {new Date(u.created).toLocaleDateString()}</span>
+            <span style={{ display: 'flex', gap: 6 }}>
+              {!u.self && <Btn className="btn" onClick={() => setReset(u)}>Reset password</Btn>}
+              {!u.self && <Btn className="btn danger" onClick={() => remove(u)}>Remove</Btn>}
+            </span>
+          </div>
+        ))}
+      </section>
+      <form className="card addform" onSubmit={add} style={{ marginTop: 8 }}>
+        <label>New user <input value={name} onChange={(e) => setName(e.target.value)} pattern="[a-z0-9][a-z0-9._\-]{0,31}" title="lower-case letters, digits, . _ and -" autoComplete="off" spellCheck={false} autoCapitalize="off" required /></label>
+        <label>Their password <input type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="new-password" required /></label>
+        {err && <div className="error">{err}</div>}
+        <div className="svc-actions"><button className="btn on" disabled={!name || !pw}>Add user</button><span className="muted small">Every user can do everything a signed-in console can. Accounts are this host's own; a hub reaches other machines with its token, not with these.</span></div>
+      </form>
+      {reset && <ResetDialog user={reset} onClose={() => setReset(null)} onDone={() => { setReset(null); load() }} />}
+    </>
+  )
+}
+
+function ResetDialog({ user, onClose, onDone }: { user: User; onClose: () => void; onDone: () => void }) {
+  const [cur, setCur] = useState('')
+  const [pw, setPw] = useState('')
+  const [err, setErr] = useState('')
+  useEscape(onClose)
+  const go = async () => {
+    setErr('')
+    if (pw.length < 12) { setErr('At least 12 characters.'); return }
+    try { await api.resetPassword(user.name, cur, pw); toast(`password of ${user.name} reset`); onDone() } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }
+  return (
+    <div className="modal-back" onClick={onClose}>
+      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); go() }}>
+        <h3>Reset the password of {user.name}</h3>
+        <label className="muted">Their new password<input type="password" autoFocus value={pw} onChange={(e) => setPw(e.target.value)} autoComplete="new-password" /></label>
+        <label className="muted">Your password, to confirm<input type="password" value={cur} onChange={(e) => setCur(e.target.value)} autoComplete="current-password" /></label>
+        <div className="muted small">They are signed out everywhere and sign in again with the new one.</div>
+        {err && <div className="error">{err}</div>}
+        <div className="svc-actions"><button type="submit" className="btn on" disabled={!cur || !pw}>Reset</button><span className="spacer" /><button type="button" className="btn" onClick={onClose}>Cancel</button></div>
+      </form>
+    </div>
+  )
+}
+
+// A password typed into a modal; null when cancelled.
+function askPassword(prompt: string): Promise<string | null> {
+  return new Promise((resolve) => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const done = (v: string | null) => { root.unmount(); host.remove(); resolve(v) }
+    const root = createRoot(host)
+    root.render(<PasswordDialog prompt={prompt} onDone={done} />)
+  })
+}
+
+function PasswordDialog({ prompt, onDone }: { prompt: string; onDone: (v: string | null) => void }) {
+  const [v, setV] = useState('')
+  useEscape(() => onDone(null))
+  return (
+    <div className="modal-back" onClick={() => onDone(null)}>
+      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); onDone(v) }}>
+        <div>{prompt}</div>
+        <input type="password" autoFocus value={v} onChange={(e) => setV(e.target.value)} autoComplete="current-password" />
+        <div className="svc-actions"><button type="submit" className="btn danger" disabled={!v}>Confirm</button><span className="spacer" /><button type="button" className="btn" onClick={() => onDone(null)}>Cancel</button></div>
+      </form>
+    </div>
+  )
+}
+
+// A short name for a browser from its user agent: "Safari on iPhone", "Firefox on Linux".
+function device(ua?: string): string {
+  if (!ua) return 'unknown device'
+  const os = /iPhone/.test(ua) ? 'iPhone' : /iPad/.test(ua) ? 'iPad' : /Android/.test(ua) ? 'Android' : /Mac OS X/.test(ua) ? 'Mac' : /Windows/.test(ua) ? 'Windows' : /CrOS/.test(ua) ? 'ChromeOS' : /Linux/.test(ua) ? 'Linux' : ''
+  const br = /Edg\//.test(ua) ? 'Edge' : /OPR\//.test(ua) ? 'Opera' : /Firefox\//.test(ua) ? 'Firefox' : /Chrome\//.test(ua) ? 'Chrome' : /Safari\//.test(ua) ? 'Safari' : /curl\//.test(ua) ? 'curl' : ua.split(/[\s/]/)[0] || 'browser'
+  return os ? `${br} on ${os}` : br
+}
+
+function ago(iso?: string): string {
+  if (!iso) return 'never'
+  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000)
+  if (s < 60) return 'just now'
+  if (s < 3600) return `${Math.floor(s / 60)} min ago`
+  if (s < 86400) return `${Math.floor(s / 3600)} h ago`
+  return `${Math.floor(s / 86400)} d ago`
+}
+
 // One dialog for a read-only token: what will use it, and (optionally) which sensor
 // families it may see — picked from this machine's own catalog, or typed as patterns.
 function TokenDialog({ onClose, onMade }: { onClose: () => void; onMade: (t: { name: string; token: string }) => void }) {
@@ -249,6 +249,7 @@ export default function Shell({ me: hubMe, onLoggedOut }: { me: Me; onLoggedOut:
        <span className="stat" title="load average, 1 · 5 · 15 min">load {me.load}</span>
        <span className={'dot ' + (online && !remoteErr ? 'ok' : 'bad')} title={remoteErr ? `${title} unreachable` : online ? 'connected' : 'disconnected'} />
        <Power host={me.host} label={title} rebootNeeded={me.reboot_needed} />
+        {hubMe.account && <span className="host account" title="signed in as">{hubMe.account}</span>}
        <Btn className="link" onClick={logout}>logout</Btn>
      </header>

@@ -54,7 +54,7 @@ async function req<T>(method: string, path: string, body?: unknown, local = fals
  return r.json()
 }

-export interface Me { demo_url?: string; addr?: string; host: string; user: string; version: string; load: string; uptime: number; reboot_needed?: boolean; fingerprint?: string; arch?: string }
+export interface Me { demo_url?: string; addr?: string; host: string; user: string; account?: string; version: string; load: string; uptime: number; reboot_needed?: boolean; fingerprint?: string; arch?: string }
 export interface PushResult { name: string; ok: boolean; version?: string; error?: string }
 // What a machine is called on screen: the hostname it reports, which follows a rename within
 // a poll. The name it was added under stays its identity — the URL, its accent colour, and
@@ -121,6 +121,10 @@ export interface AlertsInfo { rules: AlertRule[]; channels: AlertChannel[]; even
 export interface ZFSSnapshot { name: string; used: number; created: number }
 export interface ZFSInfo { available: boolean; message?: string; pools: { name: string; size: number; alloc: number; free: number; frag: number; cap: number; health: string; dedup: string; scan?: string; errors?: string; config?: string }[]; datasets: { name: string; type: string; used: number; avail: number; refer: number; used_by_snapshots: number; mount?: string; compressratio: string; snapshots: number }[] }

+export interface User { name: string; created: string; last_seen?: string; sessions: number; self: boolean }
+export interface Session { id: string; created: string; last_seen: string; expires: string; ip?: string; agent?: string; current: boolean }
+export interface TokenInfo { name: string; created: string; scope?: string; sensors?: string[]; issued_by?: string }
+
 export interface FileEntry { name: string; type: 'dir' | 'file' | 'link' | 'other'; size: number; mode: string; perm: string; mtime: number; user: string; group: string; target?: string; broken?: boolean }
 export interface FileInfo extends FileEntry { path: string; text: boolean }

@@ -190,16 +194,23 @@ export const api = {
  setHistoryWindow: (seconds: number) => req<HistoryWindow>('PUT', '/api/prefs/history', { seconds }, true),
  dashPrefs: () => req<DashPrefs>('GET', '/api/prefs/dashboard'),
  saveDashPrefs: (p: DashPrefs) => req<void>('PUT', '/api/prefs/dashboard', p),
-  login: (password: string) => req<void>('POST', '/api/login', { password }, true),
+  login: (username: string, password: string) => req<{ user: string }>('POST', '/api/login', { username, password }, true),
+  users: () => req<User[]>('GET', '/api/users', undefined, true),
+  addUser: (name: string, password: string) => req<{ name: string }>('POST', '/api/users', { name, password }, true),
+  removeUser: (name: string, current: string) => req<void>('DELETE', `/api/users/${encodeURIComponent(name)}`, { current }, true),
+  resetPassword: (name: string, current: string, password: string) => req<void>('POST', `/api/users/${encodeURIComponent(name)}/password`, { current, password }, true),
+  sessions: () => req<Session[]>('GET', '/api/sessions', undefined, true),
+  revokeSession: (id: string) => req<void>('DELETE', `/api/sessions/${encodeURIComponent(id)}`, undefined, true),
+  revokeOtherSessions: () => req<{ revoked: number }>('POST', '/api/sessions/revoke-others', undefined, true),
  logout: () => req<void>('POST', '/api/logout', undefined, true),
  meHere: () => req<Me>('GET', '/api/me', undefined, true),
  me: () => req<Me>('GET', '/api/me'),
  machines: () => req<{ nodes: MachineStatus[]; host: string; fingerprint?: string }>('GET', '/api/nodes', undefined, true),
-  addMachine: (name: string, url: string, password: string) => req<MachineStatus>('POST', '/api/nodes', { name, url, password }, true),
+  addMachine: (name: string, url: string, username: string, password: string) => req<MachineStatus>('POST', '/api/nodes', { name, url, username, password }, true),
  updateMachine: (name: string, force = false) => req<PushResult>('POST', `/api/machines/${encodeURIComponent(name)}/update${force ? '?force=1' : ''}`, undefined, true),
  updateAllMachines: (force = false) => req<PushResult[]>('POST', `/api/machines-update-all${force ? '?force=1' : ''}`, undefined, true),
  changePassword: (current: string, password: string) => req<void>('POST', '/api/password', { current, password }, true),
-  tokens: () => req<{ name: string; created: string; scope?: string; sensors?: string[] }[]>('GET', '/api/tokens', undefined, true),
+  tokens: () => req<TokenInfo[]>('GET', '/api/tokens', undefined, true),
  createReadToken: (name: string, sensors: string[] = []) => req<{ token: string; name: string }>('POST', '/api/tokens/read', { name, sensors }, true),
  docker: () => req<DockerInfo>('GET', '/api/docker'),
  dockerAction: (id: string, action: 'start' | 'stop' | 'restart' | 'remove') => req<void>('POST', `/api/docker/containers/${encodeURIComponent(id)}/${action}`),