63 lines
2.4 KiB
TypeScript
63 lines
2.4 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="app-grid-surface flex h-full items-center justify-center p-4">
|
|
<div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
|
|
<div className="mb-6">
|
|
<div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">
|
|
SYBIL
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-5 flex items-start gap-3">
|
|
<div className="rounded-lg border border-cyan-300/25 bg-cyan-400/12 p-2 text-cyan-200">
|
|
<ShieldCheck className="h-4 w-4" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-lg font-semibold text-violet-50">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}
|
|
className="bg-[hsl(235_48%_6%_/_0.84)] text-violet-50"
|
|
/>
|
|
<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>
|
|
);
|
|
}
|