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 ++++++++++++++++++++- .../meshbay-hub/src/meshbay_hub/static/i18n.js | 60 ++++ .../meshbay-hub/src/meshbay_hub/static/style.css | 203 ++++++++++++ 3 files changed, 616 insertions(+), 16 deletions(-) (limited to 'packages/meshbay-hub/src/meshbay_hub/static') 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)} />`}
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/i18n.js b/packages/meshbay-hub/src/meshbay_hub/static/i18n.js index e0242cf..cb5133e 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/i18n.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/i18n.js @@ -117,6 +117,66 @@ const en = { // Sidebar 'sidebar.settings': 'Settings', + 'sidebar.admin': 'Admin', + + // Admin panel + 'admin.title': 'Administration', + 'admin.tab_stats': 'Stats', + 'admin.tab_users': 'Users', + 'admin.tab_groups': 'Groups', + 'admin.tab_logs': 'Logs', + 'admin.tab_blocklist': 'Blocklist', + + // Admin stats + 'admin.stat_users': 'Users', + 'admin.stat_groups': 'Groups', + 'admin.stat_nodes': 'Nodes', + 'admin.stat_online': 'Online Nodes', + + // Admin users + 'admin.users_search': 'Search users...', + 'admin.col_username': 'Username', + 'admin.col_role': 'Role', + 'admin.col_status': 'Status', + 'admin.col_created': 'Created', + 'admin.col_actions': 'Actions', + 'admin.col_email': 'Email', + 'admin.col_groups': 'Groups', + 'admin.no_users': 'No users found', + 'admin.btn_suspend': 'Suspend', + 'admin.btn_unsuspend': 'Unsuspend', + 'admin.btn_details': 'Details', + 'admin.user_detail': 'User details', + 'admin.btn_close': 'Close', + 'admin.self_note': '(you)', + + // Admin groups + 'admin.col_name': 'Name', + 'admin.col_visibility': 'Visibility', + 'admin.col_members': 'Members', + 'admin.no_groups': 'No groups found', + + // Admin logs + 'admin.col_time': 'Time', + 'admin.col_event': 'Event', + 'admin.col_user': 'User', + 'admin.col_ip': 'IP', + 'admin.col_detail': 'Detail', + 'admin.filter_all': 'All events', + 'admin.no_logs': 'No logs found', + 'admin.btn_load_more': 'Load more', + + // Admin blocklist + 'admin.col_hash': 'Hash', + 'admin.col_reason': 'Reason', + 'admin.col_date': 'Date', + 'admin.col_added_by': 'Added by', + 'admin.no_blocked': 'No blocked hashes', + 'admin.add_hash': 'Add hash to blocklist', + 'admin.hash_placeholder': 'blake3 hash (64 hex chars)', + 'admin.reason_placeholder': 'Reason', + 'admin.btn_block': 'Block', + 'admin.btn_unblock': 'Unblock', }; // ── Locale registry ───────────────────────────────────────────────────────── diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index 27e645e..b1b1a7e 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -767,6 +767,209 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } .play-btn:hover { background: var(--bg-raised); border-color: var(--success); } .play-btn:disabled { opacity: 0.3; cursor: not-allowed; } +/* ── Admin panel ─────────────────────────────────────────────────────────── */ + +.admin-tabs { + display: flex; + gap: 4px; + margin-bottom: 20px; + border-bottom: 2px solid var(--border); + flex-wrap: wrap; +} + +.admin-tab { + padding: 8px 16px; + border: none; + background: none; + color: var(--text-secondary); + font-size: 0.9em; + cursor: pointer; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + transition: color 0.15s, border-color 0.15s; +} +.admin-tab:hover { color: var(--text); } +.admin-tab.active { + color: var(--accent); + border-bottom-color: var(--accent); + font-weight: 600; +} + +.admin-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 16px; + margin-bottom: 20px; +} + +.stat-card { + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 8px; + padding: 20px; + text-align: center; +} +.stat-card .stat-value { + font-size: 2rem; + font-weight: 700; + color: var(--accent); +} +.stat-card .stat-label { + font-size: 0.8em; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-dim); + margin-top: 4px; +} + +.admin-toolbar { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; + flex-wrap: wrap; +} + +.admin-search { + flex: 1; + min-width: 180px; + max-width: 300px; + padding: 7px 12px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--bg-base); + color: var(--text); + font-size: 0.9em; +} +.admin-search:focus { outline: none; border-color: var(--border-focus); } + +.admin-select { + padding: 7px 10px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--bg-base); + color: var(--text); + font-size: 0.85em; + cursor: pointer; +} + +.admin-table { + width: 100%; + border-collapse: collapse; + font-size: 0.88em; +} +.admin-table th { + text-align: left; + padding: 8px 10px; + border-bottom: 2px solid var(--border); + color: var(--text-secondary); + font-size: 0.8em; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + white-space: nowrap; +} +.admin-table td { + padding: 8px 10px; + border-bottom: 1px solid var(--border); + vertical-align: middle; +} +.admin-table tr:hover { background: var(--bg-raised); } +.admin-table .admin-empty { + text-align: center; + padding: 24px; + color: var(--text-dim); + font-style: italic; +} + +.admin-actions { display: flex; gap: 6px; } + +.admin-btn { + padding: 4px 10px; + border: 1px solid var(--border); + border-radius: 5px; + background: var(--bg-base); + color: var(--text); + font-size: 0.82em; + cursor: pointer; + white-space: nowrap; +} +.admin-btn:hover { border-color: var(--accent); color: var(--accent); } +.admin-btn.danger { color: var(--error); } +.admin-btn.danger:hover { border-color: var(--error); } +.admin-btn:disabled { opacity: 0.4; cursor: not-allowed; } + +.admin-role-select { + padding: 3px 6px; + border: 1px solid var(--border); + border-radius: 4px; + background: var(--bg-base); + color: var(--text); + font-size: 0.85em; + cursor: pointer; +} + +.admin-detail-overlay { + position: fixed; + inset: 0; + z-index: 150; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; +} + +.admin-detail-card { + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 12px; + padding: 24px; + min-width: 340px; + max-width: 90vw; + box-shadow: var(--shadow-lg); +} + +.admin-detail-card h3 { + margin-bottom: 16px; + font-size: 1.1em; +} + +.admin-detail-row { + display: flex; + justify-content: space-between; + padding: 6px 0; + font-size: 0.9em; +} +.admin-detail-row + .admin-detail-row { + border-top: 1px solid var(--border); +} +.admin-detail-label { color: var(--text-secondary); } +.admin-detail-value { font-weight: 500; } + +.admin-load-more { + display: block; + margin: 16px auto; + padding: 8px 24px; +} + +.blocklist-form { + display: flex; + gap: 8px; + margin-bottom: 16px; + flex-wrap: wrap; +} +.blocklist-form input { + flex: 1; + min-width: 180px; + padding: 7px 12px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--bg-base); + color: var(--text); + font-size: 0.9em; +} +.blocklist-form input:focus { outline: none; border-color: var(--border-focus); } + /* ── Overlay (mobile sidebar backdrop) ────────────────────────────────────── */ .overlay { -- cgit v1.2.3