// Authentication & Turnstile integrations using Clerk and Cloudflare Turnstile.
// Reuses the styling classes and layout from mockup.
// Extra icons for user controls
const ic2 = {
user: ,
login: ,
logout: ,
upload: ,
inbox: ,
gear: ,
shield: ,
lock: ,
ban: ,
mute: ,
users: ,
list2: ,
gauge: ,
trash: ,
empty: ,
};
const AVATAR_COLORS = [
'oklch(0.62 0.16 25)', 'oklch(0.62 0.15 50)', 'oklch(0.60 0.14 145)',
'oklch(0.58 0.15 200)', 'oklch(0.56 0.16 265)', 'oklch(0.58 0.17 310)',
'oklch(0.60 0.15 95)', 'oklch(0.58 0.15 170)',
];
// Resolves a stable visual identity claim (initial, color, name) from Clerk's session
function getClerkIdentity() {
if (typeof Clerk === 'undefined' || !Clerk.user) return null;
const user = Clerk.user;
let name = user.firstName;
if (!name) {
name = user.username;
}
if (!name && user.primaryEmailAddress) {
name = user.primaryEmailAddress.emailAddress.split('@')[0];
}
if (!name) {
name = 'Member';
}
// Derive stable avatar background color from name string
const charSum = name.split('').reduce((sum, c) => sum + c.charCodeAt(0), 0);
const color = AVATAR_COLORS[charSum % AVATAR_COLORS.length];
const initial = name[0].toUpperCase();
return {
nick: name,
color,
initial,
avatar_url: user.imageUrl
};
}
// ── Avatar Component ────────────────────────────────────────────────────────
function Avatar({ identity, size = 26, className = '' }) {
if (identity && identity.avatar_url) {
return (
{
// Fallback to text avatar if image loading fails
e.target.style.display = 'none';
}}
/>
);
}
const color = identity?.color || 'var(--border)';
const initial = identity?.initial || '?';
return (
{initial}
);
}
// ── Toast dispatcher ─────────────────────────────────────────────────────────
function pushToast(title, sub, kind) {
if (window.__pushToast) {
window.__pushToast({ title, sub: sub || '', kind: kind || 'success' });
}
}
// ── Sidebar Account Block ────────────────────────────────────────────────────
function AccountBlock({ auth, identity, onOpenLogin, onLogout, onView }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onDoc = (e) => {
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
};
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
if (auth === 'out') {
return (
);
}
const isAdmin = auth === 'admin';
return (
{open && (
{identity.nick}
{isAdmin ? 'Administrator' : 'Member'}
{isAdmin && (
setOpen(false)}>
{ic2.shield}{window.t('admin_dashboard_title')}
{window.ic.ext}
)}
)}
{Array.from({ length: rows }).map((_, i) => (
))}
{icon || ic2.empty}
{title}
{sub &&
{sub}
}
);
}
function ErrorState({ title, sub, onRetry }) {
return (
{window.ic.warning}
{title || window.t('something_went_wrong')}
{sub &&
{sub}
}
{onRetry &&
}
);
}
// ── Cloudflare Turnstile Wrapper ────────────────────────────────────────────
function Turnstile({ verified, onVerify }) {
const containerRef = React.useRef(null);
const widgetIdRef = React.useRef(null);
React.useEffect(() => {
let mounted = true;
const renderWidget = () => {
if (!containerRef.current || !window.turnstile) return;
if (widgetIdRef.current !== null) {
try {
window.turnstile.remove(widgetIdRef.current);
} catch (e) {}
}
try {
widgetIdRef.current = window.turnstile.render(containerRef.current, {
sitekey: window.TURNSTILE_SITE_KEY || "1x00000000000000000000AA", // Local dev testing key fallback
callback: (token) => {
if (mounted) {
onVerify(token);
}
},
"expired-callback": () => {
if (mounted) onVerify(null);
},
"error-callback": () => {
if (mounted) onVerify(null);
}
});
} catch (err) {
console.error("Turnstile rendering error:", err);
}
};
const checkLoaded = () => {
if (window.turnstile) {
renderWidget();
} else {
setTimeout(checkLoaded, 100);
}
};
checkLoaded();
return () => {
mounted = false;
if (widgetIdRef.current !== null && window.turnstile) {
try {
window.turnstile.remove(widgetIdRef.current);
} catch (e) {}
}
};
}, [onVerify]);
return (
);
}
function Spinner({ light }) {
return (
);
}
// Merge icons and helpers globally
Object.assign(window.ic, ic2);
Object.assign(window, {
ic2,
AVATAR_COLORS,
getClerkIdentity,
Avatar,
pushToast,
AccountBlock,
SkeletonList,
EmptyState,
ErrorState,
Turnstile,
Spinner
});