dataforge/unibus_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(spa): create user via invite link, permanent delete, pending invites

Browse Source 
Users tab gains the wallet-model account flow:

- "Crear usuario" button -> modal (handle + role + expiry) -> POST /api/invites
  -> shows the copyable single-use join link (<client-base>/join?token=…). Warns
  when the gateway has no client base URL configured (falls back to the panel's
  own origin).
- Per-row "Eliminar" -> STRONG confirmation modal that requires typing the handle
  and spells out the permanence and the difference from revoke -> DELETE
  /api/users/{pub}.
- Pending invites card: handle, role, partial token, expiry, copy-link.

Includes the rebuilt embedded SPA bundle (web/dist) so the Go binary ships the
new UI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Egutierrez
2026-06-07 22:28:44 +02:00
parent f65271dc92
commit bfd4a99100
7 changed files with 466 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/dist/assets/index-CGRScjCy.js
Vendored
-158
View File
File diff suppressed because one or more lines are too long
web/dist/assets/index-Dg19WJJu.js
Vendored
+191
View File
File diff suppressed because one or more lines are too long
web/dist/index.html
Vendored
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>unibus · admin</title> <title>unibus · admin</title>
<script type="module" crossorigin src="/assets/index-CGRScjCy.js"></script> <script type="module" crossorigin src="/assets/index-Dg19WJJu.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ndvieWwa.css"> <link rel="stylesheet" crossorigin href="/assets/index-ndvieWwa.css">
</head> </head>
<body> <body>
web/src/AdminShell.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export function AdminShell({ me }: { me: MeInfo }) {
<AppShell.Main> <AppShell.Main>
{tab === "cluster" && <ClusterPage />} {tab === "cluster" && <ClusterPage />}
{tab === "rooms" && <RoomsPage />} {tab === "rooms" && <RoomsPage />}
{tab === "users" && <UsersPage usersBackend={me.users_backend} />} {tab === "users" && <UsersPage usersBackend={me.users_backend} joinBaseURL={me.join_base_url} />}
</AppShell.Main> </AppShell.Main>
</AppShell> </AppShell>
); );
web/src/api.ts
+13
View File
@@ -4,8 +4,10 @@
// and real, and never signs or speaks NATS itself. // and real, and never signs or speaks NATS itself.
import type { import type {
AddUserReq, AddUserReq,
CreateInviteReq,
CreateRoomReq, CreateRoomReq,
InviteReq, InviteReq,
InviteView,
MeInfo, MeInfo,
MemberView, MemberView,
NodeHealth, NodeHealth,
@@ -76,4 +78,15 @@ export const api = {
method: "POST", method: "POST",
body: JSON.stringify({ sign_pub: signPub }), body: JSON.stringify({ sign_pub: signPub }),
}), }),
deleteUser: (signPub: string) =>
req<{ status: string }>(`/api/users/${encodeURIComponent(signPub)}`, {
method: "DELETE",
}),
listInvites: () => req<InviteView[]>("/api/invites"),
createInvite: (r: CreateInviteReq) =>
req<InviteView>("/api/invites", {
method: "POST",
body: JSON.stringify(r),
}),
}; };
web/src/pages/UsersPage.tsx
+243 -15
View File
@@ -1,12 +1,15 @@
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { import {
ActionIcon, ActionIcon,
Alert,
Badge, Badge,
Button, Button,
Card, Card,
CopyButton,
Group, Group,
Loader, Loader,
Modal, Modal,
NumberInput,
Select, Select,
Stack, Stack,
Table, Table,
@@ -17,26 +20,49 @@ import {
} from "@mantine/core"; } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks"; import { useDisclosure } from "@mantine/hooks";
import { notifications } from "@mantine/notifications"; import { notifications } from "@mantine/notifications";
import { IconPlus, IconRefresh, IconUserOff } from "@tabler/icons-react"; import {
IconAlertTriangle,
IconCheck,
IconCopy,
IconPlus,
IconRefresh,
IconTicket,
IconTrash,
IconUserOff,
} from "@tabler/icons-react";
import { api, ApiError } from "../api"; import { api, ApiError } from "../api";
import type { UserView } from "../types"; import type { InviteView, UserView } from "../types";
import { fmtTime, trunc } from "../util"; import { fmtTime, trunc } from "../util";
function notifyErr(e: unknown) { function notifyErr(e: unknown) {
notifications.show({ color: "red", title: "Error", message: e instanceof ApiError ? e.message : String(e) }); notifications.show({ color: "red", title: "Error", message: e instanceof ApiError ? e.message : String(e) });
} }
export function UsersPage({ usersBackend }: { usersBackend: string }) { // resolveJoinURL prefers the gateway-built link; when the gateway has no client
// base URL configured it falls back to the panel's own origin so the link is at
// least clickable, and the caller surfaces a warning to configure it properly.
function resolveJoinURL(inv: { join_url: string; token: string }): string {
if (inv.join_url) return inv.join_url;
return `${window.location.origin}/join?token=${inv.token}`;
}
export function UsersPage({ usersBackend, joinBaseURL }: { usersBackend: string; joinBaseURL: string }) {
const [users, setUsers] = useState<UserView[] | null>(null); const [users, setUsers] = useState<UserView[] | null>(null);
const [invites, setInvites] = useState<InviteView[]>([]);
const [err, setErr] = useState<string | null>(null); const [err, setErr] = useState<string | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [addOpen, addCtl] = useDisclosure(false); const [addOpen, addCtl] = useDisclosure(false);
const [createOpen, createCtl] = useDisclosure(false);
const [toDelete, setToDelete] = useState<UserView | null>(null);
const load = useCallback(() => { const load = useCallback(() => {
setLoading(true); setLoading(true);
api Promise.all([api.listUsers(), api.listInvites().catch(() => [] as InviteView[])])
.listUsers() .then(([u, inv]) => {
.then((u) => { setUsers(u); setErr(null); }) setUsers(u);
setInvites(inv);
setErr(null);
})
.catch((e: ApiError) => setErr(e.message)) .catch((e: ApiError) => setErr(e.message))
.finally(() => setLoading(false)); .finally(() => setLoading(false));
}, []); }, []);
@@ -44,7 +70,7 @@ export function UsersPage({ usersBackend }: { usersBackend: string }) {
useEffect(() => { load(); }, [load]); useEffect(() => { load(); }, [load]);
const revoke = async (u: UserView) => { const revoke = async (u: UserView) => {
if (!window.confirm(`¿Revocar a "${u.handle}"? Pierde acceso al bus en AMBOS planos de inmediato (control y datos).`)) return; if (!window.confirm(`¿Revocar a "${u.handle}"? Pierde acceso al bus en AMBOS planos de inmediato (control y datos). La identidad permanece en la lista como revocada (auditable).`)) return;
try { try {
await api.revokeUser(u.sign_pub); await api.revokeUser(u.sign_pub);
notifications.show({ color: "teal", title: "Revocado", message: u.handle }); notifications.show({ color: "teal", title: "Revocado", message: u.handle });
@@ -72,8 +98,11 @@ export function UsersPage({ usersBackend }: { usersBackend: string }) {
<IconRefresh size={18} /> <IconRefresh size={18} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Button leftSection={<IconPlus size={16} />} onClick={addCtl.open}> <Button variant="default" leftSection={<IconPlus size={16} />} onClick={addCtl.open}>
Añadir user Añadir user (clave conocida)
</Button>
<Button leftSection={<IconTicket size={16} />} onClick={createCtl.open}>
Crear usuario
</Button> </Button>
</Group> </Group>
</Group> </Group>
@@ -81,6 +110,48 @@ export function UsersPage({ usersBackend }: { usersBackend: string }) {
{err && <Text c="red">{err}</Text>} {err && <Text c="red">{err}</Text>}
{!users && !err && <Loader color="brand" />} {!users && !err && <Loader color="brand" />}
{invites.length > 0 && (
<Card withBorder bg="dark.7" radius="md">
<Stack gap="sm">
<Group gap="sm">
<IconTicket size={18} />
<Text fw={600}>Invitaciones pendientes</Text>
<Badge color="brand" variant="light">{invites.length}</Badge>
</Group>
<Table verticalSpacing="xs" horizontalSpacing="md">
<Table.Thead>
<Table.Tr>
<Table.Th>Handle</Table.Th>
<Table.Th>Rol</Table.Th>
<Table.Th>Token</Table.Th>
<Table.Th>Caduca</Table.Th>
<Table.Th>Enlace</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{invites.map((inv) => (
<Table.Tr key={inv.token}>
<Table.Td><Text fw={600}>{inv.handle}</Text></Table.Td>
<Table.Td><Badge variant="dot" color={inv.role === "admin" ? "brand" : "gray"}>{inv.role}</Badge></Table.Td>
<Table.Td><Text size="xs" c="dimmed" style={{ fontFamily: "monospace" }}>{trunc(inv.token, 10, 6)}</Text></Table.Td>
<Table.Td><Text size="xs" c="dimmed">{fmtTime(inv.expires_at)}</Text></Table.Td>
<Table.Td>
<CopyButton value={resolveJoinURL(inv)}>
{({ copied, copy }) => (
<Button size="xs" variant="light" color={copied ? "teal" : "brand"} leftSection={copied ? <IconCheck size={14} /> : <IconCopy size={14} />} onClick={copy}>
{copied ? "Copiado" : "Copiar enlace"}
</Button>
)}
</CopyButton>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Stack>
</Card>
)}
{users && ( {users && (
<Card withBorder bg="dark.7" p={0} radius="md"> <Card withBorder bg="dark.7" p={0} radius="md">
<Table verticalSpacing="sm" horizontalSpacing="md" highlightOnHover> <Table verticalSpacing="sm" horizontalSpacing="md" highlightOnHover>
@@ -109,13 +180,20 @@ export function UsersPage({ usersBackend }: { usersBackend: string }) {
</Table.Td> </Table.Td>
<Table.Td><Text size="xs" c="dimmed">{fmtTime(u.created_at)}</Text></Table.Td> <Table.Td><Text size="xs" c="dimmed">{fmtTime(u.created_at)}</Text></Table.Td>
<Table.Td> <Table.Td>
{u.status === "active" && ( <Group gap={4} justify="flex-end" wrap="nowrap">
<Tooltip label="Revocar acceso"> {u.status === "active" && (
<ActionIcon variant="subtle" color="red" onClick={() => revoke(u)}> <Tooltip label="Revocar acceso (deja rastro auditable)">
<IconUserOff size={16} /> <ActionIcon variant="subtle" color="orange" onClick={() => revoke(u)}>
<IconUserOff size={16} />
</ActionIcon>
</Tooltip>
)}
<Tooltip label="Eliminar (borrado permanente)">
<ActionIcon variant="subtle" color="red" onClick={() => setToDelete(u)}>
<IconTrash size={16} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
)} </Group>
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
))} ))}
@@ -125,10 +203,14 @@ export function UsersPage({ usersBackend }: { usersBackend: string }) {
)} )}
<AddUserModal opened={addOpen} onClose={addCtl.close} onAdded={load} /> <AddUserModal opened={addOpen} onClose={addCtl.close} onAdded={load} />
<CreateInviteModal opened={createOpen} onClose={createCtl.close} onCreated={load} joinBaseURL={joinBaseURL} />
<DeleteUserModal user={toDelete} onClose={() => setToDelete(null)} onDeleted={load} />
</Stack> </Stack>
); );
} }
// AddUserModal registers a user from a sign_pub the admin already holds (the
// pre-invite flow, kept for advanced use). The wallet-model path is CreateInvite.
function AddUserModal({ opened, onClose, onAdded }: { opened: boolean; onClose: () => void; onAdded: () => void }) { function AddUserModal({ opened, onClose, onAdded }: { opened: boolean; onClose: () => void; onAdded: () => void }) {
const [handle, setHandle] = useState(""); const [handle, setHandle] = useState("");
const [signPub, setSignPub] = useState(""); const [signPub, setSignPub] = useState("");
@@ -153,8 +235,12 @@ function AddUserModal({ opened, onClose, onAdded }: { opened: boolean; onClose:
const ready = handle.trim().length > 0 && signPub.trim().length === 64; const ready = handle.trim().length > 0 && signPub.trim().length === 64;
return ( return (
<Modal opened={opened} onClose={onClose} title="Añadir user al bus" centered> <Modal opened={opened} onClose={onClose} title="Añadir user (clave ya conocida)" centered>
<Stack gap="sm"> <Stack gap="sm">
<Text size="xs" c="dimmed">
Para cuando ya tienes la clave pública del usuario. Para el alta normal sin manejar
claves, usa «Crear usuario» (enlace de invitación).
</Text>
<TextInput label="Handle" placeholder="ana" value={handle} onChange={(e) => setHandle(e.currentTarget.value)} data-autofocus /> <TextInput label="Handle" placeholder="ana" value={handle} onChange={(e) => setHandle(e.currentTarget.value)} data-autofocus />
<TextInput <TextInput
label="sign_pub (hex, 64)" label="sign_pub (hex, 64)"
@@ -173,3 +259,145 @@ function AddUserModal({ opened, onClose, onAdded }: { opened: boolean; onClose:
</Modal> </Modal>
); );
} }
// CreateInviteModal is the wallet-model account creation: the admin fixes a handle
// and role and gets back a single-use join link. The admin never sees a private
// key — the user generates its own keypair when it opens the link.
function CreateInviteModal({
opened,
onClose,
onCreated,
joinBaseURL,
}: {
opened: boolean;
onClose: () => void;
onCreated: () => void;
joinBaseURL: string;
}) {
const [handle, setHandle] = useState("");
const [role, setRole] = useState<string>("member");
const [days, setDays] = useState<number | string>(7);
const [busy, setBusy] = useState(false);
const [created, setCreated] = useState<InviteView | null>(null);
const reset = () => { setHandle(""); setRole("member"); setDays(7); setCreated(null); };
const close = () => { reset(); onClose(); };
const submit = async () => {
setBusy(true);
try {
const ttl = typeof days === "number" ? days * 86400 : 0;
const inv = await api.createInvite({ handle: handle.trim(), role, ttl_secs: ttl });
setCreated(inv);
onCreated();
} catch (e) {
notifyErr(e);
} finally {
setBusy(false);
}
};
const ready = handle.trim().length > 0;
const joinURL = created ? resolveJoinURL(created) : "";
return (
<Modal opened={opened} onClose={close} title="Crear usuario (enlace de invitación)" centered>
{!created ? (
<Stack gap="sm">
<Text size="xs" c="dimmed">
Genera un enlace de un solo uso. El usuario lo abre en su dispositivo, crea ahí su
clave (la privada nunca sale de su equipo) y se registra. Tú no manejas ninguna clave.
</Text>
<TextInput label="Handle" placeholder="ana" value={handle} onChange={(e) => setHandle(e.currentTarget.value)} data-autofocus />
<Select label="Rol" data={[{ value: "member", label: "member" }, { value: "admin", label: "admin" }]} value={role} onChange={(v) => setRole(v || "member")} allowDeselect={false} />
<NumberInput label="Caducidad (días)" min={1} max={90} value={days} onChange={setDays} />
<Group justify="flex-end">
<Button variant="default" onClick={close}>Cancelar</Button>
<Button onClick={submit} loading={busy} disabled={!ready} leftSection={<IconTicket size={16} />}>Crear enlace</Button>
</Group>
</Stack>
) : (
<Stack gap="sm">
<Alert color="teal" icon={<IconCheck size={16} />} title={`Invitación para "${created.handle}" (${created.role})`}>
Comparte este enlace con el usuario. Es de un solo uso y caduca el {fmtTime(created.expires_at)}.
</Alert>
{!joinBaseURL && (
<Alert color="yellow" icon={<IconAlertTriangle size={16} />} title="Base URL del cliente sin configurar">
El enlace usa el origen de este panel como respaldo. Configura el cliente real con
<Text span fw={600}> --join-base-url </Text> o la variable
<Text span fw={600}> UNIBUS_JOIN_BASE_URL </Text> en el gateway.
</Alert>
)}
<TextInput readOnly value={joinURL} styles={{ input: { fontFamily: "monospace", fontSize: 12 } }} />
<Group justify="space-between">
<CopyButton value={joinURL}>
{({ copied, copy }) => (
<Button color={copied ? "teal" : "brand"} leftSection={copied ? <IconCheck size={16} /> : <IconCopy size={16} />} onClick={copy}>
{copied ? "Copiado" : "Copiar enlace"}
</Button>
)}
</CopyButton>
<Button variant="default" onClick={close}>Cerrar</Button>
</Group>
</Stack>
)}
</Modal>
);
}
// DeleteUserModal is the STRONG confirmation for a permanent hard-delete. Unlike
// revoke (a one-click window.confirm), purging requires typing the handle, so it
// cannot be triggered by a stray click. The wording makes the irreversibility and
// the difference from revoke explicit.
function DeleteUserModal({ user, onClose, onDeleted }: { user: UserView | null; onClose: () => void; onDeleted: () => void }) {
const [confirm, setConfirm] = useState("");
const [busy, setBusy] = useState(false);
useEffect(() => { setConfirm(""); }, [user]);
if (!user) return null;
const submit = async () => {
setBusy(true);
try {
await api.deleteUser(user.sign_pub);
notifications.show({ color: "red", title: "Usuario eliminado", message: `${user.handle} purgado del allowlist` });
onClose();
onDeleted();
} catch (e) {
notifyErr(e);
} finally {
setBusy(false);
}
};
const ready = confirm.trim() === user.handle;
return (
<Modal opened={!!user} onClose={onClose} title="Borrado permanente" centered>
<Stack gap="sm">
<Alert color="red" icon={<IconAlertTriangle size={16} />} title="Esto NO es revocar">
<Text size="sm">
Vas a <Text span fw={700}>BORRAR PERMANENTEMENTE</Text> a «{user.handle}» del allowlist
del bus. Se elimina por completo (sin rastro auditable, a diferencia de revocar). El
usuario deja de poder autenticarse en ambos planos; sus membresías de rooms quedan
inertes. Esta acción es irreversible.
</Text>
</Alert>
<TextInput
label={`Escribe «${user.handle}» para confirmar`}
placeholder={user.handle}
value={confirm}
onChange={(e) => setConfirm(e.currentTarget.value)}
data-autofocus
/>
<Group justify="flex-end">
<Button variant="default" onClick={onClose}>Cancelar</Button>
<Button color="red" leftSection={<IconTrash size={16} />} onClick={submit} loading={busy} disabled={!ready}>
Eliminar permanentemente
</Button>
</Group>
</Stack>
</Modal>
);
}
web/src/types.ts
+17
View File
@@ -49,6 +49,23 @@ export interface MeInfo {
sign_pub: string; sign_pub: string;
users_backend: string; // "sqlite" | "kv" | "none" users_backend: string; // "sqlite" | "kv" | "none"
mock: boolean; mock: boolean;
join_base_url: string; // base URL of the end-user client (for invite links); "" when unset
}
export interface InviteView {
token: string;
handle: string;
role: string;
expires_at: string;
used: boolean;
created_at: string;
join_url: string; // pre-built join link; "" when the gateway has no client base URL
}
export interface CreateInviteReq {
handle: string;
role: string;
ttl_secs: number;
} }
export interface CreateRoomReq { export interface CreateRoomReq {