// AdminGate — protects /#admin behind a bearer-token prompt. The token is the
// ADMIN_TOKEN secret set on the backend via `wrangler secret put ADMIN_TOKEN`.
// On submit we validate it by calling GET /api/admin/roster; on success the
// token is stashed in sessionStorage and reused for every admin request.
const AdminGate = ({ go, children }) => {
const [authed, setAuthed] = React.useState(() => window.api.hasAdminToken());
const [input, setInput] = React.useState('');
const [error, setError] = React.useState('');
const [busy, setBusy] = React.useState(false);
if (authed) return children;
const submit = async () => {
if (busy) return;
if (!input.trim()) { setError('Token required.'); return; }
setBusy(true); setError('');
try {
const ok = await window.api.validateAdminToken(input.trim());
if (ok) {
setAuthed(true);
} else {
setError('Token rejected by server.');
}
} catch (e) {
setError(e.message || 'Network error — backend unreachable.');
} finally {
setBusy(false);
}
};
return (
// ADMIN · RESTRICTED
Sign in.
Paste the admin bearer token to access the panel.
{error ? `TOKEN · ${error.toUpperCase()}` : 'TOKEN'}
{ setInput(e.target.value); if (error) setError(''); }}
onKeyDown={e => { if (e.key === 'Enter') submit(); }}
disabled={busy}
style={{
background: 'transparent', color: T.bone,
border: `1px solid ${error ? T.red : T.rule}`, padding: '10px 12px',
fontFamily: "'JetBrains Mono',monospace", fontSize: 14, letterSpacing: 2, outline: 'none',
opacity: busy ? 0.6 : 1,
}}
/>
{busy ? 'Checking…' : 'Enter →'}
);
};
window.AdminGate = AdminGate;
// Admin — primary tabs: EVENTS | WEBPAGE
// EVENTS — sub-tabs per city + Add Location, includes Resources panel
// WEBPAGE — About content editor + Hero video uploader + Slideshow uploader
//
// Top-level state lives in the Admin component; sub-components receive what
// they need via props.
const ABOUT_TAB_INDEX = -1; // unused legacy sentinel — kept for any deep links
// ── Compact form primitives ───────────────────────────────────────────
const AdminTextField = ({ label, value, onChange }) => (
{label}
onChange?.(e.target.value)}
style={{
background: 'transparent', color: T.bone,
border: `1px solid ${T.rule}`, padding: '8px 10px',
fontFamily: "'Inter',sans-serif", fontSize: 13, outline: 'none',
}}
onFocus={e => (e.target.style.borderColor = T.gold)}
onBlur={e => (e.target.style.borderColor = T.rule)}
/>
);
const AdminTextArea = ({ label, value, onChange, rows = 4 }) => (
{label}