portal-mojo 0.2.7 → 0.2.8

package/src/account/index.ts

@@ -0,0 +1,16 @@
+// portal-mojo/account — the signed-in user's self-service account surface:
+// AccountModal (+ openAccountModal), its six sections, the shared credential
+// models (PasskeyModel / ApiKeyModel / OAuthConnectionModel — re-exported by
+// portal-mojo/admin unchanged), MeSaveModel, and the self-service wire
+// functions. A page bundle bound to django-mojo contracts like an admin
+// domain, but it never imports the admin barrel and runs no setup at import.
+// Apps ship theme/account.css (plus user-admin.css and group-admin.css for
+// the reused API-key rows and secret reveal).
+export * from './AccountModal';
+export * from './AccountSections';
+export * from './api';
+export * from './dialogs';
+export * from './models';
+export * from './NotificationPreferences';
+export * from './PasskeyList';
+export * from './sections/ApiKeysSection';

package/src/account/models.ts

@@ -0,0 +1,76 @@
+// account/models — the caller-owned credential models shared by the
+// self-service AccountModal and the admin User detail (defined in
+// credential-models.ts, re-exported here and by admin/identity/users/models
+// unchanged) so portal-mojo/account never imports an admin domain. ONE
+// defineModel per endpoint: both surfaces share these cache keys.
+//
+// Plus MeSaveModel — the `/api/user/me` save the account forms autosave
+// through — and the account-only query keys.
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+    mojoSave, sanitizeMe, useAuthSnapshot, withFreshAuth,
+    type Me, type SaveVars,
+} from '../client/runtime';
+import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPreferencesResponse, type RecoveryCodeStatus } from './api';
+
+// ── /api/user/me ──────────────────────────────────────────────────────
+
+/**
+ * FormView-compatible save for the signed-in user's own row: POSTs ONLY the
+ * changed fields to `/api/user/me` (never the `me` row back — the server
+ * 403s email/username/is_superuser/permissions even unchanged), sanitizes
+ * the answer with sanitizeMe, writes `['me', uid]` and refreshes every
+ * `/api/user` cache (UserModel.useSave never touches `me`, and vice versa).
+ * The `id` in SaveVars is ignored: the endpoint is always the caller.
+ */
+export const MeSaveModel = {
+    useSave: () => {
+        const qc = useQueryClient();
+        const { uid } = useAuthSnapshot();
+        return useMutation<Me, Error, SaveVars>({
+            mutationFn: async ({ changes }: SaveVars) => sanitizeMe(await withFreshAuth(() => mojoSave<Me>('/api/user/me', null, changes))),
+            onSuccess: (row) => {
+                qc.setQueryData(['me', uid], row);
+                void qc.invalidateQueries({ queryKey: ['/api/user'] });
+            },
+        });
+    },
+};
+
+/** Refresh `me` (e.g. after a verify/change flow that the server committed). */
+export function invalidateMe(qc: ReturnType<typeof useQueryClient>): Promise<void> {
+    return qc.invalidateQueries({ queryKey: ['me'] });
+}
+
+// ── Credential models (credential-models.ts) ───────────────────────────
+
+export {
+    ApiKeyModel, OAuthConnectionModel, PasskeyModel, useGenerateUserApiKey,
+    type ApiKeyRow, type GeneratedKeyReceipt, type GenerateUserApiKeyVariables,
+    type OAuthConnectionRow, type PasskeyRow,
+} from './credential-models';
+
+// ── Account-only queries ──────────────────────────────────────────────
+
+export const accountKeys = {
+    /** `{enrolled, remaining}` ONLY — never the masked hints (4 of 12 hex chars each). */
+    recoveryStatus: (uid: number | string | null) => ['/api/account/totp/recovery-codes', 'status', uid] as const,
+    /** Shared with the admin User detail's Notifications section. */
+    notificationPreferences: (uid: number | string | null) => ['/api/account/notification/preferences', uid] as const,
+};
+
+export function useRecoveryCodeStatus(uid: number | null) {
+    return useQuery<RecoveryCodeStatus>({
+        queryKey: accountKeys.recoveryStatus(uid),
+        queryFn: getRecoveryCodeStatus,
+        enabled: uid != null,
+    });
+}
+
+export function useNotificationPreferences(uid: number | null, enabled = true) {
+    return useQuery<NotificationPreferencesResponse>({
+        queryKey: accountKeys.notificationPreferences(uid),
+        queryFn: getNotificationPreferences,
+        enabled: uid != null && enabled,
+    });
+}

package/src/account/sections/ApiKeysSection.tsx

@@ -0,0 +1,138 @@
+// 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.
+//
+// Shared by the admin User detail (re-exported from
+// admin/identity/users/sections/ApiKeysSection) and the self-service
+// AccountModal (user = me, isSelf). Styled by the app's user-admin.css.
+import { Badge, Eyebrow, fmt, formModal, modal, showSecretDialog, toast } from '../../ui';
+import { ApiKeyModel, useGenerateUserApiKey } from '../credential-models';
+
+/** The identity fields the section names a key's owner by. */
+export interface ApiKeysOwner {
+    id: number;
+    display_name?: string | null;
+    email?: string | null;
+    username?: string | null;
+}
+
+export interface ApiKeysSectionProps {
+    user: ApiKeysOwner;
+    /** Offer Revoke on active keys. */
+    canManage: boolean;
+    /** Offer Generate — the generate route is caller-only. */
+    isSelf: boolean;
+}
+
+export function ApiKeysSection({ user, canManage, isSelf }: ApiKeysSectionProps) {
+    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: isSelf ? 'Generate API key' : `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>{isSelf ? 'You have no API keys.' : '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>
+                );
+            })}
+        </>
+    );
+}

package/src/admin/credentials/secret-dialog.tsx

@@ -1,77 +1,3 @@
-import { useState, type ReactNode } from 'react';
-import { modal } from '../../ui';
-
-async function copyText(value: string): Promise<boolean> {
-    try {
-        if (navigator.clipboard?.writeText) {
-            await navigator.clipboard.writeText(value);
-            return true;
-        }
-    } catch {
-        // Fall through for insecure contexts.
-    }
-    try {
-        const input = document.createElement('textarea');
-        input.value = value;
-        input.style.position = 'fixed';
-        input.style.opacity = '0';
-        document.body.appendChild(input);
-        input.select();
-        const copied = document.execCommand('copy');
-        input.remove();
-        return copied;
-    } catch {
-        return false;
-    }
-}
-
-export function SecretBox({ secret, ariaLabel }: { secret: string; ariaLabel: string }) {
-    const [copied, setCopied] = useState(false);
-    return (
-        <div className="ga-secret-box">
-            <code className="ga-secret-value" aria-label={ariaLabel}>{secret}</code>
-            <button
-                type="button"
-                className="btn btn-compact"
-                title="Copy to clipboard"
-                aria-label="Copy to clipboard"
-                onClick={() => {
-                    void copyText(secret).then((ok) => {
-                        if (!ok) return;
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 1600);
-                    });
-                }}
-            >
-                <i className={`bi ${copied ? 'bi-check-lg' : 'bi-clipboard'}`} /> {copied ? 'Copied' : 'Copy'}
-            </button>
-        </div>
-    );
-}
-
-export interface SecretDialogOptions {
-    title: string;
-    warning: ReactNode;
-    intro?: ReactNode;
-    secret: string;
-    ariaLabel: string;
-    footer?: ReactNode;
-}
-
-export function showSecretDialog(options: SecretDialogOptions): Promise<unknown> {
-    return modal.open((close) => (
-        <div className="modal-pad">
-            <h2 className="modal-title">{options.title}</h2>
-            {options.intro && <div className="ga-secret-intro">{options.intro}</div>}
-            <div className="ga-secret-warning" role="alert">
-                <i className="bi bi-exclamation-triangle-fill" />
-                <span>{options.warning}</span>
-            </div>
-            <SecretBox secret={options.secret} ariaLabel={options.ariaLabel} />
-            {options.footer}
-            <div className="modal-actions">
-                <button className="btn" onClick={() => close(null)}>Close</button>
-            </div>
-        </div>
-    ), { size: 'lg' });
-}
+// Moved to ui/secret-dialog.tsx (shared with portal-mojo/account); the admin
+// credentials surface keeps its import path and export names unchanged.
+export { SecretBox, showSecretDialog, type SecretDialogOptions } from '../../ui/secret-dialog';

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

@@ -1,6 +1,5 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-    defineModel, mojoCall, withFreshAuth,
+    defineModel,
     sanitizeAvatarRelation, type User,
 } from '../../../client/runtime';
 // ONE defineModel per endpoint (#1291). The device / device-location /
@@ -100,133 +99,22 @@ export const UserModel = defineModel<UserRow>({
     },
 });
 
-/** `/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 }); },
-    });
-}
+// The caller-owned credential models live in portal-mojo/account (shared by
+// the self-service AccountModal) and are re-exported here unchanged.
+export {
+    ApiKeyModel,
+    OAuthConnectionModel,
+    PasskeyModel,
+    useGenerateUserApiKey,
+} from '../../../account/credential-models';
+export type {
+    ApiKeyRow,
+    GeneratedKeyReceipt,
+    GenerateUserApiKeyVariables,
+    OAuthConnectionRow,
+    PasskeyRow,
+} from '../../../account/credential-models';
 
 // 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

@@ -1,119 +1,3 @@
-// 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>
-                );
-            })}
-        </>
-    );
-}
+// API Keys — moved to portal-mojo/account (shared with the self-service
+// AccountModal); the admin User detail keeps this import path.
+export { ApiKeysSection, type ApiKeysOwner, type ApiKeysSectionProps } from '../../../../account/sections/ApiKeysSection';