Private
Public Access
Phase 6: Admin portal
Adds is_site_admin-gated site administration: user management (list, deactivate/reactivate, reset password, promote/demote), room management (list all rooms including private ones, archive/unarchive, force-transfer ownership), and an audit log of every admin action. Backend: User.is_active (deactivation) and Room.is_archived (archive) are new columns; AdminAuditLog is a new table matching ARCHITECTURE.md's admin_audit_log design, written to in the same transaction as every mutating admin action. require_site_admin (dependencies.py) gates all /api/admin/* routes. get_current_user now rechecks is_active on every request, so deactivating a user kills their already-open session immediately, not just future logins. An admin can't deactivate or demote their own account (the one self-lockout guard included). Archived rooms drop out of the open-room browse list but stay readable for existing members. Frontend: new /admin route (AdminRoute guard, redirects non-admins to /rooms) with a tabbed Users / Rooms / Audit log / Settings page, plus an "Admin" link in the account menu for site admins. Bot/integration management and system settings -- both listed in the original issue -- are intentionally not here: bot management has nothing to manage until Phase 7 builds the actual bot data model, and there's no settings storage or concrete setting to configure yet. Settings has an empty placeholder tab; bot management is deferred entirely to Phase 7. Confirmed this scope cut with the repo owner before implementing. New tests/test_admin.py (14 tests, full suite now 58/58) covers every admin endpoint's permission gate, the self-action guards, deactivation's immediate effect on an already-open session, and that every mutating action produces exactly one audit log row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -1,8 +1,10 @@
|
||||
import { Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { AuthProvider } from './context/AuthContext'
|
||||
import { AdminRoute } from './components/AdminRoute'
|
||||
import { ProtectedRoute } from './components/ProtectedRoute'
|
||||
import { LoginPage } from './pages/LoginPage'
|
||||
import { ChatShellPage } from './pages/ChatShellPage'
|
||||
import { AdminPage } from './pages/AdminPage'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -25,6 +27,14 @@ function App() {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/admin"
|
||||
element={
|
||||
<AdminRoute>
|
||||
<AdminPage />
|
||||
</AdminRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/rooms" replace />} />
|
||||
</Routes>
|
||||
</AuthProvider>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { apiFetch } from './client'
|
||||
import type { AdminRoom, AdminUser, AuditLogEntry } from '../types'
|
||||
|
||||
export function listAdminUsers(): Promise<AdminUser[]> {
|
||||
return apiFetch<AdminUser[]>('/api/admin/users')
|
||||
}
|
||||
|
||||
export function deactivateUser(userId: string): Promise<AdminUser> {
|
||||
return apiFetch<AdminUser>(`/api/admin/users/${userId}/deactivate`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function reactivateUser(userId: string): Promise<AdminUser> {
|
||||
return apiFetch<AdminUser>(`/api/admin/users/${userId}/reactivate`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function resetUserPassword(userId: string, newPassword: string): Promise<void> {
|
||||
return apiFetch<void>(`/api/admin/users/${userId}/reset-password`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ new_password: newPassword }),
|
||||
})
|
||||
}
|
||||
|
||||
export function promoteUser(userId: string): Promise<AdminUser> {
|
||||
return apiFetch<AdminUser>(`/api/admin/users/${userId}/promote`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function demoteUser(userId: string): Promise<AdminUser> {
|
||||
return apiFetch<AdminUser>(`/api/admin/users/${userId}/demote`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function listAdminRooms(): Promise<AdminRoom[]> {
|
||||
return apiFetch<AdminRoom[]>('/api/admin/rooms')
|
||||
}
|
||||
|
||||
export function archiveRoom(roomId: string): Promise<AdminRoom> {
|
||||
return apiFetch<AdminRoom>(`/api/admin/rooms/${roomId}/archive`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function unarchiveRoom(roomId: string): Promise<AdminRoom> {
|
||||
return apiFetch<AdminRoom>(`/api/admin/rooms/${roomId}/unarchive`, { method: 'POST' })
|
||||
}
|
||||
|
||||
export function transferOwnershipAdmin(roomId: string, newOwnerId: string): Promise<AdminRoom> {
|
||||
return apiFetch<AdminRoom>(`/api/admin/rooms/${roomId}/transfer-ownership`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ new_owner_id: newOwnerId }),
|
||||
})
|
||||
}
|
||||
|
||||
export function listAuditLog(limit = 50, offset = 0): Promise<AuditLogEntry[]> {
|
||||
return apiFetch<AuditLogEntry[]>(`/api/admin/audit-log?limit=${limit}&offset=${offset}`)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { Navigate } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
export function AdminRoute({ children }: { children: ReactNode }) {
|
||||
const { user, loading } = useAuth()
|
||||
|
||||
if (loading) return <p>Loading...</p>
|
||||
if (!user) return <Navigate to="/login" replace />
|
||||
if (!user.is_site_admin) return <Navigate to="/rooms" replace />
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import logo from '../assets/logo.png'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { initials } from '../lib/avatar'
|
||||
@@ -7,6 +8,7 @@ import './TopBar.css'
|
||||
|
||||
export function TopBar() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [pushSubscribed, setPushSubscribed] = useState(false)
|
||||
const [pushBusy, setPushBusy] = useState(false)
|
||||
@@ -58,6 +60,18 @@ export function TopBar() {
|
||||
<div className="top-bar-menu-scrim" onClick={() => setMenuOpen(false)} />
|
||||
<div className="top-bar-menu" role="menu">
|
||||
<div className="top-bar-menu-username">{user.username}</div>
|
||||
{user.is_site_admin && (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setMenuOpen(false)
|
||||
navigate('/admin')
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</button>
|
||||
)}
|
||||
{isPushSupported() && (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
.admin-page {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--ds-void);
|
||||
}
|
||||
|
||||
.admin-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--sp-6) var(--sp-8);
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.admin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--sp-6);
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-tabs {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
|
||||
.admin-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--ds-muted);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
padding: 10px 4px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.admin-tab:hover {
|
||||
color: var(--ds-text);
|
||||
}
|
||||
|
||||
.admin-tab.active {
|
||||
color: var(--ds-accent);
|
||||
border-bottom-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.admin-error {
|
||||
color: var(--ds-danger);
|
||||
font-size: 0.84rem;
|
||||
margin: 0 0 var(--sp-4);
|
||||
}
|
||||
|
||||
.admin-placeholder {
|
||||
color: var(--ds-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
text-align: left;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ds-muted);
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--ds-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.admin-table tbody tr:hover {
|
||||
background: var(--ds-surface);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.status-badge.active {
|
||||
border: 1px solid color-mix(in srgb, var(--ds-accent) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--ds-accent) 14%, transparent);
|
||||
color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.status-badge.inactive {
|
||||
border: 1px solid color-mix(in srgb, var(--ds-danger) 50%, transparent);
|
||||
background: color-mix(in srgb, var(--ds-danger) 14%, transparent);
|
||||
color: var(--ds-danger);
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-actions button {
|
||||
background: transparent;
|
||||
border: 1px solid var(--ds-border);
|
||||
color: var(--ds-muted);
|
||||
font-size: 0.72rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin-actions button:hover:not(:disabled) {
|
||||
color: var(--ds-text);
|
||||
border-color: var(--ds-accent);
|
||||
}
|
||||
|
||||
.admin-actions button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.admin-load-more {
|
||||
margin-top: var(--sp-4);
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
archiveRoom,
|
||||
deactivateUser,
|
||||
demoteUser,
|
||||
listAdminRooms,
|
||||
listAdminUsers,
|
||||
listAuditLog,
|
||||
promoteUser,
|
||||
reactivateUser,
|
||||
resetUserPassword,
|
||||
transferOwnershipAdmin,
|
||||
unarchiveRoom,
|
||||
} from '../api/admin'
|
||||
import { ApiError } from '../api/client'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import type { AdminRoom, AdminUser, AuditLogEntry } from '../types'
|
||||
import { TopBar } from '../components/TopBar'
|
||||
import './AdminPage.css'
|
||||
|
||||
type Tab = 'users' | 'rooms' | 'audit' | 'settings'
|
||||
|
||||
const AUDIT_PAGE_SIZE = 50
|
||||
|
||||
export function AdminPage() {
|
||||
const { user: currentUser } = useAuth()
|
||||
const [tab, setTab] = useState<Tab>('users')
|
||||
const [users, setUsers] = useState<AdminUser[]>([])
|
||||
const [rooms, setRooms] = useState<AdminRoom[]>([])
|
||||
const [auditLog, setAuditLog] = useState<AuditLogEntry[]>([])
|
||||
const [auditHasMore, setAuditHasMore] = useState(true)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
function reportError(err: unknown) {
|
||||
setError(err instanceof ApiError ? err.message : String(err))
|
||||
}
|
||||
|
||||
function loadUsers() {
|
||||
listAdminUsers().then(setUsers).catch(reportError)
|
||||
}
|
||||
|
||||
function loadRooms() {
|
||||
listAdminRooms().then(setRooms).catch(reportError)
|
||||
}
|
||||
|
||||
function loadAuditLog() {
|
||||
listAuditLog(AUDIT_PAGE_SIZE, 0)
|
||||
.then((entries) => {
|
||||
setAuditLog(entries)
|
||||
setAuditHasMore(entries.length === AUDIT_PAGE_SIZE)
|
||||
})
|
||||
.catch(reportError)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'users') loadUsers()
|
||||
if (tab === 'rooms') {
|
||||
loadRooms()
|
||||
if (users.length === 0) loadUsers() // needed to resolve usernames for ownership transfer
|
||||
}
|
||||
if (tab === 'audit') loadAuditLog()
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tab])
|
||||
|
||||
async function withBusy(id: string, action: () => Promise<void>) {
|
||||
setBusyId(id)
|
||||
setError(null)
|
||||
try {
|
||||
await action()
|
||||
} catch (err) {
|
||||
reportError(err)
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleActive(u: AdminUser) {
|
||||
await withBusy(u.id, async () => {
|
||||
const updated = u.is_active ? await deactivateUser(u.id) : await reactivateUser(u.id)
|
||||
setUsers((prev) => prev.map((x) => (x.id === updated.id ? updated : x)))
|
||||
})
|
||||
}
|
||||
|
||||
async function handleTogglePromote(u: AdminUser) {
|
||||
await withBusy(u.id, async () => {
|
||||
const updated = u.is_site_admin ? await demoteUser(u.id) : await promoteUser(u.id)
|
||||
setUsers((prev) => prev.map((x) => (x.id === updated.id ? updated : x)))
|
||||
})
|
||||
}
|
||||
|
||||
async function handleResetPassword(u: AdminUser) {
|
||||
const newPassword = prompt(`New password for ${u.username} (min 8 characters):`)
|
||||
if (!newPassword) return
|
||||
await withBusy(u.id, async () => {
|
||||
await resetUserPassword(u.id, newPassword)
|
||||
})
|
||||
}
|
||||
|
||||
async function handleToggleArchive(r: AdminRoom) {
|
||||
await withBusy(r.id, async () => {
|
||||
const updated = r.is_archived ? await unarchiveRoom(r.id) : await archiveRoom(r.id)
|
||||
setRooms((prev) => prev.map((x) => (x.id === updated.id ? updated : x)))
|
||||
})
|
||||
}
|
||||
|
||||
async function handleTransferOwnership(r: AdminRoom) {
|
||||
const username = prompt(`Transfer #${r.name} to which username? (must already be a member)`)
|
||||
if (!username) return
|
||||
const target = users.find((u) => u.username === username.trim())
|
||||
if (!target) {
|
||||
setError(`No known user named "${username}"`)
|
||||
return
|
||||
}
|
||||
await withBusy(r.id, async () => {
|
||||
const updated = await transferOwnershipAdmin(r.id, target.id)
|
||||
setRooms((prev) => prev.map((x) => (x.id === updated.id ? updated : x)))
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<TopBar />
|
||||
<div className="admin-body">
|
||||
<div className="admin-header">
|
||||
<h1>Admin</h1>
|
||||
<Link to="/rooms" className="btn-secondary">
|
||||
Back to chat
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="admin-tabs" role="tablist">
|
||||
{(['users', 'rooms', 'audit', 'settings'] as const).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={tab === t}
|
||||
className={`admin-tab${tab === t ? ' active' : ''}`}
|
||||
onClick={() => setTab(t)}
|
||||
>
|
||||
{t === 'users' && 'Users'}
|
||||
{t === 'rooms' && 'Rooms'}
|
||||
{t === 'audit' && 'Audit log'}
|
||||
{t === 'settings' && 'Settings'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && <p className="admin-error">{error}</p>}
|
||||
|
||||
{tab === 'users' && (
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id}>
|
||||
<td>{u.username}</td>
|
||||
<td>{u.email}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${u.is_active ? 'active' : 'inactive'}`}>
|
||||
{u.is_active ? 'Active' : 'Deactivated'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`role-badge role-badge-${u.is_site_admin ? 'owner' : 'member'}`}>
|
||||
{u.is_site_admin ? 'Site admin' : 'Member'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="admin-actions">
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyId === u.id || u.id === currentUser?.id}
|
||||
onClick={() => handleToggleActive(u)}
|
||||
>
|
||||
{u.is_active ? 'Deactivate' : 'Reactivate'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={busyId === u.id || u.id === currentUser?.id}
|
||||
onClick={() => handleTogglePromote(u)}
|
||||
>
|
||||
{u.is_site_admin ? 'Demote' : 'Promote'}
|
||||
</button>
|
||||
<button type="button" disabled={busyId === u.id} onClick={() => handleResetPassword(u)}>
|
||||
Reset password
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{tab === 'rooms' && (
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Visibility</th>
|
||||
<th>Status</th>
|
||||
<th>Members</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rooms.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td>#{r.name}</td>
|
||||
<td>{r.is_private ? 'Private' : 'Open'}</td>
|
||||
<td>
|
||||
<span className={`status-badge ${r.is_archived ? 'inactive' : 'active'}`}>
|
||||
{r.is_archived ? 'Archived' : 'Active'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{r.member_count}</td>
|
||||
<td className="admin-actions">
|
||||
<button type="button" disabled={busyId === r.id} onClick={() => handleToggleArchive(r)}>
|
||||
{r.is_archived ? 'Unarchive' : 'Archive'}
|
||||
</button>
|
||||
<button type="button" disabled={busyId === r.id} onClick={() => handleTransferOwnership(r)}>
|
||||
Transfer ownership
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
{tab === 'audit' && (
|
||||
<>
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>When</th>
|
||||
<th>Actor</th>
|
||||
<th>Action</th>
|
||||
<th>Target</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{auditLog.map((e) => (
|
||||
<tr key={e.id}>
|
||||
<td>{new Date(e.created_at).toLocaleString()}</td>
|
||||
<td>{e.actor_username}</td>
|
||||
<td>{e.action}</td>
|
||||
<td>
|
||||
{e.target_type} {e.target_id.slice(0, 8)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{auditHasMore && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn-secondary admin-load-more"
|
||||
onClick={() =>
|
||||
listAuditLog(AUDIT_PAGE_SIZE, auditLog.length)
|
||||
.then((more) => {
|
||||
setAuditLog((prev) => [...prev, ...more])
|
||||
setAuditHasMore(more.length === AUDIT_PAGE_SIZE)
|
||||
})
|
||||
.catch(reportError)
|
||||
}
|
||||
>
|
||||
Load more
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tab === 'settings' && (
|
||||
<p className="admin-placeholder">
|
||||
System settings are coming in a future phase — there's nothing configurable yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -81,3 +81,35 @@ export interface ChatErrorEnvelope {
|
||||
}
|
||||
|
||||
export type ServerEnvelope = ChatMessageEnvelope | ChatJoinedEnvelope | ChatErrorEnvelope
|
||||
|
||||
export interface AdminUser {
|
||||
id: string
|
||||
username: string
|
||||
email: string
|
||||
is_bot: boolean
|
||||
is_site_admin: boolean
|
||||
is_active: boolean
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface AdminRoom {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
is_private: boolean
|
||||
is_archived: boolean
|
||||
owner_id: string
|
||||
created_at: string
|
||||
member_count: number
|
||||
}
|
||||
|
||||
export interface AuditLogEntry {
|
||||
id: string
|
||||
actor_id: string
|
||||
actor_username: string
|
||||
action: string
|
||||
target_type: string
|
||||
target_id: string
|
||||
metadata: Record<string, unknown> | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user