@package-broker/ui 0.19.7 → 2.0.0-rc.1

package/dist/pages/tokens.js

@@ -0,0 +1,744 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { useServices } from '../auth.js';
+import { loadPending, savePending } from '../pending.js';
+import { Button } from '../components/ui/button.js';
+import { Input } from '../components/ui/input.js';
+import { Label } from '../components/ui/label.js';
+import { Select } from '../components/ui/select.js';
+import { Alert, AlertDescription } from '../components/ui/alert.js';
+import { DataTable } from '../components/ui/table.js';
+import { StatusBadge } from '../components/ui/status-badge.js';
+import { IdText } from '../components/ui/id-text.js';
+import { Time } from '../components/ui/time.js';
+import { Badge } from '../components/ui/badge.js';
+import { LoadedListFilters } from '../components/ui/toolbar.js';
+import { ListState } from '../components/ui/list-state.js';
+import { ConfirmAction } from '../components/ui/confirm-action.js';
+import { tokenClientConfig } from './tokens/client-config.js';
+export function lifetimeChoices(policy) {
+    return [...new Set([30, 90, 180, 365, policy.maxDays, policy.defaultDays])]
+        .filter((days) => days > 0 && days <= policy.maxDays)
+        .sort((a, b) => a - b);
+}
+export function tokensReducer(state, action) {
+    if (action.type === 'navigate')
+        return {
+            ...state,
+            secret: null,
+            secretProject: null,
+            issuedId: null,
+            oldPersonalId: null,
+            pending: null,
+            renewal: null,
+            busy: false,
+            notice: null,
+        };
+    return state;
+}
+function pendingStorage(storage) {
+    return {
+        getItem: (key) => storage.getItem(`tokens:${key}`),
+        setItem: (key, value) => storage.setItem(`tokens:${key}`, value),
+        removeItem: (key) => storage.removeItem(`tokens:${key}`),
+    };
+}
+export function clearPendingTokenIssue(storage) {
+    loadPending(pendingStorage(storage), Date.now());
+}
+function record(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function restoredIssue(value) {
+    if (!record(value) || !record(value.draft))
+        return null;
+    const d = value.draft;
+    if (!['personal', 'project', 'organization'].includes(String(value.target)) ||
+        !(value.project === null || typeof value.project === 'string') ||
+        typeof value.key !== 'string' ||
+        typeof d.name !== 'string' ||
+        !['read', 'write', 'full'].includes(String(d.scope)) ||
+        !Number.isInteger(d.lifetimeDays) ||
+        Number(d.lifetimeDays) < 1 ||
+        typeof d.servicePrincipalId !== 'string' ||
+        !['all', 'selected'].includes(String(d.projectMode)) ||
+        !Array.isArray(d.projectIds) ||
+        !d.projectIds.every((id) => typeof id === 'string') ||
+        (value.rotate !== undefined && typeof value.rotate !== 'string') ||
+        (value.replace !== undefined && typeof value.replace !== 'string') ||
+        (d.overlapDays !== undefined && ![0, 1, 7].includes(Number(d.overlapDays))))
+        return null;
+    return {
+        target: value.target,
+        project: value.project,
+        key: value.key,
+        ...(typeof value.rotate === 'string' ? { rotate: value.rotate } : {}),
+        ...(typeof value.replace === 'string' ? { replace: value.replace } : {}),
+        draft: {
+            name: d.name,
+            scope: d.scope,
+            lifetimeDays: Number(d.lifetimeDays),
+            servicePrincipalId: d.servicePrincipalId,
+            projectMode: d.projectMode,
+            projectIds: [...d.projectIds],
+            ...(d.overlapDays === undefined ? {} : { overlapDays: Number(d.overlapDays) }),
+        },
+    };
+}
+function publicToken(t) {
+    return {
+        id: t.id,
+        kind: t.kind,
+        name: t.name,
+        scope: t.scope,
+        readOnly: t.readOnly,
+        status: t.status,
+        projectMode: t.projectMode,
+        projectCount: t.projectCount,
+        projectId: t.projectId,
+        userId: t.userId,
+        createdByUserId: t.createdByUserId,
+        servicePrincipalId: t.servicePrincipalId,
+        createdAt: t.createdAt,
+        expiresAt: t.expiresAt,
+        lastUsedAt: t.lastUsedAt,
+        revokedAt: t.revokedAt,
+    };
+}
+export function createTokensController(services, deps) {
+    let state = {
+        target: 'personal',
+        project: null,
+        items: [],
+        next: null,
+        principals: [],
+        principalsNext: null,
+        principalsRestricted: false,
+        names: {},
+        projectSlugs: {},
+        lifetime: null,
+        userId: null,
+        secret: null,
+        secretProject: null,
+        issuedId: null,
+        oldPersonalId: null,
+        pending: null,
+        renewal: null,
+        busy: false,
+        loading: false,
+        listError: false,
+        notice: null,
+    };
+    let epoch = 0;
+    let listing = 0;
+    let navigation = 0;
+    const listeners = new Set();
+    const set = (next) => {
+        state = { ...state, ...next };
+        for (const listener of listeners)
+            listener();
+    };
+    const storage = pendingStorage(deps.storage);
+    function failure(result) {
+        if (result.code === 'reauth_required')
+            services.requireReauth(result.request, { credential: false, secretFields: [] });
+        else
+            set({
+                notice: result.status === 412 || result.status === 428
+                    ? 'The record changed. Reload before trying again.'
+                    : 'Unable to update tokens. Try again.',
+            });
+    }
+    async function send(action) {
+        if (state.busy)
+            return;
+        const version = ++epoch;
+        set({
+            busy: true,
+            secret: null,
+            secretProject: null,
+            issuedId: null,
+            oldPersonalId: null,
+            pending: null,
+            notice: null,
+        });
+        const { draft: d, target, project, key } = action;
+        const base = { name: d.name, scope: d.scope, lifetimeDays: d.lifetimeDays };
+        const service = { ...base, servicePrincipalId: d.servicePrincipalId };
+        const rotation = {
+            name: d.name,
+            lifetimeDays: d.lifetimeDays,
+            overlapDays: d.overlapDays ?? 0,
+        };
+        const result = action.rotate !== undefined
+            ? target === 'project'
+                ? await services.client.request('post', '/_pb/projects/{project}/tokens/{token}/rotate', {
+                    params: { project: project, token: action.rotate },
+                    body: rotation,
+                    idempotencyKey: key,
+                })
+                : await services.client.request('post', '/_pb/tokens/{token}/rotate', {
+                    params: { token: action.rotate },
+                    body: rotation,
+                    idempotencyKey: key,
+                })
+            : target === 'personal'
+                ? await services.client.request('post', '/_pb/me/tokens', {
+                    body: { ...base, projectMode: d.projectMode, projectIds: d.projectIds },
+                    idempotencyKey: key,
+                })
+                : target === 'project'
+                    ? await services.client.request('post', '/_pb/projects/{project}/tokens', {
+                        params: { project: project },
+                        body: service,
+                        idempotencyKey: key,
+                    })
+                    : await services.client.request('post', '/_pb/tokens', {
+                        body: service,
+                        idempotencyKey: key,
+                    });
+        if (version !== epoch)
+            return;
+        set({ busy: false });
+        if (result.ok) {
+            set({
+                secret: result.data.token,
+                secretProject: target === 'project' ? project : null,
+                oldPersonalId: action.replace ?? null,
+                issuedId: result.data.id,
+                notice: 'Save this token now; it is shown once.',
+            });
+        }
+        else if (result.code === 'reauth_required') {
+            const saved = savePending(storage, {
+                method: 'POST',
+                path: '/_pb/me/tokens',
+                body: action,
+                idempotencyKey: key,
+                credential: false,
+                secretFields: [],
+            });
+            set({
+                secret: null,
+                notice: saved.ok
+                    ? 'Confirm your identity, then confirm token issue.'
+                    : 'Unable to save the pending action.',
+            });
+            if (saved.ok)
+                deps.navigate(`#/reauth?return=${encodeURIComponent(`/tokens${project === null ? '' : `?project=${encodeURIComponent(project)}`}`)}`);
+        }
+        else if (result.code === 'already_issued')
+            set({ notice: 'already issued, create a new token' });
+        else
+            failure(result);
+    }
+    const controller = {
+        snapshot: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        navigate() {
+            epoch++;
+            navigation++;
+            listing++;
+            set(tokensReducer(state, { type: 'navigate' }));
+        },
+        dispose() {
+            controller.navigate();
+            listeners.clear();
+        },
+        closeSecret() {
+            if (state.busy)
+                return;
+            epoch++;
+            set({ secret: null, issuedId: null, oldPersonalId: null, notice: null, renewal: null });
+        },
+        restore() {
+            const loaded = loadPending(storage, deps.now());
+            const action = loaded.ok ? restoredIssue(loaded.action?.body) : null;
+            if (action !== null)
+                set({ target: action.target, project: action.project, pending: action, secret: null });
+        },
+        async start(target, project) {
+            controller.restore();
+            const action = state.pending;
+            await controller.load(action?.target ?? target, action === null ? project : action.project);
+        },
+        async selectTarget(target, project) {
+            if (state.busy)
+                return;
+            epoch++;
+            set(tokensReducer(state, { type: 'navigate' }));
+            await controller.load(target, project);
+        },
+        decline() {
+            set({ pending: null });
+        },
+        async confirm() {
+            const action = state.pending;
+            if (action === null || state.busy || state.loading)
+                return;
+            if (state.lifetime === null) {
+                await controller.load(action.target, action.project);
+                if (state.pending !== action || state.lifetime === null || state.loading)
+                    return;
+            }
+            await send(action);
+        },
+        async issue(draft) {
+            await send({
+                target: state.renewal?.kind === 'pat'
+                    ? 'personal'
+                    : state.renewal?.projectId
+                        ? 'project'
+                        : state.target,
+                project: state.renewal?.kind === 'svc' && state.renewal.projectId !== null
+                    ? (state.projectSlugs[state.renewal.projectId] ?? state.project)
+                    : state.project,
+                draft,
+                key: deps.newKey(),
+                ...(state.renewal?.kind === 'svc' ? { rotate: state.renewal.id } : {}),
+                ...(state.renewal?.kind === 'pat' ? { replace: state.renewal.id } : {}),
+            });
+        },
+        renew(token) {
+            if (state.busy || (token.kind === 'pat' && token.userId !== state.userId))
+                return;
+            if (token.kind === 'svc' &&
+                token.projectId !== null &&
+                state.projectSlugs[token.projectId] === undefined &&
+                state.target !== 'project') {
+                set({ notice: 'Choose this token’s project scope before renewing.' });
+                return;
+            }
+            set({ renewal: token, secret: null, issuedId: null, oldPersonalId: null, notice: null });
+        },
+        registryOrigin: () => new URL(deps.origin).origin,
+        clientConfig() {
+            return state.secret === null || state.secretProject === null
+                ? null
+                : tokenClientConfig(deps.origin, state.secretProject, state.secret);
+        },
+        async copy(kind) {
+            if (state.secret === null)
+                return;
+            const text = kind === undefined ? state.secret : controller.clientConfig()?.[kind];
+            if (text === undefined)
+                return;
+            const label = kind === undefined ? 'Token' : 'Configuration';
+            const version = epoch;
+            try {
+                await deps.clipboard(text);
+                if (version === epoch)
+                    set({ ...(deps.clearAfterCopy ? { secret: null } : {}), notice: `${label} copied.` });
+            }
+            catch {
+                if (version === epoch)
+                    set({
+                        notice: kind === undefined ? 'Unable to copy token.' : 'Unable to copy configuration.',
+                    });
+            }
+        },
+        async load(target = state.target, project = state.project, after) {
+            const version = ++listing;
+            set({
+                target,
+                project,
+                loading: true,
+                listError: false,
+                notice: null,
+                items: [],
+                next: null,
+                lifetime: null,
+            });
+            const result = target === 'personal'
+                ? await services.client.request('get', '/_pb/me/tokens', { query: { after } })
+                : target === 'project' && project !== null
+                    ? await services.client.request('get', '/_pb/projects/{project}/tokens', {
+                        params: { project },
+                        query: { after },
+                    })
+                    : await services.client.request('get', '/_pb/tokens', { query: { after } });
+            if (version !== listing)
+                return;
+            set(result.ok
+                ? {
+                    items: result.data.items.map(publicToken),
+                    next: result.data.next,
+                    lifetime: result.data.lifetime,
+                    loading: false,
+                }
+                : { loading: false, listError: true, lifetime: null, notice: 'Unable to load tokens.' });
+        },
+        async loadPrincipals(after) {
+            const version = navigation;
+            const result = await services.client.request('get', '/_pb/service-principals', {
+                query: { after },
+            });
+            if (version !== navigation)
+                return;
+            if (result.ok)
+                set({
+                    principals: result.data.items.map((p) => ({
+                        id: p.id,
+                        name: p.name,
+                        projectId: p.projectId,
+                        status: p.status,
+                        revision: p.revision,
+                        createdByUserId: p.createdByUserId,
+                        permissions: p.permissions,
+                    })),
+                    principalsNext: result.data.next,
+                    principalsRestricted: false,
+                });
+            else if (result.status === 403)
+                set({ principals: [], principalsNext: null, principalsRestricted: true });
+        },
+        async identity() {
+            const version = navigation;
+            const result = await services.client.request('get', '/_pb/session');
+            if (version !== navigation)
+                return;
+            if (result.ok)
+                set({ userId: result.data.user.id });
+            const projectSlugs = {};
+            let projectAfter;
+            do {
+                const projects = await services.client.request('get', '/_pb/projects', {
+                    query: { after: projectAfter },
+                });
+                if (version !== navigation)
+                    return;
+                if (!projects.ok)
+                    break;
+                for (const project of projects.data.items)
+                    projectSlugs[project.id] = project.slug;
+                projectAfter = projects.data.next ?? undefined;
+            } while (projectAfter !== undefined);
+            set({ projectSlugs });
+            const permissions = await services.client.request('get', '/_pb/me/permissions');
+            if (version !== navigation)
+                return;
+            if (!permissions.ok || !permissions.data.organization.includes('org:users:read')) {
+                set({ names: {} });
+                return;
+            }
+            let after;
+            const names = {};
+            do {
+                const users = await services.client.request('get', '/_pb/users', { query: { after } });
+                if (version !== navigation)
+                    return;
+                if (!users.ok)
+                    break;
+                for (const user of users.data.items)
+                    if (user.displayName !== null)
+                        names[user.id] = user.displayName;
+                after = users.data.next ?? undefined;
+            } while (after !== undefined);
+            if (version === navigation)
+                set({ names });
+        },
+        async revoke(id, own = false) {
+            if (state.busy)
+                return;
+            const version = epoch;
+            set({ busy: true, secret: null, issuedId: null });
+            const result = state.target === 'personal' || own
+                ? await services.client.request('delete', '/_pb/me/tokens/{token}', {
+                    params: { token: id },
+                })
+                : state.target === 'project'
+                    ? await services.client.request('delete', '/_pb/projects/{project}/tokens/{token}', {
+                        params: { project: state.project, token: id },
+                    })
+                    : await services.client.request('delete', '/_pb/tokens/{token}', {
+                        params: { token: id },
+                    });
+            if (version !== epoch)
+                return;
+            set({ busy: false });
+            if (!result.ok)
+                failure(result);
+            else {
+                await controller.load();
+                set({ notice: 'Token revoked.', renewal: null });
+            }
+        },
+        async createPrincipal(name, project, permissions) {
+            if (state.busy)
+                return;
+            const version = epoch;
+            set({ busy: true, secret: null, issuedId: null });
+            const body = {
+                name,
+                permissions: permissions,
+                ...(project === '' ? {} : { project }),
+            };
+            const result = await services.client.request('post', '/_pb/service-principals', {
+                body,
+                idempotencyKey: deps.newKey(),
+            });
+            if (version !== epoch)
+                return;
+            set({ busy: false });
+            if (!result.ok)
+                failure(result);
+            else {
+                await controller.loadPrincipals();
+                set({ notice: 'Service principal created.' });
+            }
+        },
+        async suspendPrincipal(principal) {
+            if (state.busy)
+                return;
+            const version = epoch;
+            set({ busy: true, secret: null, issuedId: null });
+            const project = principal.projectId === null ? undefined : state.projectSlugs[principal.projectId];
+            const result = project !== undefined
+                ? await services.client.request('post', '/_pb/projects/{project}/service-principals/{principal}/suspend', { params: { project, principal: principal.id } })
+                : await services.client.request('post', '/_pb/service-principals/{principal}/suspend', {
+                    params: { principal: principal.id },
+                });
+            if (version !== epoch)
+                return;
+            set({ busy: false });
+            if (!result.ok)
+                failure(result);
+            else {
+                await controller.loadPrincipals();
+                set({ notice: 'Service principal suspended; its tokens no longer work.' });
+            }
+        },
+    };
+    return controller;
+}
+export function filterTokens(items, filters) {
+    return items.filter((item) => item.name.toLowerCase().includes(filters.q.toLowerCase()) &&
+        (!filters.scope || item.scope === filters.scope) &&
+        (!filters.status || item.status === filters.status));
+}
+export function TokenList({ state: s, controller: c }) {
+    const [filters, setFilters] = useState({ q: '', scope: '', status: '' });
+    const filtered = !!(filters.q || filters.scope || filters.status);
+    const items = filterTokens(s.items, filters);
+    const scope = s.target === 'personal'
+        ? 'My personal tokens'
+        : s.target === 'project'
+            ? `Project: ${s.project}`
+            : 'Organization';
+    return (_jsxs(_Fragment, { children: [_jsx(LoadedListFilters, { values: filters, fields: [
+                    { key: 'q', label: 'Name (this page)' },
+                    { key: 'scope', label: 'Scope', options: ['read', 'write', 'full'] },
+                    { key: 'status', label: 'Status', options: ['active', 'expired', 'revoked'] },
+                ], onChange: setFilters }), _jsxs("div", { className: "my-3 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("p", { className: "text-sm text-neutral-600", children: [items.length, " tokens on this page \u00B7", ' ', items.filter((token) => token.status === 'active').length, " active"] }), _jsx(Button, { type: "button", variant: "outline", disabled: s.loading || s.busy, onClick: () => void c.load(), children: "Reload tokens" })] }), s.loading ? (_jsx(ListState, { kind: "loading", title: "Loading tokens\u2026" })) : s.listError ? (_jsx(ListState, { kind: "error", title: "Unable to load tokens." })) : items.length === 0 ? (_jsx(ListState, { kind: filtered ? 'filtered-empty' : 'empty', title: filtered ? 'No tokens match these filters on this page.' : 'No tokens on this page.' })) : (_jsx(DataTable, { label: "Tokens", items: items, columns: [
+                    {
+                        key: 'name',
+                        label: 'Token',
+                        value: (token) => token.name,
+                        render: (token) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("strong", { children: token.name }), _jsx(IdText, { value: token.id, label: "token ID" })] })),
+                    },
+                    {
+                        key: 'status',
+                        label: 'Status',
+                        value: (token) => token.status,
+                        render: (token) => _jsx(StatusBadge, { status: token.status }),
+                    },
+                    {
+                        key: 'scope',
+                        label: 'Scope',
+                        value: (token) => token.scope,
+                        render: (token) => _jsx(Badge, { variant: "outline", children: token.scope }),
+                    },
+                    {
+                        key: 'project',
+                        label: 'Project',
+                        value: (token) => token.projectId === null
+                            ? token.kind === 'pat'
+                                ? token.projectMode === 'all'
+                                    ? 'All accessible projects'
+                                    : `${token.projectCount} selected projects`
+                                : 'Organization'
+                            : (s.projectSlugs[token.projectId] ?? token.projectId),
+                        priority: 2,
+                        render: (token) => token.projectId !== null && !s.projectSlugs[token.projectId] ? (_jsx(IdText, { value: token.projectId, label: "project ID" })) : token.projectId !== null ? (s.projectSlugs[token.projectId]) : token.kind === 'pat' ? (token.projectMode === 'all' ? ('All accessible projects') : (`${token.projectCount} selected projects`)) : ('Organization'),
+                    },
+                    {
+                        key: 'lastUsedAt',
+                        label: 'Last used',
+                        value: (token) => token.lastUsedAt ?? '',
+                        priority: 2,
+                        render: (token) => _jsx(Time, { value: token.lastUsedAt, fallback: "Never" }),
+                    },
+                    {
+                        key: 'expiresAt',
+                        label: 'Expires',
+                        value: (token) => token.expiresAt ?? '',
+                        priority: 3,
+                        render: (token) => _jsx(Time, { value: token.expiresAt, fallback: "None" }),
+                    },
+                    {
+                        key: 'issuer',
+                        label: 'Issued by',
+                        value: (token) => token.kind === 'svc' && token.createdByUserId !== null
+                            ? (s.names[token.createdByUserId] ?? 'a member')
+                            : 'a member',
+                        priority: 3,
+                    },
+                    {
+                        key: 'actions',
+                        label: 'Actions',
+                        value: () => '',
+                        sortable: false,
+                        render: (token) => (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: s.busy ||
+                                        token.status !== 'active' ||
+                                        (token.kind === 'pat' && token.userId !== s.userId), onClick: () => c.renew(token), children: "Renew" }), _jsx(ConfirmAction, { action: "Revoke", target: `${token.name} (${token.id})`, scope: scope, description: "Revoking this token stops clients using it from authenticating. This cannot be undone. Create a new token to restore client access.", disabled: s.busy || token.status === 'revoked', onConfirm: () => void c.revoke(token.id) }, `${token.id}:${token.status}`)] })),
+                    },
+                ] })), s.next === null ? null : (_jsx(Button, { type: "button", disabled: s.busy || s.loading, onClick: () => void c.load(s.target, s.project, s.next), children: "Next tokens" })), _jsx("p", { className: "mt-3 text-xs text-neutral-600", children: "Secrets are never listed. Only tokens in your accessible scope appear here." })] }));
+}
+export function TokensView({ state: s, controller: c }) {
+    const personal = s.renewal?.kind === 'pat' || s.target === 'personal';
+    const policy = s.lifetime?.[personal ? 'personal' : 'service'];
+    const renewal = s.renewal;
+    const clientConfig = c.clientConfig();
+    const projectId = renewal?.kind === 'svc'
+        ? renewal.projectId
+        : s.target === 'project'
+            ? Object.keys(s.projectSlugs).find((id) => s.projectSlugs[id] === s.project)
+            : null;
+    const principalChoices = s.principalsRestricted
+        ? [
+            ...new Map(s.items
+                .filter((t) => t.kind === 'svc' && t.status === 'active' && t.servicePrincipalId !== null)
+                .map((t) => [
+                t.servicePrincipalId,
+                {
+                    id: t.servicePrincipalId,
+                    name: t.servicePrincipalId,
+                    projectId: t.projectId,
+                },
+            ])).values(),
+        ]
+        : s.principals.filter((p) => p.status === 'active');
+    function issue(event) {
+        event.preventDefault();
+        if (s.busy)
+            return;
+        const form = event.currentTarget;
+        const data = new FormData(form);
+        const scope = renewal?.kind === 'svc' ? renewal.scope : String(data.get('scope'));
+        void c.issue({
+            name: String(data.get('name')),
+            scope,
+            lifetimeDays: Number(data.get('lifetimeDays')),
+            servicePrincipalId: String(data.get('principal') ?? ''),
+            projectMode: data.get('projectMode') === 'selected' ? 'selected' : 'all',
+            projectIds: String(data.get('projectIds') ?? '')
+                .split(/\s+/)
+                .filter(Boolean),
+            overlapDays: Number(data.get('overlap') ?? 0),
+        });
+        form.reset();
+    }
+    return (_jsxs("section", { "aria-labelledby": "page-heading", className: "space-y-4", children: [_jsx("h1", { tabIndex: -1, id: "page-heading", className: "text-xl font-semibold", children: "Tokens" }), _jsx("p", { className: "text-neutral-600", children: "Credentials for Composer and npm clients. Management writes use your signed-in session. Secrets are shown once." }), _jsx(Label, { htmlFor: "token-list", children: "Token list" }), _jsxs(Select, { id: "token-list", value: s.target, disabled: s.busy, onChange: (e) => {
+                    void c.selectTarget(e.target.value, s.project);
+                }, children: [_jsx("option", { value: "personal", children: "My personal tokens" }), s.project === null ? null : _jsx("option", { value: "project", children: "Project tokens" }), _jsx("option", { value: "organization", children: "Organization tokens" })] }), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-medium", children: "Token lifetimes and access" }), _jsx("p", { className: "mt-3", children: "Your personal tokens are revoked when you leave the organization or your account is suspended. Access stops at once; the tokens are marked revoked shortly after." }), _jsx("p", { children: "Service tokens keep working when the person who created them leaves. Project owners can see, renew and revoke every service token of their project." }), _jsxs("dl", { className: "detail-list mt-3", children: [_jsx("dt", { children: "Personal maximum lifetime" }), _jsx("dd", { children: "1 year (the operator can set less)" }), _jsx("dt", { children: "Service maximum lifetime" }), _jsx("dd", { children: "1 year for every scope (the operator can change it)" })] })] }), s.notice === null || s.listError ? null : (_jsx(Alert, { children: _jsx(AlertDescription, { children: s.notice }) })), s.pending === null ? null : (_jsxs("section", { "aria-label": "Confirm token issue", className: "space-y-2", children: [_jsx("h2", { children: "Confirm token issue" }), _jsx("p", { children: "Your identity was checked. Issue this token now?" }), _jsx(Button, { type: "button", disabled: s.busy || s.loading || s.lifetime === null, onClick: () => void c.confirm(), children: "Confirm token issue" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => c.decline(), children: "Cancel" })] })), s.secret === null ? null : (_jsxs("section", { "aria-label": "Token secret", className: "detail-group space-y-3 border-emerald-200", children: [_jsx("h2", { children: "Token secret \u2014 shown once" }), _jsx("p", { children: "Copy it now. This value will not be shown again. Closing this panel keeps the token active." }), _jsx("pre", { className: "rounded-md border bg-neutral-50 p-3 overflow-x-auto whitespace-pre-wrap break-all", children: _jsx("code", { children: s.secret }) }), _jsx(Button, { type: "button", onClick: () => void c.copy(), children: "Copy token" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => c.closeSecret(), children: "Close secret panel" }), clientConfig === null ? (_jsxs("p", { children: ["Choose a project this token can access to configure Composer or npm. Open that project\u2019s registry at ", c.registryOrigin(), "/<project> for Composer or", ' ', c.registryOrigin(), "/<project>/npm/ for npm."] })) : (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Composer" }), _jsx("pre", { className: "overflow-x-auto rounded-md border bg-neutral-50 p-3", children: _jsx("code", { children: clientConfig.composer }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void c.copy('composer'), children: "Copy Composer configuration" }), _jsx("h3", { children: "npm (.npmrc)" }), _jsx("pre", { className: "overflow-x-auto rounded-md border bg-neutral-50 p-3", children: _jsx("code", { children: clientConfig.npm }) }), _jsx(Button, { type: "button", variant: "outline", onClick: () => void c.copy('npm'), children: "Copy npm configuration" })] })), s.oldPersonalId !== null ? (_jsx(ConfirmAction, { action: "Revoke old personal token", target: s.oldPersonalId, scope: "My personal tokens", description: "Clients using the old token will lose access immediately. This cannot be undone. Update clients to the new token before revoking.", disabled: s.busy, onConfirm: () => void c.revoke(s.oldPersonalId, true) })) : null] })), s.pending !== null || s.secret !== null ? null : (_jsxs("details", { open: renewal !== null, className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-semibold", children: renewal === null ? 'Issue token' : 'Renew token' }), _jsxs("form", { onSubmit: issue, className: "grid gap-2", children: [_jsx("h2", { children: renewal === null ? 'Issue token' : 'Renew token' }), _jsx(Label, { htmlFor: "token-name", children: "Name" }), _jsx(Input, { id: "token-name", name: "name", defaultValue: renewal?.name ?? '', required: true }), _jsx(Label, { htmlFor: "token-scope", children: "Scope" }), _jsxs(Select, { id: "token-scope", name: "scope", defaultValue: renewal?.scope ?? 'read', disabled: renewal?.kind === 'svc', children: [_jsx("option", { value: "read", children: "Read" }), _jsx("option", { value: "write", children: "Write" }), _jsx("option", { value: "full", children: "Full" })] }), _jsx(Label, { htmlFor: "token-lifetime", children: "Lifetime" }), _jsx(Select, { id: "token-lifetime", name: "lifetimeDays", defaultValue: policy?.defaultDays, required: true, children: policy === undefined
+                                    ? null
+                                    : lifetimeChoices(policy).map((days) => (_jsxs("option", { value: days, children: [days, " days"] }, days))) }), personal ? (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-project-mode", children: "Projects" }), _jsxs(Select, { id: "token-project-mode", name: "projectMode", defaultValue: renewal?.projectMode ?? 'all', children: [_jsx("option", { value: "all", children: "All accessible projects" }), _jsx("option", { value: "selected", children: "Selected projects" })] }), _jsx(Label, { htmlFor: "token-project-ids", children: "Selected project IDs (space separated; re-enter when renewing)" }), _jsx(Input, { id: "token-project-ids", name: "projectIds", required: renewal?.projectMode === 'selected' })] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-principal", children: "Service principal" }), _jsxs(Select, { id: "token-principal", name: "principal", defaultValue: renewal?.servicePrincipalId ?? '', disabled: renewal?.kind === 'svc', required: renewal?.kind !== 'svc', children: [_jsx("option", { value: "", disabled: true, children: "Select a principal" }), principalChoices
+                                                .filter((p) => p.projectId === projectId)
+                                                .map((p) => (_jsx("option", { value: p.id, children: p.name }, p.id)))] }), s.principalsRestricted ? (_jsx("p", { children: "Principal discovery is limited to principals referenced by the tokens you can see." })) : null] })), renewal?.kind !== 'svc' ? null : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "token-overlap", children: "Overlap" }), _jsxs(Select, { id: "token-overlap", name: "overlap", defaultValue: "0", children: [_jsx("option", { value: "0", children: "None" }), _jsx("option", { value: "1", children: "1 day" }), _jsx("option", { value: "7", children: "7 days" })] }), _jsx("p", { children: "The old token stops at the end of the overlap or when the new token expires, whichever is first." })] })), _jsx(Button, { type: "submit", disabled: s.busy || s.loading || policy === undefined, children: renewal === null ? 'Issue token' : 'Renew token' }), renewal === null ? null : (_jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => c.closeSecret(), children: "Cancel renewal" }))] }, `${s.target}:${renewal?.id ?? ''}:${policy?.defaultDays}`)] }, `${s.target}:${renewal?.id ?? ''}`)), _jsx(TokenList, { state: s, controller: c }, `${s.target}:${s.project}`), _jsxs("details", { className: "detail-group", children: [_jsx("summary", { className: "cursor-pointer font-semibold", children: "Service principals" }), _jsx("h2", { children: "Service principals" }), _jsxs("form", { className: "grid gap-2", onSubmit: (event) => {
+                            event.preventDefault();
+                            if (s.busy)
+                                return;
+                            const form = event.currentTarget;
+                            const data = new FormData(form);
+                            void c.createPrincipal(String(data.get('name')), String(data.get('project')), String(data.get('permissions')).split(/\s+/).filter(Boolean));
+                            form.reset();
+                        }, children: [_jsx(Label, { htmlFor: "principal-name", children: "Principal name" }), _jsx(Input, { id: "principal-name", name: "name", required: true }), _jsx(Label, { htmlFor: "principal-project", children: "Project ID (empty for organization)" }), _jsx(Input, { id: "principal-project", name: "project" }), _jsx(Label, { htmlFor: "principal-permissions", children: "Permissions (space separated)" }), _jsx(Input, { id: "principal-permissions", name: "permissions" }), _jsx(Button, { type: "submit", disabled: s.busy, children: "Create service principal" })] }), _jsx(Button, { type: "button", variant: "outline", disabled: s.busy, onClick: () => void c.loadPrincipals(), children: "Reload service principals" }), s.principalsRestricted ? (_jsx(ListState, { kind: "placeholder", title: "Service principal discovery is restricted." })) : s.principals.length === 0 ? (_jsx(ListState, { kind: "empty", title: "No service principals loaded." })) : (_jsx(DataTable, { label: "Service principals", items: s.principals, columns: [
+                            {
+                                key: 'name',
+                                label: 'Name',
+                                value: (principal) => principal.name,
+                                render: (principal) => (_jsxs("div", { className: "grid gap-1", children: [_jsx("strong", { children: principal.name }), _jsx(IdText, { value: principal.id, label: "principal ID" })] })),
+                            },
+                            {
+                                key: 'status',
+                                label: 'Status',
+                                value: (principal) => principal.status,
+                                render: (principal) => _jsx(StatusBadge, { status: principal.status }),
+                            },
+                            {
+                                key: 'actions',
+                                label: 'Actions',
+                                value: () => '',
+                                sortable: false,
+                                render: (principal) => (_jsx(ConfirmAction, { action: "Revoke principal access", target: `${principal.name} (${principal.id})`, scope: principal.projectId === null
+                                        ? 'Organization'
+                                        : `Project: ${s.projectSlugs[principal.projectId] ?? principal.projectId}`, description: "Suspending this principal stops all of its tokens from working. Update clients before continuing.", disabled: s.busy || principal.status !== 'active', onConfirm: () => void c.suspendPrincipal(principal) }, `${principal.id}:${principal.status}`)),
+                            },
+                        ] })), s.principalsNext === null ? null : (_jsx(Button, { type: "button", disabled: s.busy, onClick: () => void c.loadPrincipals(s.principalsNext), children: "Next service principals" }))] })] }));
+}
+export function bindTokensLifecycle(controller, events, onNavigate) {
+    const change = () => {
+        controller.navigate();
+        onNavigate();
+    };
+    const clear = () => controller.navigate();
+    events.addEventListener('hashchange', change);
+    events.addEventListener('pagehide', clear);
+    events.addEventListener('pageshow', clear);
+    return () => {
+        events.removeEventListener('hashchange', change);
+        events.removeEventListener('pagehide', clear);
+        events.removeEventListener('pageshow', clear);
+        controller.dispose();
+    };
+}
+export function bindTokensReplay(controller, services) {
+    return services.subscribeReplay?.((result) => {
+        if (!result.ok)
+            return;
+        if (/^\/_pb\/(?:me\/)?tokens\/[^/]+$/.test(result.path) ||
+            /^\/_pb\/projects\/[^/]+\/tokens\/[^/]+$/.test(result.path) ||
+            /^\/_pb\/service-principals(?:\/[^/]+\/suspend)?$/.test(result.path) ||
+            /^\/_pb\/projects\/[^/]+\/service-principals\/[^/]+\/suspend$/.test(result.path)) {
+            void controller.load();
+            void controller.loadPrincipals();
+        }
+    });
+}
+export function TokensPage() {
+    const services = useServices();
+    const controller = useMemo(() => createTokensController(services, {
+        storage: {
+            getItem: (key) => window.sessionStorage.getItem(key),
+            setItem: (key, value) => window.sessionStorage.setItem(key, value),
+            removeItem: (key) => window.sessionStorage.removeItem(key),
+        },
+        origin: window.location.origin,
+        clipboard: (text) => navigator.clipboard.writeText(text),
+        navigate: (hash) => {
+            window.location.hash = hash;
+        },
+        newKey: () => crypto.randomUUID(),
+        now: Date.now,
+    }), [services]);
+    const state = useSyncExternalStore(controller.subscribe, controller.snapshot, controller.snapshot);
+    useEffect(() => {
+        function change() {
+            const project = new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('project');
+            if (window.location.hash.startsWith('#/tokens'))
+                void controller.start(project === null ? 'personal' : 'project', project);
+        }
+        change();
+        void controller.identity();
+        void controller.loadPrincipals();
+        return bindTokensLifecycle(controller, window, change);
+    }, [controller]);
+    useEffect(() => bindTokensReplay(controller, services), [controller, services]);
+    return _jsx(TokensView, { state: state, controller: controller });
+}
+//# sourceMappingURL=tokens.js.map