Move admin screens (users/groups/roles/oauth2-clients) into a drop-in example plugin; add the ctx.system capability surface

views/admin/client-detail.ejs

@@ -1,17 +0,0 @@
-<%#
-  OAuth2 client detail page: the client-detail body (info · one-time secret · delete) in the
-  shell. Doubles as the post-register page when `created`/`secret` are set.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/client-detail-body", { client: model.client, created: model.created, csrfToken: model.shell.csrfToken, del: model.delete, secret: model.secret });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/client-form.ejs

@@ -1,16 +0,0 @@
-<%#
-  OAuth2 client register page: the client-form body captured into the app shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/client-form-body", { error: model.error, form: model.form });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/clients.ejs

@@ -1,21 +0,0 @@
-<%#
-  OAuth2 clients admin list: apps that log in *through* us (Hydra). Same building blocks as
-  the Roles screen, around the shell, backed by live Hydra OAuth2 clients (src/admin/admin-clients.ts).
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const filters = include("partials/filter-bar", model.filterBar);
-  const table = include("partials/data-table", model.table);
-  const pager = include("partials/pagination", model.pagination);
-  const actions = '<a class="btn btn-primary" href="/admin/clients/new"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Register client</a>';
--%>
-<%- include("partials/shell", {
-  actions,
-  body: filters + table + pager,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/confirm.ejs

@@ -1,17 +0,0 @@
-<%#
-  Admin destructive-action confirmation page: the confirm body in the app shell. Model
-  from buildConfirmModel: { message, confirm:{action,label}, cancelHref, nav, shell }.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/confirm-body", { cancelHref: model.cancelHref, confirm: model.confirm, csrfToken: model.shell.csrfToken, message: model.message });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/group-detail.ejs

@@ -1,16 +0,0 @@
-<%#
-  Group admin detail / membership page: the group-detail body in the app shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/group-detail-body", { add: model.add, csrfToken: model.csrfToken, del: model.delete, error: model.error, group: model.group, members: model.members });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/group-form.ejs

@@ -1,16 +0,0 @@
-<%#
-  Group admin create page: the group-form body captured into the app shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/group-form-body", { error: model.error, form: model.form });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/groups.ejs

@@ -1,21 +0,0 @@
-<%#
-  Groups admin list: the same building blocks as the Users screen, around the shell, but
-  backed by live Keto subject sets (src/admin/admin-groups.ts). Filter/sort/page round-trip the URL.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const filters = include("partials/filter-bar", model.filterBar);
-  const table = include("partials/data-table", model.table);
-  const pager = include("partials/pagination", model.pagination);
-  const actions = '<a class="btn btn-primary" href="/admin/groups/new"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Add group</a>';
--%>
-<%- include("partials/shell", {
-  actions,
-  body: filters + table + pager,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/role-detail.ejs

@@ -1,16 +0,0 @@
-<%#
-  Role admin detail page: the role-detail body (members · effective access) in the shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/role-detail-body", { add: model.add, csrfToken: model.csrfToken, del: model.delete, effective: model.effective, error: model.error, members: model.members, role: model.role });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/role-form.ejs

@@ -1,16 +0,0 @@
-<%#
-  Role admin create page: the role-form body captured into the app shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/role-form-body", { error: model.error, form: model.form });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/roles.ejs

@@ -1,21 +0,0 @@
-<%#
-  Roles admin list: the same building blocks as the Groups screen, around the shell, backed
-  by live Keto Role subject sets (src/admin/admin-roles.ts). Filter/sort/page round-trip the URL.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const filters = include("partials/filter-bar", model.filterBar);
-  const table = include("partials/data-table", model.table);
-  const pager = include("partials/pagination", model.pagination);
-  const actions = '<a class="btn btn-primary" href="/admin/roles/new"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Add role</a>';
--%>
-<%- include("partials/shell", {
-  actions,
-  body: filters + table + pager,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/user-form.ejs

@@ -1,16 +0,0 @@
-<%#
-  Users admin create/edit page: the user-form body captured into the app shell.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const body = include("partials/user-form-body", { edit: model.edit, error: model.error, form: model.form, recovery: model.recovery });
--%>
-<%- include("partials/shell", {
-  body,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/admin/users.ejs

@@ -1,21 +0,0 @@
-<%#
-  Users admin list: the same building blocks as the dashboard, around the shell, but
-  backed by live Kratos identities (src/admin/admin-users.ts). Filter/sort/page all round-trip the URL.
-%><%
-  const nav = include("partials/nav-tree", { nodes: model.nav });
-  const filters = include("partials/filter-bar", model.filterBar);
-  const table = include("partials/data-table", model.table);
-  const pager = include("partials/pagination", model.pagination);
-  const actions = '<a class="btn btn-primary" href="/admin/users/new"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Add user</a>';
--%>
-<%- include("partials/shell", {
-  actions,
-  body: filters + table + pager,
-  brand: model.shell.brand,
-  breadcrumbs: model.shell.breadcrumbs,
-  csrfToken: model.shell.csrfToken,
-  nav,
-  theme: model.shell.theme,
-  title: model.shell.title,
-  user: model.shell.user,
-}) %>

views/partials/client-detail-body.ejs

@@ -1,38 +0,0 @@
-<%#
-  Admin OAuth2 client detail body, captured into the shell content slot. Config:
-    client  { firstParty, id, name, public, redirectUris[], scopes[] }
-    created bool        just registered → success banner
-    secret? string      one-time client secret (confidential clients), shown once right after create
-    del     { action }  delete the client
-    csrfToken
-%><%
-  const c = locals.client;
-  const del = locals.del;
--%>
-<div class="form-page">
-<% if (locals.created) { -%>
-<%- include("alert", { text: "Client registered.", tone: "pos" }) %>
-<% } -%>
-<% if (locals.secret) { -%>
-  <section class="form-card" aria-labelledby="secret-h">
-    <h2 class="card-title" id="secret-h">Client secret</h2>
-    <p class="field-hint">Copy these now — the secret can't be shown again. Store them where the app reads its credentials.</p>
-    <div class="field"><label for="cid">Client ID</label><input class="input" id="cid" type="text" value="<%= c.id %>" readonly></div>
-    <div class="field"><label for="csecret">Client secret</label><input class="input" id="csecret" type="text" value="<%= locals.secret %>" readonly></div>
-  </section>
-<% } -%>
-  <section class="form-card" aria-labelledby="client-h">
-    <h2 class="card-title" id="client-h"><%= c.name %></h2>
-    <dl class="detail-list">
-      <dt>Client ID</dt><dd><%= c.id %></dd>
-      <dt>Type</dt><dd><%= c.public ? "Public (PKCE)" : "Confidential" %></dd>
-      <dt>Consent</dt><dd><%= c.firstParty ? "First-party (auto-granted)" : "Shows the consent screen" %></dd>
-      <dt>Scopes</dt><dd><%= c.scopes.length ? c.scopes.join(" ") : "—" %></dd>
-      <dt>Redirect URIs</dt><dd><% if (c.redirectUris.length) { %><ul class="plain-list"><% c.redirectUris.forEach((u) => { %><li><%= u %></li><% }) %></ul><% } else { %>—<% } %></dd>
-    </dl>
-  </section>
-  <section class="form-card admin-actions" aria-label="Client actions">
-    <p class="field-hint">To change a client, delete and re-register — this issues a new client ID and secret. The secret is shown only once, at registration.</p>
-    <a class="btn btn-danger" href="<%= del.action %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg>Delete client</a>
-  </section>
-</div>

views/partials/client-form-body.ejs

@@ -1,30 +0,0 @@
-<%#
-  Admin OAuth2 client register form body, captured into the shell content slot. Config:
-    form { action, csrfToken, submitLabel, cancelHref, nameField, scopeField (field.ejs configs),
-           redirectUris: string (newline-separated), public: bool, firstParty: bool }
-    error? string shown when a write was rejected
-%><%
-  const form = locals.form;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-  <form class="form-card" method="post" action="<%= form.action %>">
-    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
-    <%- include("field", form.nameField) %>
-    <div class="field">
-      <label for="redirectUris">Redirect URIs</label>
-      <textarea class="input" id="redirectUris" name="redirectUris" rows="3" placeholder="https://app.example.com/callback"><%= form.redirectUris %></textarea>
-      <span class="field-hint">One per line — where the app is sent back after sign-in.</span>
-    </div>
-    <%- include("field", form.scopeField) %>
-    <label class="check"><input type="checkbox" name="public"<% if (form.public) { %> checked<% } %>> Public client (SPA / native app, PKCE — no secret)</label>
-    <span class="field-hint">Browser and mobile apps can't keep a secret — choose Public. Server-side apps that can store one — leave it Confidential.</span>
-    <label class="check"><input type="checkbox" name="firstParty"<% if (form.firstParty) { %> checked<% } %>> First-party (auto-grant consent — skip the consent screen)</label>
-    <div class="form-actions">
-      <a class="btn" href="<%= form.cancelHref %>">Cancel</a>
-      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
-    </div>
-  </form>
-</div>

views/partials/confirm-body.ejs

@@ -1,17 +0,0 @@
-<%#
-  Destructive-action confirm body, captured into the shell content slot. Zero-JS: the
-  delete is a deliberate second step (a POST form), with a cancel link back. Config:
-    message    string
-    confirm    { action, label }   the danger POST endpoint + button label
-    cancelHref string
-    csrfToken
-%>
-<div class="form-page">
-  <section class="form-card admin-actions" aria-label="Confirm action">
-    <p><%= locals.message %></p>
-    <div class="form-actions">
-      <a class="btn" href="<%= locals.cancelHref %>">Cancel</a>
-      <form method="post" action="<%= locals.confirm.action %>"><input type="hidden" name="_csrf" value="<%= locals.csrfToken %>"><button class="btn btn-danger" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg><%= locals.confirm.label %></button></form>
-    </div>
-  </section>
-</div>

views/partials/group-detail-body.ejs

@@ -1,42 +0,0 @@
-<%#
-  Admin group membership body, captured into the shell content slot. Config:
-    group   { name }
-    members { action, rows: { kind:"group"|"user", label, subject }[] }   action = remove-member endpoint
-    add     { action, options: {label,value}[] }                          action = add-member endpoint
-    del     { action }                                                     delete the whole group
-    csrfToken, error?
-%><%
-  const group = locals.group;
-  const members = locals.members;
-  const add = locals.add;
-  const del = locals.del;
-  const csrf = locals.csrfToken;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-  <section class="form-card" aria-labelledby="members-h">
-    <h2 class="card-title" id="members-h">Members</h2>
-<% if (members.rows.length) { -%>
-    <div class="table-wrap"><table class="table"><caption class="sr-only">Members of <%= group.name %></caption><thead><tr><th scope="col">Member</th><th scope="col">Type</th><th class="col-actions" scope="col"><span class="sr-only">Actions</span></th></tr></thead><tbody>
-<% members.rows.forEach((m) => { -%>
-      <tr><th scope="row"><span class="cell-strong"><%= m.label %></span></th><td><span class="badge info"><span class="dot"></span><%= m.kind === "group" ? "Group" : "User" %></span></td><td class="col-actions"><form method="post" action="<%= members.action %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><input type="hidden" name="member" value="<%= m.subject %>"><button class="btn" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg>Remove</button></form></td></tr>
-<% }) -%>
-    </tbody></table></div>
-<% } else { -%>
-    <p class="cell-muted">No members yet.</p>
-<% } -%>
-  </section>
-  <section class="form-card" aria-labelledby="add-h">
-    <h2 class="card-title" id="add-h">Add a member</h2>
-<% if (add.options.length) { -%>
-    <form class="inline-form" method="post" action="<%= add.action %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><label class="sr-only" for="add-member">Member</label><span class="select"><select id="add-member" name="member" required><option value="" disabled selected>Choose a user or group…</option><% add.options.forEach((o) => { %><option value="<%= o.value %>"><%= o.label %></option><% }) %></select></span><button class="btn btn-primary" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Add</button></form>
-<% } else { -%>
-    <p class="cell-muted">All users and groups are already members.</p>
-<% } -%>
-  </section>
-  <section class="form-card admin-actions" aria-label="Group actions">
-    <a class="btn btn-danger" href="<%= del.action %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg>Delete group</a>
-  </section>
-</div>

views/partials/group-form-body.ejs

@@ -1,26 +0,0 @@
-<%#
-  Admin group create form body, captured into the shell content slot. Config:
-    form  { action, csrfToken, submitLabel, cancelHref, nameField: field.ejs config,
-            memberOptions: {label,value}[], selectedMember }
-    error?  string  shown when a write was rejected
-%><%
-  const form = locals.form;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-  <form class="form-card" method="post" action="<%= form.action %>">
-    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
-    <%- include("field", form.nameField) %>
-    <div class="field">
-      <label for="member">First member</label>
-      <span class="select"><select id="member" name="member" required><option value="" disabled<% if (!form.selectedMember) { %> selected<% } %>>Choose a member…</option><% form.memberOptions.forEach((o) => { %><option value="<%= o.value %>"<% if (form.selectedMember === o.value) { %> selected<% } %>><%= o.label %></option><% }) %></select></span>
-      <span class="field-hint">A group exists once it has a member; add more after creating it.</span>
-    </div>
-    <div class="form-actions">
-      <a class="btn" href="<%= form.cancelHref %>">Cancel</a>
-      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
-    </div>
-  </form>
-</div>

views/partials/role-detail-body.ejs

@@ -1,57 +0,0 @@
-<%#
-  Admin role detail body, captured into the shell content slot. Config:
-    role      { name }
-    members   { action, rows: { kind:"group"|"user", label, subject }[] }   action = revoke endpoint
-    effective { label }[]                                                    users who hold the role (expand)
-    add       { action, options: {label,value}[] }                          action = assign endpoint
-    del       { action }                                                     delete the whole role
-    csrfToken, error?
-%><%
-  const role = locals.role;
-  const members = locals.members;
-  const effective = locals.effective;
-  const add = locals.add;
-  const del = locals.del;
-  const csrf = locals.csrfToken;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-  <section class="form-card" aria-labelledby="members-h">
-    <h2 class="card-title" id="members-h">Assigned to</h2>
-<% if (members.rows.length) { -%>
-    <div class="table-wrap"><table class="table"><caption class="sr-only">Members of <%= role.name %></caption><thead><tr><th scope="col">Member</th><th scope="col">Type</th><th class="col-actions" scope="col"><span class="sr-only">Actions</span></th></tr></thead><tbody>
-<% members.rows.forEach((m) => { -%>
-      <tr><th scope="row"><span class="cell-strong"><%= m.label %></span></th><td><span class="badge info"><span class="dot"></span><%= m.kind === "group" ? "Group" : "User" %></span></td><td class="col-actions"><form method="post" action="<%= members.action %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><input type="hidden" name="member" value="<%= m.subject %>"><button class="btn" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg>Revoke</button></form></td></tr>
-<% }) -%>
-    </tbody></table></div>
-<% } else { -%>
-    <p class="cell-muted">Not assigned to anyone yet.</p>
-<% } -%>
-  </section>
-  <section class="form-card" aria-labelledby="effective-h">
-    <h2 class="card-title" id="effective-h">Effective access</h2>
-    <p class="field-hint">Everyone who holds this role — directly or through a group (resolved by Keto).</p>
-<% if (effective.length) { -%>
-    <ul class="plain-list">
-<% effective.forEach((u) => { -%>
-      <li><span class="cell-strong"><%= u.label %></span></li>
-<% }) -%>
-    </ul>
-<% } else { -%>
-    <p class="cell-muted">No users hold this role yet.</p>
-<% } -%>
-  </section>
-  <section class="form-card" aria-labelledby="add-h">
-    <h2 class="card-title" id="add-h">Assign the role</h2>
-<% if (add.options.length) { -%>
-    <form class="inline-form" method="post" action="<%= add.action %>"><input type="hidden" name="_csrf" value="<%= csrf %>"><label class="sr-only" for="add-member">Member</label><span class="select"><select id="add-member" name="member" required><option value="" disabled selected>Choose a user or group…</option><% add.options.forEach((o) => { %><option value="<%= o.value %>"><%= o.label %></option><% }) %></select></span><button class="btn btn-primary" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-plus"/></svg>Assign</button></form>
-<% } else { -%>
-    <p class="cell-muted">All users and groups already have this role.</p>
-<% } -%>
-  </section>
-  <section class="form-card admin-actions" aria-label="Role actions">
-    <a class="btn btn-danger" href="<%= del.action %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg>Delete role</a>
-  </section>
-</div>

views/partials/role-form-body.ejs

@@ -1,26 +0,0 @@
-<%#
-  Admin role create form body, captured into the shell content slot. Config:
-    form  { action, csrfToken, submitLabel, cancelHref, nameField: field.ejs config,
-            memberOptions: {label,value}[], selectedMember }
-    error?  string  shown when a write was rejected
-%><%
-  const form = locals.form;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-  <form class="form-card" method="post" action="<%= form.action %>">
-    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
-    <%- include("field", form.nameField) %>
-    <div class="field">
-      <label for="member">Assign to</label>
-      <span class="select"><select id="member" name="member" required><option value="" disabled<% if (!form.selectedMember) { %> selected<% } %>>Choose a user or group…</option><% form.memberOptions.forEach((o) => { %><option value="<%= o.value %>"<% if (form.selectedMember === o.value) { %> selected<% } %>><%= o.label %></option><% }) %></select></span>
-      <span class="field-hint">A role exists once assigned; add more users or groups after creating it.</span>
-    </div>
-    <div class="form-actions">
-      <a class="btn" href="<%= form.cancelHref %>">Cancel</a>
-      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
-    </div>
-  </form>
-</div>

views/partials/user-form-body.ejs

@@ -1,36 +0,0 @@
-<%#
-  Admin user create/edit form body, captured into the shell content slot. Config:
-    form  { action, csrfToken, submitLabel, cancelHref, fields: field.ejs config[] }
-    edit? { nextLabel, stateAction, recoveryAction, deleteAction }   (edit mode only)
-    recovery? { code? }   shown after a recovery code is generated (recovery is code-based)
-    error?   string              shown when a write was rejected
-%><%
-  const form = locals.form;
-  const edit = locals.edit;
-  const recovery = locals.recovery;
--%>
-<div class="form-page">
-<% if (locals.error) { -%>
-<%- include("alert", { text: locals.error, tone: "neg" }) %>
-<% } -%>
-<% if (recovery) { -%>
-  <div class="alert alert-pos" role="status"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-check-circle"/></svg><div class="alert-body"><strong>Recovery code generated</strong><span>Give it to the user — they enter it on the <a href="/recovery">password-reset screen</a> to set a new password (generate a fresh one if it has expired).</span><% if (recovery.code) { %><span class="recovery-code"><code><%= recovery.code %></code></span><% } %></div></div>
-<% } -%>
-  <form class="form-card" method="post" action="<%= form.action %>">
-    <input type="hidden" name="_csrf" value="<%= form.csrfToken %>">
-<% form.fields.forEach((field) => { -%>
-    <%- include("field", field) %>
-<% }) -%>
-    <div class="form-actions">
-      <a class="btn" href="<%= form.cancelHref %>">Cancel</a>
-      <button class="btn btn-primary" type="submit"><%= form.submitLabel %></button>
-    </div>
-  </form>
-<% if (edit) { -%>
-  <section class="form-card admin-actions" aria-label="Account actions">
-    <form method="post" action="<%= edit.recoveryAction %>"><input type="hidden" name="_csrf" value="<%= form.csrfToken %>"><button class="btn" type="submit"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-mail"/></svg>Generate recovery code</button></form>
-    <form method="post" action="<%= edit.stateAction %>"><input type="hidden" name="_csrf" value="<%= form.csrfToken %>"><button class="btn" type="submit"><%= edit.nextLabel %></button></form>
-    <a class="btn btn-danger" href="<%= edit.deleteAction %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-trash"/></svg>Delete user</a>
-  </section>
-<% } -%>
-</div>