feat(admin): comprehensive admin interface (users, tunnels, metrics, audit, reserved subdomains)

Adds an authenticated admin surface gated by auth.users.app_metadata.role==='admin'. - lib/auth/admin-guard.ts: requireAdmin() (pages) + requireAdminApi() (routes) - middleware.ts: defense-in-depth /admin and /api/admin guarding - API: users (list/detail/role/ban/delete), tunnels (list + active/quota/reset/reassign/regenerate-token/delete), metrics, audit log, reserved subdomains - Self-lockout prevention (no self demote/ban/delete) - Best-effort Redis kill-switch via dependency-free net-socket client (REDIS_URL) - admin_audit_log + reserved_subdomains migration (RLS on, service-role only) - Admin UI (overview, users, tunnels, reserved, audit) + conditional nav link
2026-05-31 10:58:23 +02:00
parent aad01f1fc5
commit fb4880a1d9
36 changed files with 2936 additions and 2 deletions
@@ -0,0 +1,170 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { formatBytes, formatDate } from '@/lib/format';
+
+type AdminUser = {
+  id: string;
+  email: string | null;
+  role: string;
+  banned_until: string | null;
+  email_confirmed_at: string | null;
+  created_at: string;
+  last_sign_in_at: string | null;
+  tunnel: {
+    subdomain: string;
+    is_active: boolean;
+    bytes_used: number;
+    quota_bytes: number;
+  } | null;
+};
+
+const PER_PAGE = 25;
+
+function isBanned(u: AdminUser): boolean {
+  return !!u.banned_until && new Date(u.banned_until).getTime() > Date.now();
+}
+
+export default function AdminUsersPage() {
+  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  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()}`);
+      if (!res.ok) {
+        const b = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(b.error ?? `Request failed (${res.status})`);
+      }
+      const data = (await res.json()) as { users: AdminUser[]; total: number };
+      setUsers(data.users);
+      setTotal(data.total);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, search]);
+
+  useEffect(() => {
+    const t = setTimeout(load, 250);
+    return () => clearTimeout(t);
+  }, [load]);
+
+  const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
+
+  return (
+    <div>
+      <h1>Users</h1>
+
+      <div className="row" style={{ marginBottom: '1rem' }}>
+        <input
+          type="text"
+          placeholder="Search by email…"
+          value={search}
+          onChange={(e) => {
+            setPage(1);
+            setSearch(e.target.value);
+          }}
+          style={{ maxWidth: 320 }}
+        />
+        <button className="secondary btn-sm" onClick={load} type="button">
+          Refresh
+        </button>
+      </div>
+
+      {error && <p className="error">{error}</p>}
+
+      {loading ? (
+        <p className="muted">Loading…</p>
+      ) : users.length === 0 ? (
+        <p className="muted">No users found.</p>
+      ) : (
+        <div className="admin-table-wrap">
+          <table className="admin-table">
+            <thead>
+              <tr>
+                <th>Email</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th>Tunnel</th>
+                <th>Usage</th>
+                <th>Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u) => (
+                <tr key={u.id}>
+                  <td>
+                    <Link href={`/admin/users/${u.id}`}>
+                      {u.email ?? u.id}
+                    </Link>
+                  </td>
+                  <td>
+                    {u.role === 'admin' ? (
+                      <span className="badge badge-admin">admin</span>
+                    ) : (
+                      <span className="badge">user</span>
+                    )}
+                  </td>
+                  <td>
+                    {isBanned(u) ? (
+                      <span className="badge badge-banned">banned</span>
+                    ) : u.email_confirmed_at ? (
+                      <span className="badge badge-ok">confirmed</span>
+                    ) : (
+                      <span className="badge">unconfirmed</span>
+                    )}
+                  </td>
+                  <td>{u.tunnel ? u.tunnel.subdomain : '—'}</td>
+                  <td>
+                    {u.tunnel
+                      ? `${formatBytes(u.tunnel.bytes_used)} / ${formatBytes(
+                          u.tunnel.quota_bytes,
+                        )}`
+                      : '—'}
+                  </td>
+                  <td>{formatDate(u.created_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="row" style={{ marginTop: '1rem' }}>
+        <button
+          className="secondary btn-sm"
+          type="button"
+          disabled={page <= 1}
+          onClick={() => setPage((p) => Math.max(1, p - 1))}
+        >
+          Prev
+        </button>
+        <span className="muted">
+          Page {page} of {totalPages} ({total} total)
+        </span>
+        <button
+          className="secondary btn-sm"
+          type="button"
+          disabled={page >= totalPages}
+          onClick={() => setPage((p) => p + 1)}
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+}