server admin panel is now supports multiple operators profiles

cmd/telesrv-admin/web/src/pages/LoginPage.tsx

@@ -6,6 +6,10 @@ import { ThemeSwitch } from "../theme";
 import type { AdminSession } from "../types";
 
 export function LoginPage({ onLogin }: { onLogin: (session: AdminSession) => void }) {
+  // Deliberately not pre-filled: the built-in operator is a default name, not a
+  // default identity, and typing it is the difference between choosing to use
+  // it and drifting into it. The server rejects a blank username either way.
+  const [username, setUsername] = useState("");
   const [secret, setSecret] = useState("");
   const [error, setError] = useState("");
   const [busy, setBusy] = useState(false);
@@ -17,7 +21,7 @@ export function LoginPage({ onLogin }: { onLogin: (session: AdminSession) => voi
     try {
       // The login answer carries the permission set and the CSRF token; api.login
       // remembers the token, the session state keeps the rights.
-      const result = await api.login(secret);
+      const result = await api.login(secret, username);
       onLogin({ actor: result.actor, permissions: result.permissions ?? [] });
     } catch (err) {
       setError(errorMessage(err));
@@ -44,7 +48,6 @@ export function LoginPage({ onLogin }: { onLogin: (session: AdminSession) => voi
           </div>
           <div className="login-head-actions">
             <ThemeSwitch />
-            <span className="login-chip">{"Local access"}</span>
           </div>
         </div>
         <div className="login-copy">
@@ -54,9 +57,23 @@ export function LoginPage({ onLogin }: { onLogin: (session: AdminSession) => voi
         {error && <Alert>{error}</Alert>}
         <form className="form-stack" onSubmit={submit}>
           <label>
-            <span>{"Admin password or token"}</span>
+            <span>{"Username"}</span>
             <input
               autoFocus
+              type="text"
+              value={username}
+              autoComplete="username"
+              spellCheck={false}
+              autoCapitalize="none"
+              // A hint, not a value: it names the built-in operator without
+              // filling the field in, so signing in as it stays a deliberate act.
+              placeholder={"owpengram"}
+              onChange={(event) => setUsername(event.target.value)}
+            />
+          </label>
+          <label>
+            <span>{"Password"}</span>
+            <input
               type="password"
               value={secret}
               autoComplete="current-password"