feat(admin): live redis kill-switch on tunnel actions, sortable columns + CSV export + bulk actions, Node 24 LTS
WS1: pin all Docker stages to node:24.16.0-alpine; add engines node>=20. WS2: lib/redis.ts gains TTL-backed redisSet, redisDel, setTunnelActive (writes tunnel:active:<sub>=1/0 EX 30, TUNNEL_ACTIVE_TTL override, no-op without REDIS_URL); wired into tunnel active/delete/reassign routes. WS3: sortable columns, CSV export routes (token excluded), and bulk actions (self-account guard) across users/tunnels/audit admin tables.
This commit is contained in:
Gerhard Scheikl
+223
-12
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { formatBytes, formatDate } from '@/lib/format';
|
||||
import type { AdminUserItem } from '@/lib/admin/list';
|
||||
import { SortHeader, downloadUrl, type SortOrder } from '../table-ui';
|
||||
|
||||
const PER_PAGE = 25;
|
||||
|
||||
@@ -11,30 +12,46 @@ function isBanned(u: AdminUserItem): boolean {
|
||||
return !!u.banned_until && new Date(u.banned_until).getTime() > Date.now();
|
||||
}
|
||||
|
||||
type BulkResult = { ok: number; fail: number; skipped: number };
|
||||
|
||||
export function UsersTable({
|
||||
initialUsers,
|
||||
initialTotal,
|
||||
currentUserId,
|
||||
}: {
|
||||
initialUsers: AdminUserItem[];
|
||||
initialTotal: number;
|
||||
currentUserId: string;
|
||||
}) {
|
||||
const [users, setUsers] = useState<AdminUserItem[]>(initialUsers);
|
||||
const [total, setTotal] = useState(initialTotal);
|
||||
const [page, setPage] = useState(1);
|
||||
const [search, setSearch] = useState('');
|
||||
const [sort, setSort] = useState('created_at');
|
||||
const [order, setOrder] = useState<SortOrder>('desc');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [notice, setNotice] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [bulkBusy, setBulkBusy] = useState(false);
|
||||
const [bulkProgress, setBulkProgress] = useState<string | null>(null);
|
||||
|
||||
const queryParams = useCallback(() => {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
perPage: String(PER_PAGE),
|
||||
sort,
|
||||
order,
|
||||
});
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
return params;
|
||||
}, [page, search, sort, order]);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: String(page),
|
||||
perPage: String(PER_PAGE),
|
||||
});
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
const res = await fetch(`/api/admin/users?${params.toString()}`, {
|
||||
const res = await fetch(`/api/admin/users?${queryParams().toString()}`, {
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
if (!res.ok) {
|
||||
@@ -47,12 +64,13 @@ export function UsersTable({
|
||||
};
|
||||
setUsers(data.users);
|
||||
setTotal(data.total);
|
||||
setSelected(new Set());
|
||||
} catch (e) {
|
||||
setError((e as Error).message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [page, search]);
|
||||
}, [queryParams]);
|
||||
|
||||
// The first page is rendered from server-supplied data (see the parent server
|
||||
// component), so skip the initial on-mount fetch — that on-mount request used
|
||||
@@ -67,13 +85,106 @@ export function UsersTable({
|
||||
return () => clearTimeout(t);
|
||||
}, [load]);
|
||||
|
||||
function onSort(col: string) {
|
||||
setPage(1);
|
||||
if (col === sort) {
|
||||
setOrder((o) => (o === 'asc' ? 'desc' : 'asc'));
|
||||
} else {
|
||||
setSort(col);
|
||||
setOrder('asc');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRow(id: string) {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const pageIds = users.map((u) => u.id);
|
||||
const allSelected =
|
||||
pageIds.length > 0 && pageIds.every((id) => selected.has(id));
|
||||
function toggleAll() {
|
||||
setSelected((prev) => {
|
||||
if (pageIds.every((id) => prev.has(id))) return new Set();
|
||||
return new Set(pageIds);
|
||||
});
|
||||
}
|
||||
|
||||
async function runBulk(
|
||||
label: string,
|
||||
perItem: (u: AdminUserItem) => Promise<'ok' | 'fail' | 'skip'>,
|
||||
confirmMsg?: string,
|
||||
) {
|
||||
const targets = users.filter((u) => selected.has(u.id));
|
||||
if (targets.length === 0) return;
|
||||
if (confirmMsg && !window.confirm(confirmMsg)) return;
|
||||
setBulkBusy(true);
|
||||
setError(null);
|
||||
setNotice(null);
|
||||
const result: BulkResult = { ok: 0, fail: 0, skipped: 0 };
|
||||
for (let i = 0; i < targets.length; i++) {
|
||||
setBulkProgress(`${label}: ${i + 1}/${targets.length}…`);
|
||||
try {
|
||||
const r = await perItem(targets[i]);
|
||||
if (r === 'ok') result.ok++;
|
||||
else if (r === 'skip') result.skipped++;
|
||||
else result.fail++;
|
||||
} catch {
|
||||
result.fail++;
|
||||
}
|
||||
}
|
||||
setBulkProgress(null);
|
||||
setBulkBusy(false);
|
||||
const parts = [`${result.ok} ${label.toLowerCase()}`];
|
||||
if (result.skipped) parts.push(`${result.skipped} skipped (self)`);
|
||||
if (result.fail) parts.push(`${result.fail} failed`);
|
||||
setNotice(parts.join(', '));
|
||||
await load();
|
||||
}
|
||||
|
||||
async function banOne(
|
||||
u: AdminUserItem,
|
||||
banned: boolean,
|
||||
): Promise<'ok' | 'fail' | 'skip'> {
|
||||
if (u.id === currentUserId) return 'skip';
|
||||
const res = await fetch(`/api/admin/users/${u.id}/ban`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ banned }),
|
||||
});
|
||||
return res.ok ? 'ok' : 'fail';
|
||||
}
|
||||
|
||||
async function deleteOne(
|
||||
u: AdminUserItem,
|
||||
): Promise<'ok' | 'fail' | 'skip'> {
|
||||
if (u.id === currentUserId) return 'skip';
|
||||
const res = await fetch(`/api/admin/users/${u.id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'same-origin',
|
||||
});
|
||||
return res.ok ? 'ok' : 'fail';
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
const params = new URLSearchParams({ sort, order });
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
downloadUrl(`/api/admin/users/export?${params.toString()}`);
|
||||
}
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
|
||||
const selectedCount = selected.size;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Users</h1>
|
||||
|
||||
<div className="row" style={{ marginBottom: '1rem' }}>
|
||||
<div className="row" style={{ marginBottom: '1rem', flexWrap: 'wrap' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by email…"
|
||||
@@ -87,9 +198,64 @@ export function UsersTable({
|
||||
<button className="secondary btn-sm" onClick={load} type="button">
|
||||
Refresh
|
||||
</button>
|
||||
<div className="toolbar-actions">
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
onClick={exportCsv}
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="error">{error}</p>}
|
||||
{notice && <p className="success">{notice}</p>}
|
||||
|
||||
{selectedCount > 0 && (
|
||||
<div className="bulk-bar">
|
||||
<span className="bulk-count">{selectedCount} selected</span>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() => runBulk('Banned', (u) => banOne(u, true))}
|
||||
>
|
||||
Ban
|
||||
</button>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() => runBulk('Unbanned', (u) => banOne(u, false))}
|
||||
>
|
||||
Unban
|
||||
</button>
|
||||
<button
|
||||
className="btn-danger btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() =>
|
||||
runBulk(
|
||||
'Deleted',
|
||||
deleteOne,
|
||||
`Delete ${selectedCount} selected user(s)? This cannot be undone. Your own account is skipped.`,
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="secondary btn-sm"
|
||||
type="button"
|
||||
disabled={bulkBusy}
|
||||
onClick={() => setSelected(new Set())}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
{bulkProgress && <span className="muted">{bulkProgress}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<p className="muted">Loading…</p>
|
||||
@@ -100,17 +266,61 @@ export function UsersTable({
|
||||
<table className="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th className="col-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label="Select all on page"
|
||||
checked={allSelected}
|
||||
onChange={toggleAll}
|
||||
/>
|
||||
</th>
|
||||
<SortHeader
|
||||
label="Email"
|
||||
col="email"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<SortHeader
|
||||
label="Role"
|
||||
col="role"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<th>Status</th>
|
||||
<th>Tunnel</th>
|
||||
<th>Usage</th>
|
||||
<th>Created</th>
|
||||
<SortHeader
|
||||
label="Last sign-in"
|
||||
col="last_sign_in_at"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
<SortHeader
|
||||
label="Created"
|
||||
col="created_at"
|
||||
sort={sort}
|
||||
order={order}
|
||||
onSort={onSort}
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((u) => (
|
||||
<tr key={u.id}>
|
||||
<tr
|
||||
key={u.id}
|
||||
className={selected.has(u.id) ? 'row-selected' : undefined}
|
||||
>
|
||||
<td className="col-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
aria-label={`Select ${u.email ?? u.id}`}
|
||||
checked={selected.has(u.id)}
|
||||
onChange={() => toggleRow(u.id)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Link href={`/admin/users/${u.id}`}>
|
||||
{u.email ?? u.id}
|
||||
@@ -140,6 +350,7 @@ export function UsersTable({
|
||||
)}`
|
||||
: '—'}
|
||||
</td>
|
||||
<td>{formatDate(u.last_sign_in_at)}</td>
|
||||
<td>{formatDate(u.created_at)}</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user