From c8f2de4025ea67b579e66cf608f08a8d35ee4a3c Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Tue, 11 Aug 2026 11:50:08 +0200 Subject: feat(hub): Phase 10.1–10.4 — Site overlay + admin/moderation UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Site overlay: landing page, /about, /downloads (dark/light, responsive) - User role column (user/moderator/admin) with config-based admin sync - require_moderator dependency + admin API (8 endpoints: stats, users, groups, audit logs) - Admin SPA panel at #/admin with 5 tabs (stats, users, groups, logs, blocklist) — visible only to moderators/admins - SPA also served at /app/ for Caddy site overlay integration - GET /v1/users/me returns current user role - 15 new tests, 147 total passing Co-Authored-By: Claude Opus 4.6 --- packages/meshbay-hub/src/meshbay_hub/static/app.js | 369 ++++++++++++++++++++- 1 file changed, 353 insertions(+), 16 deletions(-) (limited to 'packages/meshbay-hub/src/meshbay_hub/static/app.js') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js index 2179e99..d36a0a1 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js @@ -113,7 +113,8 @@ function Nav({ user, theme, onThemeToggle, onLogout, onMenuToggle }) { // ── Sidebar ────────────────────────────────────────────────────────────────── -function Sidebar({ groups, route, menuOpen }) { +function Sidebar({ groups, route, menuOpen, role }) { + const isStaff = role === 'moderator' || role === 'admin'; return html` `; @@ -994,6 +999,338 @@ function SettingsPage({ user, theme, onThemeChange }) { `; } +// ── Admin Panel ───────────────────────────────────────────────────────────── + +function AdminPage({ token }) { + const [tab, setTab] = useState('stats'); + const [stats, setStats] = useState(null); + const [users, setUsers] = useState([]); + const [usersTotal, setUsersTotal] = useState(0); + const [userSearch, setUserSearch] = useState(''); + const [groups, setGroups] = useState([]); + const [groupsTotal, setGroupsTotal] = useState(0); + const [logs, setLogs] = useState([]); + const [logEvent, setLogEvent] = useState(''); + const [logOffset, setLogOffset] = useState(0); + const [blocklist, setBlocklist] = useState([]); + const [detailUser, setDetailUser] = useState(null); + const [error, setError] = useState(''); + + const headers = { Authorization: `Bearer ${token}` }; + + const loadStats = useCallback(async () => { + try { + const data = await hubFetch('/v1/admin/stats', { token }); + setStats(data); + } catch (e) { setError(e.message); } + }, [token]); + + const loadUsers = useCallback(async (q = '') => { + try { + const data = await hubFetch(`/v1/admin/users?q=${encodeURIComponent(q)}&limit=100`, { token }); + setUsers(data.users); + setUsersTotal(data.total); + } catch (e) { setError(e.message); } + }, [token]); + + const loadGroups = useCallback(async () => { + try { + const data = await hubFetch('/v1/admin/groups?limit=100', { token }); + setGroups(data.groups); + setGroupsTotal(data.total); + } catch (e) { setError(e.message); } + }, [token]); + + const loadLogs = useCallback(async (event = '', offset = 0, append = false) => { + try { + let url = `/v1/admin/logs?limit=50&offset=${offset}`; + if (event) url += `&event=${encodeURIComponent(event)}`; + const data = await hubFetch(url, { token }); + setLogs(prev => append ? [...prev, ...data.logs] : data.logs); + } catch (e) { setError(e.message); } + }, [token]); + + const loadBlocklist = useCallback(async () => { + try { + const data = await hubFetch('/v1/admin/blocklist', { token }); + setBlocklist(data.entries); + } catch (e) { setError(e.message); } + }, [token]); + + useEffect(() => { + setError(''); + if (tab === 'stats') loadStats(); + else if (tab === 'users') loadUsers(userSearch); + else if (tab === 'groups') loadGroups(); + else if (tab === 'logs') { setLogOffset(0); loadLogs(logEvent, 0); } + else if (tab === 'blocklist') loadBlocklist(); + }, [tab]); + + const patchUser = useCallback(async (userId, patch) => { + try { + await hubFetch(`/v1/admin/users/${userId}`, { method: 'PATCH', body: patch, token }); + loadUsers(userSearch); + if (detailUser && detailUser.id === userId) setDetailUser(null); + } catch (e) { setError(e.message); } + }, [token, userSearch, detailUser]); + + const patchGroup = useCallback(async (groupId, patch) => { + try { + await hubFetch(`/v1/admin/groups/${groupId}`, { method: 'PATCH', body: patch, token }); + loadGroups(); + } catch (e) { setError(e.message); } + }, [token]); + + const showUserDetail = useCallback(async (userId) => { + try { + const data = await hubFetch(`/v1/admin/users/${userId}`, { token }); + setDetailUser(data); + } catch (e) { setError(e.message); } + }, [token]); + + const addToBlocklist = useCallback(async (hash, reason) => { + try { + await hubFetch('/v1/admin/blocklist', { method: 'POST', body: { content_hash: hash, reason }, token }); + loadBlocklist(); + } catch (e) { setError(e.message); } + }, [token]); + + const removeFromBlocklist = useCallback(async (hash) => { + try { + await hubFetch(`/v1/admin/blocklist/${hash}`, { method: 'DELETE', token }); + loadBlocklist(); + } catch (e) { setError(e.message); } + }, [token]); + + const TABS = ['stats', 'users', 'groups', 'logs', 'blocklist']; + + return html` +
+

${t('admin.title')}

+ ${error && html`
${error}
`} + +
+ ${TABS.map(k => html` + + `)} +
+ + ${tab === 'stats' && stats && html` +
+ ${[['users', 'stat_users'], ['groups', 'stat_groups'], + ['nodes', 'stat_nodes'], ['online_nodes', 'stat_online']].map(([k, label]) => html` +
+
${stats[k]}
+
${t('admin.' + label)}
+
+ `)} +
+ `} + + ${tab === 'users' && html` +
+ { setUserSearch(e.target.value); loadUsers(e.target.value); }} /> + ${usersTotal} total +
+ + + + + + + + + + ${users.length === 0 && html``} + ${users.map(u => html` + + + + + + + + `)} + +
${t('admin.col_username')}${t('admin.col_role')}${t('admin.col_status')}${t('admin.col_created')}${t('admin.col_actions')}
${t('admin.no_users')}
${u.username} + + ${u.status}${new Date(u.created_at).toLocaleDateString()} + + ${u.status === 'active' + ? html`` + : u.status === 'suspended' + ? html`` + : null + } +
+ `} + + ${tab === 'groups' && html` +
+ ${groupsTotal} total +
+ + + + + + + + + + + ${groups.length === 0 && html``} + ${groups.map(g => html` + + + + + + + + + `)} + +
${t('admin.col_name')}${t('admin.col_visibility')}${t('admin.col_members')}${t('admin.col_status')}${t('admin.col_created')}${t('admin.col_actions')}
${t('admin.no_groups')}
${g.name}${g.visibility}${g.member_count}${g.status}${new Date(g.created_at).toLocaleDateString()} + ${g.status === 'active' + ? html`` + : g.status === 'suspended' + ? html`` + : null + } +
+ `} + + ${tab === 'logs' && html` +
+ +
+ + + + + + + + + ${logs.length === 0 && html``} + ${logs.map(lg => html` + + + + + + + `)} + +
${t('admin.col_time')}${t('admin.col_event')}${t('admin.col_ip')}${t('admin.col_detail')}
${t('admin.no_logs')}
${new Date(lg.timestamp).toLocaleString()}${lg.event}${lg.ip_address}${lg.detail || ''}
+ ${logs.length > 0 && logs.length % 50 === 0 && html` + + `} + `} + + ${tab === 'blocklist' && html` + <${BlocklistForm} onAdd=${addToBlocklist} /> + + + + + + + + + + ${blocklist.length === 0 && html``} + ${blocklist.map(b => html` + + + + + + + + `)} + +
${t('admin.col_hash')}${t('admin.col_reason')}${t('admin.col_date')}${t('admin.col_added_by')}${t('admin.col_actions')}
${t('admin.no_blocked')}
${b.hash.slice(0, 16)}...${b.reason}${new Date(b.added_at).toLocaleDateString()}${b.added_by || ''} + +
+ `} + + ${detailUser && html` +
{ + if (e.target.classList.contains('admin-detail-overlay')) setDetailUser(null); + }}> +
+

${t('admin.user_detail')}

+ ${[ + ['admin.col_username', detailUser.username], + ['admin.col_email', detailUser.email], + ['admin.col_role', detailUser.role], + ['admin.col_status', detailUser.status], + ['admin.col_created', new Date(detailUser.created_at).toLocaleString()], + ['admin.col_groups', detailUser.group_count], + ].map(([label, val]) => html` +
+ ${t(label)} + ${val} +
+ `)} + +
+
+ `} +
+ `; +} + +function BlocklistForm({ onAdd }) { + const [hash, setHash] = useState(''); + const [reason, setReason] = useState(''); + + const submit = (e) => { + e.preventDefault(); + if (hash.length === 64 && reason) { + onAdd(hash, reason); + setHash(''); + setReason(''); + } + }; + + return html` +
+ setHash(e.target.value)} + pattern="[0-9a-f]{64}" required /> + setReason(e.target.value)} required /> + +
+ `; +} + // ── App ────────────────────────────────────────────────────────────────────── function App() { @@ -1026,29 +1363,24 @@ function App() { const authCtx = { user, login: async (username, password) => { + let token, refreshToken; if (window.MeshBayKeys) { const data = await window.MeshBayKeys.loginAndRecover(username, password); _sessionKeys = { skXB64: data.skXB64, skEdB64: data.skEdB64 }; - const u = { - username, - token: data.accessToken, - refreshToken: data.refreshToken, - }; - setUser(u); - saveAuth(u); + token = data.accessToken; + refreshToken = data.refreshToken; } else { const data = await hubFetch('/v1/users/login', { method: 'POST', body: { username, password }, }); - const u = { - username, - token: data.access_token, - refreshToken: data.refresh_token, - }; - setUser(u); - saveAuth(u); + token = data.access_token; + refreshToken = data.refresh_token; } + const me = await hubFetch('/v1/users/me', { token }); + const u = { username, token, refreshToken, role: me.role }; + setUser(u); + saveAuth(u); }, logout: () => { setUser(null); @@ -1073,6 +1405,10 @@ function App() { page = html`<${GroupPage} groupId=${groupId} group=${group} token=${user.token} username=${user.username} />`; + } else if (route === '/admin') { + page = (user.role === 'moderator' || user.role === 'admin') + ? html`<${AdminPage} token=${user.token} />` + : html`<${HomePage} groups=${groups} />`; } else if (route === '/settings') { page = html`<${SettingsPage} user=${user} theme=${theme} onThemeChange=${setTheme} />`; @@ -1092,7 +1428,8 @@ function App() { ${user && html`<${Sidebar} groups=${groups} route=${route} - menuOpen=${menuOpen} />`} + menuOpen=${menuOpen} + role=${user.role} />`} ${menuOpen && html`
setMenuOpen(false)} />`}
-- cgit v1.2.3