56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
|
import { ShieldCheck } from "lucide-preact";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
authTokenInput: string;
|
||
|
|
setAuthTokenInput: (value: string) => void;
|
||
|
|
isSigningIn: boolean;
|
||
|
|
authError: string | null;
|
||
|
|
onSignIn: (tokenCandidate: string | null) => Promise<void>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
|
||
|
|
return (
|
||
|
|
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,#171f33_0%,#111827_45%,#0b1020_100%)] p-4">
|
||
|
|
<div className="w-full max-w-md rounded-2xl border bg-[#0f172a] p-6 shadow-xl shadow-black/40">
|
||
|
|
<div className="mb-5 flex items-start gap-3">
|
||
|
|
<div className="rounded-lg bg-slate-200 p-2 text-slate-900">
|
||
|
|
<ShieldCheck className="h-4 w-4" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 className="text-lg font-semibold">Sign in to Sybil</h1>
|
||
|
|
<p className="mt-1 text-sm text-muted-foreground">Use your backend admin token.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form
|
||
|
|
className="space-y-3"
|
||
|
|
onSubmit={(event) => {
|
||
|
|
event.preventDefault();
|
||
|
|
void onSignIn(authTokenInput.trim() || null);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Input
|
||
|
|
type="password"
|
||
|
|
autoComplete="off"
|
||
|
|
placeholder="ADMIN_TOKEN"
|
||
|
|
value={authTokenInput}
|
||
|
|
onInput={(event) => setAuthTokenInput(event.currentTarget.value)}
|
||
|
|
disabled={isSigningIn}
|
||
|
|
/>
|
||
|
|
<Button className="w-full" type="submit" disabled={isSigningIn}>
|
||
|
|
{isSigningIn ? "Signing in..." : "Sign in"}
|
||
|
|
</Button>
|
||
|
|
<Button className="w-full" type="button" variant="secondary" disabled={isSigningIn} onClick={() => void onSignIn(null)}>
|
||
|
|
Continue without token
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{authError ? <p className="mt-3 text-sm text-red-600">{authError}</p> : null}
|
||
|
|
<p className="mt-3 text-xs text-muted-foreground">If `ADMIN_TOKEN` is set in `/server/.env`, token login is required.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|