feat(auth): add remembered local login to the frontend
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
import { AlertTriangle, ArrowRight, LockKeyhole } from "lucide-react";
|
||||
import { ApiError } from "../api/client";
|
||||
import { loginLocal } from "../api/auth";
|
||||
import type { AuthenticatedUser, AuthPublicConfig } from "../api/types";
|
||||
import { Button } from "../components/ui/button";
|
||||
|
||||
interface LoginPageProps {
|
||||
config: AuthPublicConfig;
|
||||
onAuthenticated: (user: AuthenticatedUser) => void;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
function loginError(error: unknown): { message: string; retry: boolean } {
|
||||
if (error instanceof ApiError && error.status === 503) {
|
||||
return { message: "Authentication is temporarily unavailable. Try again.", retry: true };
|
||||
}
|
||||
if (error instanceof ApiError && error.status === 403) {
|
||||
return { message: "This sign-in request was rejected. Open ThothII from its configured address and try again.", retry: false };
|
||||
}
|
||||
return { message: "Invalid username or password.", retry: false };
|
||||
}
|
||||
|
||||
export function LoginPage({ config, onAuthenticated, onRetry }: LoginPageProps) {
|
||||
const localLogin = config.mode === "local" && config.localLogin;
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const passwordRef = useRef<HTMLInputElement>(null);
|
||||
const mountedRef = useRef(true);
|
||||
const submittingRef = useRef(false);
|
||||
const attemptRef = useRef(0);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<{ message: string; retry: boolean }>();
|
||||
|
||||
useEffect(() => {
|
||||
mountedRef.current = true;
|
||||
return () => { mountedRef.current = false; };
|
||||
}, []);
|
||||
|
||||
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (submittingRef.current) return;
|
||||
const form = event.currentTarget;
|
||||
const values = new FormData(form);
|
||||
const username = String(values.get("username") ?? "");
|
||||
const password = String(values.get("password") ?? "");
|
||||
const remember = values.get("remember") === "on";
|
||||
const attempt = ++attemptRef.current;
|
||||
submittingRef.current = true;
|
||||
setError(undefined);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const user = await loginLocal(username, password, remember);
|
||||
if (mountedRef.current && attemptRef.current === attempt) onAuthenticated(user);
|
||||
} catch (failure) {
|
||||
if (mountedRef.current && attemptRef.current === attempt) setError(loginError(failure));
|
||||
} finally {
|
||||
submittingRef.current = false;
|
||||
if (!mountedRef.current || attemptRef.current !== attempt) return;
|
||||
// Passwords never enter React state and are cleared after every attempt,
|
||||
// including operational failures and successful authentication.
|
||||
form.reset();
|
||||
setSubmitting(false);
|
||||
passwordRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-background px-5 py-8 text-foreground sm:px-8 sm:py-12">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-4rem)] max-w-5xl items-center gap-12 lg:grid-cols-[minmax(0,1fr)_26rem]">
|
||||
<section className="hidden max-w-xl lg:block">
|
||||
<p className="thot-label text-primary">Secure re-entry · governed workspace</p>
|
||||
<h1 className="mt-4 max-w-lg font-heading text-5xl font-semibold leading-[1.03] tracking-tight sm:text-6xl">
|
||||
Return to the analytical ledger.
|
||||
</h1>
|
||||
<p className="mt-6 max-w-md text-base leading-7 text-muted-foreground">
|
||||
ThothII keeps each question, review decision, and SQL artifact inside a traceable human-in-the-loop workflow.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<span className="h-px w-16 bg-primary" aria-hidden="true" />
|
||||
<span>Access is checked before the workspace opens.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mx-auto w-full max-w-md rounded-2xl border border-border/80 bg-card p-6 shadow-md sm:p-8">
|
||||
<div className="mb-7">
|
||||
<div className="flex items-center gap-2 text-primary" aria-hidden="true">
|
||||
<LockKeyhole className="size-4" />
|
||||
<span className="thot-label text-primary">ThothII access</span>
|
||||
</div>
|
||||
<h2 className="mt-3 font-heading text-3xl font-semibold tracking-tight">Sign in to ThothII</h2>
|
||||
<p className="mt-2 text-sm leading-6 text-muted-foreground">Use your installation account to continue.</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div role="alert" aria-live="assertive" className="mb-5 grid gap-3 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm">
|
||||
<p className="flex items-start gap-2 leading-5"><AlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />{error.message}</p>
|
||||
{error.retry && onRetry && (
|
||||
<Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetry}>Retry</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{localLogin && (
|
||||
<form ref={formRef} onSubmit={submit} className="grid gap-4">
|
||||
<div className="grid gap-1.5">
|
||||
<label htmlFor="thothii-username" className="text-sm font-semibold">Username</label>
|
||||
<input
|
||||
id="thothii-username"
|
||||
name="username"
|
||||
type="text"
|
||||
autoComplete="username"
|
||||
autoCapitalize="none"
|
||||
spellCheck={false}
|
||||
required
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/25"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-1.5">
|
||||
<label htmlFor="thothii-password" className="text-sm font-semibold">Password</label>
|
||||
<input
|
||||
ref={passwordRef}
|
||||
id="thothii-password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/25"
|
||||
/>
|
||||
</div>
|
||||
<label className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<input name="remember" type="checkbox" className="size-4 accent-[oklch(var(--primary))]" />
|
||||
<span>Remember me for 30 days</span>
|
||||
</label>
|
||||
<Button type="submit" size="lg" className="mt-1 w-full" disabled={submitting}>
|
||||
{submitting ? "Signing in…" : "Sign in"}
|
||||
{!submitting && <ArrowRight aria-hidden="true" />}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{config.oidcLogin && (
|
||||
<a
|
||||
href="/api/auth/oidc/login"
|
||||
className="mt-4 inline-flex h-10 w-full items-center justify-center gap-2 rounded-md border border-border bg-card px-4 text-sm font-semibold shadow-xs outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/25"
|
||||
>
|
||||
Continue with single sign-on
|
||||
<ArrowRight aria-hidden="true" className="size-4" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{!localLogin && !config.oidcLogin && (
|
||||
<p role="status" className="rounded-md border border-border bg-muted/40 p-3 text-sm text-muted-foreground">
|
||||
No browser sign-in method is enabled for this installation.
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user