/* ============================================================ Auth chrome — identity control (top bar), login popover with role-scoped accounts, and the compact review/guest feedback dock. Mirrors the backend tables: users · user_sessions · user_access_grants (SHARED | EDITORIAL) · content_feedback. ============================================================ */ const { useState: uSau, useEffect: uEau, useRef: uRau } = React; /* bilingual chrome labels for the identity control + login popover */ const SIGN = { en: { signin: "Sign in", who: "Sign in", chooseSub: "Enter your email and password to access your space.", emailLabel: "Email", pwLabel: "Password", enter: "Sign in", stay: "Stay connected on this device", badCreds: "Incorrect email or password.", signingIn: "Signing in…", adminMode: "Admin Board", editMode: "Enter edit mode", reviewMode: "Enter review mode", publishMode: "Enter publish mode", testerMode: "Enter tester mode", editHere: "Edit this page", closeAdmin: "Close edit mode", closeEdit: "Close edit mode", closeReview: "Close review mode", closePublish: "Close publish mode", closeTester: "Close tester mode", board: "Admin Board", settings: "Open settings", manage: "Manage roles & shared content", logout: "Log out", account: "Account settings", shared: "Shared with you", seeAll: "See all my shared content", noShared: "No content shared with you yet.", priv: "private", editNote: "You edit drafts & untranslated content. Publishing, settings and users stay locked.", reviewNote: "You can validate pieces in review and leave feedback. Read-only otherwise.", publishNote: "You publish validated pieces and schedule go-live dates. Private pages can't be published.", testerNote: "You preview pre-released (in-review & validated) public pages before they go live." }, fr: { signin: "Connexion", who: "Connexion", chooseSub: "Entrez votre email et votre mot de passe pour acc\u00e9der \u00e0 votre espace.", emailLabel: "Email", pwLabel: "Mot de passe", enter: "Se connecter", stay: "Rester connect\u00e9 sur cet appareil", badCreds: "Email ou mot de passe incorrect.", signingIn: "Connexion\u2026", adminMode: "Tableau d'admin", editMode: "Entrer en mode \u00e9dition", reviewMode: "Entrer en mode relecture", publishMode: "Entrer en mode publication", testerMode: "Entrer en mode testeur", editHere: "\u00c9diter cette page", closeAdmin: "Fermer le mode \u00e9dition", closeEdit: "Fermer le mode \u00e9dition", closeReview: "Fermer le mode relecture", closePublish: "Fermer le mode publication", closeTester: "Fermer le mode testeur", board: "Tableau d'admin", settings: "Ouvrir les r\u00e9glages", manage: "G\u00e9rer les r\u00f4les & contenus partag\u00e9s", logout: "Se d\u00e9connecter", account: "Mon compte", shared: "Partag\u00e9 avec vous", seeAll: "Voir tous mes contenus partag\u00e9s", noShared: "Aucun contenu partag\u00e9 pour l'instant.", priv: "priv\u00e9e", editNote: "Vous \u00e9ditez les brouillons & contenus non traduits. Publication, r\u00e9glages et utilisateurs restent verrouill\u00e9s.", reviewNote: "Vous pouvez valider les contenus en relecture et laisser un feedback. Lecture seule sinon.", publishNote: "Vous publiez les contenus valid\u00e9s et programmez leur mise en ligne. Les pages priv\u00e9es ne peuvent pas \u00eatre publi\u00e9es.", testerNote: "Vous pr\u00e9visualisez les pages en pr\u00e9-sortie (en relecture & valid\u00e9es) avant leur mise en ligne." } }; function useSign() {const { lang } = useNav();return SIGN[lang] || SIGN.en;} /* ============================================================ AUTH MODE — secure email + password sign-in. Sign-in is by EMAIL + PASSWORD. There is no account list and no password is ever shown: the visitor types their own credentials, exactly as they would on the live site. · LIVE (window.__VITRINE_API__ set): POST /api/auth/login verifies the password against the PBKDF2 hash in D1 and sets an HttpOnly session cookie. Nothing sensitive touches the browser. · LOCAL (prototype, no API): credentials are checked against the in-memory store so the demo still works offline — but the UI never reveals which emails exist or what any password is (one generic error for any failure). ============================================================ */ /* verify email + password locally without leaking which part was wrong */ function verifyLocalCredentials(users, email, password) { const e = String(email || "").trim().toLowerCase(); const p = String(password || ""); const u = (users || []).find((x) => String(x.email || "").trim().toLowerCase() === e); if (u && p && String(u.pass) === p) return u; // constant response shape whether email exists or not return null; } /* compact name diminutive — first + last initial → "CR". Single source of truth for BOTH the avatar glyph and the chip label, so they always agree. */ function initialsOf(u) { if (!u) return "?"; const first = String(u.first || "").trim(); const last = String(u.last || "").trim(); if (first || last) { const a = first[0] || ""; const b = last[0] || first.split(/\s+/)[1]?.[0] || ""; return (a + b || first[0] || "?").toUpperCase(); } const parts = String(u.name || "?").trim().split(/\s+/); const a = (parts[0] || "?")[0] || "?"; const b = parts.length > 1 ? parts[parts.length - 1][0] || "" : ""; return (a + b).toUpperCase(); } /* the full display name, derived from first + last (falls back to stored name) */ function fullNameOf(u) { if (!u) return ""; const fl = [u.first, u.last].map((x) => String(x || "").trim()).filter(Boolean).join(" "); return fl || u.name || ""; } /* ---------- account settings (available to every signed-in user) ---------- */ function AccountSettingsModal({ user, onClose }) { const { update } = useStore(); const s = useSign(); // seed last name from the stored value, or split it off the legacy full name const seedLast = user.last || (user.name && user.first ? String(user.name).replace(user.first, "").trim() : "") || ""; const [u, setU] = uSau({ first: user.first || "", last: seedLast, email: user.email || "", company: user.company || "", title: user.title || "" }); const set = (k, v) => setU((p) => ({ ...p, [k]: v })); // live preview object so the avatar/initials update as you type const preview = { ...user, first: u.first, last: u.last }; const save = () => { update((d) => {const x = (d.users || []).find((z) => z.id === user.id);if (x) { x.first = u.first.trim(); x.last = u.last.trim(); x.name = fullNameOf({ first: u.first, last: u.last }) || x.name; x.email = u.email;x.company = u.company;x.title = u.title; }}); onClose(); }; return ( }>
{fullNameOf(preview) || "\u2014"}
{initialsOf(preview)}
set("first", e.target.value)} placeholder="Cannelle" />
set("last", e.target.value)} placeholder="Richter" />
set("email", e.target.value)} placeholder="you@domain.com" />
set("company", e.target.value)} placeholder="Studio / org" />
set("title", e.target.value)} placeholder="Role / title" />
); } /* ---------- small role badge ---------- */ function RoleBadge({ role, size = "sm" }) { const m = roleMeta(role); return ( {m.label} ); } /* ---------- avatar: coloured initials (first + last, e.g. CR) ---------- The circle is tinted by the person's ROLE (so colours map to roles everywhere); falls back to a stored colour for role-less subjects (e.g. anonymous feedback). */ function Avatar({ user, size = 30 }) { if (!user) return null; const init = initialsOf(user); const bg = user.role && roleMeta(user.role).color || user.color || "#211e1a"; return ( 1 ? 0.38 : 0.44) }}>{init}); } /* the ROLE's initial, e.g. Admin → “A” — shown inside the role-coloured circle */ function roleInitialOf(role) {const m = roleMeta(role);return (m.label || "?").trim()[0].toUpperCase();} /* ---------- role avatar: the role initial (A/E/R/P/T/G) in the role colour ---------- */ function RoleAvatar({ role, size = 26 }) { const m = roleMeta(role); return {roleInitialOf(role)}; } /* ---------- identity tag: role circle + the person's initials, tinted by role. ONE consistent identity form — used in the top-bar chip and the board pill. ---------- */ function IdentityTag({ user, size = 26 }) { if (!user) return null; const m = roleMeta(user.role); return ( {initialsOf(user)} ); } /* ===================== LOGIN POPOVER ===================== */ function LoginPopover({ onClose, dark }) { const { db, update } = useStore(); const { login, lang } = useNav(); const fr = lang === "fr"; const s = useSign(); const [email, setEmail] = uSau(""); const [pw, setPw] = uSau(""); const [stay, setStay] = uSau(true); const [err, setErr] = uSau(""); const [busy, setBusy] = uSau(false); const emailRef = uRau(null); uEau(() => {const k = (e) => e.key === "Escape" && onClose();window.addEventListener("keydown", k);return () => window.removeEventListener("keydown", k);}, []); uEau(() => {if (emailRef.current) emailRef.current.focus();}, []); const enter = async () => { if (busy) return; setErr(""); if (!email.trim() || !pw) {setErr(s.badCreds);return;} const api = window.VitrineAPI; // LIVE: verify against D1 through the API (PBKDF2 + HttpOnly cookie). if (api && api.isRemote()) { setBusy(true); try { const res = await api.login(email.trim(), pw, stay); const user = res && res.user; if (!user) throw new Error("no user"); // merge the returned identity into the store so the app resolves the session update((d) => { d.users = d.users || []; const i = d.users.findIndex((u) => u.id === user.id); const shaped = { grants: [], editGrants: [], ...user }; if (i >= 0) d.users[i] = { ...d.users[i], ...shaped };else d.users.push(shaped); }); login(user, stay); onClose(); } catch (e) { setErr(s.badCreds); } finally {setBusy(false);} return; } // LOCAL prototype: check the in-memory store without revealing accounts or passwords. const u = verifyLocalCredentials(db.users, email, pw); if (!u) {setErr(s.badCreds);return;} login(u, stay); onClose(); }; return ( <>
e.stopPropagation()}>
{s.signin.toUpperCase()}

{s.who}

{s.chooseSub}

{setEmail(e.target.value);setErr("");}} onKeyDown={(e) => e.key === "Enter" && enter()} /> {setPw(e.target.value);setErr("");}} onKeyDown={(e) => e.key === "Enter" && enter()} /> {err &&
{err}
} {!(window.VitrineAPI && window.VitrineAPI.isRemote()) && }
); } /* ===================== IDENTITY CONTROL (top bar) ===================== */ function IdentityControl({ dark }) { const { db } = useStore(); const nav = useNav(); const { go, session, role, isAdmin, logout, setEdit, setReview, setPublish, setTmode, edit, reviewMode, publishMode, testerMode, route, lang } = nav; const ed = window.useEdit ? window.useEdit() : {}; const s = useSign(); const [menu, setMenu] = uSau(false); const [loginOpen, setLoginOpen] = uSau(false); const [manage, setManage] = uSau(false); const [acct, setAcct] = uSau(false); const home = db.profile.defaultRoute; const grants = userGrantsRanked(db, session).filter((g) => g.kind !== "section"); if (!session) { return (
{loginOpen && setLoginOpen(false)} dark={dark} />}
); } const editActive = (isAdmin || role === "editor") && edit; const inMode = editActive || reviewMode || publishMode || testerMode; // any focused collaborator mode is active const close = (fn) => {setMenu(false);fn && fn();}; const enterAdmin = () => close(() => go("/board")); // jump straight into editing the CURRENT page (blog → its editor, domain → its panel) const editHere = () => close(() => {setEdit(true);if (route.path === "/board" || route.path === "/admin") go(home);}); const enterEdit = () => close(() => {setEdit(true);go(home);}); const closeEdit = () => close(() => {setEdit(false);go(home);}); const enterReview = () => close(() => {setReview(true);go(home);}); const closeReview = () => close(() => {setReview(false);go(home);}); const enterPublish = () => close(() => {setPublish(true);go(home);}); const closePublish = () => close(() => {setPublish(false);go(home);}); const enterTester = () => close(() => {setTmode(true);go(home);}); const closeTester = () => close(() => {setTmode(false);go(home);}); const toBoard = () => close(() => go("/board")); const openSettings = () => close(() => {setEdit(true);if (ed.setPanelMode) ed.setPanelMode("global");if (ed.setPanelOpen) ed.setPanelOpen(true);go(home);}); const openManage = () => {setMenu(false);setManage(true);}; const doLogout = () => close(() => {logout();go(home);}); const openGrant = (g) => close(() => go(g.route)); const grantIcon = (k) => k === "video" ? "play" : k === "secret" ? "lock" : k === "section" ? "compass" : "edit"; const fr = lang === "fr"; // shared content shown as the SECTIONS it lives in (like the public section tabs) const sharedGroups = (() => { const groups = []; grants.forEach((g) => { const key = g.sectionId || "other"; let grp = groups.find((x) => x.key === key); if (!grp) { const sec = (db.sections || []).find((x) => x.id === g.sectionId); grp = { key, label: sec ? secLabel(sec, lang) : g.sectionLabel || "Other", logo: sec ? sec.logo : g.logo || null, kind: sec ? sec.kind : g.sectionKind, items: [] }; groups.push(grp); } grp.items.push(g); }); return groups; })(); const SharedBlock = () =>
{s.shared}
{sharedGroups.length ? <> {sharedGroups.map((grp) => )} :
{s.noShared}
}
; return (
{menu && <>
setMenu(false)} />
{session.name}

{roleMeta(role).blurb}

{isAdmin && <> {!editActive ? <>
:
} } {role === "editor" &&
{!edit ? : }
{s.editNote}
} {role === "reviewer" &&
{!reviewMode ? : }
{s.reviewNote}
} {role === "publisher" &&
{!publishMode ? : }
{s.publishNote}
} {role === "tester" &&
{!testerMode ? : }
{s.testerNote}
} {(role === "reviewer" || role === "guest" || role === "editor" || role === "tester" || role === "publisher") && !inMode && }
} {manage && window.ManageAccessModal && setManage(false)} />} {acct && setAcct(false)} />}
); } /* ===================== REVIEW / GUEST FEEDBACK DOCK ===================== */ function pageSubject(db, path) { const segs = path.split("/").filter(Boolean); const secByKind = (kind) => (db.sections || []).find((s) => s.kind === kind); if (segs.length === 2) { const c = (db.content || []).find((x) => x.ref === segs[1]); if (c) {const sec = secByKind(c.type);const secL = sec ? sec.label : c.type === "video" ? "Videos" : "Blog";const w = wholeLang(c, "en");const t = w.title || c.ref;return { ref: c.id, label: t, crumb: `${secL}/${t}` };} const sec = (db.sections || []).find((s) => s.route === "/" + segs[0]); if (sec) return { ref: sec.id, label: sec.label, crumb: sec.label }; } if (segs[0] === "other" && segs[1]) { const p = (db.otherPages || []).find((x) => x.route === path); if (p) {const w = pageWholeLang(p, "en");const t = w.label || p.id;return { ref: p.id, label: t, crumb: `Other/${t}` };} } const sec = (db.sections || []).find((s) => s.route === path); if (sec) return { ref: sec.id, label: sec.label, crumb: sec.label }; const dom = (db.domains || []).find((d) => d.route === path); if (dom) return { ref: dom.id, label: dom.label, crumb: dom.label }; if (path === "/about") return { ref: "about", label: "About me", crumb: "About me" }; if (path === "/shared") return { ref: "shared", label: "Shared content", crumb: "Shared content" }; if (path === "/" || path === "") {const h = (db.domains || [])[0];return { ref: h ? h.id : "home", label: h ? h.label : "Home", crumb: h ? h.label : "Home" };} return { ref: "page", label: "This page", crumb: "This page" }; } function ReviewFeedbackDock() { const { db, update } = useStore(); const { route, session, role, lang } = useNav(); const [open, setOpen] = uSau(false); const [text, setText] = uSau(""); const [sent, setSent] = uSau(false); const subj = pageSubject(db, route.path); const m = roleMeta(role); const fr = lang === "fr"; const send = () => { if (!text.trim()) return; update((d) => { d.contentFeedback = d.contentFeedback || []; d.contentFeedback.unshift({ id: uid("cf"), target: subj.ref, targetLabel: subj.label, lang, by: session.name, byColor: session.color, role, date: new Date().toISOString().slice(0, 10), text: text.trim() }); d.notifications.unshift({ id: uid("n"), tile: "t3", time: new Date().toISOString().slice(0, 16).replace("T", " "), text: `${m.label} feedback from ${session.first} on “${subj.label}”.` }); }); setSent(true);setText(""); setTimeout(() => {setSent(false);setOpen(false);}, 1500); }; return (
{open ?
Feedback {session && }
{fr ? "Sur" : "On"} {subj.crumb}
{sent ?
{fr ? "Envoyé — merci !" : "Sent — thank you!"}
: <>