feat: branded login screen in front of Basic Auth

The browser's native Basic Auth prompt can't be restyled — it's chrome UI,
not part of the page. Replace it with Aurum's own login screen: nginx keeps
auth_basic on /api/* (the actual protection, unchanged), but drops it from
the SPA shell (just HTML/JS/CSS, no data) so the app can render its own
branded form instead. On submit the app validates the credentials against a
real protected endpoint, then attaches the resulting Authorization header to
every request itself — sessionStorage-backed, so closing the tab signs out.
Instances with Basic Auth left off (the default) never see this screen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01855PiW5Wd8n4aRW4n9kByY

frontend/src/components/auth/LoginGate.tsx

@@ -0,0 +1,50 @@
+import { type ReactNode, useEffect, useState } from "react";
+import { Logo } from "@/components/layout/Logo";
+import { LoginScreen } from "@/components/auth/LoginScreen";
+import { checkCredentials, useAuthHeader } from "@/lib/auth";
+
+type Probe = "checking" | "required" | "not-required";
+
+/** Wraps the whole app. Renders the login screen only when this instance
+ * actually has Basic Auth turned on (AURUM_BASIC_AUTH_USER/PASSWORD in
+ * .env, see frontend/docker-entrypoint.d/20-basic-auth.sh) — most installs
+ * don't, and this must never force a login screen on those. When stored
+ * credentials go stale (password changed, or auth was just turned on) the
+ * 401 handler in api/client.ts clears them, useAuthHeader() picks that up
+ * reactively, and this falls back to the login screen on its own. */
+export function LoginGate({ children }: { children: ReactNode }) {
+  const authHeader = useAuthHeader();
+  const [probe, setProbe] = useState<Probe>(authHeader ? "not-required" : "checking");
+
+  useEffect(() => {
+    if (authHeader) {
+      setProbe("not-required");
+      return;
+    }
+    let cancelled = false;
+    checkCredentials(null).then((result) => {
+      if (cancelled) return;
+      // A network/backend error here isn't an auth problem — don't block
+      // the user behind a login screen for an unrelated outage, let the
+      // app's own per-page error states (e.g. dashboard.errorLoading) explain it.
+      setProbe(result === "unauthorized" ? "required" : "not-required");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [authHeader]);
+
+  if (probe === "checking") {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-surface-0">
+        <Logo size={40} className="animate-pulse" />
+      </div>
+    );
+  }
+
+  if (probe === "required" && !authHeader) {
+    return <LoginScreen />;
+  }
+
+  return <>{children}</>;
+}

frontend/src/components/auth/LoginScreen.tsx

@@ -0,0 +1,80 @@
+import { type FormEvent, useState } from "react";
+import { Logo } from "@/components/layout/Logo";
+import { Button } from "@/components/ui/Button";
+import { Card, CardContent } from "@/components/ui/Card";
+import { Input, Label } from "@/components/ui/Input";
+import { buildBasicAuthHeader, checkCredentials, setCredentials } from "@/lib/auth";
+import { useTranslation } from "@/lib/i18n";
+
+type Status = "idle" | "submitting" | "invalid" | "unreachable";
+
+/** Shown by LoginGate when this instance requires Basic Auth and no valid
+ * credentials are stored yet. Doesn't implement auth itself — it just
+ * collects a username/password, checks them against a real protected
+ * endpoint, and on success hands them to lib/auth.ts's setCredentials(),
+ * which is what every subsequent request actually authenticates with. */
+export function LoginScreen() {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [status, setStatus] = useState<Status>("idle");
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setStatus("submitting");
+    const result = await checkCredentials(buildBasicAuthHeader(username, password));
+    if (result === "ok") {
+      setCredentials(username, password);
+      return;
+    }
+    setStatus(result === "unauthorized" ? "invalid" : "unreachable");
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-surface-0 px-4">
+      <Card className="w-full max-w-sm">
+        <CardContent className="flex flex-col items-center gap-6 p-6 pt-8 sm:p-8">
+          <div className="flex flex-col items-center gap-1.5">
+            <Logo size={40} />
+            <span className="text-lg font-semibold tracking-tight text-text-primary">Aurum</span>
+            <span className="text-xs text-text-muted">{t("auth.subtitle")}</span>
+          </div>
+
+          <form onSubmit={handleSubmit} className="flex w-full flex-col gap-4">
+            <div>
+              <Label htmlFor="auth-username">{t("auth.usernameLabel")}</Label>
+              <Input
+                id="auth-username"
+                name="username"
+                autoComplete="username"
+                autoFocus
+                value={username}
+                onChange={(event) => setUsername(event.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <Label htmlFor="auth-password">{t("auth.passwordLabel")}</Label>
+              <Input
+                id="auth-password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                required
+              />
+            </div>
+
+            {status === "invalid" && <p className="text-sm text-danger">{t("auth.errorInvalidCredentials")}</p>}
+            {status === "unreachable" && <p className="text-sm text-danger">{t("auth.errorUnreachable")}</p>}
+
+            <Button type="submit" className="w-full" disabled={status === "submitting"}>
+              {status === "submitting" ? t("auth.submitting") : t("auth.submitButton")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}