homeio

1"use client";
2
3import Image from "next/image";
4import { FullScreenShell } from "@/modules/shell/components/full-screen-shell";
5import {
6  ArrowRight,
7  Eye,
8  EyeOff,
9  Lock,
10  Power,
11} from "@/components/icons/platform-icons";
12import { type FormEvent, useState } from "react";
13
14type LockScreenProps = {
15  onUnlock: (password: string) => Promise<void>;
16  onLogout: () => Promise<void>;
17  username: string;
18  wallpaper?: string;
19};
20
21export function LockScreen({
22  onUnlock,
23  onLogout,
24  username,
25  wallpaper = "/images/1.jpg",
26}: LockScreenProps) {
27  const displayUsername = username.replace(
28    /\b([a-z])/gi,
29    (letter) => letter.toUpperCase(),
30  );
31  const [password, setPassword] = useState("");
32  const [error, setError] = useState<string | null>(null);
33  const [isUnlocking, setIsUnlocking] = useState(false);
34  const [isLoggingOut, setIsLoggingOut] = useState(false);
35  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
36
37  async function handleUnlock(event: FormEvent<HTMLFormElement>) {
38    event.preventDefault();
39    if (!password.trim()) return;
40
41    setError(null);
42    setIsUnlocking(true);
43
44    try {
45      await onUnlock(password);
46      setPassword("");
47    } catch (unlockError) {
48      setError(
49        unlockError instanceof Error ? unlockError.message : "Unlock failed",
50      );
51    } finally {
52      setIsUnlocking(false);
53    }
54  }
55
56  async function handleLogout() {
57    setIsLoggingOut(true);
58
59    try {
60      await onLogout();
61    } finally {
62      setIsLoggingOut(false);
63    }
64  }
65
66  return (
67    <div className="fixed inset-0 z-[500]">
68      <FullScreenShell
69        wallpaper={wallpaper}
70        topRight={
71          <button
72            className="system-dock-surface flex size-10 cursor-pointer items-center justify-center text-foreground/68 transition-colors hover:border-white/10 hover:bg-black/26 hover:text-foreground disabled:opacity-60"
73            aria-label="Logout"
74            title="Logout"
75            onClick={handleLogout}
76            disabled={isLoggingOut}
77          >
78            <Power className="size-4" />
79          </button>
80        }
81        center={
82          <div className="w-full max-w-md text-center">
83            <div className="mx-auto mb-5 flex w-fit flex-col items-center">
84              <div className="system-hero-surface flex size-24 items-center justify-center bg-black/22 shadow-[var(--system-shadow-dock)]">
85                <Image
86                  src="/icon.png"
87                  alt="Homeio"
88                  width={64}
89                  height={64}
90                  className="relative z-10 size-[3.65rem] blur-[0.15px]"
91                />
92              </div>
93              <div className="system-pill-surface mt-2.5 px-3 py-1 text-[10px] tracking-[0.24em] text-foreground/58 uppercase">
94                Home server
95              </div>
96            </div>
97
98            <p className="text-[1.48rem] font-medium tracking-[-0.03em] text-foreground">
99              {displayUsername}
100            </p>
101            <p className="mb-5 mt-1 text-[11px] tracking-[0.18em] text-muted-foreground/78 uppercase">
102              Locked session
103            </p>
104
105            <form className="space-y-3" onSubmit={handleUnlock}>
106              <div className="system-soft-surface bg-black/22 px-2.5 py-2 shadow-[var(--system-shadow-dock)]">
107                <div className="flex items-center gap-2">
108                  <div className="system-icon-surface flex size-10 shrink-0 items-center justify-center bg-white/[0.14] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
109                    <Lock className="size-[1.1rem]" />
110                  </div>
111
112                  <input
113                    type={isPasswordVisible ? "text" : "password"}
114                    value={password}
115                    onChange={(event) => setPassword(event.target.value)}
116                    placeholder="Enter your password"
117                    className="h-10 w-full border-0 bg-transparent px-1 text-[15px] text-foreground outline-none placeholder:text-muted-foreground/52"
118                    autoFocus
119                  />
120
121                  <button
122                    type="button"
123                    className="flex size-10 shrink-0 items-center justify-center rounded-[var(--system-radius-control)] text-muted-foreground transition-colors hover:bg-white/[0.06] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
124                    aria-label={
125                      isPasswordVisible ? "Hide password" : "Show password"
126                    }
127                    onClick={() =>
128                      setIsPasswordVisible((currentValue) => !currentValue)
129                    }
130                  >
131                    {isPasswordVisible ? (
132                      <EyeOff className="size-4" />
133                    ) : (
134                      <Eye className="size-4" />
135                    )}
136                  </button>
137
138                  <button
139                    type="submit"
140                    className="system-primary-action group flex h-10 shrink-0 items-center gap-2 px-4 text-sm font-medium transition-all hover:translate-x-0.5 hover:brightness-110 disabled:translate-x-0 disabled:cursor-not-allowed disabled:opacity-45"
141                    disabled={isUnlocking || !password.trim()}
142                  >
143                    <span>{isUnlocking ? "Unlocking..." : "Unlock"}</span>
144                    <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
145                  </button>
146                </div>
147              </div>
148
149              {error ? (
150                <div className="flex justify-center">
151                  <div className="system-error-capsule">
152                    <span className="size-1.5 shrink-0 rounded-full bg-status-red shadow-[0_0_10px_rgba(239,68,68,0.45)]" />
153                    <p className="text-xs tracking-[0.01em] text-status-red/92">
154                      {error}
155                    </p>
156                  </div>
157                </div>
158              ) : null}
159            </form>
160
161            <p className="mt-4 text-xs text-muted-foreground">
162              Press{" "}
163              <span className="system-keycap-surface px-1.5 py-0.5 text-[11px] text-foreground/90">
164                Command + L
165              </span>{" "}
166              anytime to lock
167            </p>
168          </div>
169        }
170      />
171    </div>
172  );
173}
174