/

2026-09-21 19:14:55 +02:00
parent 2a34d16b52
commit 5903b77d95
16 changed files with 958 additions and 125 deletions
@@ -3,8 +3,9 @@ import { ArrowRight, KeyRound, MessageSquareText, ShieldCheck, User, UserPlus, Z
 import { api, setToken } from "../lib/api.ts";
 import { useT } from "../lib/i18n.ts";
 import type { User as UserType } from "../lib/types.ts";
+import { navigate } from "../lib/route.ts";
 import { Button, FlowerMark, Input, LangPicker, Spinner } from "./ui.tsx";
-import { RecoverDialog, RegisterDialog } from "./dialogs.tsx";
+import { RecoverDialog } from "./dialogs.tsx";
 import { AccessRequestModal } from "./ReviewPage.tsx";

 export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
@@ -16,7 +17,6 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
  const [recoverOpen, setRecoverOpen] = useState(false);
  const [recoveryOn, setRecoveryOn] = useState(false);
  const [recoveryFrom, setRecoveryFrom] = useState<string | undefined>(undefined);
-  const [registerOpen, setRegisterOpen] = useState(false);
  const [registrationOn, setRegistrationOn] = useState(false);
  const [requestOpen, setRequestOpen] = useState(false);
  const [requestOn, setRequestOn] = useState(false);
@@ -37,6 +37,19 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
      setRegistrationOn(m.registration);
      setRequestOn(m.accessRequest);
    }).catch(() => {});
+    // Fresh registration hands the new key over via sessionStorage so the
+    // login form comes prefilled (cleared immediately after reading).
+    try {
+      const raw = sessionStorage.getItem("ka_login_prefill");
+      if (raw) {
+        const p = JSON.parse(raw) as { username?: string; key?: string };
+        if (p.username) setUsername(p.username);
+        if (p.key) setKey(p.key);
+        sessionStorage.removeItem("ka_login_prefill");
+      }
+    } catch {
+      // ignore (private mode, malformed payload)
+    }
  }, []);

  async function submit(e: React.FormEvent) {
@@ -171,16 +184,11 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
            className="mt-3 w-full"
            disabled={!registrationOn}
            title={registrationOn ? t("login.regTipOn") : t("login.regTipOff")}
-            onClick={() => setRegisterOpen(true)}
+            onClick={() => navigate("/register")}
          >
            <UserPlus size={16} />
            {t("login.register")}
          </Button>
-          <RegisterDialog
-            open={registerOpen}
-            onClose={() => setRegisterOpen(false)}
-            onDone={(u, k) => { setUsername(u); setKey(k); }}
-          />
          {/* Wishlist path: only when open registration is off AND the admin
              enabled access requests. They are mutually exclusive server-side. */}
          {!registrationOn && requestOn && (
@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react";
+import { ArrowLeft, ArrowRight, UserPlus } from "lucide-react";
+import { api } from "../lib/api.ts";
+import { useT } from "../lib/i18n.ts";
+import { navigate } from "../lib/route.ts";
+import { Button, CopyButton, Field, FlowerMark, Input, LangPicker, Spinner } from "./ui.tsx";
+
+const PREFILL_KEY = "ka_login_prefill";
+
+/** Full-page self-registration (/register). No boot splash on this route. */
+export function RegisterPage() {
+  const { t } = useT();
+  const [username, setUsername] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [email, setEmail] = useState("");
+  const [key, setKey] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [registrationOn, setRegistrationOn] = useState(true);
+
+  useEffect(() => {
+    api.methods().then((m) => setRegistrationOn(m.registration)).catch(() => {});
+  }, []);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.register({
+        username: username.trim().toLowerCase(),
+        displayName: displayName.trim() || undefined,
+        email: email.trim() || undefined,
+      });
+      setKey(res.key);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("dlg.regFailed"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function goLogin() {
+    const u = username.trim().toLowerCase();
+    if (key && u) {
+      try {
+        sessionStorage.setItem(PREFILL_KEY, JSON.stringify({ username: u, key }));
+      } catch {
+        // private mode — the login form just stays empty
+      }
+    }
+    navigate("/login");
+  }
+
+  return (
+    <div className="grid min-h-full place-items-center overflow-y-auto bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40">
+      <div className="w-full max-w-sm">
+        <div className="rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-accent-900/5 backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
+          <div className="mb-2 flex flex-col items-center text-center">
+            <FlowerMark size={68} dynamic={false} className="mb-4 drop-shadow-lg" />
+            <h1 className="text-2xl font-bold tracking-tight">{t("dlg.registerTitle")}</h1>
+          </div>
+
+          {key ? (
+            <div className="mt-6 space-y-4">
+              <p className="text-center text-sm opacity-80">
+                {t("dlg.regWelcome", { user: username.trim().toLowerCase() })}
+              </p>
+              <div className="flex items-center gap-2">
+                <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{key}</code>
+                <CopyButton text={key} />
+              </div>
+              <Button variant="gradient" size="lg" className="w-full" onClick={goLogin}>
+                {t("dlg.regContinue")} <ArrowRight size={17} />
+              </Button>
+            </div>
+          ) : (
+            <form onSubmit={submit} className="mt-6 space-y-3">
+              <Field label={t("common.username")}>
+                <Input
+                  variant="soft"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="alice"
+                  maxLength={32}
+                  autoComplete="username"
+                  required
+                />
+              </Field>
+              <Field label={t("common.displayName")}>
+                <Input
+                  variant="soft"
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder="Alice"
+                  maxLength={60}
+                  autoComplete="nickname"
+                />
+              </Field>
+              <Field label={t("dlg.emailOpt")}>
+                <Input
+                  variant="soft"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="[email protected]"
+                  inputMode="email"
+                  autoComplete="email"
+                />
+              </Field>
+              {error && (
+                <p className="rounded-full bg-red-500/10 px-5 py-2.5 text-center text-sm text-red-600 dark:text-red-400" role="alert">
+                  {error}
+                </p>
+              )}
+              <Button
+                type="submit"
+                variant="gradient"
+                size="lg"
+                className="w-full"
+                disabled={busy || !registrationOn}
+                title={registrationOn ? undefined : t("login.regTipOff")}
+              >
+                {busy ? <Spinner /> : (<><UserPlus size={16} /> {t("login.register")}</>)}
+              </Button>
+              {!registrationOn && (
+                <p className="text-center text-sm opacity-60">{t("login.regTipOff")}</p>
+              )}
+            </form>
+          )}
+
+          <button
+            onClick={() => navigate("/login")}
+            className="mt-4 inline-flex w-full items-center justify-center gap-1.5 text-center text-sm opacity-60 transition hover:opacity-100 hover:underline"
+          >
+            <ArrowLeft size={15} />
+            {t("common.backToLogin")}
+          </button>
+
+          <div className="mt-4 flex justify-center">
+            <LangPicker />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Archive, ArchiveRestore, Eye, Fingerprint, Globe, FileText, ImagePlus, KeyRound, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, ShieldCheck, Sparkles, Tag, Trash2, Unplug, User as UserIcon, UserPlus, X } from "lucide-react";
+import { Archive, ArchiveRestore, Eye, Fingerprint, Globe, FileText, ImagePlus, KeyRound, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, ShieldCheck, Sparkles, Tag, Trash2, Unplug, User as UserIcon, X } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { cn } from "../lib/cn.ts";
 import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
@@ -204,91 +204,6 @@ export function FilePreviewModal({
  );
 }

-/* ---------- Self-registration ---------- */
-
-export function RegisterDialog({
-  open,
-  onClose,
-  onDone,
-}: {
-  open: boolean;
-  onClose: () => void;
-  onDone: (username: string, key: string) => void;
-}) {
-  const { t } = useT();
-  const [username, setUsername] = useState("");
-  const [displayName, setDisplayName] = useState("");
-  const [email, setEmail] = useState("");
-  const [key, setKey] = useState<string | null>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    if (open) {
-      setUsername("");
-      setDisplayName("");
-      setEmail("");
-      setKey(null);
-      setError("");
-    }
-  }, [open ]);
-
-  async function submit(e: React.FormEvent) {
-    e.preventDefault();
-    if (busy) return;
-    setBusy(true);
-    setError("");
-    try {
-      const res = await api.register({
-        username: username.trim().toLowerCase(),
-        displayName: displayName.trim() || undefined,
-        email: email.trim() || undefined,
-      });
-      setKey(res.key);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : t("dlg.regFailed"));
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  return (
-    <Modal open={open} onClose={onClose} title={t("dlg.registerTitle")} icon={UserPlus}>
-      {key ? (
-        <div className="space-y-4">
-          <p className="text-sm opacity-80">
-            {t("dlg.regWelcome", { user: username.trim().toLowerCase() })}
-          </p>
-          <div className="flex items-center gap-2">
-            <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{key}</code>
-            <CopyButton text={key} />
-          </div>
-          <div className="flex justify-end">
-            <Button size="sm" onClick={() => { onDone(username.trim().toLowerCase(), key); onClose(); }}>{t("dlg.regContinue")}</Button>
-          </div>
-        </div>
-      ) : (
-        <form onSubmit={submit} className="space-y-4">
-          <Field label={t("common.username")}>
-            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" maxLength={32} required />
-          </Field>
-          <Field label={t("common.displayName")}>
-            <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Alice" maxLength={60} />
-          </Field>
-          <Field label={t("dlg.emailOpt")}>
-            <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
-          </Field>
-          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
-          <div className="flex justify-end gap-2">
-            <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
-            <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : t("login.register")}</Button>
-          </div>
-        </form>
-      )}
-    </Modal>
-  );
-}
-
 /* ---------- Share ---------- */

 export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClose: () => void }) {