portal-mojo 0.1.0

package/src/admin/identity/users/UsersPage.tsx

@@ -0,0 +1,163 @@
+// Users — the full-fidelity ModelTable proof (B2): columns + filters +
+// presets from B1, now with selection + batch actions (real POST_SAVE_ACTIONS
+// fanned out with allSettled), column chooser, persisted view state,
+// auto-refresh, expandable rows, recency grouping, and server-side export.
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan, type User } from '../../../client';
+import {
+    Badge, fmt, formModal, groupByRecency, modal, toast, ModelTable,
+    type BatchAction, type Column, type FilterDef,
+} from '../../../ui';
+import { USER_MANAGE_PERMISSIONS, UserModel } from './models';
+import { UserDetail } from './UserDetail';
+
+const COLUMNS: Column<User>[] = [
+    {
+        // The identity column is the table's anchor — locked in the chooser.
+        key: 'display_name', label: 'User', hideable: false, render: (u) => (
+            <div className="cell-user">
+                <span className="cell-avatar">{fmt.initials(u.display_name || u.username)}</span>
+                <span>
+                    <span className="cell-name">
+                        {u.display_name || u.username}
+                        {u.is_online && <span className="online-dot" title="Online" />}
+                    </span>
+                    <span className="cell-sub">{u.email}</span>
+                </span>
+            </div>
+        ),
+    },
+    { key: 'username', label: 'Username', render: (u) => <span className="dim">{u.username}</span> },
+    {
+        key: 'is_superuser', label: 'Access', render: (u) =>
+            u.is_superuser ? <Badge tone="primary">superuser</Badge>
+            : Object.keys(u.permissions ?? {}).length > 0 ? <Badge tone="warning">staff</Badge>
+            : <span className="dim">—</span>,
+    },
+    { key: 'is_active', label: 'Status', render: (u) => <Badge>{u.is_active ? 'Active' : 'Inactive'}</Badge> },
+    {
+        key: 'is_email_verified', label: 'Verified', align: 'center', render: (u) =>
+            u.is_email_verified ? <i className="bi bi-patch-check-fill text-ok" /> : <span className="dim">—</span>,
+    },
+    { key: 'last_login', label: 'Last Login', render: (u) => fmt.relative(u.last_login) },
+    { key: 'last_activity', label: 'Last Activity', render: (u) => fmt.relative(u.last_activity, '—') },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'display_name', label: 'Name', type: 'text', placeholder: 'Contains…' },
+    { key: 'email', label: 'Email', type: 'text', placeholder: 'Contains…' },
+    { key: 'username', label: 'Username', type: 'text', placeholder: 'Contains…' },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    { key: 'is_email_verified', label: 'Email verified', type: 'boolean', trueLabel: 'Verified', falseLabel: 'Unverified' },
+    { key: 'is_phone_verified', label: 'Phone verified', type: 'boolean', trueLabel: 'Verified', falseLabel: 'Unverified' },
+    { key: 'is_superuser', label: 'Superuser', type: 'boolean', trueLabel: 'Yes', falseLabel: 'No' },
+    { key: 'last_login', label: 'Last login', type: 'daterange' },
+    { key: 'last_activity', label: 'Last activity', type: 'daterange' },
+];
+
+/** Expanded-row detail: the quick facts a hover-curious admin wants. */
+function UserExpand({ u }: { u: User }) {
+    const perms = Object.entries(u.permissions ?? {}).filter(([, v]) => v === true || v === 1).map(([k]) => k);
+    return (
+        <div className="expand-grid">
+            <div>
+                <div className="eyebrow">Contact</div>
+                <div>{u.email}</div>
+                <div className="dim">{u.phone_number ?? 'No phone'}</div>
+            </div>
+            <div>
+                <div className="eyebrow">Verification</div>
+                <div>Email {u.is_email_verified ? <Badge tone="success">Verified</Badge> : <Badge tone="muted">Unverified</Badge>}</div>
+                <div>Phone {u.is_phone_verified ? <Badge tone="success">Verified</Badge> : <Badge tone="muted">Unverified</Badge>}</div>
+            </div>
+            <div>
+                <div className="eyebrow">Permissions</div>
+                <div className="chip-row">
+                    {u.is_superuser && <Badge tone="primary">superuser</Badge>}
+                    {perms.map((k) => <Badge key={k} tone="info">{k}</Badge>)}
+                    {!u.is_superuser && perms.length === 0 && <span className="dim-italic">none</span>}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function UsersPage({ onOpenGroup }: { onOpenGroup?: (groupId: number) => void } = {}) {
+    const qc = useQueryClient();
+    const { can: canManage } = useCan(USER_MANAGE_PERMISSIONS);
+    const save = UserModel.useSave();
+    const disable = UserModel.useAction('disable');
+    const reactivate = UserModel.useAction('reactivate');
+
+    const addUser = async () => {
+        const form = UserModel.forms.create!;
+        const data = await formModal(form);
+        if (!data) return;
+        const changes = Object.fromEntries(Object.entries(data).filter(([, v]) => v !== ''));
+        try {
+            const created = await save.mutateAsync({ id: null, changes });
+            toast.success(`${created.display_name || created.username} created`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Create failed');
+        }
+    };
+
+    const openUser = (u: User) => {
+        // Prefetch through the shared cache key: the modal's useOne attaches
+        // to this in-flight request instead of issuing its own.
+        void UserModel.fetchOne(qc, u.id).catch(() => {});
+        void modal.detail((close) => <UserDetail id={u.id} onClose={() => close(null)} onOpenGroup={onOpenGroup} />);
+    };
+
+    // Batch actions run the model's REAL POST_SAVE_ACTIONS per row; the
+    // reason for a batch disable is collected once and shared.
+    const BATCH: BatchAction<User>[] = [
+        {
+            key: 'disable', label: 'Disable', icon: 'bi-slash-circle', danger: true, confirm: false,
+            eligible: (row) => row.is_active,
+            prepare: async () => {
+                const data = await formModal(UserModel.forms.disable!);
+                if (!data) return null;
+                const payload: Record<string, unknown> = { reason: data.reason };
+                if (data.note) payload.note = data.note;
+                return payload;
+            },
+            run: (row, payload) => disable.mutateAsync({ id: row.id, payload }),
+        },
+        {
+            key: 'reactivate', label: 'Reactivate', icon: 'bi-arrow-counterclockwise',
+            eligible: (row) => !row.is_active,
+            run: (row) => reactivate.mutateAsync({ id: row.id }),
+        },
+    ];
+
+    return (
+        <ModelTable<User>
+            model={UserModel}
+            eyebrow="Account"
+            title="Users"
+            searchPlaceholder="Search name, username, email…"
+            columns={COLUMNS}
+            filters={FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'superusers', label: 'Superusers', params: { is_superuser: 'true' } },
+                { key: 'never', label: 'Never signed in', params: { last_login__isnull: 'true' } },
+                { key: 'inactive', label: 'Inactive', params: { is_active: 'false' } },
+            ]}
+            defaultSort="-last_activity"
+            selectable={canManage}
+            batchActions={canManage ? BATCH : []}
+            columnChooser
+            persistState
+            exportFormats={['csv', 'json']}
+            autoRefresh={30}
+            rowExpand={(u) => <UserExpand u={u} />}
+            {...groupByRecency<User>('last_activity')}
+            onRowClick={openUser}
+            addLabel="Add User"
+            onAdd={canManage ? addUser : undefined}
+        />
+    );
+}

package/src/admin/identity/users/index.ts

@@ -0,0 +1,27 @@
+import type { AdminSection } from '../../index';
+import { UserDetail } from './UserDetail';
+import { UsersPage } from './UsersPage';
+import { USER_VIEW_PERMISSIONS } from './models';
+
+export * from './models';
+export * from './UsersPage';
+export * from './UserDetail';
+export * from './sections/permission-catalog';
+
+export const USERS_ADMIN_SECTION: AdminSection = {
+    id: 'users',
+    basePath: '',
+    title: 'Users',
+    icon: 'bi-people',
+    navigationGroup: 'identity-access',
+    permissions: USER_VIEW_PERMISSIONS,
+    routes: [{
+        path: 'users',
+        label: 'Users',
+        component: UsersPage,
+        permissions: USER_VIEW_PERMISSIONS,
+    }],
+};
+
+/** Useful to custom routers that open a User detail outside ModelTable. */
+export const USER_ADMIN_SURFACES = { UsersPage, UserDetail } as const;

package/src/admin/identity/users/models.ts

@@ -0,0 +1,232 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+    defineModel, mojoCall, withFreshAuth,
+    sanitizeAvatarRelation, type User,
+} from '../../../client';
+// ONE defineModel per endpoint (#1291). The device / device-location /
+// login-event models are DEFINED in admin/security/devices/models.ts — the
+// fleet-wide owner of those three endpoints — and re-exported here so
+// UserDetail's sections keep their existing import surface. Two definitions
+// would mean two cache keys and therefore a double fetch of the same rows.
+import {
+    LoginEventModel, UserDeviceLocationModel, UserDeviceModel,
+    USER_DEVICE_VIEW_PERMS, LOGIN_EVENT_VIEW_PERMS,
+} from '../../security/devices/models';
+export {
+    PUSH_DEVICE_VIEW_PERMISSIONS as USER_PUSH_DEVICE_PERMISSIONS,
+    PushDeviceModel,
+} from '../../messaging/push/models';
+export type { PushDeviceRow } from '../../messaging/push/models';
+
+export {
+    LoginEventModel,
+    UserDeviceLocationModel,
+    UserDeviceModel,
+    /** Historical alias — UserDetail's Devices section imports `DeviceModel`. */
+    UserDeviceModel as DeviceModel,
+};
+export type {
+    LoginEventRow,
+    UAInfo,
+    UserBasicRef,
+    UserDeviceLocationRow,
+    UserDeviceRow,
+    /** Historical alias for the row type. */
+    UserDeviceRow as DeviceRow,
+} from '../../security/devices/models';
+
+/** Global Admin gates. `sys.` prevents active-member authority leaking in. */
+export const USER_VIEW_PERMISSIONS = ['sys.users', 'sys.view_users', 'sys.manage_users'];
+export const USER_MANAGE_PERMISSIONS = ['sys.users', 'sys.manage_users'];
+/** Same clause as the canonical `USER_DEVICE_VIEW_PERMS`, kept as the name
+ *  UserDetail already imports. Both derive from `UserDevice.VIEW_PERMS`. */
+export const USER_DEVICE_PERMISSIONS = USER_DEVICE_VIEW_PERMS;
+export const USER_LOGIN_PERMISSIONS = LOGIN_EVENT_VIEW_PERMS;
+export const USER_LOG_PERMISSIONS = ['sys.view_logs', 'sys.manage_logs', 'sys.security'];
+export const USER_EVENT_PERMISSIONS = ['sys.view_security', 'sys.security'];
+
+/** Default user graph plus fields that do not ride the list graph. */
+export type UserRow = User & {
+    requires_mfa?: boolean;
+    has_passkey?: boolean;
+};
+
+/** UserModel's independent cache boundary (lists, detail, saves, actions). */
+export function sanitizeUserRow(row: UserRow): UserRow {
+    return { ...row, avatar: sanitizeAvatarRelation(row.avatar) };
+}
+
+export const UserModel = defineModel<UserRow>({
+    name: 'user',
+    endpoint: '/api/user',
+    sanitizeRow: sanitizeUserRow,
+    permissions: {
+        view: USER_VIEW_PERMISSIONS,
+        manage: USER_MANAGE_PERMISSIONS,
+        create: USER_MANAGE_PERMISSIONS,
+    },
+    forms: {
+        create: {
+            title: 'Add user',
+            submitText: 'Create',
+            fields: [
+                { name: 'display_name', type: 'text', label: 'Display name', required: true, placeholder: 'Jane Cooper' },
+                { name: 'email', type: 'email', label: 'Email', required: true, placeholder: 'jane@example.com' },
+                { name: 'phone_number', type: 'tel', label: 'Phone', columns: 6 },
+                { name: 'username', type: 'text', label: 'Username', columns: 6, placeholder: 'Defaults from email', help: 'Leave blank to derive from email' },
+            ],
+        },
+        disable: {
+            title: 'Disable user',
+            submitText: 'Disable',
+            fields: [
+                {
+                    name: 'reason', type: 'select', label: 'Reason', required: true, options: [
+                        { value: 'admin', label: 'Admin — block / policy violation' },
+                        { value: 'abuse', label: 'Abuse — banned' },
+                    ],
+                },
+                { name: 'note', type: 'textarea', label: 'Note', placeholder: 'Optional note about why this user is being disabled.' },
+            ],
+        },
+    },
+    actions: {
+        change_username: { permissions: USER_MANAGE_PERMISSIONS, response: 'payload' },
+        disable: { permissions: USER_MANAGE_PERMISSIONS },
+        reactivate: { permissions: USER_MANAGE_PERMISSIONS },
+        send_invite: { permissions: USER_MANAGE_PERMISSIONS },
+        revoke_sessions: { permissions: USER_MANAGE_PERMISSIONS, response: 'payload' },
+        disable_totp: { permissions: USER_MANAGE_PERMISSIONS, response: 'payload' },
+    },
+});
+
+/** `/api/account/api_keys` never serializes its owner or signing material. */
+export interface ApiKeyRow {
+    id: number;
+    label: string;
+    allowed_ips: string[];
+    expires: number;
+    is_active: boolean;
+    last_used: number | null;
+    created: number;
+}
+
+function sanitizeApiKeyRow(row: ApiKeyRow): ApiKeyRow {
+    const safe = { ...row } as ApiKeyRow & Record<string, unknown>;
+    for (const key of ['token', 'jti', 'auth_key', 'secret', 'token_hash']) delete safe[key];
+    return safe;
+}
+
+export const ApiKeyModel = defineModel<ApiKeyRow>({
+    name: 'api_key',
+    endpoint: '/api/account/api_keys',
+    permissions: { manageOthers: USER_MANAGE_PERMISSIONS },
+    sanitizeRow: sanitizeApiKeyRow,
+    forms: {
+        generate: {
+            title: 'Generate API key',
+            submitText: 'Generate',
+            fields: [
+                { name: 'label', type: 'text', label: 'Label', required: true, placeholder: 'e.g. CI/CD pipeline, Mobile app' },
+                {
+                    name: 'allowed_ips', type: 'text', label: 'Allowed IPs',
+                    placeholder: 'e.g. 203.0.113.0/24, 10.0.0.1',
+                    help: 'Optional. Comma-separated IPs or CIDR ranges; empty allows any.',
+                },
+                {
+                    name: 'expire_days', type: 'select', label: 'Expires in', options: [
+                        { value: '30', label: '30 days' },
+                        { value: '60', label: '60 days' },
+                        { value: '90', label: '90 days' },
+                        { value: '180', label: '180 days' },
+                        { value: '360', label: '360 days (max)' },
+                    ],
+                },
+            ],
+        },
+    },
+    actions: { revoke: { response: 'payload' } },
+});
+
+export interface GenerateUserApiKeyVariables {
+    changes: Record<string, unknown>;
+    /** Receives the token while the mutation is still pending. */
+    onToken?: (token: string) => void | Promise<void>;
+}
+
+interface GeneratedKeyResponse {
+    id?: number;
+    expires?: number;
+    token?: string;
+    jti?: string;
+    auth_key?: string;
+    secret?: string;
+}
+
+export interface GeneratedKeyReceipt {
+    id: number | null;
+    expires: number | null;
+}
+
+/**
+ * Caller-only key generation. The raw response is split before mutation
+ * resolution, so TanStack MutationCache receives only non-secret metadata.
+ */
+export function useGenerateUserApiKey() {
+    const qc = useQueryClient();
+    return useMutation<GeneratedKeyReceipt, Error, GenerateUserApiKeyVariables>({
+        mutationFn: async ({ changes, onToken }) => {
+            const response = await withFreshAuth(() => mojoCall('/api/auth/generate_api_key', {
+                method: 'POST',
+                body: changes,
+            }));
+            const payload = response.data as GeneratedKeyResponse | undefined;
+            const created: GeneratedKeyResponse = payload && typeof payload === 'object' ? { ...payload } : {};
+            let token = typeof created.token === 'string' && created.token ? created.token : null;
+            try {
+                if (token && onToken) await onToken(token);
+            } finally {
+                token = null;
+                for (const key of ['token', 'jti', 'auth_key', 'secret'] as const) delete created[key];
+            }
+            return {
+                id: typeof created.id === 'number' ? created.id : null,
+                expires: typeof created.expires === 'number' ? created.expires : null,
+            };
+        },
+        onSuccess: () => { void qc.invalidateQueries({ queryKey: ApiKeyModel.keys.root }); },
+    });
+}
+
+// LoginEventRow / LoginEventModel are re-exported from the canonical module
+// above. The local copy carried a phantom `event_type?: string` field that
+// `UserLoginEvent` has never had — see docs/admin-devices-geoip.md.
+
+export interface PasskeyRow {
+    id: number;
+    friendly_name: string | null;
+    credential_id: string;
+    rp_id: string;
+    is_enabled: boolean;
+    sign_count: number;
+    transports: string | null;
+    aaguid: string | null;
+    last_used: number | null;
+    created: number;
+}
+export const PasskeyModel = defineModel<PasskeyRow>({
+    name: 'passkey', endpoint: '/api/account/passkeys',
+    permissions: { view: USER_MANAGE_PERMISSIONS, manage: USER_MANAGE_PERMISSIONS },
+});
+
+export interface OAuthConnectionRow {
+    id: number;
+    provider: string;
+    email: string | null;
+    is_active: boolean;
+    created: number;
+}
+export const OAuthConnectionModel = defineModel<OAuthConnectionRow>({
+    name: 'oauth_connection', endpoint: '/api/account/oauth_connection',
+    permissions: { view: USER_MANAGE_PERMISSIONS, manage: USER_MANAGE_PERMISSIONS },
+});

package/src/admin/identity/users/sections/ApiKeysSection.tsx

@@ -0,0 +1,119 @@
+// API Keys — UserApiKeysSection port (read in full 2026-08-05): the user's
+// key list + caller-only "Generate key" reveal + revoke.
+//
+// Wire (live-measured):
+//   · list — GET /api/account/api_keys?user=<id> (label/allowed_ips/expires/
+//     is_active/last_used/created; the owner FK filters but never serializes)
+//   · generate — caller-only POST /api/auth/generate_api_key. Another user's
+//     detail renders no Generate action because no admin-targetable route exists.
+//   · revoke — the `revoke` POST_SAVE_ACTION (POST <id> {revoke:{}} → its
+//     own {status:true} payload). Deviation from web-mojo's DELETE: the live
+//     model is CAN_DELETE=false (DELETE answers 403, measured) — the action
+//     IS the kill switch.
+import { Badge, Eyebrow, fmt, formModal, modal, toast } from '../../../../ui';
+import { showSecretDialog } from '../../../credentials';
+import { ApiKeyModel, useGenerateUserApiKey, type UserRow } from '../models';
+
+export function ApiKeysSection({ user, canManage, isSelf }: { user: UserRow; canManage: boolean; isSelf: boolean }) {
+    const { data, isPending } = ApiKeyModel.useList({ user: user.id, size: 25, sort: '-id' });
+    const revoke = ApiKeyModel.useAction('revoke');
+    const generateKey = useGenerateUserApiKey();
+    const rows = data?.rows ?? [];
+
+    const generate = async () => {
+        const form = ApiKeyModel.forms.generate!;
+        const dataIn = await formModal({
+            ...form,
+            title: `Generate API key for ${user.display_name || user.email || user.username}`,
+        });
+        if (!dataIn) return;
+        const body: Record<string, unknown> = {
+            label: dataIn.label,
+            expire_days: parseInt(String(dataIn.expire_days || '90'), 10),
+        };
+        const ips = String(dataIn.allowed_ips ?? '').trim();
+        if (ips) body.allowed_ips = ips.split(',').map((s) => s.trim()).filter(Boolean);
+        try {
+            await generateKey.mutateAsync({
+                changes: body,
+                onToken: async (token) => {
+                    await showSecretDialog({
+                        title: 'API key created',
+                        intro: <><b>{String(dataIn.label || 'Unlabeled key')}</b> is ready.</>,
+                        warning: 'Save this token now. It will not be shown again.',
+                        secret: token,
+                        ariaLabel: 'Generated API key',
+                    });
+                },
+            });
+            toast.success('API key generated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to generate API key');
+        }
+    };
+
+    const revokeKey = async (id: number, label: string) => {
+        const ok = await modal.confirm({
+            title: 'Revoke API key',
+            message: <>Revoke <b>{label || 'this API key'}</b>? Any applications using it will lose access immediately.</>,
+            confirmText: 'Revoke',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await revoke.mutateAsync({ id });
+            toast.success('API key revoked');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to revoke API key');
+        }
+    };
+
+    const nowSec = Math.floor(Date.now() / 1000);
+
+    return (
+        <>
+            <Eyebrow>
+                API keys
+                {isSelf && (
+                    <button className="btn btn-primary btn-compact us-eyebrow-action" onClick={() => void generate()}>
+                        <i className="bi bi-plus-lg" /> Generate key
+                    </button>
+                )}
+            </Eyebrow>
+
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty">
+                    <i className="bi bi-key" />
+                    <div>No API keys for this user.</div>
+                </div>
+            )}
+            {rows.map((k) => {
+                const expired = k.expires != null && k.expires < nowSec;
+                return (
+                    <div key={k.id} className="us-key-row">
+                        <div className="us-row-icon"><i className="bi bi-key" /></div>
+                        <div className="us-row-info">
+                            <div className="us-row-title">{k.label || 'Unlabeled key'}</div>
+                            <div className="us-row-meta">
+                                Created {fmt.date(k.created)} · Expires {fmt.date(k.expires, 'never')} · Last used {fmt.relative(k.last_used, 'never')}
+                                {' · '}
+                                {k.allowed_ips.length > 0 ? <>IPs <code>{k.allowed_ips.join(', ')}</code></> : 'Any IP'}
+                            </div>
+                        </div>
+                        <div className="us-row-actions">
+                            <Badge tone={!k.is_active ? 'muted' : expired ? 'warning' : 'success'}>
+                                {!k.is_active ? 'Revoked' : expired ? 'Expired' : 'Active'}
+                            </Badge>
+                            {canManage && k.is_active && (
+                                <button className="btn btn-compact us-danger" onClick={() => void revokeKey(k.id, k.label)}>
+                                    Revoke
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </>
+    );
+}