magic link support and forgot password

app/(account)/account/page.tsx

@@ -1,210 +1,439 @@
 // app/(account)/account/page.tsx
 "use client";
 
+import { useMemo, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 
-function StatChip({
+const API_BASE_URL =
-  label,
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
-  value,
-}: {
-  label: string;
-  value: React.ReactNode;
-}) {
-  return (
-    <div className="rounded-lg border border-white/10 bg-white/5 px-3 py-2">
-      <div className="text-[11px] uppercase tracking-[0.18em] text-white/50">
-        {label}
-      </div>
-      <div className="text-sm font-semibold text-white/90">{value}</div>
-    </div>
-  );
-}
-
-function Card({
-  title,
-  description,
-  children,
-  badge,
-}: {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-  badge?: React.ReactNode;
-}) {
-  return (
-    <section className="rounded-2xl border border-white/10 bg-white/5 p-5">
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <h3 className="text-sm font-semibold text-white/90">{title}</h3>
-          {description ? (
-            <p className="mt-1 text-sm text-white/60">{description}</p>
-          ) : null}
-        </div>
-        {badge ? <div className="shrink-0">{badge}</div> : null}
-      </div>
-
-      <div className="mt-4">{children}</div>
-    </section>
-  );
-}
-
-function Row({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex items-center justify-between gap-4 py-2">
-      <div className="text-sm text-white/60">{label}</div>
-      <div className="text-sm font-medium text-white/90">{value}</div>
-    </div>
-  );
-}
 
 export default function AccountPage() {
-  const { user, loading } = useAuth();
+  const { user, loading, token, setSession, logout } = useAuth();
+  const searchParams = useSearchParams();
+  const router = useRouter();
 
-  if (loading) return <div className="text-sm text-white/60">Loading…</div>;
+  const welcome = searchParams.get("welcome") === "1";
+
+  const needsDisplayName = useMemo(() => {
+    return !user?.displayName || user.displayName.trim().length === 0;
+  }, [user?.displayName]);
+
+  // Only show welcome panel if they actually need setup
+  const showWelcomeCard = welcome && needsDisplayName;
+
+  // ----------------------------
+  // Display Name state (shared)
+  // ----------------------------
+  const [displayName, setDisplayName] = useState(user?.displayName ?? "");
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState<string | null>(null);
+
+  // Inline profile editor
+  const [editingName, setEditingName] = useState(false);
+
+  // ----------------------------
+  // Password state
+  // ----------------------------
+  const [showPassword, setShowPassword] = useState(false);
+  const [pw1, setPw1] = useState("");
+  const [pw2, setPw2] = useState("");
+  const [pwSaving, setPwSaving] = useState(false);
+  const [pwMsg, setPwMsg] = useState<string | null>(null);
+
+  const canSaveName = useMemo(() => {
+    return displayName.trim().length > 0 && !saving;
+  }, [displayName, saving]);
+
+  const pwMismatch = useMemo(
+    () => pw1.length > 0 && pw2.length > 0 && pw1 !== pw2,
+    [pw1, pw2]
+  );
+  const pwTooShort = useMemo(() => pw1.length > 0 && pw1.length < 8, [pw1]);
+  const canSavePassword = useMemo(() => {
+    return !pwSaving && pw1.length >= 8 && pw1 === pw2;
+  }, [pwSaving, pw1, pw2]);
+
+  if (loading) return <div className="text-sm opacity-70">Loading…</div>;
 
   if (!user) {
     return (
-      <div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+      <div className="text-sm opacity-70">
-        <h2 className="text-base font-semibold text-white/90">
+        You’re not logged in. Please log in to view your account.
-          You’re not logged in
-        </h2>
-        <p className="mt-2 text-sm text-white/60">
-          Please log in to view your account.
-        </p>
       </div>
     );
   }
+  const authedUser = user; // user is non-null from here down
 
-  const planLabel = user.role === "ADMIN" ? "Admin" : "Beta Access";
+  async function saveDisplayName() {
+    setSaving(true);
+    setMsg(null);
+
+    try {
+      const nextName = displayName.trim();
+
+      const res = await fetch(`${API_BASE_URL}/api/users/me`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ displayName: nextName }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || "Failed to update profile");
+      }
+
+      const updated = await res.json().catch(() => null);
+
+      const nextUser = {
+        email: authedUser.email,
+        displayName: updated?.displayName ?? nextName,
+        role: authedUser.role,
+      };
+
+      if (token) setSession(token, nextUser);
+
+      setMsg("Saved ✅");
+      setEditingName(false);
+
+      // If we came from the welcome flow, clear the param
+      if (welcome) router.replace("/account");
+    } catch (e: any) {
+      setMsg(e?.message || "Couldn’t save. Try again.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function savePassword() {
+    setPwMsg(null);
+
+    if (pw1.length < 8) {
+      setPwMsg("Password must be at least 8 characters.");
+      return;
+    }
+    if (pw1 !== pw2) {
+      setPwMsg("Passwords don’t match.");
+      return;
+    }
+
+    setPwSaving(true);
+
+    try {
+      const res = await fetch(`${API_BASE_URL}/api/users/me/password`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ password: pw1 }),
+      });
+
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(text || "Failed to set password");
+      }
+
+      setPwMsg("Password set ✅ You can now use email + password login.");
+      setPw1("");
+      setPw2("");
+      setShowPassword(false);
+
+      if (welcome) router.replace("/account");
+    } catch (e: any) {
+      setPwMsg(e?.message || "Couldn’t set password. Try again.");
+    } finally {
+      setPwSaving(false);
+    }
+  }
 
   return (
     <div className="space-y-6">
-      {/* Quick stats (lightweight “premium” feel) */}
+      {/* Welcome / Setup card (only if needed) */}
-      {/* <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+      {showWelcomeCard && (
-        <StatChip label="Email" value={user.email} />
+        <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-4">
-        <StatChip label="Display Name" value={user.displayName || "—"} />
+          <div>
-        <StatChip label="Role" value={user.role} />
+            <h2 className="text-base font-semibold">Welcome to the beta 👋</h2>
-        <StatChip label="Plan" value={planLabel} />
+            <p className="text-sm text-zinc-300/80">
-      </div> */}
+              Quick setup and you’re ready to cook.
-
+            </p>
-      <div id="profile">
-        <Card
-          title="Profile"
-          description="Basic account info."
-          badge={
-            <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/60">
-              Read-only (for now)
-            </span>
-          }
-        >
-          <div className="divide-y divide-white/10">
-            <Row label="Email" value={user.email} />
-            <Row label="Display name" value={user.displayName || "—"} />
-            <Row label="Role" value={user.role} />
           </div>
-        </Card>
-      </div>
 
-      <div id="preferences">
+          {/* Display name */}
-        <Card
+          <div className="space-y-2">
-          title="Preferences"
+            <label className="text-xs font-medium text-zinc-200">
-          description="Placeholders until we wire the backend."
+              Display name
-          badge={
-            <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/60">
-              Coming soon
-            </span>
-          }
-        >
-          <div className="space-y-3">
-            <label className="flex items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/5 p-3">
-              <div>
-                <div className="text-sm font-medium text-white/90">
-                  Default new builds to private
-                </div>
-                <div className="text-sm text-white/60">
-                  Keeps builds off the public feed until you publish.
-                </div>
-              </div>
-              <input
-                type="checkbox"
-                disabled
-                className="h-4 w-4 accent-orange-400"
-              />
             </label>
+            <input
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              placeholder="e.g. Sean / S2Tactical / DirtNinja69"
+              className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
+            />
+            <div className="flex items-center gap-3">
+              <button
+                onClick={saveDisplayName}
+                disabled={!canSaveName}
+                className="rounded-md bg-amber-400 px-3 py-2 text-sm font-medium text-black disabled:opacity-50"
+              >
+                {saving ? "Saving…" : "Save"}
+              </button>
+              {msg && (
+                <span
+                  className={`text-xs ${
+                    msg.toLowerCase().includes("couldn")
+                      ? "text-red-300"
+                      : "text-zinc-200/80"
+                  }`}
+                >
+                  {msg}
+                </span>
+              )}
+            </div>
+          </div>
 
-            <label className="flex items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/5 p-3">
+          {/* Password */}
-              <div>
+          <div className="pt-2 border-t border-white/10">
-                <div className="text-sm font-medium text-white/90">
+            <p className="text-xs text-zinc-300/80">
-                  Weekly digest
+              Want password login later? Optional (but recommended).
-                </div>
+            </p>
-                <div className="text-sm text-white/60">
+
-                  Price drops, new parts, and updates.
+            {!showPassword ? (
+              <button
+                onClick={() => setShowPassword(true)}
+                className="mt-2 text-xs underline opacity-80 hover:opacity-100"
+              >
+                Set a password
+              </button>
+            ) : (
+              <div className="mt-3 space-y-2">
+                <input
+                  type="password"
+                  value={pw1}
+                  onChange={(e) => setPw1(e.target.value)}
+                  placeholder="New password (min 8 chars)"
+                  className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
+                />
+                <input
+                  type="password"
+                  value={pw2}
+                  onChange={(e) => setPw2(e.target.value)}
+                  placeholder="Confirm password"
+                  className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
+                />
+
+                {(pwTooShort || pwMismatch) && (
+                  <div className="text-xs text-red-300">
+                    {pwTooShort
+                      ? "Password must be at least 8 characters."
+                      : "Passwords don’t match."}
+                  </div>
+                )}
+
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={savePassword}
+                    disabled={!canSavePassword}
+                    className="rounded-md bg-amber-400 px-3 py-2 text-sm font-medium text-black disabled:opacity-50"
+                  >
+                    {pwSaving ? "Saving…" : "Save password"}
+                  </button>
+                  <button
+                    onClick={() => {
+                      setShowPassword(false);
+                      setPw1("");
+                      setPw2("");
+                      setPwMsg(null);
+                    }}
+                    className="text-xs opacity-80 hover:opacity-100"
+                  >
+                    Cancel
+                  </button>
                 </div>
+
+                {pwMsg && (
+                  <div
+                    className={`text-xs ${
+                      pwMsg.toLowerCase().includes("couldn")
+                        ? "text-red-300"
+                        : "text-zinc-200/80"
+                    }`}
+                  >
+                    {pwMsg}
+                  </div>
+                )}
               </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Profile header */}
+      <div>
+        <h2 className="text-lg font-semibold">Profile</h2>
+        <p className="text-sm opacity-70">Basic account info.</p>
+      </div>
+
+      {/* Profile card */}
+      <div className="rounded-xl border border-white/10 bg-white/5 p-4 space-y-3">
+        <div className="text-sm">
+          <span className="opacity-70">Email:</span>{" "}
+          <span className="font-medium">{user.email}</span>
+        </div>
+
+        {/* Display name (inline editable) */}
+        <div className="text-sm">
+          <span className="opacity-70">Display name:</span>{" "}
+          {!editingName ? (
+            <>
+              <span className="font-medium">{user.displayName || "—"}</span>
+              <button
+                onClick={() => {
+                  setEditingName(true);
+                  setMsg(null);
+                  setDisplayName(user.displayName ?? "");
+                }}
+                className="ml-3 text-xs underline opacity-70 hover:opacity-100"
+              >
+                Edit
+              </button>
+            </>
+          ) : (
+            <div className="mt-2 space-y-2">
               <input
-                type="checkbox"
+                value={displayName}
-                disabled
+                onChange={(e) => setDisplayName(e.target.value)}
-                className="h-4 w-4 accent-orange-400"
+                placeholder="Your display name"
+                className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
               />
-            </label>
-          </div>
-        </Card>
-      </div>
 
-      <div id="security">
+              <div className="flex items-center gap-3">
-        <Card
+                <button
-          title="Security"
+                  onClick={saveDisplayName}
-          description="Sessions, password change, and 2FA will live here."
+                  disabled={!canSaveName}
-          badge={
+                  className="rounded-md bg-amber-400 px-3 py-2 text-xs font-medium text-black disabled:opacity-50"
-            <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-white/60">
+                >
-              Coming soon
+                  {saving ? "Saving…" : "Save"}
-            </span>
+                </button>
-          }
+                <button
-        >
+                  onClick={() => {
-          <div className="space-y-3">
+                    setEditingName(false);
-            <div className="rounded-xl border border-white/10 bg-white/5 p-3">
+                    setDisplayName(user.displayName ?? "");
-              <div className="text-sm font-medium text-white/90">2FA</div>
+                    setMsg(null);
-              <div className="text-sm text-white/60">
+                  }}
-                Not enabled yet (on the roadmap).
+                  className="text-xs opacity-80 hover:opacity-100"
+                >
+                  Cancel
+                </button>
+                {msg && (
+                  <span
+                    className={`text-xs ${
+                      msg.toLowerCase().includes("couldn")
+                        ? "text-red-300"
+                        : "text-zinc-200/80"
+                    }`}
+                  >
+                    {msg}
+                  </span>
+                )}
               </div>
             </div>
+          )}
+        </div>
 
-            <div className="rounded-xl border border-white/10 bg-white/5 p-3">
+        <div className="text-sm">
-              <div className="text-sm font-medium text-white/90">
+          <span className="opacity-70">Role:</span>{" "}
-                Active sessions
+          <span className="font-medium">{user.role}</span>
-              </div>
+        </div>
-              <div className="text-sm text-white/60">
-                We’ll show devices + allow logout everywhere.
-              </div>
-            </div>
-          </div>
-        </Card>
-      </div>
 
-      <div id="danger">
+        <div className="pt-3 border-t border-white/10 flex items-center justify-between">
-        <Card
+          <button
-          title="Danger Zone"
+            onClick={logout}
-          description="Destructive actions. Handle with care."
+            className="rounded-md border border-white/10 px-3 py-2 text-xs opacity-80 hover:opacity-100"
-        >
+          >
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            Log out
-            <div>
+          </button>
-              <div className="text-sm font-medium text-white/90">
+
-                Delete account
+          {/* Optional: quick link to set password later */}
-              </div>
+          <button
-              <div className="text-sm text-white/60">
+            onClick={() => {
-                Removes your account and builds. (We’ll add this flow later.)
+              setShowPassword(true);
+              // Scroll user’s attention to welcome panel area if it exists,
+              // otherwise just open the password UI in their mind.
+              // (Kept simple: you can add a dedicated card later if you want)
+              setPwMsg(null);
+            }}
+            className="text-xs underline opacity-70 hover:opacity-100"
+          >
+            Set / change password
+          </button>
+        </div>
+
+        {/* If user clicks "Set/change password" outside welcome flow, show it here */}
+        {!showWelcomeCard && showPassword && (
+          <div className="pt-4 border-t border-white/10 space-y-2">
+            <div className="text-sm font-medium">Set password</div>
+            <input
+              type="password"
+              value={pw1}
+              onChange={(e) => setPw1(e.target.value)}
+              placeholder="New password (min 8 chars)"
+              className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
+            />
+            <input
+              type="password"
+              value={pw2}
+              onChange={(e) => setPw2(e.target.value)}
+              placeholder="Confirm password"
+              className="w-full rounded-md border border-white/10 bg-black/40 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-amber-500/40"
+            />
+
+            {(pwTooShort || pwMismatch) && (
+              <div className="text-xs text-red-300">
+                {pwTooShort
+                  ? "Password must be at least 8 characters."
+                  : "Passwords don’t match."}
               </div>
+            )}
+
+            <div className="flex items-center gap-3">
+              <button
+                onClick={savePassword}
+                disabled={!canSavePassword}
+                className="rounded-md bg-amber-400 px-3 py-2 text-sm font-medium text-black disabled:opacity-50"
+              >
+                {pwSaving ? "Saving…" : "Save password"}
+              </button>
+              <button
+                onClick={() => {
+                  setShowPassword(false);
+                  setPw1("");
+                  setPw2("");
+                  setPwMsg(null);
+                }}
+                className="text-xs opacity-80 hover:opacity-100"
+              >
+                Cancel
+              </button>
             </div>
-            <button
+
-              type="button"
+            {pwMsg && (
-              disabled
+              <div
-              className="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-red-200/90 opacity-60"
+                className={`text-xs ${
-            >
+                  pwMsg.toLowerCase().includes("couldn")
-              Delete (coming soon)
+                    ? "text-red-300"
-            </button>
+                    : "text-zinc-200/80"
+                }`}
+              >
+                {pwMsg}
+              </div>
+            )}
           </div>
-        </Card>
+        )}
       </div>
     </div>
   );
-}
+}

app/beta/confirm/page.tsx

@@ -2,23 +2,24 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
 
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
-type Status = "loading" | "success" | "error";
-
 export default function BetaConfirmPage() {
-  const searchParams = useSearchParams();
+  const params = useSearchParams();
-  const token = searchParams.get("token");
+  const token = params.get("token");
-
+  const router = useRouter();
-  const [status, setStatus] = useState<Status>("loading");
+  const { setSession } = useAuth();
-  const [message, setMessage] = useState<string>("Please hang tight.");
-
-  // Prevent double-fire in React Strict Mode (dev)
   const ran = useRef(false);
 
+  const [message, setMessage] = useState("Confirming your email…");
+  const [status, setStatus] = useState<"loading" | "success" | "error">(
+    "loading"
+  );
+
   useEffect(() => {
     if (!token) {
       setStatus("error");
@@ -26,67 +27,55 @@ export default function BetaConfirmPage() {
       return;
     }
 
-    // StrictMode can run effects twice in dev; bail out after first
     if (ran.current) return;
     ran.current = true;
 
-    const controller = new AbortController();
-
     (async () => {
       try {
-        setStatus("loading");
-        setMessage("Confirming your email…");
-
         const res = await fetch(`${API_BASE_URL}/api/auth/beta/confirm`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ token }),
-          signal: controller.signal,
         });
 
-        // If request was aborted, do nothing
-        if (controller.signal.aborted) return;
-
         if (!res.ok) {
-          // Don’t assume expired—just say it didn’t work
+          const text = await res.text().catch(() => "");
-          throw new Error("Confirm failed");
+          throw new Error(text || "Confirm link invalid/expired");
         }
 
-        setStatus("success");
+        const data = await res.json();
-        setMessage("Check your inbox for your secure sign-in link.");
+        const jwt = data.token ?? data.accessToken;
-      } catch (err) {
+        if (!jwt) throw new Error("No token returned from server");
-        if (controller.signal.aborted) return;
 
+        setSession(jwt, {
+          email: data.email,
+          displayName: data.displayName ?? null,
+          role: data.role ?? "USER",
+        });
+
+        setStatus("success");
+        setMessage("Confirmed. Signing you in…");
+        router.replace("/account?welcome=1");
+      } catch (e: any) {
         setStatus("error");
-        setMessage("This link is invalid or expired. Please request a new one.");
+        setMessage(
+          e?.message ||
+            "That link is invalid or expired. Please request a new one."
+        );
       }
     })();
-
+  }, [token, router, setSession]);
-    return () => controller.abort();
-  }, [token]);
 
   return (
     <main className="min-h-screen flex items-center justify-center bg-black text-white px-6">
-      <div className="max-w-md w-full text-center space-y-4">
+      <div className="max-w-md w-full rounded-xl border border-white/10 bg-white/5 p-6 text-center">
-        {status === "loading" && (
+        <h1 className="text-lg font-semibold">Battl Builders</h1>
-          <>
+        <p className="mt-2 text-sm text-zinc-300">{message}</p>
-            <h1 className="text-xl font-semibold">Confirming email…</h1>
-            <p className="text-sm text-zinc-400">{message}</p>
-          </>
-        )}
-
-        {status === "success" && (
-          <>
-            <h1 className="text-xl font-semibold">Email confirmed ✅</h1>
-            <p className="text-sm text-zinc-400">{message}</p>
-          </>
-        )}
 
         {status === "error" && (
-          <>
+          <p className="mt-4 text-xs text-zinc-400">
-            <h1 className="text-xl font-semibold">Link expired or invalid</h1>
+            Go back and request a fresh sign-in link.
-            <p className="text-sm text-zinc-400">{message}</p>
+          </p>
-          </>
         )}
       </div>
     </main>

app/beta/magic/page.tsx

@@ -52,8 +52,8 @@ export default function BetaMagicPage() {
 
         setStatus("success");
         setMessage("You’re in. Redirecting…");
-        router.replace("/builder");
+        router.replace("/account?welcome=1");
-      } catch (e: any) {
+          } catch (e: any) {
         setStatus("error");
         setMessage(e?.message || "Magic link expired. Request a new one.");
       }

app/login/page.tsx

@@ -1,12 +1,15 @@
 // app/login/page.tsx
 "use client";
 
-import { FormEvent, useState } from "react";
+import { FormEvent, useMemo, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { Button, Field, Input } from "@/components/ui/form";
 
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
+
 export default function LoginPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -14,9 +17,18 @@ export default function LoginPage() {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+
   const [error, setError] = useState<string | null>(null);
 
-  const next = searchParams.get("next") || "/builder";
+  // Magic link UI state (separate from password login)
+  const [magicLoading, setMagicLoading] = useState(false);
+  const [magicMessage, setMagicMessage] = useState<string | null>(null);
+  const [magicError, setMagicError] = useState<string | null>(null);
+
+  const next = useMemo(
+    () => searchParams.get("next") || "/builder",
+    [searchParams]
+  );
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
@@ -26,62 +38,151 @@ export default function LoginPage() {
       await login({ email, password });
       router.push(next);
     } catch (err: any) {
-      setError(err.message ?? "Failed to log in");
+      setError(err?.message ?? "Failed to log in");
+    }
+  }
+
+  async function handleMagicLinkRequest() {
+    setMagicMessage(null);
+    setMagicError(null);
+
+    const normalizedEmail = email.trim();
+
+    if (!normalizedEmail) {
+      setMagicError("Please enter your email above first.");
+      return;
+    }
+
+    setMagicLoading(true);
+
+    try {
+      // ✅ This endpoint exists in your AuthController:
+      // POST /api/auth/beta/signup  { email, useCase }
+      const res = await fetch(`${API_BASE_URL}/api/auth/beta/signup`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: normalizedEmail,
+          useCase: "login_magic",
+        }),
+      });
+
+      // Soft-fail (avoid email enumeration)
+      if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        console.error("Magic link request failed:", res.status, text);
+      }
+
+      setMagicMessage(
+        "If that email is eligible, you’ll get a sign-in link shortly ✨"
+      );
+    } catch (e) {
+      console.error(e);
+      // Soft-fail
+      setMagicMessage(
+        "If that email is eligible, you’ll get a sign-in link shortly ✨"
+      );
+    } finally {
+      setMagicLoading(false);
     }
   }
 
   return (
-      <main className="min-h-screen bg-black text-zinc-50">
+    <main className="min-h-screen bg-black text-zinc-50">
-        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+      <div className="mx-auto flex max-w-md flex-col px-4 py-10">
-          <h1 className="text-2xl font-semibold tracking-tight">
+        <h1 className="text-2xl font-semibold tracking-tight">
-            Log In to <span className="text-amber-300">The Armory</span>
+          Log In to <span className="text-amber-300">The Armory</span>
-          </h1>
+        </h1>
-          <p className="mt-2 text-sm text-zinc-400">
+        <p className="mt-2 text-sm text-zinc-400">
-            Use your beta credentials to get back to your saved builds.
+          Use your beta credentials to get back to your saved builds.
-          </p>
+        </p>
 
-          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+        {/* Password Login */}
-            {error && (
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
-                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+          {error && (
-                  {error}
+            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-                </div>
+              {error}
-            )}
+            </div>
+          )}
 
-            <Field label="Email" htmlFor="email">
+          <Field label="Email" htmlFor="email">
-              <Input
+            <Input
-                  id="email"
+              id="email"
-                  type="email"
+              type="email"
-                  autoComplete="email"
+              autoComplete="email"
-                  required
+              required
-                  value={email}
+              value={email}
-                  onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => setEmail(e.target.value)}
-              />
+            />
-            </Field>
+          </Field>
 
-            <Field label="Password" htmlFor="password">
+          <Field label="Password" htmlFor="password">
-              <Input
+            <Input
-                  id="password"
+              id="password"
-                  type="password"
+              type="password"
-                  autoComplete="current-password"
+              autoComplete="current-password"
-                  required
+              required
-                  value={password}
+              value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+              onChange={(e) => setPassword(e.target.value)}
-              />
+            />
-            </Field>
+          </Field>
 
-            <Button type="submit" disabled={loading}>
+          <Button type="submit" disabled={loading}>
-              {loading ? "Signing in…" : "Log In"}
+            {loading ? "Signing in…" : "Log In"}
-            </Button>
+          </Button>
-          </form>
+        </form>
 
-          <p className="mt-4 text-xs text-zinc-500">
+        {/* Divider */}
-            New here?{" "}
+        <div className="mt-8 flex items-center gap-3">
-            <Link href="/register" className="text-amber-300 hover:text-amber-200">
+          <div className="h-px flex-1 bg-white/10" />
-              Join the beta
+          <span className="text-xs text-zinc-500">or</span>
-            </Link>
+          <div className="h-px flex-1 bg-white/10" />
-            .
+        </div>
+
+        {/* Magic Link Request */}
+        <div className="mt-6 space-y-3">
+          <div>
+            <h2 className="text-sm font-medium text-zinc-200">
+              Already a beta user?
+            </h2>
+            <p className="mt-1 text-xs text-zinc-500">
+              Request a one-time sign-in link (no password needed).
+            </p>
+          </div>
+
+          {magicError && (
+            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+              {magicError}
+            </div>
+          )}
+
+          {magicMessage && (
+            <div className="rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-200">
+              {magicMessage}
+            </div>
+          )}
+
+          <Button
+            type="button"
+            disabled={magicLoading}
+            onClick={handleMagicLinkRequest}
+          >
+            {magicLoading ? "Sending link…" : "Email me a sign-in link"}
+          </Button>
+
+          <p className="text-[11px] text-zinc-500">
+            Tip: check spam/promotions. Links expire.
           </p>
         </div>
-      </main>
+
+        <p className="mt-8 text-xs text-zinc-500">
+          New here?{" "}
+          <Link href="/register" className="text-amber-300 hover:text-amber-200">
+            Join the beta
+          </Link>
+          .
+        </p>
+      </div>
+    </main>
   );
-}
+}

app/page.tsx

@@ -205,10 +205,12 @@ export default function HomePage() {
                 </p>
               )}
 
-              <p className="pt-1 text-[10px] leading-relaxed text-zinc-500">
+              <div className="mt-6 text-center text-[11px] text-zinc-500">
-                You can one-click unsubscribe any time with one-click. No data
+                Already invited?{" "}
-                games, no surprise newsletters.
+                <a href="/login" className="underline hover:text-zinc-300">
-              </p>
+                  Log in
+                </a>
+              </div>
             </form>
           </div>
         </section>
@@ -216,7 +218,10 @@ export default function HomePage() {
         {/* Footer strip */}
         <footer className="mt-12 border-t border-zinc-900 pt-4 text-xs text-zinc-500">
           <div className="flex flex-wrap items-center justify-between gap-3">
-            <span>© {new Date().getFullYear()} BATTL BUILDERS<span className="align-super text-[0.9em] ml-0.5">™</span></span>
+            <span>
+              © {new Date().getFullYear()} BATTL BUILDERS
+              <span className="align-super text-[0.9em] ml-0.5">™</span>
+            </span>
             <span className="text-zinc-600">
               v0.1 • Import engine online • Builder UI in progress
             </span>