Mitchell-JohnsonandClaude Fable 5.1
2b54a06821
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>
37 lines
1.5 KiB
TypeScript
37 lines
1.5 KiB
TypeScript
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)
|
|
|
|
async function submit(e: FormEvent) {
|
|
e.preventDefault()
|
|
setBusy(true); setErr('')
|
|
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="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>}
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|