@ketvietlab/ketsuite 0.1.2 → 0.1.3

package/dist/modules/user_backend/routes.js

@@ -1,20 +1,9 @@
 import { randomUUID } from 'node:crypto';
 import { text } from '@ketvietlab/ketjs';
 import { readForm, seeOther } from '../backend/forms.js';
-import { viewerOf } from '../backend/routes.js';
-import { backendPage } from '../../ui/index.js';
-import { presetsScreen, profileScreen, roleScreen, rolesScreen, userFormScreen, usersScreen, } from './screens.js';
-const localeSuffix = (url) => {
-    const lang = url.searchParams.get('lang');
-    return lang ? `?lang=${encodeURIComponent(lang)}` : '';
-};
-const inLocale = (url, path) => {
-    const target = new URL(path, 'http://ket.local');
-    const lang = url.searchParams.get('lang');
-    if (lang)
-        target.searchParams.set('lang', lang);
-    return `${target.pathname}${target.search}`;
-};
+import { presetsScreen, profileScreen, rolesScreen, roleScreen, userFormScreen, usersScreen, } from './screens/index.js';
+import { adminPage, inLocale } from '../backend/screen.js';
+import { PAGE_SIZE, pageOf, pager, searchOf, withParam } from '../backend/paging.js';
 const crossSite = (req) => {
     const origin = req.headers.origin;
     if (!origin)
@@ -26,17 +15,28 @@ const crossSite = (req) => {
         return true;
     }
 };
-const frameFor = async (ctx, url, req) => ({
-    navigation: req.headers['x-ket-navigation'] === 'fragment-v1',
-    viewer: await viewerOf(ctx, url, req),
-    menu: await ctx.menu(url, req),
-    menuFilter: url.searchParams.get('menu')?.trim() || null,
-    extras: {
-        'nav.items': await ctx.joint(url, req, 'backend:nav.items', { active: url.pathname }),
-        'topbar.end': await ctx.joint(url, req, 'backend:topbar.end'),
-    },
-});
-const document = async (ctx, url, req, title, body) => backendPage(ctx, req, { lang: ctx.localeOf(url, req), title, body });
+const validCreateId = (value) => typeof value === 'string' &&
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value);
+const safeUserReturnTo = (url, submitted) => {
+    const fallback = inLocale(url, '/admin/users');
+    if (!submitted?.startsWith('/'))
+        return fallback;
+    const target = new URL(submitted, 'http://ket.local');
+    if (target.origin !== 'http://ket.local' || target.pathname !== '/admin/users')
+        return fallback;
+    const lang = url.searchParams.get('lang');
+    if (lang)
+        target.searchParams.set('lang', lang);
+    else
+        target.searchParams.delete('lang');
+    return `${target.pathname}${target.search}`;
+};
+const withUserReturnTo = (url, path, returnTo) => {
+    const target = new URL(inLocale(url, path), 'http://ket.local');
+    target.searchParams.set('returnTo', returnTo);
+    return `${target.pathname}${target.search}`;
+};
+const userDetailPath = (url, id, returnTo) => withUserReturnTo(url, `/admin/users/${encodeURIComponent(id)}`, returnTo);
 const translatedErrors = (ctx, url, req, result) => {
     const _ = ctx.translate(ctx.localeOf(url, req));
     return (result?.errors ?? []).map((error) => `${error.field ? `${error.field}: ` : ''}${_(error.code ?? 'user.error.required')}`);
@@ -75,22 +75,43 @@ const sessionRows = async (ctx, url, req, userId) => {
 };
 const renderUser = async (ctx, url, req, id, state = {}) => {
     const _ = ctx.translate(ctx.localeOf(url, req));
-    const [row, options, sessions] = await Promise.all([
+    const [row, options, sessions, effectiveAccess] = await Promise.all([
         userOf(ctx, url, req, id),
         accessOptions(ctx, url, req),
         sessionRows(ctx, url, req, id),
+        ctx.call('user.effectiveAccess', { userId: id }, url, req),
     ]);
     if (!row)
         return text(_('user_backend.error.notFound'), { status: 404 });
+    const returnTo = safeUserReturnTo(url, state.returnTo ?? url.searchParams.get('returnTo'));
+    const values = { ...row, ...state.values, id: row.id };
     const externalIdentities = await ctx.joint(url, req, 'user_backend:user.external-identities', {
         userId: id,
     });
-    return document(ctx, url, req, row.name, userFormScreen(_, row, {
-        ...options,
-        sessions,
-        ...state,
-        integration: state.integration ? [externalIdentities, state.integration] : externalIdentities,
-    }, await frameFor(ctx, url, req), localeSuffix(url)));
+    return adminPage(ctx, url, req, {
+        title: row.name,
+        translate: false,
+        active: '/admin/users',
+        body: (_, frame) => userFormScreen(_, values, {
+            mode: 'detail',
+            action: userDetailPath(url, row.id, returnTo),
+            cancelHref: returnTo,
+            ...options,
+            sessions,
+            errors: state.errors,
+            oneTimeLink: state.oneTimeLink,
+            companiesAction: withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/companies`, returnTo),
+            branchesAction: withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/branches`, returnTo),
+            rolesAction: withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/roles`, returnTo),
+            scopedRolesAction: withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/scoped-roles`, returnTo),
+            effectiveAccess,
+            scopedRoleOperationId: state.scopedRoleOperationId ?? randomUUID(),
+            scopedRoleValues: state.scopedRoleValues,
+            tokenAction: withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/token`, returnTo),
+            sessionAction: (session) => withUserReturnTo(url, `/admin/users/${encodeURIComponent(row.id)}/sessions/${encodeURIComponent(session.id)}`, returnTo),
+            integration: state.integration ? [externalIdentities, state.integration] : externalIdentities,
+        }, frame),
+    });
 };
 const permissionGroups = async (ctx, url, req, grants) => {
     const _ = ctx.translate(ctx.localeOf(url, req));
@@ -110,12 +131,34 @@ const permissionGroups = async (ctx, url, req, grants) => {
         checked: items.every((item) => held.has(item.key)),
     }));
 };
-const renderRole = async (ctx, url, req, id, errors) => {
+const renderRole = async (ctx, url, req, id, state = {}) => {
     const _ = ctx.translate(ctx.localeOf(url, req));
-    const row = (await ctx.call('user.getRole', { id }, url, req));
+    const [row, authorizationState] = await Promise.all([
+        ctx.call('user.getRole', { id }, url, req),
+        ctx.call('user.authorizationState', {}, url, req),
+    ]);
     if (!row)
         return text(_('user_backend.error.roleNotFound'), { status: 404 });
-    return document(ctx, url, req, row.name, roleScreen(_, row, await permissionGroups(ctx, url, req, row.grants ?? []), await frameFor(ctx, url, req), localeSuffix(url), errors));
+    return adminPage(ctx, url, req, {
+        title: state.values?.name ?? row.name,
+        translate: false,
+        active: '/admin/roles',
+        body: async (_, frame) => roleScreen(_, { ...row, ...state.values, id: row.id }, {
+            mode: 'detail',
+            action: inLocale(url, `/admin/roles/${encodeURIComponent(row.id)}`),
+            cancelHref: inLocale(url, '/admin/roles'),
+            permissionsAction: row.mode === 'managed'
+                ? undefined
+                : inLocale(url, `/admin/roles/${encodeURIComponent(row.id)}/permissions`),
+            permissions: row.mode === 'managed' ? undefined : await permissionGroups(ctx, url, req, row.grants ?? []),
+            cloneAction: row.mode === 'managed'
+                ? inLocale(url, `/admin/roles/${encodeURIComponent(row.id)}/clone`)
+                : undefined,
+            cloneId: row.mode === 'managed' ? randomUUID() : undefined,
+            authorizationRevision: authorizationState.revision,
+            errors: state.errors,
+        }, frame),
+    });
 };
 const desired = (form, prefix) => Object.keys(form)
     .filter((key) => key.startsWith(`${prefix}.`))
@@ -127,17 +170,60 @@ export const routes = {
             return text('GET', { status: 405 });
         const _ = ctx.translate(ctx.localeOf(url, req));
         const includeArchived = url.searchParams.get('archived') === '1';
-        const rows = (await ctx.call('user.listUsers', { includeArchived }, url, req));
-        return document(ctx, url, req, _('user_backend.users.title'), usersScreen(_, rows, await frameFor(ctx, url, req), localeSuffix(url), includeArchived));
+        const search = searchOf(url) ?? '';
+        const currentPage = pageOf(url);
+        const locale = ctx.localeOf(url, req);
+        const needle = search.toLocaleLowerCase(locale);
+        const allRows = (await ctx.call('user.listUsers', { includeArchived }, url, req));
+        const matching = (needle
+            ? allRows.filter((row) => [row.name, row.login, row.email, row.accessKind].some((value) => String(value ?? '')
+                .toLocaleLowerCase(locale)
+                .includes(needle)))
+            : allRows).sort((left, right) => left.name.localeCompare(right.name, locale) || left.login.localeCompare(right.login, locale));
+        const rows = matching.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.users.title',
+            active: '/admin/users',
+            body: (_, frame) => {
+                frame.chrome = {
+                    search: {
+                        name: 'q',
+                        value: search,
+                        placeholder: _('user_backend.search.users'),
+                        keep: {
+                            ...(includeArchived ? { archived: '1' } : {}),
+                            ...(url.searchParams.get('lang') ? { lang: url.searchParams.get('lang') } : {}),
+                        },
+                    },
+                    pager: pager(url, currentPage, rows.length, matching.length),
+                };
+                const returnTo = safeUserReturnTo(url, `${url.pathname}${url.search}`);
+                return usersScreen(_, frame, {
+                    rows: rows.map((row) => ({
+                        ...row,
+                        detailHref: userDetailPath(url, row.id, returnTo),
+                    })),
+                    total: matching.length,
+                    createHref: withUserReturnTo(url, '/admin/users/new', returnTo),
+                    toggleHref: withParam(url, 'archived', includeArchived ? null : '1'),
+                    includeArchived,
+                });
+            },
+        });
     },
     '/admin/users/new': (ctx) => async (url, req) => {
         const _ = ctx.translate(ctx.localeOf(url, req));
+        if (req.method !== 'GET' && req.method !== 'POST')
+            return text('GET or POST', { status: 405 });
+        if (req.method === 'POST' && crossSite(req))
+            return text('Forbidden', { status: 403 });
+        const returnTo = safeUserReturnTo(url, url.searchParams.get('returnTo'));
         const options = await accessOptions(ctx, url, req);
         if (req.method === 'POST') {
-            if (crossSite(req))
-                return text('Forbidden', { status: 403 });
             const form = await readForm(req);
-            const id = randomUUID();
+            if (form.action !== 'save')
+                return text('invalid action', { status: 400 });
+            const id = validCreateId(form.id) ? form.id : randomUUID();
             const result = await ctx.call('user.createUser', {
                 id,
                 login: form.login ?? '',
@@ -148,12 +234,30 @@ export const routes = {
                 superuser: form.superuser === '1',
             }, url, req);
             if (result.ok)
-                return seeOther(inLocale(url, `/admin/users/${id}`));
-            return document(ctx, url, req, _('user_backend.users.create'), userFormScreen(_, form, { ...options, errors: translatedErrors(ctx, url, req, result) }, await frameFor(ctx, url, req), localeSuffix(url)));
+                return seeOther(userDetailPath(url, id, returnTo));
+            return adminPage(ctx, url, req, {
+                title: 'user_backend.users.create',
+                active: '/admin/users',
+                body: (_, frame) => userFormScreen(_, { ...form, id }, {
+                    mode: 'create',
+                    action: withUserReturnTo(url, '/admin/users/new', returnTo),
+                    cancelHref: returnTo,
+                    ...options,
+                    errors: translatedErrors(ctx, url, req, result),
+                }, frame),
+            });
         }
-        if (req.method !== 'GET')
-            return text('GET or POST', { status: 405 });
-        return document(ctx, url, req, _('user_backend.users.create'), userFormScreen(_, {}, options, await frameFor(ctx, url, req), localeSuffix(url)));
+        const id = randomUUID();
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.users.create',
+            active: '/admin/users',
+            body: (_, frame) => userFormScreen(_, { id }, {
+                mode: 'create',
+                action: withUserReturnTo(url, '/admin/users/new', returnTo),
+                cancelHref: returnTo,
+                ...options,
+            }, frame),
+        });
     },
     '/admin/users/{id}': (ctx) => async (url, req, params) => {
         if (req.method === 'GET')
@@ -166,6 +270,9 @@ export const routes = {
         if (!before)
             return text('Not found', { status: 404 });
         const form = await readForm(req);
+        if (form.action && form.action !== 'save')
+            return text('invalid action', { status: 400 });
+        const returnTo = safeUserReturnTo(url, url.searchParams.get('returnTo'));
         const result = (await ctx.call('user.saveUser', {
             id: params.id,
             login: form.login ?? '',
@@ -177,12 +284,16 @@ export const routes = {
             superuser: form.superuser === '1',
         }, url, req));
         if (!result.ok)
-            return renderUser(ctx, url, req, params.id, { errors: translatedErrors(ctx, url, req, result) });
+            return renderUser(ctx, url, req, params.id, {
+                errors: translatedErrors(ctx, url, req, result),
+                values: form,
+                returnTo,
+            });
         if (Number(result.securityVersion) !== Number(before.securityVersion)) {
             const sessions = await ctx.sessionsOf(url, req);
             await sessions?.endUser(params.id);
         }
-        return seeOther(inLocale(url, `/admin/users/${params.id}`));
+        return seeOther(userDetailPath(url, params.id, returnTo));
     },
     '/admin/users/{id}/companies': (ctx) => async (url, req, params) => {
         if (req.method !== 'POST')
@@ -192,7 +303,10 @@ export const routes = {
         const row = await userOf(ctx, url, req, params.id);
         if (!row)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.notFound'), { status: 404 });
-        const selected = desired(await readForm(req), 'company');
+        const form = await readForm(req);
+        if (form.action !== 'save')
+            return text('invalid action', { status: 400 });
+        const selected = desired(form, 'company');
         if (!selected.length)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.companyRequired'), {
                 status: 400,
@@ -220,7 +334,7 @@ export const routes = {
                 if (!result.ok)
                     return failure(ctx, url, req, result);
             }
-        return seeOther(inLocale(url, `/admin/users/${params.id}`));
+        return seeOther(userDetailPath(url, params.id, safeUserReturnTo(url, url.searchParams.get('returnTo'))));
     },
     '/admin/users/{id}/branches': (ctx) => async (url, req, params) => {
         if (req.method !== 'POST')
@@ -230,7 +344,10 @@ export const routes = {
         const row = await userOf(ctx, url, req, params.id);
         if (!row)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.notFound'), { status: 404 });
-        const selected = desired(await readForm(req), 'branch');
+        const form = await readForm(req);
+        if (form.action !== 'save')
+            return text('invalid action', { status: 400 });
+        const selected = desired(form, 'branch');
         for (const branchId of selected) {
             const result = await ctx.call('user.grantBranch', { id: randomUUID(), userId: params.id, branchId }, url, req);
             if (!result.ok)
@@ -253,7 +370,7 @@ export const routes = {
                 if (!result.ok)
                     return failure(ctx, url, req, result);
             }
-        return seeOther(inLocale(url, `/admin/users/${params.id}`));
+        return seeOther(userDetailPath(url, params.id, safeUserReturnTo(url, url.searchParams.get('returnTo'))));
     },
     '/admin/users/{id}/roles': (ctx) => async (url, req, params) => {
         if (req.method !== 'POST')
@@ -263,7 +380,10 @@ export const routes = {
         const row = await userOf(ctx, url, req, params.id);
         if (!row)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.notFound'), { status: 404 });
-        const selected = desired(await readForm(req), 'role');
+        const form = await readForm(req);
+        if (form.action !== 'save')
+            return text('invalid action', { status: 400 });
+        const selected = desired(form, 'role');
         for (const roleId of selected) {
             const result = await ctx.call('user.assignRole', { id: randomUUID(), userId: params.id, roleId }, url, req);
             if (!result.ok)
@@ -272,7 +392,46 @@ export const routes = {
         for (const assignment of row.assignments ?? [])
             if (!selected.includes(assignment.roleId))
                 await ctx.call('user.unassignRole', { userId: params.id, roleId: assignment.roleId }, url, req);
-        return seeOther(inLocale(url, `/admin/users/${params.id}`));
+        return seeOther(userDetailPath(url, params.id, safeUserReturnTo(url, url.searchParams.get('returnTo'))));
+    },
+    '/admin/users/{id}/scoped-roles': (ctx) => async (url, req, params) => {
+        if (req.method !== 'POST')
+            return text('POST', { status: 405 });
+        if (crossSite(req))
+            return text('Forbidden', { status: 403 });
+        const row = await userOf(ctx, url, req, params.id);
+        if (!row)
+            return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.notFound'), { status: 404 });
+        const form = await readForm(req);
+        if (form.action !== 'assign')
+            return text('invalid action', { status: 400 });
+        const effective = (await ctx.call('user.effectiveAccess', { userId: params.id }, url, req));
+        const operationId = validCreateId(form.id) ? form.id : randomUUID();
+        const result = await ctx.call('user.assignScopedRole', {
+            id: operationId,
+            userId: params.id,
+            roleId: form.roleId ?? '',
+            scopeKind: form.scopeKind ?? 'tenant',
+            companyId: form.companyId || null,
+            branchId: form.branchId || null,
+            expectedAuthorizationRevision: Number(form.expectedAuthorizationRevision ?? effective.revision),
+            idempotencyKey: form.idempotencyKey ?? form.id ?? randomUUID(),
+            reason: form.reason ?? '',
+        }, url, req);
+        if (!result.ok)
+            return renderUser(ctx, url, req, params.id, {
+                errors: translatedErrors(ctx, url, req, result),
+                scopedRoleOperationId: operationId,
+                scopedRoleValues: {
+                    roleId: form.roleId,
+                    scopeKind: form.scopeKind,
+                    companyId: form.companyId,
+                    branchId: form.branchId,
+                    reason: form.reason,
+                },
+                returnTo: safeUserReturnTo(url, url.searchParams.get('returnTo')),
+            });
+        return seeOther(userDetailPath(url, params.id, safeUserReturnTo(url, url.searchParams.get('returnTo'))));
     },
     '/admin/users/{id}/token': (ctx) => async (url, req, params) => {
         if (req.method !== 'POST')
@@ -281,9 +440,14 @@ export const routes = {
             return text('Forbidden', { status: 403 });
         const form = await readForm(req);
         const kind = form.action ?? '';
+        if (kind !== 'invitation' && kind !== 'reset')
+            return text('invalid action', { status: 400 });
         const result = (await ctx.call('user.issueAuthToken', { userId: params.id, kind, realm: 'backend' }, url, req));
         if (!result.ok || !result.token)
-            return renderUser(ctx, url, req, params.id, { errors: translatedErrors(ctx, url, req, result) });
+            return renderUser(ctx, url, req, params.id, {
+                errors: translatedErrors(ctx, url, req, result),
+                returnTo: safeUserReturnTo(url, url.searchParams.get('returnTo')),
+            });
         if (kind === 'reset')
             await (await ctx.sessionsOf(url, req))?.endUser(params.id);
         await ctx.call('user.recordSecurityEvent', { event: kind === 'reset' ? 'password.reset.issue' : 'invitation.issue', userId: params.id }, url, req);
@@ -301,6 +465,7 @@ export const routes = {
         return renderUser(ctx, url, req, params.id, {
             oneTimeLink: mailConnected ? null : path,
             integration,
+            returnTo: safeUserReturnTo(url, url.searchParams.get('returnTo')),
         });
     },
     '/admin/users/{id}/sessions/{sessionId}': (ctx) => async (url, req, params) => {
@@ -308,6 +473,9 @@ export const routes = {
             return text('POST', { status: 405 });
         if (crossSite(req))
             return text('Forbidden', { status: 403 });
+        const form = await readForm(req);
+        if (form.action !== 'revoke')
+            return text('invalid action', { status: 400 });
         const sessions = await ctx.sessionsOf(url, req);
         if (!sessions)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.sessionsUnavailable'), {
@@ -325,13 +493,26 @@ export const routes = {
         if (held)
             await sessions.store.destroy(held.id);
         await ctx.call('user.recordSecurityEvent', { event: 'session.revoke', userId: params.id }, url, req);
-        return seeOther(inLocale(url, params.id === current?.userId ? '/admin/profile' : `/admin/users/${params.id}`));
+        return seeOther(params.id === current?.userId
+            ? inLocale(url, '/admin/profile')
+            : userDetailPath(url, params.id, safeUserReturnTo(url, url.searchParams.get('returnTo'))));
     },
     '/admin/roles': (ctx) => async (url, req) => {
         if (req.method !== 'GET')
             return text('GET', { status: 405 });
         const _ = ctx.translate(ctx.localeOf(url, req));
-        return document(ctx, url, req, _('user_backend.roles.title'), rolesScreen(_, await rolesOf(ctx, url, req), await frameFor(ctx, url, req), localeSuffix(url)));
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.roles.title',
+            active: '/admin/roles',
+            body: async (_, frame) => rolesScreen(_, frame, {
+                rows: (await rolesOf(ctx, url, req)).map((row) => ({
+                    ...row,
+                    detailHref: inLocale(url, `/admin/roles/${encodeURIComponent(row.id)}`),
+                })),
+                createHref: inLocale(url, '/admin/roles/new'),
+                presetsHref: inLocale(url, '/admin/permission-presets'),
+            }),
+        });
     },
     '/admin/roles/new': (ctx) => async (url, req) => {
         const _ = ctx.translate(ctx.localeOf(url, req));
@@ -339,15 +520,35 @@ export const routes = {
             if (crossSite(req))
                 return text('Forbidden', { status: 403 });
             const form = await readForm(req);
-            const id = randomUUID();
+            if (form.action !== 'save')
+                return text('invalid action', { status: 400 });
+            const id = validCreateId(form.id) ? form.id : randomUUID();
             const result = await ctx.call('user.saveRole', { id, name: form.name ?? '', description: form.description || null }, url, req);
             if (result.ok)
-                return seeOther(inLocale(url, `/admin/roles/${id}`));
-            return document(ctx, url, req, _('user_backend.roles.create'), roleScreen(_, form, [], await frameFor(ctx, url, req), localeSuffix(url), translatedErrors(ctx, url, req, result)));
+                return seeOther(inLocale(url, `/admin/roles/${encodeURIComponent(id)}`));
+            return adminPage(ctx, url, req, {
+                title: 'user_backend.roles.create',
+                active: '/admin/roles',
+                body: (_, frame) => roleScreen(_, { ...form, id }, {
+                    mode: 'create',
+                    action: inLocale(url, '/admin/roles/new'),
+                    cancelHref: inLocale(url, '/admin/roles'),
+                    errors: translatedErrors(ctx, url, req, result),
+                }, frame),
+            });
         }
         if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        return document(ctx, url, req, _('user_backend.roles.create'), roleScreen(_, {}, [], await frameFor(ctx, url, req), localeSuffix(url)));
+        const id = randomUUID();
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.roles.create',
+            active: '/admin/roles',
+            body: (_, frame) => roleScreen(_, { id }, {
+                mode: 'create',
+                action: inLocale(url, '/admin/roles/new'),
+                cancelHref: inLocale(url, '/admin/roles'),
+            }, frame),
+        });
     },
     '/admin/roles/{id}': (ctx) => async (url, req, params) => {
         if (req.method === 'GET')
@@ -357,10 +558,38 @@ export const routes = {
         if (crossSite(req))
             return text('Forbidden', { status: 403 });
         const form = await readForm(req);
+        if (form.action && form.action !== 'save')
+            return text('invalid action', { status: 400 });
         const result = await ctx.call('user.saveRole', { id: params.id, name: form.name ?? '', description: form.description || null }, url, req);
         return result.ok
-            ? seeOther(inLocale(url, `/admin/roles/${params.id}`))
-            : renderRole(ctx, url, req, params.id, translatedErrors(ctx, url, req, result));
+            ? seeOther(inLocale(url, `/admin/roles/${encodeURIComponent(params.id)}`))
+            : renderRole(ctx, url, req, params.id, {
+                errors: translatedErrors(ctx, url, req, result),
+                values: form,
+            });
+    },
+    '/admin/roles/{id}/clone': (ctx) => async (url, req, params) => {
+        if (req.method !== 'POST')
+            return text('POST', { status: 405 });
+        if (crossSite(req))
+            return text('Forbidden', { status: 403 });
+        const form = await readForm(req);
+        if (form.action !== 'clone')
+            return text('invalid action', { status: 400 });
+        const id = validCreateId(form.id) ? form.id : randomUUID();
+        const result = await ctx.call('user.cloneManagedRole', {
+            id,
+            sourceRoleId: params.id,
+            name: form.name ?? '',
+            expectedAuthorizationRevision: Number(form.expectedAuthorizationRevision ?? 0),
+            idempotencyKey: form.idempotencyKey ?? id,
+            reason: form.reason ?? '',
+        }, url, req);
+        return result.ok
+            ? seeOther(inLocale(url, `/admin/roles/${encodeURIComponent(id)}`))
+            : renderRole(ctx, url, req, params.id, {
+                errors: translatedErrors(ctx, url, req, result),
+            });
     },
     '/admin/roles/{id}/permissions': (ctx) => async (url, req, params) => {
         if (req.method !== 'POST')
@@ -368,6 +597,8 @@ export const routes = {
         if (crossSite(req))
             return text('Forbidden', { status: 403 });
         const form = await readForm(req);
+        if (form.action && form.action !== 'save')
+            return text('invalid action', { status: 400 });
         const moduleName = form.module ?? '';
         const selected = new Set(desired(form, 'permission'));
         const catalogue = (await ctx.call('user.permissionCatalogue', {}, url, req));
@@ -380,7 +611,7 @@ export const routes = {
             if (!selected.has(group) && held.has(permission.key))
                 await ctx.call('user.revokeFunction', { roleId: params.id, fnKey: permission.key }, url, req);
         }
-        return seeOther(inLocale(url, `/admin/roles/${params.id}`));
+        return seeOther(inLocale(url, `/admin/roles/${encodeURIComponent(params.id)}`));
     },
     '/admin/permission-presets': (ctx) => async (url, req) => {
         const _ = ctx.translate(ctx.localeOf(url, req));
@@ -390,19 +621,42 @@ export const routes = {
             value: name,
             label: _(`${name}.app.title`),
         }));
-        let resultText;
         if (req.method === 'POST') {
             if (crossSite(req))
                 return text('Forbidden', { status: 403 });
             const form = await readForm(req);
+            if (form.action !== 'save')
+                return text('invalid action', { status: 400 });
             const result = (await ctx.call('user.applyPreset', { module: form.module ?? '', level: form.level ?? '' }, url, req));
             if (!result.ok)
-                return failure(ctx, url, req, result);
-            resultText = `${result.roleId}: ${result.granted ?? 0}`;
+                return adminPage(ctx, url, req, {
+                    title: 'user_backend.presets.title',
+                    active: '/admin/roles',
+                    body: (_, frame) => presetsScreen(_, frame, {
+                        modules,
+                        action: inLocale(url, '/admin/permission-presets'),
+                        values: form,
+                        errors: translatedErrors(ctx, url, req, result),
+                    }),
+                });
+            const next = new URL(inLocale(url, '/admin/permission-presets'), url);
+            next.searchParams.set('appliedRole', result.roleId ?? '');
+            next.searchParams.set('granted', String(result.granted ?? 0));
+            return seeOther(`${next.pathname}${next.search}`);
         }
         else if (req.method !== 'GET')
             return text('GET or POST', { status: 405 });
-        return document(ctx, url, req, _('user_backend.presets.title'), presetsScreen(_, modules, await frameFor(ctx, url, req), localeSuffix(url), resultText));
+        const appliedRole = url.searchParams.get('appliedRole');
+        const granted = url.searchParams.get('granted');
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.presets.title',
+            active: '/admin/roles',
+            body: (_, frame) => presetsScreen(_, frame, {
+                modules,
+                action: inLocale(url, '/admin/permission-presets'),
+                result: appliedRole ? `${appliedRole}: ${granted ?? 0}` : undefined,
+            }),
+        });
     },
     '/admin/profile': (ctx) => async (url, req) => {
         if (req.method !== 'GET')
@@ -415,7 +669,19 @@ export const routes = {
         if (!row)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.unauthorized'), { status: 401 });
         const _ = ctx.translate(ctx.localeOf(url, req));
-        return document(ctx, url, req, _('user_backend.profile.title'), profileScreen(_, row, await sessionRows(ctx, url, req, row.id), await frameFor(ctx, url, req), localeSuffix(url), undefined, await ctx.joint(url, req, 'user_backend:profile.external-identities', { userId: row.id })));
+        return adminPage(ctx, url, req, {
+            title: 'user_backend.profile.title',
+            active: '/admin/profile',
+            body: async (_, frame) => profileScreen(_, row, {
+                sessions: await sessionRows(ctx, url, req, row.id),
+                timezoneAction: inLocale(url, '/admin/profile/timezone'),
+                passwordAction: inLocale(url, '/admin/profile/password'),
+                sessionAction: (session) => inLocale(url, `/admin/users/${encodeURIComponent(row.id)}/sessions/${encodeURIComponent(session.id)}`),
+                integration: await ctx.joint(url, req, 'user_backend:profile.external-identities', {
+                    userId: row.id,
+                }),
+            }, frame),
+        });
     },
     '/admin/profile/password': (ctx) => async (url, req) => {
         if (req.method !== 'POST')
@@ -427,6 +693,8 @@ export const routes = {
         if (!sessions || !record)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.unauthorized'), { status: 401 });
         const form = await readForm(req);
+        if (form.action && form.action !== 'change')
+            return text('invalid action', { status: 400 });
         const result = (await ctx.call('user.setPassword', {
             id: record.userId,
             currentPassword: form.currentPassword ?? '',
@@ -441,7 +709,20 @@ export const routes = {
                     status: 401,
                 });
             const _ = ctx.translate(ctx.localeOf(url, req));
-            return document(ctx, url, req, _('user_backend.profile.title'), profileScreen(_, row, await sessionRows(ctx, url, req, row.id), await frameFor(ctx, url, req), localeSuffix(url), translatedErrors(ctx, url, req, result), await ctx.joint(url, req, 'user_backend:profile.external-identities', { userId: row.id })));
+            return adminPage(ctx, url, req, {
+                title: 'user_backend.profile.title',
+                active: '/admin/profile',
+                body: async (_, frame) => profileScreen(_, row, {
+                    sessions: await sessionRows(ctx, url, req, row.id),
+                    timezoneAction: inLocale(url, '/admin/profile/timezone'),
+                    passwordAction: inLocale(url, '/admin/profile/password'),
+                    sessionAction: (session) => inLocale(url, `/admin/users/${encodeURIComponent(row.id)}/sessions/${encodeURIComponent(session.id)}`),
+                    passwordErrors: translatedErrors(ctx, url, req, result),
+                    integration: await ctx.joint(url, req, 'user_backend:profile.external-identities', {
+                        userId: row.id,
+                    }),
+                }, frame),
+            });
         }
         await sessions.endUserExcept(record.userId, record.id);
         const context = {
@@ -465,6 +746,8 @@ export const routes = {
         if (!record)
             return text(ctx.translate(ctx.localeOf(url, req))('user_backend.error.unauthorized'), { status: 401 });
         const form = await readForm(req);
+        if (form.action && form.action !== 'save')
+            return text('invalid action', { status: 400 });
         const result = (await ctx.callUnchecked('user.setTimezone', { timezone: form.timezone ?? '' }, url, req));
         return result.ok
             ? seeOther(inLocale(url, '/admin/profile'))