jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Redesign

Browse source
This commit is contained in:
Jack Mechem 2026-05-21 21:13:06 -07:00
parent 3f178f8795
commit c6e6c5ca48
Signed by: jackmechem
SSH key fingerprint: SHA256:GjIjMAC33pzYOe+hWcX5uvgnPrVFAXSrquvt84AOJbU
20 changed files with 664 additions and 277 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/auth/page.tsx
View file

@ -50,7 +50,6 @@ export default function AuthPage() {
setStatus("checking");
try {
// Step 1: verify password → get WebAuthn challenge
const loginRes = await fetch("/api/auth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
@ -65,7 +64,6 @@ export default function AuthPage() {
const { session_id, challenge } = await loginRes.json();
// Step 2: prompt YubiKey tap
setStatus("waiting_yubikey");
const opts = challenge.publicKey;
opts.challenge = b64uToBuf(opts.challenge);
@ -94,7 +92,6 @@ export default function AuthPage() {
return;
}
// Step 3: verify assertion → set cookie
setStatus("verifying");
const assertion = cred.response as AuthenticatorAssertionResponse;
@ -140,23 +137,21 @@ export default function AuthPage() {
const busy = status !== "idle";
return (
<main className="h-full bg-gray-100 flex items-center justify-center">
<div className="bg-white border border-gray-300 rounded-2xl md:p-12 p-8 w-full m-[10px] md:max-w-md shadow-sm">
{/* Header */}
<main className="h-full bg-primary flex items-center justify-center">
<div className="bg-primary border border-secondary rounded-2xl md:p-12 p-8 w-full m-[10px] md:max-w-md">
<div className="mb-8">
<p className="text-[11px] tracking-widest text-blue-500 uppercase mb-2">
<p className="text-[11px] tracking-widest text-blue uppercase mb-2">
dell-xps-nixos-serv
</p>
<h1 className="text-[28px] font-normal text-gray-900 tracking-tight mb-1.5">
<h1 className="text-[28px] font-normal text-foreground tracking-tight mb-1.5" style={{ lineHeight: "normal" }}>
Login
</h1>
<p className="text-sm text-gray-400">Enter system credentials</p>
<p className="text-sm text-foreground-sec" style={{ fontSize: "14px", lineHeight: "normal" }}>Enter system credentials</p>
</div>
<form onSubmit={handleLogin}>
{/* Username */}
<div className="mb-4">
<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
<label className="block text-[11px] tracking-wider text-foreground-sec uppercase mb-1.5">
Username
</label>
<input
@ -166,13 +161,12 @@ export default function AuthPage() {
required
disabled={busy}
autoComplete="username"
className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
className="w-full px-3.5 py-2.5 border border-secondary rounded-xl text-sm text-foreground bg-secondary/50 outline-none focus:border-blue/50 transition-colors"
/>
</div>
{/* Password */}
<div className="mb-6">
<label className="block text-[11px] tracking-wider text-gray-400 uppercase mb-1.5">
<label className="block text-[11px] tracking-wider text-foreground-sec uppercase mb-1.5">
Password
</label>
<input
@ -182,30 +176,27 @@ export default function AuthPage() {
required
disabled={busy}
autoComplete="current-password"
className="w-full px-3.5 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-900 bg-gray-50 outline-none focus:border-blue-300 focus:ring-2 focus:ring-blue-50 transition-colors"
className="w-full px-3.5 py-2.5 border border-secondary rounded-xl text-sm text-foreground bg-secondary/50 outline-none focus:border-blue/50 transition-colors"
/>
</div>
{/* YubiKey cue */}
{status === "waiting_yubikey" && (
<p className="text-sm text-blue-500 mb-4 text-center animate-pulse">
<p className="text-sm text-blue mb-4 text-center animate-pulse" style={{ fontSize: "14px" }}>
Touch your YubiKey…
</p>
)}
{/* Error */}
{error && (
<p className="text-[13px] text-red-400 mb-4">{error}</p>
)}
{/* Submit */}
<button
type="submit"
disabled={busy}
className={`w-full py-2.5 rounded-xl text-md border border-blue-600 shadow-sm text-white font-[600] tracking-wide transition-colors ${
className={`w-full py-2.5 rounded-xl text-md border border-blue/30 text-white font-[600] tracking-wide transition-colors ${
busy
? "bg-blue-200 cursor-not-allowed"
: "bg-blue-500 hover:bg-blue-400 cursor-pointer"
? "bg-blue/40 cursor-not-allowed"
: "bg-blue hover:bg-blue/80 cursor-pointer"
}`}
>
{status === "idle" && "Sign in"}