/* admin.jsx — Last Rose admin panel. Cognito user administration (the ARES panel, ported): list / create / reset-password / reset-authenticator / promote-demote / set demo access / enable-disable / delete. Admin-only (self-installing overlay). Talks to window.lrAdmin. Also hosts the per-user DEMO-ACCESS grid + the deep-link AccessBlocked gate, so entitlements are enforced entirely from this overlay layer (the regenerated hub.jsx / app.jsx stay pristine). */ function _fmtDate(iso) { if (!iso) return "—"; try { return new Date(iso).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); } catch (e) { return "—"; } } // Toggle helper for the pillar grid. "__all__"/"__none__" are select-all / clear sentinels. function _togglePillar(list, id) { if (id === "__none__") return []; if (id === "__all__") return ((window.lrAllPillars && window.lrAllPillars()) || []).map((p) => p.id); return list.indexOf(id) >= 0 ? list.filter((x) => x !== id) : list.concat(id); } function StatusPill({ u, th }) { const map = { CONFIRMED: { label: "Active", bg: "rgba(63,174,106,0.16)", fg: "#3fae6a" }, FORCE_CHANGE_PASSWORD: { label: "Invited", bg: "rgba(214,158,46,0.16)", fg: "#d69e2e" }, RESET_REQUIRED: { label: "Reset", bg: "rgba(214,158,46,0.16)", fg: "#d69e2e" }, }; const s = !u.enabled ? { label: "Disabled", bg: "rgba(216,59,84,0.15)", fg: "#d83b54" } : (map[u.status] || { label: u.status || "—", bg: th.chip, fg: th.sub }); return {s.label}; } /* The 11-card access grid. Data-driven from window.lrAllPillars() (the UNFILTERED pillar list), so it always matches whatever the hub actually ships — add a 12th pillar and the grid grows with zero changes here. `selected` is an array of granted pillar ids. */ function PillarGrid({ th, selected, onToggle, disabled, note }) { const all = (window.lrAllPillars && window.lrAllPillars()) || []; return (
{!disabled && (
·
)}
{all.map((p) => { const on = selected.indexOf(p.id) >= 0; const soon = p.status && p.status !== "live"; return ( ); })}
{note &&
{note}
}
); } /* Modal to edit an existing user's demo access. Local draft state; commits via onSave. */ function AccessModal({ th, user, onClose, onSave }) { const [sel, setSel] = React.useState(Array.isArray(user.pillars) ? user.pillars.slice() : []); const [saving, setSaving] = React.useState(false); const total = ((window.lrAllPillars && window.lrAllPillars()) || []).length; async function save() { setSaving(true); const ok = await onSave(sel); setSaving(false); if (ok) onClose(); } return (
e.stopPropagation()}>
Demo access
{user.email}
setSel((s) => _togglePillar(s, id))} note={`${sel.length} of ${total} demos enabled. Changes apply the next time this user signs in.`} />
); } function AdminPanel({ mode, onBack, onLogout }) { const th = window.SHELL_THEMES[mode] || window.SHELL_THEMES.dark; const [users, setUsers] = React.useState([]); const [me, setMe] = React.useState(""); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(""); const [busy, setBusy] = React.useState(""); const [notice, setNotice] = React.useState(null); // { title, email, password } const [copied, setCopied] = React.useState(false); const [newEmail, setNewEmail] = React.useState(""); const [newRole, setNewRole] = React.useState("lastrose-users"); const [newPillars, setNewPillars] = React.useState([]); // ids granted to the NEW user (default none) const [editUser, setEditUser] = React.useState(null); // row whose access is being edited const totalPillars = ((window.lrAllPillars && window.lrAllPillars()) || []).length; async function refresh() { setLoading(true); setError(""); try { const r = await window.lrAdmin.call("list"); setUsers(r.users || []); setMe(r.me || ""); } catch (e) { setError(e.message || "Could not load users."); if (e && (e.status === 401 || e.status === 403)) { // Backend says we're not (or no longer) an admin — drop the flag so the overlay hides itself. try { localStorage.setItem("lr-isadmin", "0"); } catch (x) {} try { window.dispatchEvent(new Event("lr-auth-changed")); } catch (x) {} } } setLoading(false); } React.useEffect(() => { refresh(); }, []); // opts: { confirm?: string, email?: string }. Returns true only on success. async function act(action, payload, opts) { opts = opts || {}; if (opts.confirm && !window.confirm(opts.confirm)) return false; setBusy(payload.username || payload.email || action); setError(""); let ok = false; try { const r = await window.lrAdmin.call(action, payload); if (r && r.password) { const title = r.reprovisioned ? "Authenticator reset — new temporary password" : action === "create" ? "User created — temporary password" : "Password reset — temporary password"; // Reset actions return only the (UUID) username — prefer the row's email for the handoff. setNotice({ title, email: opts.email || r.email || r.username, password: r.password }); setCopied(false); } await refresh(); ok = true; } catch (e) { setError(e.message || "That action failed."); } setBusy(""); return ok; } async function addUser(e) { e.preventDefault(); const email = newEmail.trim().toLowerCase(); if (!email.includes("@")) { setError("Enter a valid email address."); return; } const isAdmin = newRole === "lastrose-admins"; const ok = await act("create", { email, group: newRole, pillars: isAdmin ? [] : newPillars }, { email }); if (ok) { setNewEmail(""); setNewPillars([]); } // keep the typed address on failure (e.g. "already exists") } function copyPw() { if (!notice) return; try { navigator.clipboard.writeText(notice.password); setCopied(true); setTimeout(() => setCopied(false), 1600); } catch (e) {} } const cardStyle = { background: th.card, border: `1px solid ${th.cardBorder}` }; const btn = (extra) => ({ color: th.ink, background: th.chip, border: `1px solid ${th.cardBorder}`, ...extra }); const newIsAdmin = newRole === "lastrose-admins"; return (
{/* top bar */}
User administration

The pool is invite-only — it is the allowlist. New users get a temporary password (shown once here); on first sign-in they set their own and enroll an authenticator app. Each user only sees the demos you grant them below. Signed in as {me || "—"}.

{/* credential notice */} {notice && (
{notice.title}
{notice.email} — hand this to the user; it won't be shown again.
{notice.password}
)} {error && (
{error}
)} {/* add user */}
setNewEmail(e.target.value)} placeholder="person@company.com" type="email" autoComplete="off" className="h-11 w-full rounded-xl border bg-transparent px-3.5 text-[15px] outline-none" style={{ borderColor: th.cardBorder, color: th.inkStrong }} />
{/* demo-access picker for the new user (disabled for admins — they see all) */}
setNewPillars((s) => _togglePillar(s, id))} note={newIsAdmin ? "Administrators can see every demo and manage users — no need to pick." : "New users start with no access. Pick the demos this person should be able to open."} />
{/* table */}
UserStatusRoleAccessActions
{loading ? (
Loading users…
) : users.length === 0 ? (
No users yet.
) : users.map((u) => { const isMe = (u.email || "").toLowerCase() === (me || "").toLowerCase(); // me = caller email; u.username is a UUID const acting = busy === u.username; const grants = Array.isArray(u.pillars) ? u.pillars.length : 0; return (
{u.email}{isMe && (you)}
Added {_fmtDate(u.created)}
{u.is_admin ? "Admin" : "User"}
{u.is_admin ? ( All demos ) : ( )}
{acting && } act("reset-password", { username: u.username }, { email: u.email, confirm: `Reset the password for ${u.email}? They'll receive a new temporary password.` })} /> act("reset-totp", { username: u.username }, { email: u.email, confirm: `Reset the authenticator for ${u.email}? This re-provisions the account — their old authenticator stops working and a new temporary password is issued.` })} /> {u.is_admin ? act("set-group", { username: u.username, group: "lastrose-admins", add: false }, { email: u.email, confirm: `Remove administrator rights from ${u.email}?` })} /> : act("set-group", { username: u.username, group: "lastrose-admins", add: true }, { email: u.email })} />} {u.enabled ? act("set-enabled", { username: u.username, enabled: false }, { email: u.email, confirm: `Disable sign-in for ${u.email}?` })} /> : act("set-enabled", { username: u.username, enabled: true }, { email: u.email })} />} act("delete", { username: u.username }, { email: u.email, confirm: `Permanently delete ${u.email}? This cannot be undone.` })} />
); })}
{editUser && ( setEditUser(null)} onSave={(pillars) => act("set-pillars", { username: editUser.username, pillars }, { email: editUser.email })} /> )}
); } function IconBtn({ th, icon, title, onClick, disabled, danger }) { return ( ); } window.AdminPanel = AdminPanel; /* ---- Floating launcher (admins only, shown ONLY on the hub so it never sits over a demo) ---- */ function AdminLauncher({ th, onOpen }) { return ( ); } /* ---- Deep-link access gate ---- A signed-in NON-admin who opens a #/deep-link for a demo they weren't granted sees this full-screen block instead of the demo (which is rendered underneath by the app's own root — this simply covers it). Admins and unrestricted/mock sessions never see it. */ function AccessBlocked({ th, pillarTitle }) { return (

This demo isn't in your access.

{pillarTitle ? <>You haven't been granted access to {pillarTitle} yet. : "You haven't been granted access to this demo yet. "} Ask an administrator to enable it for your account.

); } /* ---- Self-installing overlay controller (RELEASE-MANAGED) ---- Renders in its OWN React root, independent of the app. Reads localStorage + the URL hash and renders TWO things: (1) the deep-link AccessBlocked gate for signed-in non-admins on a demo they lack; (2) the admin panel (#/admin) + hub launcher for admins. Couples to the app ONLY through globals + the hash, so a fresh Claude Design export needs ZERO patching to keep entitlements + admin working. */ function lrTopRoute() { return (window.location.hash || "").replace(/^#\/?/, "").split("?")[0].split("/")[0]; } // Portal token still valid? (b64url {exp,...}.sig). Defensive: unparseable → assume valid so a // parsing quirk never locks a real admin out; the backend is the real gate regardless. function lrTokenValid() { try { const t = localStorage.getItem("lr-token"); if (!t) return false; if (t === "mock-session") return true; const p = t.split(".")[0]; if (!p) return false; const b64 = p.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((p.length + 3) % 4); const exp = (JSON.parse(atob(b64)) || {}).exp; return !exp || exp * 1000 > Date.now(); } catch (e) { return true; } } function LrOverlay() { const [, force] = React.useReducer((n) => n + 1, 0); React.useEffect(() => { const on = () => force(); // On login the app sets lr-authed ~0.5s AFTER auth-seam fires lr-auth-changed // (LoginGate delays onAuthed for its "Welcome" animation) — so re-check shortly after too. const onAuth = () => { force(); setTimeout(force, 700); }; const simple = ["hashchange", "popstate", "storage"]; simple.forEach((e) => window.addEventListener(e, on)); window.addEventListener("lr-auth-changed", onAuth); // Smart poll: catches SAME-TAB changes that fire NO event — logout via the hub button // (removeItem fires no 'storage'; navigating to the current hash fires no 'hashchange'), // theme toggles, token expiry, and hash changes into/out of a gated route. Only // re-renders when the observed signature changes. let last = null; const sig = () => [localStorage.getItem("lr-authed"), localStorage.getItem("lr-isadmin"), localStorage.getItem("lr-shell-theme"), !!localStorage.getItem("lr-token"), (window.location.hash || "")].join("|"); last = sig(); const iv = setInterval(() => { const s = sig(); if (s !== last) { last = s; force(); } }, 600); return () => { simple.forEach((e) => window.removeEventListener(e, on)); window.removeEventListener("lr-auth-changed", onAuth); clearInterval(iv); }; }, []); const ls = (k) => { try { return localStorage.getItem(k); } catch (e) { return null; } }; const authed = ls("lr-authed") === "1" && lrTokenValid(); if (!authed) return null; const isAdmin = ls("lr-isadmin") === "1"; const mode = ls("lr-shell-theme") || "dark"; const th = window.SHELL_THEMES[mode] || window.SHELL_THEMES.dark; // (1) Deep-link entitlement gate — signed-in non-admin on a demo route they lack. let gate = null; if (!isAdmin) { const pill = window.lrPillarForRoute ? window.lrPillarForRoute(window.location.hash) : null; if (pill && window.lrEntitled && !window.lrEntitled(pill)) { const p = ((window.lrAllPillars && window.lrAllPillars()) || []).find((x) => x.id === pill); gate = ; } } // (2) Admin UI (admins only). let admin = null; if (isAdmin) { const logout = () => { try { ["lr-authed", "lr-token", "lr-isadmin", "lr-email"].forEach((k) => localStorage.removeItem(k)); } catch (e) {} window.LR_SESSION_TOKEN = null; // Full reload so the app (a separate React root) re-reads auth and shows the login gate. window.location.hash = "#/"; window.location.reload(); }; const top = lrTopRoute(); if (top === "admin") { admin = (
{ window.location.hash = "#/hub"; }} onLogout={logout} />
); } else if (top === "" || top === "hub") { admin = { window.location.hash = "#/admin"; }} />; } } return <>{gate}{admin}; } /* mount into a dedicated root, independent of the app's #root */ (function mountLrOverlay() { if (window.__lrAdminOverlayMounted) return; window.__lrAdminOverlayMounted = true; var el = document.getElementById("lr-admin-overlay"); if (!el) { el = document.createElement("div"); el.id = "lr-admin-overlay"; document.body.appendChild(el); } try { ReactDOM.createRoot(el).render(); } catch (e) { /* React not ready — no overlay */ } })();