domma-cms 1.6.59 → 1.7.0

package/docs/plans/2026-03-05-user-types-implementation.md

@@ -0,0 +1,1035 @@
+# User Types Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Move roles from static `config/auth.json` into a preset Collection (`content/collections/user-types/`), add a User Types tab to the Users admin view with full CRUD, and wire the auth middleware to read roles dynamically from the collection cache.
+
+**Architecture:** A new `server/services/userTypes.js` service seeds the preset collection on startup, loads it into an in-memory cache (roleMap + permissionsMap), and exposes `getRoleMap()`, `getPermissionsFor(resource)`, and `invalidate()`. The auth middleware calls these functions at request time instead of reading static config. The Collections route calls `invalidate()` after any CRUD on the `user-types` slug.
+
+**Tech Stack:** Fastify 5 ESM, `fs/promises`, Domma SPA (tabs via `E.tabs()`, table via `T.create()`, modal via `E.modal()`), existing Collections API routes.
+
+---
+
+## Task 1: Create `server/services/userTypes.js`
+
+**Files:**
+- Create: `server/services/userTypes.js`
+
+**Step 1: Write the file**
+
+```js
+/**
+ * User Types Service
+ * Preset Collection - seeds roles on first startup, caches them in memory.
+ * Auth middleware calls getRoleMap() / getPermissionsFor() at request time.
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import { v4 as uuidv4 } from 'uuid';
+import { config } from '../config.js';
+
+const COLLECTIONS_DIR = path.resolve(config.content.collectionsDir);
+const SLUG            = 'user-types';
+const DIR             = path.join(COLLECTIONS_DIR, SLUG);
+const SCHEMA_PATH     = path.join(DIR, 'schema.json');
+const DATA_PATH       = path.join(DIR, 'data.json');
+
+const RESOURCES = ['pages', 'settings', 'navigation', 'layouts', 'media', 'users', 'plugins', 'collections'];
+
+const PRESET_SCHEMA = {
+    slug:        SLUG,
+    title:       'User Types',
+    description: 'CMS role definitions - managed by the system.',
+    preset:      true,
+    fields: [
+        { name: 'name',        label: 'Name (slug)',   type: 'text',         required: true  },
+        { name: 'label',       label: 'Label',         type: 'text',         required: true  },
+        { name: 'level',       label: 'Level',         type: 'number',       required: true  },
+        { name: 'permissions', label: 'Permissions',   type: 'multi-select', options: RESOURCES },
+        { name: 'badgeClass',  label: 'Badge Class',   type: 'select',
+          options: ['badge-danger','badge-warning','badge-info','badge-secondary','badge-success','badge-primary'] }
+    ],
+    api: {
+        create: { enabled: false, access: 'admin' },
+        read:   { enabled: false, access: 'admin' },
+        update: { enabled: false, access: 'admin' },
+        delete: { enabled: false, access: 'admin' }
+    }
+};
+
+const SEED_ENTRIES = [
+    { name: 'admin',      label: 'Admin',      level: 0, permissions: RESOURCES,                                                              badgeClass: 'badge-danger'    },
+    { name: 'manager',    label: 'Manager',    level: 1, permissions: ['pages','settings','navigation','layouts','media','users','collections'], badgeClass: 'badge-warning'   },
+    { name: 'editor',     label: 'Editor',     level: 2, permissions: ['pages','media'],                                                        badgeClass: 'badge-info'      },
+    { name: 'subscriber', label: 'Subscriber', level: 3, permissions: [],                                                                        badgeClass: 'badge-secondary' }
+];
+
+// ---------------------------------------------------------------------------
+// In-memory cache
+// ---------------------------------------------------------------------------
+
+/** @type {Map<string,{label:string,level:number,badgeClass:string}>} */
+let roleMap = new Map();
+
+/** @type {Map<string,string[]>} */
+let permissionsMap = new Map();
+
+/**
+ * Build in-memory maps from an array of data entries.
+ *
+ * @param {object[]} entries
+ */
+function buildCache(entries) {
+    roleMap        = new Map();
+    permissionsMap = new Map();
+
+    for (const entry of entries) {
+        const d = entry.data;
+        roleMap.set(d.name, { label: d.label, level: d.level, badgeClass: d.badgeClass || '' });
+        for (const resource of (d.permissions || [])) {
+            if (!permissionsMap.has(resource)) permissionsMap.set(resource, []);
+            permissionsMap.get(resource).push(d.name);
+        }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Seed the preset collection on first startup (no-op if data.json already exists).
+ *
+ * @returns {Promise<void>}
+ */
+export async function seed() {
+    await fs.mkdir(DIR, { recursive: true });
+
+    // Always write schema (overwrite to keep in sync with code)
+    await fs.writeFile(SCHEMA_PATH, JSON.stringify(PRESET_SCHEMA, null, 2) + '\n', 'utf8');
+
+    // Only write data if it doesn't exist yet
+    try {
+        await fs.access(DATA_PATH);
+    } catch {
+        const entries = SEED_ENTRIES.map(data => ({ id: uuidv4(), data, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }));
+        await fs.writeFile(DATA_PATH, JSON.stringify(entries, null, 2) + '\n', 'utf8');
+    }
+}
+
+/**
+ * Load the collection from disk into the in-memory cache.
+ *
+ * @returns {Promise<void>}
+ */
+export async function load() {
+    try {
+        const raw     = await fs.readFile(DATA_PATH, 'utf8');
+        const entries = JSON.parse(raw);
+        buildCache(entries);
+    } catch (err) {
+        console.warn('[userTypes] Failed to load user-types collection:', err.message);
+    }
+}
+
+/**
+ * Reload from disk - call after any CRUD on the user-types collection.
+ *
+ * @returns {Promise<void>}
+ */
+export async function invalidate() {
+    await load();
+}
+
+/**
+ * Return the full role map.
+ *
+ * @returns {Map<string,{label:string,level:number,badgeClass:string}>}
+ */
+export function getRoleMap() {
+    return roleMap;
+}
+
+/**
+ * Return the level for a named role, or Infinity if not found.
+ *
+ * @param {string} roleName
+ * @returns {number}
+ */
+export function getRoleLevel(roleName) {
+    return roleMap.get(roleName)?.level ?? Infinity;
+}
+
+/**
+ * Return the role names allowed to access a resource, or [] if resource unknown.
+ *
+ * @param {string} resource
+ * @returns {string[]}
+ */
+export function getPermissionsFor(resource) {
+    return permissionsMap.get(resource) ?? [];
+}
+
+/**
+ * Return role names ordered from most to least privileged.
+ *
+ * @returns {string[]}
+ */
+export function getRoleHierarchy() {
+    return [...roleMap.entries()]
+        .sort((a, b) => a[1].level - b[1].level)
+        .map(([key]) => key);
+}
+```
+
+**Step 2: Verify file created**
+
+```bash
+cat server/services/userTypes.js | head -5
+```
+Expected: first comment line visible.
+
+**Step 3: Commit**
+
+```bash
+git add server/services/userTypes.js
+git commit -m "feat: add userTypes service (seed, load, cache)"
+```
+
+---
+
+## Task 2: Seed + load in `server/server.js`
+
+**Files:**
+- Modify: `server/server.js`
+
+**Step 1: Add import after existing imports (before `const app = Fastify`)**
+
+After `import { registerPlugins } from './services/plugins.js';` add:
+
+```js
+import { seed as seedUserTypes, load as loadUserTypes } from './services/userTypes.js';
+```
+
+**Step 2: Add seed + load calls before route imports**
+
+After the `await fs.mkdir(pluginsDir, { recursive: true });` block (around line 85) and before the `// Auth API Routes` comment, add:
+
+```js
+// ---------------------------------------------------------------------------
+// User Types - seed preset collection + load into cache
+// ---------------------------------------------------------------------------
+
+await seedUserTypes();
+await loadUserTypes();
+```
+
+**Step 3: Verify server still starts**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/api/auth/setup-status
+```
+Expected: `200`
+
+**Step 4: Verify seed files created**
+
+```bash
+ls content/collections/user-types/
+```
+Expected: `data.json  schema.json`
+
+```bash
+cat content/collections/user-types/data.json | head -5
+```
+Expected: JSON array with first entry visible.
+
+**Step 5: Commit**
+
+```bash
+git add server/server.js
+git commit -m "feat: seed and load user types on startup"
+```
+
+---
+
+## Task 3: Update `server/middleware/auth.js`
+
+**Files:**
+- Modify: `server/middleware/auth.js`
+
+The goal is to replace the static `config.auth.roles` read with calls to the userTypes cache. No breaking changes to existing exports - just switch internals to use `getRoleMap()` / `getRoleLevel()` / `getRoleHierarchy()`.
+
+**Step 1: Replace entire file with updated version**
+
+```js
+/**
+ * Authentication Middleware
+ * JWT-based authentication with role guards for Domma CMS.
+ * Role data is read from the userTypes cache (not config.auth.roles).
+ */
+import { getRoleMap, getRoleLevel, getRoleHierarchy, getPermissionsFor } from '../services/userTypes.js';
+
+/**
+ * Role hierarchy ordered from most to least privileged.
+ * Computed lazily at request time from the userTypes cache.
+ *
+ * @returns {string[]}
+ */
+export function getRoleHierarchyList() {
+    return getRoleHierarchy();
+}
+
+/**
+ * Verify JWT Bearer token. Populates request.user on success.
+ *
+ * @param {FastifyRequest} request
+ * @param {FastifyReply} reply
+ * @returns {Promise<void>}
+ */
+export async function authenticate(request, reply) {
+    try {
+        await request.jwtVerify();
+    } catch {
+        return reply.code(401).send({
+            statusCode: 401,
+            error: 'Unauthorised',
+            message: 'Invalid or missing authentication token'
+        });
+    }
+}
+
+/**
+ * Return a preHandler that enforces one of the specified roles.
+ * Must be used after authenticate.
+ *
+ * @param {string[]} allowedRoles
+ * @returns {Function}
+ */
+export function requireRole(allowedRoles) {
+    const allowed = Array.isArray(allowedRoles) ? allowedRoles : [allowedRoles];
+
+    return async (request, reply) => {
+        if (!request.user) {
+            return reply.code(401).send({
+                statusCode: 401,
+                error: 'Unauthorised',
+                message: 'Authentication required'
+            });
+        }
+
+        if (!allowed.includes(request.user.role)) {
+            return reply.code(403).send({
+                statusCode: 403,
+                error: 'Forbidden',
+                message: `Access denied. Required role: ${allowed.join(' or ')}`
+            });
+        }
+    };
+}
+
+/**
+ * Return a preHandler that checks the current user's role has access to resource.
+ * Reads from the userTypes cache at request time - reflects live role changes.
+ *
+ * @param {string} resource - Resource key (e.g. 'pages', 'users')
+ * @returns {Function}
+ */
+export function requirePermission(resource) {
+    return async (request, reply) => {
+        if (!request.user) {
+            return reply.code(401).send({
+                statusCode: 401,
+                error: 'Unauthorised',
+                message: 'Authentication required'
+            });
+        }
+
+        const allowed = getPermissionsFor(resource);
+        if (!allowed.includes(request.user.role)) {
+            return reply.code(403).send({
+                statusCode: 403,
+                error: 'Forbidden',
+                message: 'Insufficient permissions'
+            });
+        }
+    };
+}
+
+/**
+ * Shorthand preHandler - level-0 role (admin) only.
+ *
+ * @param {FastifyRequest} request
+ * @param {FastifyReply} reply
+ * @returns {Promise<void>}
+ */
+export async function requireAdmin(request, reply) {
+    if (!request.user) {
+        return reply.code(401).send({ statusCode: 401, error: 'Unauthorised', message: 'Authentication required' });
+    }
+    const level = getRoleLevel(request.user.role);
+    if (level !== 0) {
+        return reply.code(403).send({ statusCode: 403, error: 'Forbidden', message: 'Admin access required' });
+    }
+}
+
+/**
+ * Determine whether an actor can manage a target user.
+ * Managers cannot create, edit, or delete users with a lower level number (higher privilege).
+ *
+ * @param {string} actorRole - Role of the user performing the action
+ * @param {string} targetRole - Role of the user being acted upon
+ * @returns {boolean}
+ */
+export function canManageUser(actorRole, targetRole) {
+    const actorLevel  = getRoleLevel(actorRole);
+    const targetLevel = getRoleLevel(targetRole);
+    return actorLevel < targetLevel;
+}
+```
+
+**Step 2: Verify server still starts**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/api/auth/setup-status
+```
+Expected: `200`
+
+**Step 3: Commit**
+
+```bash
+git add server/middleware/auth.js
+git commit -m "refactor: auth middleware reads roles from userTypes cache"
+```
+
+---
+
+## Task 4: Update route guards to use `requirePermission`
+
+**Files:**
+- Modify: `server/routes/api/pages.js`
+- Modify: `server/routes/api/settings.js`
+- Modify: `server/routes/api/layouts.js`
+- Modify: `server/routes/api/navigation.js`
+- Modify: `server/routes/api/media.js`
+- Modify: `server/routes/api/users.js`
+- Modify: `server/routes/api/plugins.js`
+- Modify: `server/routes/api/collections.js`
+
+**Step 1: In each file, update the import line**
+
+Find: `import { authenticate, requireRole } from '../../middleware/auth.js';`
+Replace with: `import { authenticate, requireRole, requirePermission } from '../../middleware/auth.js';`
+
+(Some files also import `canManageUser` or `requireAdmin` - keep those.)
+
+**Step 2: In each file, update the guard**
+
+Find the pattern: `const guard = [authenticate, requireRole(permissions.xxx)];` or `{ preHandler: [authenticate, requireRole(config.auth.permissions.xxx)] }`
+
+Replace with: `const guard = [authenticate, requirePermission('xxx')];` or `{ preHandler: [authenticate, requirePermission('xxx')] }`
+
+Use the correct resource key for each file:
+- `pages.js` → `requirePermission('pages')`
+- `settings.js` → `requirePermission('settings')`
+- `layouts.js` → `requirePermission('layouts')`
+- `navigation.js` → `requirePermission('navigation')`
+- `media.js` → `requirePermission('media')`
+- `users.js` → `requirePermission('users')`
+- `plugins.js` → `requirePermission('plugins')`
+- `collections.js` → `requirePermission('collections')`
+
+**Step 3: Remove `const { permissions } = config.auth;` and `import { config } from` lines** from any file that no longer uses `config` for anything else. Check each file individually - some may use `config` for other things (e.g. `auth.js` uses `accessTokenExpiry`).
+
+**Step 4: Update `roleLevel()` in `collections.js`**
+
+The existing `roleLevel()` helper reads `config.auth.roles`. Replace it:
+
+Find:
+```js
+function roleLevel(roleName) {
+    return config.auth.roles[roleName]?.level ?? 99;
+}
+```
+Replace with:
+```js
+import { getRoleLevel } from '../../services/userTypes.js';
+// ... (add to existing imports)
+
+function roleLevel(roleName) {
+    return getRoleLevel(roleName);
+}
+```
+
+**Step 5: Verify login still works**
+
+```bash
+curl -s -X POST http://localhost/api/auth/login \
+  -H 'Content-Type: application/json' \
+  -d '{"email":"your@email.com","password":"yourpass"}' | head -c 100
+```
+Expected: JSON with `token` key.
+
+**Step 6: Commit**
+
+```bash
+git add server/routes/api/
+git commit -m "refactor: route guards use requirePermission (reads userTypes cache)"
+```
+
+---
+
+## Task 5: Invalidate cache on user-types CRUD + protect preset schema
+
+**Files:**
+- Modify: `server/routes/api/collections.js`
+
+**Step 1: Add invalidate import**
+
+Add to existing imports:
+```js
+import { invalidate as invalidateUserTypes } from '../../services/userTypes.js';
+```
+
+**Step 2: Protect user-types schema from delete**
+
+In the `DELETE /collections/:slug` handler, add a guard before the try/catch:
+
+```js
+fastify.delete('/collections/:slug', guard, async (request, reply) => {
+    if (request.params.slug === 'user-types') {
+        return reply.status(403).send({ error: 'Cannot delete a preset collection' });
+    }
+    // ... existing try/catch
+});
+```
+
+**Step 3: Invalidate cache after user-types entry CRUD**
+
+After each entry write operation (`POST`, `PUT`, `DELETE` on `/collections/:slug/entries`), add:
+
+```js
+if (request.params.slug === 'user-types') await invalidateUserTypes();
+```
+
+For entry create (after `return reply.status(201).send(entry);` - add before return):
+```js
+if (request.params.slug === 'user-types') await invalidateUserTypes();
+return reply.status(201).send(entry);
+```
+
+For entry update:
+```js
+if (request.params.slug === 'user-types') await invalidateUserTypes();
+return entry;
+```
+
+For entry delete (single):
+```js
+if (request.params.slug === 'user-types') await invalidateUserTypes();
+return { success: true };
+```
+
+**Step 4: Also protect level-0 entry from delete**
+
+In the `DELETE /collections/:slug/entries/:id` handler, add after finding the entry:
+
+```js
+const entry = await getEntry(request.params.slug, request.params.id);
+if (!entry) return reply.status(404).send({ error: 'Entry not found' });
+
+if (request.params.slug === 'user-types' && entry.data?.level === 0) {
+    return reply.status(403).send({ error: 'Cannot delete the root admin role' });
+}
+```
+
+(You will need to call `getEntry` before deleting - check if the existing delete handler already does this. If not, add the lookup.)
+
+**Step 5: Verify user-types entries are readable**
+
+```bash
+curl -s http://localhost/api/collections/user-types/entries \
+  -H "Authorization: Bearer YOUR_TOKEN" | head -c 200
+```
+Expected: JSON with `entries` array containing 4 roles.
+
+**Step 6: Commit**
+
+```bash
+git add server/routes/api/collections.js
+git commit -m "feat: invalidate userTypes cache on collection CRUD, protect preset + level-0"
+```
+
+---
+
+## Task 6: Strip `roles` + `permissions` from `config/auth.json`
+
+**Files:**
+- Modify: `config/auth.json`
+
+**Step 1: Replace file contents**
+
+```json
+{
+    "accessTokenExpiry": "15m",
+    "refreshTokenExpiry": "7d",
+    "bcryptRounds": 10
+}
+```
+
+**Step 2: Verify server still starts cleanly**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/
+```
+Expected: `200`
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/api/auth/setup-status
+```
+Expected: `200`
+
+**Step 3: Commit**
+
+```bash
+git add config/auth.json
+git commit -m "chore: remove static roles/permissions from auth.json (now in user-types collection)"
+```
+
+---
+
+## Task 7: Update `admin/js/templates/users.html` - tabs structure
+
+**Files:**
+- Modify: `admin/js/templates/users.html`
+
+**Step 1: Replace file contents**
+
+```html
+<div class="view-header">
+    <h1><span data-icon="users"></span> Users</h1>
+    <div id="users-header-actions">
+        <a href="#/users/new" class="btn btn-primary"><span data-icon="plus"></span> New User</a>
+    </div>
+</div>
+
+<div class="tabs" id="users-tabs">
+    <div class="tab-list">
+        <button class="tab-item active" data-tab="users">Users</button>
+        <button class="tab-item" data-tab="user-types">User Types</button>
+    </div>
+    <div class="tab-content">
+        <div class="tab-panel active" id="panel-users">
+            <div class="card">
+                <div class="card-body">
+                    <div id="users-table"></div>
+                </div>
+            </div>
+        </div>
+        <div class="tab-panel" id="panel-user-types">
+            <div class="card">
+                <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;">
+                    <strong>User Types</strong>
+                    <button class="btn btn-primary btn-sm" id="btn-add-user-type">
+                        <span data-icon="plus"></span> Add User Type
+                    </button>
+                </div>
+                <div class="card-body">
+                    <div id="user-types-table"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+**Step 2: Commit**
+
+```bash
+git add admin/js/templates/users.html
+git commit -m "feat: add tabs to users template (Users + User Types panels)"
+```
+
+---
+
+## Task 8: Update `admin/js/views/users.js` - tabs + User Types table + modal
+
+**Files:**
+- Modify: `admin/js/views/users.js`
+
+**Step 1: Replace entire file**
+
+```js
+/**
+ * Users View
+ * Two tabs: Users (existing table) and User Types (preset collection CRUD).
+ */
+import {api, getUser} from '../api.js';
+
+const RESOURCES = ['pages', 'settings', 'navigation', 'layouts', 'media', 'users', 'plugins', 'collections'];
+
+const BADGE_OPTIONS = [
+    { value: 'badge-danger',    label: 'Red (Admin)'       },
+    { value: 'badge-warning',   label: 'Orange (Manager)'  },
+    { value: 'badge-info',      label: 'Blue (Editor)'     },
+    { value: 'badge-secondary', label: 'Grey (Subscriber)' },
+    { value: 'badge-success',   label: 'Green'             },
+    { value: 'badge-primary',   label: 'Primary'           }
+];
+
+export const usersView = {
+    templateUrl: '/admin/js/templates/users.html',
+
+    async onMount($container) {
+        // Init tabs
+        E.tabs($container.find('#users-tabs').get(0));
+
+        // Hide "New User" button when on User Types tab
+        $container.find('.tab-item[data-tab="user-types"]').on('click', function () {
+            $container.find('#users-header-actions').css('display', 'none');
+        });
+        $container.find('.tab-item[data-tab="users"]').on('click', function () {
+            $container.find('#users-header-actions').css('display', '');
+        });
+
+        // -----------------------------------------------------------------------
+        // Tab 1: Users
+        // -----------------------------------------------------------------------
+        const currentUser = getUser();
+        let users = await api.users.list().catch(() => []);
+
+        const renderUsersTable = (data) => {
+            T.create('#users-table', {
+                data,
+                columns: [
+                    { key: 'name',  title: 'Name'  },
+                    { key: 'email', title: 'Email' },
+                    {
+                        key: 'role', title: 'Role',
+                        render: (val) => `<span class="badge badge-secondary">${val}</span>`
+                    },
+                    {
+                        key: 'isActive', title: 'Status',
+                        render: (val) => val
+                            ? '<span class="badge badge-success">Active</span>'
+                            : '<span class="badge badge-secondary">Inactive</span>'
+                    },
+                    {
+                        key: 'lastLogin', title: 'Last login',
+                        render: (val) => val ? D(val).format('DD MMM YYYY HH:mm') : 'Never'
+                    },
+                    {
+                        key: 'actions', title: 'Actions',
+                        render: (_, row) => {
+                            const isSelf = row.id === currentUser?.id;
+                            return `
+                                <a href="#/users/edit/${row.id}" class="btn btn-sm btn-outline">Edit</a>
+                                ${!isSelf ? `<button class="btn btn-sm btn-danger btn-delete-user" data-id="${row.id}" data-name="${escapeAttr(row.name)}">Delete</button>` : ''}
+                            `;
+                        }
+                    }
+                ],
+                emptyMessage: 'No users found.'
+            });
+            Domma.icons.scan();
+        };
+
+        renderUsersTable(users);
+
+        $container.off('click', '.btn-delete-user').on('click', '.btn-delete-user', async function () {
+            const id   = $(this).data('id');
+            const name = $(this).data('name');
+            const confirmed = await E.confirm(`Delete user <strong>${name}</strong>? This cannot be undone.`);
+            if (!confirmed) return;
+            try {
+                await api.delete(`/users/${id}`);
+                E.toast('User deleted.', { type: 'success' });
+                users = users.filter(u => u.id !== id);
+                renderUsersTable(users);
+            } catch (err) {
+                E.toast(`Failed to delete: ${err.message}`, { type: 'error' });
+            }
+        });
+
+        // -----------------------------------------------------------------------
+        // Tab 2: User Types
+        // -----------------------------------------------------------------------
+        let userTypes = [];
+
+        const renderUserTypesTable = (data) => {
+            T.create('#user-types-table', {
+                data,
+                columns: [
+                    {
+                        key: 'data', title: 'Label',
+                        render: (d) => `<span class="badge ${d.badgeClass || 'badge-secondary'}">${d.label}</span>`
+                    },
+                    {
+                        key: 'data', title: 'Name (slug)',
+                        render: (d) => `<code>${d.name}</code>`
+                    },
+                    {
+                        key: 'data', title: 'Level',
+                        render: (d) => d.level
+                    },
+                    {
+                        key: 'data', title: 'Permissions',
+                        render: (d) => (d.permissions || []).join(', ') || '<em>none</em>'
+                    },
+                    {
+                        key: 'id', title: 'Actions',
+                        render: (id, row) => {
+                            const isRoot = row.data?.level === 0;
+                            return `
+                                <button class="btn btn-sm btn-outline btn-edit-ut" data-id="${id}">Edit</button>
+                                ${!isRoot ? `<button class="btn btn-sm btn-danger btn-delete-ut" data-id="${id}" data-name="${escapeAttr(row.data?.label)}">Delete</button>` : ''}
+                            `;
+                        }
+                    }
+                ],
+                emptyMessage: 'No user types found.'
+            });
+            Domma.icons.scan();
+        };
+
+        const loadUserTypes = async () => {
+            const res  = await api.get('/collections/user-types/entries?limit=100');
+            userTypes  = res.entries || [];
+            renderUserTypesTable(userTypes);
+        };
+
+        await loadUserTypes();
+
+        // Build User Type modal form
+        const buildUtForm = (entry = null) => {
+            const d = entry?.data || {};
+
+            const form = document.createElement('div');
+            form.style.cssText = 'display:flex;flex-direction:column;gap:1rem;padding:1rem;';
+
+            const field = (label, input) => {
+                const wrap = document.createElement('div');
+                const lbl  = document.createElement('label');
+                lbl.textContent = label;
+                lbl.style.cssText = 'display:block;font-size:.85rem;margin-bottom:.25rem;font-weight:600;';
+                wrap.appendChild(lbl);
+                wrap.appendChild(input);
+                return wrap;
+            };
+
+            // Name
+            const nameInput = document.createElement('input');
+            nameInput.type  = 'text';
+            nameInput.value = d.name || '';
+            nameInput.placeholder = 'e.g. moderator';
+            nameInput.className = 'form-control';
+            if (d.level === 0) nameInput.disabled = true;
+
+            // Label
+            const labelInput = document.createElement('input');
+            labelInput.type  = 'text';
+            labelInput.value = d.label || '';
+            labelInput.placeholder = 'e.g. Moderator';
+            labelInput.className = 'form-control';
+
+            // Level
+            const levelInput = document.createElement('input');
+            levelInput.type  = 'number';
+            levelInput.value = d.level ?? '';
+            levelInput.min   = d.level === 0 ? 0 : 1;
+            levelInput.className = 'form-control';
+            if (d.level === 0) levelInput.disabled = true;
+
+            // Badge class select
+            const badgeSelect = document.createElement('select');
+            badgeSelect.className = 'form-control';
+            BADGE_OPTIONS.forEach(opt => {
+                const o = document.createElement('option');
+                o.value = opt.value;
+                o.textContent = opt.label;
+                if (d.badgeClass === opt.value) o.selected = true;
+                badgeSelect.appendChild(o);
+            });
+
+            // Permissions checkboxes
+            const permWrap = document.createElement('div');
+            permWrap.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:.25rem;';
+            RESOURCES.forEach(r => {
+                const label = document.createElement('label');
+                label.style.cssText = 'display:flex;align-items:center;gap:.4rem;font-size:.875rem;';
+                const cb = document.createElement('input');
+                cb.type  = 'checkbox';
+                cb.name  = 'perm';
+                cb.value = r;
+                if ((d.permissions || []).includes(r)) cb.checked = true;
+                label.appendChild(cb);
+                label.appendChild(document.createTextNode(r));
+                permWrap.appendChild(label);
+            });
+
+            // Save button
+            const saveBtn = document.createElement('button');
+            saveBtn.className = 'btn btn-primary';
+            saveBtn.textContent = entry ? 'Update User Type' : 'Create User Type';
+
+            form.appendChild(field('Name (slug)', nameInput));
+            form.appendChild(field('Label', labelInput));
+            form.appendChild(field('Level', levelInput));
+            form.appendChild(field('Badge Colour', badgeSelect));
+            form.appendChild(field('Permissions', permWrap));
+            form.appendChild(saveBtn);
+
+            return { form, nameInput, labelInput, levelInput, badgeSelect, permWrap, saveBtn };
+        };
+
+        const openUtModal = (entry = null) => {
+            const { form, nameInput, labelInput, levelInput, badgeSelect, permWrap, saveBtn } = buildUtForm(entry);
+            const modal = E.modal({ title: entry ? 'Edit User Type' : 'Add User Type', size: 'md' });
+            modal.element.appendChild(form);
+            modal.open();
+
+            saveBtn.addEventListener('click', async () => {
+                const name  = nameInput.value.trim().toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                const label = labelInput.value.trim();
+                const level = parseInt(levelInput.value, 10);
+                const perms = [...permWrap.querySelectorAll('input[name="perm"]:checked')].map(cb => cb.value);
+                const badgeClass = badgeSelect.value;
+
+                if (!name || !label || isNaN(level)) {
+                    E.toast('Name, label and level are required.', { type: 'error' });
+                    return;
+                }
+
+                const data = { name, label, level, permissions: perms, badgeClass };
+                try {
+                    if (entry) {
+                        await api.put(`/collections/user-types/entries/${entry.id}`, { data });
+                        E.toast('User type updated.', { type: 'success' });
+                    } else {
+                        await api.post('/collections/user-types/entries', { data });
+                        E.toast('User type created.', { type: 'success' });
+                    }
+                    modal.close();
+                    await loadUserTypes();
+                } catch (err) {
+                    E.toast(`Error: ${err.message}`, { type: 'error' });
+                }
+            });
+        };
+
+        // Add button
+        $container.find('#btn-add-user-type').on('click', () => openUtModal());
+
+        // Edit / Delete delegation via native event (namespaced delegation broken in Domma)
+        document.addEventListener('click', async function handler(e) {
+            // Clean up when view is unmounted (element removed from DOM)
+            if (!document.contains($container.get(0))) {
+                document.removeEventListener('click', handler);
+                return;
+            }
+
+            const editBtn   = e.target.closest('.btn-edit-ut');
+            const deleteBtn = e.target.closest('.btn-delete-ut');
+
+            if (editBtn) {
+                const id    = editBtn.dataset.id;
+                const entry = userTypes.find(ut => ut.id === id);
+                if (entry) openUtModal(entry);
+            }
+
+            if (deleteBtn) {
+                const id    = deleteBtn.dataset.id;
+                const name  = deleteBtn.dataset.name;
+                const confirmed = await E.confirm(`Delete user type <strong>${name}</strong>?`);
+                if (!confirmed) return;
+                try {
+                    await api.delete(`/collections/user-types/entries/${id}`);
+                    E.toast('User type deleted.', { type: 'success' });
+                    await loadUserTypes();
+                } catch (err) {
+                    E.toast(`Failed: ${err.message}`, { type: 'error' });
+                }
+            }
+        });
+    }
+};
+
+function escapeAttr(str) {
+    return String(str).replace(/"/g, '&quot;');
+}
+```
+
+**Step 2: Verify page loads in browser**
+
+Navigate to `http://localhost/admin/#/users` - you should see two tabs. Users tab should show the existing table. User Types tab should show the 4 seed roles.
+
+**Step 3: Test add/edit/delete**
+
+- Click "Add User Type" - modal should open
+- Fill in name, label, level, permissions → Save
+- New entry appears in table
+- Click Edit on an entry → modal pre-populated
+- Click Delete on non-admin entry → confirm prompt → deleted
+
+**Step 4: Commit**
+
+```bash
+git add admin/js/views/users.js
+git commit -m "feat: users view gets User Types tab with full CRUD"
+```
+
+---
+
+## Task 9: End-to-end verification
+
+**Step 1: Confirm auth still works**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/api/auth/setup-status
+```
+Expected: `200`
+
+**Step 2: Confirm user-types entries accessible**
+
+```bash
+TOKEN=$(curl -s -X POST http://localhost/api/auth/login \
+  -H 'Content-Type: application/json' \
+  -d '{"email":"YOUR_EMAIL","password":"YOUR_PASS"}' | grep -o '"token":"[^"]*"' | cut -d'"' -f4)
+
+curl -s http://localhost/api/collections/user-types/entries \
+  -H "Authorization: Bearer $TOKEN" | python3 -m json.tool | head -30
+```
+Expected: JSON with 4 role entries.
+
+**Step 3: Confirm pages API still works**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" http://localhost/api/pages \
+  -H "Authorization: Bearer $TOKEN"
+```
+Expected: `200`
+
+**Step 4: Confirm preset collection protected**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}" -X DELETE \
+  http://localhost/api/collections/user-types \
+  -H "Authorization: Bearer $TOKEN"
+```
+Expected: `403`
+
+**Step 5: Confirm admin role protected from delete**
+
+Get the admin entry ID first, then:
+```bash
+curl -s -o /dev/null -w "%{http_code}" -X DELETE \
+  "http://localhost/api/collections/user-types/entries/ADMIN_ENTRY_ID" \
+  -H "Authorization: Bearer $TOKEN"
+```
+Expected: `403`
+
+**Step 6: Final commit**
+
+```bash
+git add -A
+git commit -m "feat: User Types complete - dynamic roles via preset collection"
+```