homeio

1"use client";
2
3import Image from "next/image";
4import {
5  ArrowLeft,
6  ArrowRight,
7  Eye,
8  EyeOff,
9  Lock,
10  UserRound,
11} from "@/components/icons/platform-icons";
12import { useRouter, useSearchParams } from "next/navigation";
13import { type FormEvent, useEffect, useMemo, useState } from "react";
14import type {
15  LoginResponseData,
16  TwoFactorErrorCode,
17} from "@/lib/shared/contracts/auth";
18
19const RESTORE_BANNER_KEY = "homeio:restore-banner";
20const DEFAULT_RETRY_DELAY_SECONDS = 3;
21
22const DEMO_USERNAME = "homeio";
23const DEMO_PASSWORD = "homeio26";
24
25type LoginStage =
26  | { kind: "credentials" }
27  | { kind: "totp"; partialAuthToken: string; useBackupCode: boolean };
28
29function describeTotpError(
30  code: TwoFactorErrorCode | undefined,
31  fallback: string,
32): string {
33  switch (code) {
34    case "invalid_totp":
35      return "That code doesn't match. Check the time on your device and try again.";
36    case "invalid_backup_code":
37      return "That backup code isn't valid or has already been used.";
38    case "partial_auth_expired":
39      return "Your sign-in window expired. Enter your password again.";
40    case "partial_auth_consumed":
41      return "This sign-in attempt was already finalised. Start over.";
42    case "too_many_attempts":
43      return "Too many attempts. Wait a moment before trying again.";
44    default:
45      return fallback;
46  }
47}
48
49export function LoginForm({ isDemoMode = false }: { isDemoMode?: boolean }) {
50  const router = useRouter();
51  const searchParams = useSearchParams();
52  const nextPath = useMemo(() => {
53    const requested = searchParams.get("next") ?? "/";
54    return requested.startsWith("/") ? requested : "/";
55  }, [searchParams]);
56
57  const [username, setUsername] = useState(
58    () => isDemoMode ? DEMO_USERNAME : (searchParams.get("username")?.trim().toLowerCase() ?? ""),
59  );
60  const [password, setPassword] = useState(
61    () => isDemoMode ? DEMO_PASSWORD : "",
62  );
63  const [error, setError] = useState<string | null>(null);
64  const [isSubmitting, setIsSubmitting] = useState(false);
65  const [showRestoreBanner, setShowRestoreBanner] = useState(false);
66  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
67  const [retryCountdown, setRetryCountdown] = useState(0);
68  const [stage, setStage] = useState<LoginStage>({ kind: "credentials" });
69  const [totpCode, setTotpCode] = useState("");
70
71  useEffect(() => {
72    try {
73      if (window.localStorage.getItem(RESTORE_BANNER_KEY)) {
74        window.localStorage.removeItem(RESTORE_BANNER_KEY);
75        setShowRestoreBanner(true);
76      }
77    } catch {
78      // Best-effort only.
79    }
80  }, []);
81
82  useEffect(() => {
83    if (retryCountdown <= 0) return;
84
85    const timeoutId = window.setTimeout(() => {
86      setRetryCountdown((currentValue) => Math.max(0, currentValue - 1));
87    }, 1_000);
88
89    return () => window.clearTimeout(timeoutId);
90  }, [retryCountdown]);
91
92  async function handleCredentialsSubmit(event: FormEvent<HTMLFormElement>) {
93    event.preventDefault();
94    setError(null);
95    setIsSubmitting(true);
96
97    try {
98      const response = await fetch("/api/auth/login", {
99        method: "POST",
100        headers: {
101          "Content-Type": "application/json",
102        },
103        body: JSON.stringify({
104          username,
105          password,
106        }),
107      });
108
109      if (!response.ok) {
110        const json = (await response.json().catch(() => ({}))) as {
111          error?: string;
112          retryAfterSeconds?: number;
113        };
114        const retryAfterHeader = response.headers.get("retry-after");
115        const parsedRetryAfter = retryAfterHeader ? Number.parseInt(retryAfterHeader, 10) : NaN;
116        const retryAfterSeconds = Number.isFinite(parsedRetryAfter) && parsedRetryAfter > 0
117          ? parsedRetryAfter
118          : json.retryAfterSeconds && json.retryAfterSeconds > 0
119            ? json.retryAfterSeconds
120            : response.status === 401
121              ? DEFAULT_RETRY_DELAY_SECONDS
122              : 0;
123
124        if (retryAfterSeconds > 0) {
125          setRetryCountdown(retryAfterSeconds);
126        }
127
128        throw new Error(json.error ?? "Login failed");
129      }
130
131      const payload = (await response.json().catch(() => ({}))) as {
132        data?: LoginResponseData;
133      };
134
135      if (payload.data && "requiresTotp" in payload.data) {
136        setStage({
137          kind: "totp",
138          partialAuthToken: payload.data.partialAuthToken,
139          useBackupCode: false,
140        });
141        setTotpCode("");
142        return;
143      }
144
145      router.replace(nextPath);
146      router.refresh();
147    } catch (submitError) {
148      setError(
149        submitError instanceof Error ? submitError.message : "Login failed",
150      );
151    } finally {
152      setIsSubmitting(false);
153    }
154  }
155
156  async function handleTotpSubmit(event: FormEvent<HTMLFormElement>) {
157    event.preventDefault();
158    if (stage.kind !== "totp") return;
159    setError(null);
160    setIsSubmitting(true);
161
162    try {
163      const response = await fetch("/api/v1/auth/login/totp", {
164        method: "POST",
165        headers: { "Content-Type": "application/json" },
166        body: JSON.stringify({
167          partialAuthToken: stage.partialAuthToken,
168          code: totpCode.trim(),
169        }),
170      });
171
172      const payload = (await response.json().catch(() => ({}))) as {
173        error?: string;
174        code?: TwoFactorErrorCode;
175      };
176
177      if (!response.ok) {
178        if (payload.code === "partial_auth_expired" || payload.code === "partial_auth_consumed") {
179          setStage({ kind: "credentials" });
180          setPassword("");
181        }
182        throw new Error(describeTotpError(payload.code, payload.error ?? "Sign-in failed"));
183      }
184
185      router.replace(nextPath);
186      router.refresh();
187    } catch (submitError) {
188      setError(
189        submitError instanceof Error ? submitError.message : "Sign-in failed",
190      );
191    } finally {
192      setIsSubmitting(false);
193    }
194  }
195
196  function backToCredentials() {
197    setStage({ kind: "credentials" });
198    setTotpCode("");
199    setError(null);
200    setPassword("");
201  }
202
203  function toggleBackupCode() {
204    if (stage.kind !== "totp") return;
205    setStage({ ...stage, useBackupCode: !stage.useBackupCode });
206    setTotpCode("");
207    setError(null);
208  }
209
210  return (
211    <div className="w-full max-w-md text-center">
212      <div className="mx-auto mb-5 flex w-fit flex-col items-center">
213        <div className="system-hero-surface flex size-[5.5rem] items-center justify-center">
214          <Image
215            src="/icon.png"
216            alt="Homeio"
217            width={64}
218            height={64}
219            className="relative z-10 size-[3.4rem] blur-[0.12px]"
220          />
221        </div>
222        <div className="system-pill-surface mt-2 px-3 py-1 text-[10px] tracking-[0.22em] text-foreground/54 uppercase">
223          Home server
224        </div>
225      </div>
226
227      <p className="text-[1.48rem] font-medium tracking-[-0.03em] text-foreground">
228        {stage.kind === "credentials" ? "Welcome back" : "Two-step verification"}
229      </p>
230      <p className="mb-5 mt-1 text-[11px] tracking-[0.18em] text-muted-foreground/78 uppercase">
231        {stage.kind === "credentials"
232          ? "Sign in to continue"
233          : stage.useBackupCode
234            ? "Enter a backup code"
235            : "Enter the code from your app"}
236      </p>
237
238      {isDemoMode && stage.kind === "credentials" ? (
239        <div className="mb-3 rounded-[var(--system-radius-control)] border border-white/10 bg-black/22 px-4 py-3 text-left text-xs text-foreground/70 shadow-[var(--system-shadow-surface)] backdrop-blur-2xl">
240          <p className="font-medium tracking-[0.02em] text-foreground/90">Demo mode</p>
241          <p className="mt-0.5 leading-5">
242            Username: <span className="font-mono text-foreground/90">{DEMO_USERNAME}</span>
243            {" · "}Password: <span className="font-mono text-foreground/90">{DEMO_PASSWORD}</span>
244          </p>
245        </div>
246      ) : null}
247
248      {showRestoreBanner && stage.kind === "credentials" ? (
249        <div className="mb-3 rounded-[var(--system-radius-control)] border border-yellow-500/18 bg-black/22 px-4 py-3 text-left text-xs text-yellow-300 shadow-[var(--system-shadow-surface)] backdrop-blur-2xl">
250          <p className="font-medium tracking-[0.02em]">
251            Restore complete, session reset
252          </p>
253          <p className="mt-1 leading-5 text-yellow-300/78">
254            Please sign in with the credentials that were active when this backup was taken.
255          </p>
256        </div>
257      ) : null}
258
259      {stage.kind === "credentials" ? (
260        <form className="space-y-3" onSubmit={handleCredentialsSubmit}>
261          <div className="system-soft-surface px-2.5 py-2">
262            <div className="pointer-events-none absolute inset-x-4 top-0 h-px bg-white/10" />
263            <div className="space-y-1.5">
264              <div className="flex items-center gap-2 rounded-[var(--system-radius-control)] border border-white/6 bg-white/[0.035] px-2 py-1.5 transition-colors hover:bg-white/[0.05] focus-within:bg-white/[0.05]">
265                <div className="system-icon-surface flex size-9 shrink-0 items-center justify-center bg-white/[0.12] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
266                  <UserRound className="size-[1.1rem]" />
267                </div>
268                <input
269                  id="username"
270                  name="username"
271                  type="text"
272                  autoComplete="username"
273                  value={username}
274                  onChange={(event) => setUsername(event.target.value)}
275                  placeholder="Username"
276                  className="h-10 w-full border-0 bg-transparent px-1 text-[15px] text-foreground outline-none placeholder:text-muted-foreground/52"
277                  required
278                  autoFocus
279                />
280              </div>
281
282              <div className="flex items-center gap-2 rounded-[var(--system-radius-control)] border border-white/6 bg-white/[0.035] px-2 py-1.5 transition-colors hover:bg-white/[0.05] focus-within:bg-white/[0.05]">
283                <div className="system-icon-surface flex size-9 shrink-0 items-center justify-center bg-white/[0.12] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
284                  <Lock className="size-[1.2rem]" />
285                </div>
286                <input
287                  id="password"
288                  name="password"
289                  type={isPasswordVisible ? "text" : "password"}
290                  autoComplete="current-password"
291                  value={password}
292                  onChange={(event) => setPassword(event.target.value)}
293                  placeholder="Password"
294                  className="h-10 w-full border-0 bg-transparent px-1 text-[15px] text-foreground outline-none placeholder:text-muted-foreground/52"
295                  required
296                />
297                <button
298                  type="button"
299                  className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-[var(--system-radius-icon)] text-muted-foreground transition-colors hover:bg-white/[0.08] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
300                  aria-label={isPasswordVisible ? "Hide password" : "Show password"}
301                  aria-pressed={isPasswordVisible}
302                  onMouseDown={(event) => event.preventDefault()}
303                  onClick={() =>
304                    setIsPasswordVisible((currentValue) => !currentValue)
305                  }
306                >
307                  {isPasswordVisible ? (
308                    <EyeOff className="size-4" />
309                  ) : (
310                    <Eye className="size-4" />
311                  )}
312                </button>
313              </div>
314            </div>
315          </div>
316
317          {error ? (
318            <div className="flex justify-center">
319              <div className="system-error-capsule">
320                <span className="size-1.5 shrink-0 rounded-full bg-status-red shadow-[0_0_10px_rgba(239,68,68,0.45)]" />
321                <p className="text-xs tracking-[0.01em] text-status-red/92">
322                  {error}
323                </p>
324              </div>
325            </div>
326          ) : null}
327
328          <button
329            type="submit"
330            disabled={
331              isSubmitting ||
332              retryCountdown > 0 ||
333              !username.trim() ||
334              !password.trim()
335            }
336            className="system-primary-action group flex w-full items-center justify-center gap-2 rounded-full py-2.5 text-sm font-medium transition-all hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
337          >
338            <span>
339              {isSubmitting
340                ? "Signing in..."
341                : retryCountdown > 0
342                  ? `Try again in ${retryCountdown}s`
343                  : "Sign in"}
344            </span>
345            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
346          </button>
347        </form>
348      ) : (
349        <form className="space-y-3" onSubmit={handleTotpSubmit}>
350          <div className="system-soft-surface px-2.5 py-3">
351            <div className="pointer-events-none absolute inset-x-4 top-0 h-px bg-white/10" />
352            <div className="flex items-center gap-2 rounded-[var(--system-radius-control)] border border-white/6 bg-white/[0.035] px-2 py-1.5">
353              <div className="system-icon-surface flex size-9 shrink-0 items-center justify-center bg-white/[0.12] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]">
354                <Lock className="size-[1.2rem]" />
355              </div>
356              <input
357                id="totp-code"
358                name="code"
359                type="text"
360                inputMode={stage.useBackupCode ? "text" : "numeric"}
361                autoComplete="one-time-code"
362                value={totpCode}
363                onChange={(event) => setTotpCode(event.target.value)}
364                placeholder={stage.useBackupCode ? "Backup code" : "123 456"}
365                className="h-10 w-full border-0 bg-transparent px-1 text-[15px] tracking-[0.2em] text-foreground outline-none placeholder:text-muted-foreground/52"
366                autoFocus
367                required
368              />
369            </div>
370          </div>
371
372          {error ? (
373            <div className="flex justify-center">
374              <div className="system-error-capsule">
375                <span className="size-1.5 shrink-0 rounded-full bg-status-red shadow-[0_0_10px_rgba(239,68,68,0.45)]" />
376                <p className="text-xs tracking-[0.01em] text-status-red/92">
377                  {error}
378                </p>
379              </div>
380            </div>
381          ) : null}
382
383          <button
384            type="submit"
385            disabled={isSubmitting || !totpCode.trim()}
386            className="system-primary-action group flex w-full items-center justify-center gap-2 rounded-full py-2.5 text-sm font-medium transition-all hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
387          >
388            <span>{isSubmitting ? "Verifying..." : "Verify and sign in"}</span>
389            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
390          </button>
391
392          <div className="flex items-center justify-between text-[11px] text-muted-foreground/80">
393            <button
394              type="button"
395              onClick={backToCredentials}
396              className="inline-flex items-center gap-1 hover:text-foreground"
397            >
398              <ArrowLeft className="size-3" />
399              Back
400            </button>
401            <button
402              type="button"
403              onClick={toggleBackupCode}
404              className="hover:text-foreground"
405            >
406              {stage.useBackupCode ? "Use authenticator code" : "Use backup code instead"}
407            </button>
408          </div>
409        </form>
410      )}
411    </div>
412  );
413}
414