@binary1702/auth 0.2.5 → 0.4.0

package/dist/core/admin-html.js

@@ -0,0 +1,350 @@
+// ─────────────────────────────────────────────────────────────
+// The admin page. Plain HTML like the other auth pages.
+//
+//   ?tab=orgs (default)   organizations: name, members, roles in use → click one
+//   ?org=<id>             one organization: its members, and its own rule per
+//                         role (a grid of checkboxes; unset = follows Roles)
+//   ?tab=users            every user: verification, memberships, actions
+//   ?tab=roles            what each role may do in every organization without
+//                         its own rule: one checkbox per permission the app
+//                         declares (permissions: in b17_auth.yaml)
+//   ?tab=settings         the resolved settings, read-only
+//
+// An organization's owner sees only their organization (`limited`), and
+// only its roles grid and members.
+//
+// Every change is a small form that POSTs back and returns to the same
+// view. Nothing here decides anything; the handler and core/admin.ts
+// do. Every value goes through escape().
+// ─────────────────────────────────────────────────────────────
+import { escape } from "./html.js";
+import { ADMIN_PATH, checkedFor } from "./admin.js";
+import { SIGN_OUT_PATH } from "./config.js";
+import { landing } from "./pages.js";
+import { PASSWORD_MAX, PASSWORD_MIN } from "./signup.js";
+import { OWNER, permissionsFor } from "./org.js";
+const STYLE = `
+  :root { color-scheme: light dark; --fg: #111; --bg: #fff; --line: #e3e3e3; --muted: #6b6b6b; --err: #c0392b; --ok: #1e8449; --panel: #f6f6f7; --accent: #2f7fd6; }
+  @media (prefers-color-scheme: dark) { :root { --fg: #ececec; --bg: #121212; --line: #2c2c2c; --muted: #9a9a9a; --err: #ff6b6b; --ok: #58d68d; --panel: #1c1c1e; --accent: #6fb1ff; } }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 system-ui, -apple-system, sans-serif; }
+  main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
+  h1 { font-size: 18px; margin: 0; }
+  h2 { font-size: 15px; margin: 0 0 10px; }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .top { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
+  .top .who { color: var(--muted); font-size: 13px; margin-left: auto; }
+  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
+  .tabs a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; }
+  .tabs a.on { color: var(--fg); border-bottom-color: var(--fg); }
+  .tabs a:hover { text-decoration: none; color: var(--fg); }
+  .crumb { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
+  .notice, .error { padding: 8px 12px; border-radius: 8px; font-size: 13px; margin: 0 0 14px; }
+  .notice { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok); }
+  .error { background: color-mix(in srgb, var(--err) 12%, var(--bg)); color: var(--err); }
+  .card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
+  .card.panel { background: var(--panel); }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 10px 8px 0; }
+  td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
+  tr.row:hover td { background: color-mix(in srgb, var(--panel) 60%, var(--bg)); }
+  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+  .muted { color: var(--muted); }
+  .small { font-size: 12px; }
+  .ok { color: var(--ok); }
+  .warn { color: var(--err); }
+  .right { text-align: right; white-space: nowrap; }
+  .center { text-align: center; }
+  form.inline { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 0 0; }
+  form.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
+  label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
+  input, select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); min-width: 0; }
+  input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--fg); cursor: pointer; }
+  input[type=checkbox]:disabled { cursor: not-allowed; opacity: .6; }
+  button { font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; white-space: nowrap; }
+  button.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+  button.danger { color: var(--err); border-color: var(--err); }
+  button.quiet { border-color: transparent; color: var(--muted); }
+  button.small { font-size: 11.5px; padding: 3px 8px; }
+  table.roles th.center, table.roles td.center { padding-left: 6px; padding-right: 6px; }
+  table.roles tfoot td { border-top: 2px solid var(--line); vertical-align: top; }
+  .chip { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; margin: 1px 4px 1px 0; color: var(--muted); }
+  .chip.all { color: var(--fg); border-color: var(--fg); }
+  .pill { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
+  details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
+  details.inline { display: inline-block; vertical-align: middle; margin-right: 6px; }
+  details.inline summary { display: inline-block; font-size: 12.5px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; list-style: none; }
+  details.inline summary::-webkit-details-marker { display: none; }
+  details.inline[open] summary { color: var(--fg); }
+  details.inline form { margin-left: 4px; }
+  .nowrap { white-space: nowrap; }
+  button.quiet.danger { color: var(--err); }
+  pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; overflow: auto; margin: 8px 0 0; }
+  .empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
+  .link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -6px 0 14px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; }
+  .link code { word-break: break-all; }
+`;
+const hidden = (fields) => Object.entries(fields)
+    .map(([k, v]) => `<input type="hidden" name="${escape(k)}" value="${escape(v)}">`)
+    .join("");
+const roleSelect = (name, roles, current) => `<select name="${name}">${roles.map((r) => `<option value="${escape(r)}"${r === current ? " selected" : ""}>${escape(r)}</option>`).join("")}</select>`;
+// The CSP allows no inline handlers; a nonce'd script below wires these up
+const confirmRemove = (what) => `data-confirm="Remove ${escape(what)}? This cannot be undone."`;
+const chips = (perms) => perms.length ? perms.map((p) => (p === "*" ? `<span class="chip all">everything</span>` : `<span class="chip">${escape(p)}</span>`)).join("") : `<span class="chip">nothing</span>`;
+export function adminPage(d) {
+    const usersPath = `${ADMIN_PATH}/users`;
+    const orgsPath = `${ADMIN_PATH}/orgs`;
+    const rolesPath = `${ADMIN_PATH}/roles`;
+    const o = d.options;
+    const tab = d.view.tab === "org" ? "orgs" : d.view.tab;
+    const link = (t) => `${ADMIN_PATH}${t === "orgs" ? "" : `?tab=${t}`}`;
+    const orgLink = (id) => `${ADMIN_PATH}?org=${escape(id)}`;
+    const catalogue = Object.entries(o.permissions);
+    const catalogueIds = catalogue.map(([id]) => id);
+    /** what was saved for a role: in this organization and for all of them */
+    const storedFor = (role, orgId) => ({
+        org: orgId ? (d.stored.find((s) => s.scope === orgId && s.name === role)?.permissions ?? null) : null,
+        all: d.stored.find((s) => s.scope === "" && s.name === role)?.permissions ?? null,
+    });
+    const effective = (role, orgId) => permissionsFor(role, storedFor(role, orgId));
+    /**
+     * The grid: rows are the catalogue, columns the roles, one form per role
+     * (outside the table; each checkbox names it through the `form`
+     * attribute). scope "" is the rule for every organization; an id is one
+     * organization's own rule. The owner column is fixed: everything.
+     */
+    const grid = (scope, inUse) => {
+        const formId = (r) => `role-${r.replace(/[^a-z0-9_-]/gi, "_")}`;
+        const own = (r) => (scope ? storedFor(r, scope).org : storedFor(r).all);
+        const forms = d.roles
+            .filter((r) => r !== OWNER)
+            .map((r) => `<form id="${formId(r)}" method="post" action="${rolesPath}">${hidden({ action: "set-permissions", role: r, scope, ...(scope ? { org: scope } : { tab: "roles" }) })}</form>`)
+            .join("");
+        const head = d.roles
+            .map((r) => {
+            const used = inUse.filter((x) => x === r).length;
+            const note = r === OWNER ? "everything, always" : scope ? (own(r) ? "own rule" : "follows Roles") : own(r) ? "saved" : "default";
+            return `<th class="center"><span class="pill">${escape(r)}</span><br><span class="muted small">${used} member${used === 1 ? "" : "s"} · ${note}</span></th>`;
+        })
+            .join("");
+        const rows = catalogue
+            .map(([id, label]) => {
+            const cells = d.roles
+                .map((r) => {
+                const on = checkedFor(effective(r, scope || undefined), [id]).length > 0;
+                const fixed = r === OWNER;
+                return `<td class="center"><input type="checkbox"${fixed ? "" : ` form="${formId(r)}"`} name="p:${escape(id)}" value="on"${on ? " checked" : ""}${fixed ? " disabled" : ""} aria-label="${escape(r)} may ${escape(label)}"></td>`;
+            })
+                .join("");
+            return `<tr class="row"><td><b>${escape(label)}</b><br><code class="muted">${escape(id)}</code></td>${cells}</tr>`;
+        })
+            .join("\n");
+        const foot = d.roles
+            .map((r) => {
+            if (r === OWNER)
+                return `<td class="center muted small">fixed</td>`;
+            const save = `<button type="submit" form="${formId(r)}" class="primary small">Save</button>`;
+            const back = scope
+                ? own(r)
+                    ? `<form class="inline" method="post" action="${rolesPath}">${hidden({ action: "follow", role: r, scope, org: scope })}<button type="submit" class="quiet small" title="drop this organization's own rule; follow Roles again">follow Roles</button></form>`
+                    : ""
+                : o.roles[r]
+                    ? `<form class="inline" method="post" action="${rolesPath}">${hidden({ action: "defaults", role: r, scope: "", tab: "roles" })}<button type="submit" class="quiet small" title="back to the starting point in b17_auth.yaml">defaults</button></form>`
+                    : "";
+            return `<td class="center">${save}${back ? `<br>${back}` : ""}</td>`;
+        })
+            .join("");
+        return `${forms}<table class="roles"><thead><tr><th>permission</th>${head}</tr></thead><tbody>${rows}</tbody><tfoot><tr><td class="muted small">A saved role grants exactly its ticked boxes; a permission the app adds later starts off until ticked.</td>${foot}</tr></tfoot></table>`;
+    };
+    const noCatalogue = `<p class="empty">Nothing to toggle yet: the app has not declared what it gates. In b17_auth.yaml, list each permission with a label:</p>
+<pre>permissions:
+  invoices.read: See invoices
+  invoices.create: Create invoices
+roles:
+  owner: all
+  member: invoices.read</pre>`;
+    let body = "";
+    // ── organizations ───────────────────────────────────────────
+    if (d.view.tab === "orgs") {
+        const rows = d.orgs
+            .map((org) => {
+            const roles = [...new Set(org.members.map((m) => m.role))];
+            return `<tr class="row">
+  <td><a href="${orgLink(org.id)}"><b>${escape(org.name)}</b></a><br><code class="muted">${escape(org.id)}</code></td>
+  <td>${org.members.length} member${org.members.length === 1 ? "" : "s"}</td>
+  <td>${roles.length ? roles.map((r) => `<span class="pill">${escape(r)}</span>`).join(" ") : '<span class="muted">none yet</span>'}</td>
+  <td class="right"><a href="${orgLink(org.id)}">open →</a></td>
+</tr>`;
+        })
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Organizations <span class="muted">(${d.orgs.length})</span></h2>
+${d.orgs.length ? `<table><thead><tr><th>organization</th><th>members</th><th>roles in use</th><th></th></tr></thead><tbody>${rows}</tbody></table>` : '<p class="empty">No organizations yet. Create the first one below.</p>'}
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${orgsPath}">${hidden({ action: "create" })}
+  <label>New organization <input name="name" required autocomplete="off" placeholder="name"></label>
+  <button type="submit" class="primary">Create</button>
+</form>
+</div>`;
+    }
+    // ── one organization ────────────────────────────────────────
+    if (d.view.tab === "org") {
+        const orgId = d.view.orgId;
+        const org = d.orgs.find((x) => x.id === orgId);
+        if (!org) {
+            body = `<p class="error">No such organization.</p>${d.limited ? "" : `<p><a href="${ADMIN_PATH}">← Organizations</a></p>`}`;
+        }
+        else {
+            const inUse = org.members.map((m) => m.role);
+            const memberRows = org.members
+                .map((m) => `<tr class="row">
+  <td><b>${escape(m.email)}</b>${m.email === d.self ? ' <span class="muted">(you)</span>' : ""}</td>
+  <td><form class="inline" method="post" action="${orgsPath}">${hidden({ action: "set-role", org: org.id, email: m.email })}${roleSelect("role", d.roles, m.role)}<button type="submit" class="quiet">set</button></form></td>
+  <td>${chips(effective(m.role, org.id))}</td>
+  <td class="right"><form class="inline" method="post" action="${orgsPath}">${hidden({ action: "remove-member", org: org.id, email: m.email })}<button type="submit" class="danger">remove</button></form></td>
+</tr>`)
+                .join("\n");
+            body = `
+<div class="crumb">${d.limited ? "" : `<a href="${ADMIN_PATH}">Organizations</a> › `}<b>${escape(org.name)}</b> <code class="muted">${escape(org.id)}</code></div>
+<div class="card">
+<h2>Roles in ${escape(org.name)} <span class="muted">· this organization's own rule per role; a column that follows Roles uses the rule for every organization</span></h2>
+${catalogue.length ? grid(org.id, inUse) : noCatalogue}
+</div>
+<div class="card">
+<h2>Members <span class="muted">(${org.members.length})</span></h2>
+${memberRows ? `<table><thead><tr><th>user</th><th>role</th><th>permissions here</th><th></th></tr></thead><tbody>${memberRows}</tbody></table>` : '<p class="empty">No members yet.</p>'}
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${orgsPath}">${hidden({ action: "add-member", org: org.id })}
+  <label>Add a member <input type="email" name="email" placeholder="email of an existing user" required></label>
+  <label>as ${roleSelect("role", d.roles, "member")}</label>
+  <button type="submit" class="primary">Add</button>
+</form>
+</div>
+${d.limited ? "" : `<form class="inline" method="post" action="${orgsPath}" ${confirmRemove(org.name)}>${hidden({ action: "remove-org", org: org.id })}<button type="submit" class="danger">Remove ${escape(org.name)}</button></form>`}`;
+        }
+    }
+    // ── users ───────────────────────────────────────────────────
+    if (d.view.tab === "users") {
+        const rows = d.users
+            .map((u) => {
+            const self = u.email === d.self;
+            const memberships = u.memberships.length
+                ? u.memberships.map((m) => `<a href="${orgLink(m.org_id)}">${escape(m.org)}</a> <span class="muted">(${escape(m.role)})</span>`).join(" · ")
+                : '<span class="muted">none</span>';
+            const status = u.verified
+                ? '<span class="ok">verified</span>'
+                : `<span class="warn">unverified</span>
+    <form class="inline" method="post" action="${usersPath}">${hidden({ action: "send-verify", email: u.email, tab: "users" })}<button type="submit" class="quiet" title="send a verification email">email</button></form>
+    <form class="inline" method="post" action="${usersPath}">${hidden({ action: "verify", email: u.email, tab: "users" })}<button type="submit" class="quiet" title="mark verified without the email">mark</button></form>
+    <form class="inline" method="post" action="${usersPath}">${hidden({ action: "invite", email: u.email, tab: "users" })}<button type="submit" class="quiet" title="email a link to choose a password (also verifies the address)">invite</button></form>`;
+            return `<tr class="row">
+  <td title="${escape(u.id)}"><b>${escape(u.email)}</b>${self ? ' <span class="muted">you</span>' : ""}${o.admins.includes(u.email) ? ' <span class="pill">admin</span>' : ""}</td>
+  <td class="nowrap">${status}</td>
+  <td>${memberships}</td>
+  <td class="right">
+    <details class="inline"><summary class="quiet">password</summary><form class="inline" method="post" action="${usersPath}">${hidden({ action: "set-password", email: u.email, tab: "users" })}<input type="password" name="password" placeholder="new password" minlength="${PASSWORD_MIN}" maxlength="${PASSWORD_MAX}" required autocomplete="new-password" size="14"><button type="submit">set</button></form></details>
+    ${self
+                ? ""
+                : `<form class="inline" method="post" action="${usersPath}">${hidden({ action: "sign-out", email: u.email, tab: "users" })}<button type="submit" class="quiet">sign out</button></form>
+    <form class="inline" method="post" action="${usersPath}" ${confirmRemove(u.email)}>${hidden({ action: "remove", email: u.email, tab: "users" })}<button type="submit" class="quiet danger">remove</button></form>`}
+  </td>
+</tr>`;
+        })
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Users <span class="muted">(${d.users.length})</span></h2>
+<table><thead><tr><th>user</th><th>email</th><th>organizations</th><th></th></tr></thead><tbody>${rows}</tbody></table>
+<p class="empty">What a role may do is under Roles, or inside an organization for its own rule.</p>
+</div>
+<div class="card panel">
+<form class="grid" method="post" action="${usersPath}">${hidden({ action: "add", tab: "users" })}
+  <label>New user <input type="email" name="email" required autocomplete="off" placeholder="email"></label>
+  <label>Password <input type="password" name="password" minlength="${PASSWORD_MIN}" maxlength="${PASSWORD_MAX}" autocomplete="new-password" placeholder="for Register only"></label>
+  <button type="submit" name="mode" value="register" class="primary" title="email + password: the account is ready and verified">Register</button>
+  <button type="submit" name="mode" value="invite" title="email only: a seven-day link to choose a password, which verifies the address and signs them in">Invite</button>
+</form>
+<p class="muted small"><b>Register</b>: email + password, ready and verified now. <b>Invite</b>: email only; the person gets one link, good for seven days, to choose a password, which verifies the address and signs them in.</p>
+</div>`;
+    }
+    // ── roles ───────────────────────────────────────────────────
+    if (d.view.tab === "roles") {
+        const inUse = d.orgs.flatMap((org) => org.members.map((m) => m.role));
+        body = `
+<div class="card">
+<h2>Roles <span class="muted">· what each role may do in every organization without its own rule. Tick, then Save that column.</span></h2>
+${catalogue.length ? grid("", inUse) : noCatalogue}
+</div>
+<p class="empty">An organization can have its own rule per role: open it under Organizations. Owners and admins (${escape(o.admins.join(", ") || "none")}) hold everything regardless.</p>`;
+    }
+    // ── settings ────────────────────────────────────────────────
+    if (d.view.tab === "settings") {
+        const catalogueRows = catalogue.map(([id, label]) => `  ${id}: ${label}`).join("\n");
+        const defaultRows = Object.entries(o.roles)
+            .map(([role, perms]) => `  ${role}: ${perms.join(" ") || "(nothing)"}`)
+            .join("\n");
+        body = `
+<div class="card">
+<h2>Settings <span class="muted">· read-only, from b17_auth.yaml and .env.local</span></h2>
+<table><tbody>
+<tr><td>name</td><td>${escape(o.name || "(none: the request's host)")}</td></tr>
+<tr><td>signup</td><td>${escape(o.signup)}${o.emailDomain ? ` · only @${escape(o.emailDomain)}` : ""}</td></tr>
+<tr><td>requireVerified</td><td>${o.requireVerified}</td></tr>
+<tr><td>sessionDays</td><td>${o.sessionDays}</td></tr>
+<tr><td>${o.protected.length ? "protected" : "public"}</td><td>${escape((o.protected.length ? o.protected : o.public).join(" ") || "(everything needs sign-in)")}</td></tr>
+<tr><td>home</td><td>${escape(landing(null, o.home))}</td></tr>
+<tr><td>admins</td><td>${escape(o.admins.join(" "))}</td></tr>
+<tr><td>email</td><td>${escape(d.transport)}${o.email.from ? ` · from ${escape(o.email.from)}` : ""}${o.email.replyTo ? ` · reply-to ${escape(o.email.replyTo)}` : ""}</td></tr>
+<tr><td>tokens</td><td>${d.tokens.total} issued · ${d.tokens.live} still usable</td></tr>
+</tbody></table>
+<pre>permissions:                 # what the app gates
+${escape(catalogueRows) || "  (none declared)"}
+roles:                       # the starting point, written to the database once
+${escape(defaultRows) || "  (none)"}</pre>
+<p class="muted small">What a role may do today is under <a href="${link("roles")}">Roles</a>; the database decides, this file only seeds it.</p>
+</div>`;
+    }
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Admin${o.name ? ` · ${escape(o.name)}` : ""}</title>
+<style>${STYLE}</style>
+</head>
+<body>
+<main>
+<div class="top"><h1>${escape(o.name || "Auth")} admin</h1><a href="${escape(landing(null, o.home))}">app</a><a href="${SIGN_OUT_PATH}">sign out</a><span class="who">${escape(d.self)}</span></div>
+${d.limited
+        ? ""
+        : `<nav class="tabs">
+  <a href="${link("orgs")}" class="${tab === "orgs" ? "on" : ""}">Organizations</a>
+  <a href="${link("users")}" class="${tab === "users" ? "on" : ""}">Users</a>
+  <a href="${link("roles")}" class="${tab === "roles" ? "on" : ""}">Roles</a>
+  <a href="${link("settings")}" class="${tab === "settings" ? "on" : ""}">Settings</a>
+</nav>`}
+${d.transport === "console"
+        ? `<p class="error">Email is not set up: verification and password-reset links are printed to the dev server's terminal, not sent. Add <code>email:</code> (gmail or resend) to b17_auth.yaml, with the secrets in .env.local.</p>`
+        : d.transport === "none"
+            ? `<p class="error">Email is not set up: in production, verification and password-reset emails fail until <code>email:</code> (gmail or resend) is configured in b17_auth.yaml.</p>`
+            : ""}
+${d.notice ? `<p class="notice">${escape(d.notice)}</p>` : ""}
+${d.error ? `<p class="error">${escape(d.error)}</p>` : ""}
+${d.link ? `<p class="link"><code>${escape(d.link)}</code> <button type="button" class="small" data-copy="${escape(d.link)}">copy</button> <span class="muted small">works once; the next "invite" or "email" issues a new one</span></p>` : ""}
+${body}
+</main>
+<script nonce="${escape(d.nonce)}">
+for (const f of document.querySelectorAll("form[data-confirm]")) {
+  f.addEventListener("submit", (e) => { if (!confirm(f.dataset.confirm)) e.preventDefault() })
+}
+for (const b of document.querySelectorAll("button[data-copy]")) {
+  b.addEventListener("click", () => navigator.clipboard.writeText(b.dataset.copy).then(() => { b.textContent = "copied" }))
+}
+</script>
+</body>
+</html>`;
+}

package/dist/core/admin.d.ts

@@ -0,0 +1,56 @@
+import { type Session } from "./org.ts";
+export declare const ADMIN_PATH = "/auth/admin";
+export declare function isAdmin(session: Pick<Session, "user"> | null, admins: readonly string[]): boolean;
+/**
+ * Who may change what a role may do, per scope. Pure.
+ *   every organization (scope "")   a system admin (admins: in the yaml)
+ *   one organization (its id)       a system admin, or that organization's owner
+ * The owner role itself is never editable: it holds everything.
+ */
+export declare function mayEditRoles(admin: boolean, scope: string, roleInScope: string | null): boolean;
+/** The forms on the page. Each is one POST with `action` and a few fields. */
+/**
+ * add: two flows by the button pressed (`mode`): Register (email + password, ready and verified)
+ *      or Invite (email only; a seven-day link to set a password, which verifies and signs in)
+ * invite: send the Invite link again to an existing user
+ */
+export declare const USER_ACTIONS: readonly ["add", "invite", "set-password", "sign-out", "verify", "send-verify", "remove"];
+export declare const ORG_ACTIONS: readonly ["create", "add-member", "set-role", "remove-member", "remove-org"];
+/** set-permissions: save the ticked boxes · defaults: back to the yaml starting point (scope "") · follow: drop an organization's own rule (scope id) */
+export declare const ROLE_ACTIONS: readonly ["set-permissions", "defaults", "follow"];
+export type UserAction = (typeof USER_ACTIONS)[number];
+export type OrgAction = (typeof ORG_ACTIONS)[number];
+export type RoleAction = (typeof ROLE_ACTIONS)[number];
+export declare const isUserAction: (a: string) => a is UserAction;
+export declare const isOrgAction: (a: string) => a is OrgAction;
+export declare const isRoleAction: (a: string) => a is RoleAction;
+/** A role is one word: letters, digits, - or _ */
+export declare const ROLE_NAME: RegExp;
+/**
+ * What an admin may not do to themselves: remove or lock out the account
+ * they are using. (Their own password change is fine: it ends their other
+ * sessions, and the page signs them in again.)
+ */
+export declare function refusedOnSelf(action: UserAction, targetEmail: string, selfEmail: string): string | null;
+/**
+ * Where to land after an action: the view the form was on. Only a few
+ * shapes exist, so the value is rebuilt from parts, never taken from the form as is.
+ */
+export declare function backTo(fields: {
+    org?: string;
+    tab?: string;
+}): string;
+/** Roles the page offers in its dropdowns: whatever is defined or saved, plus any role already in use. Owner first. */
+export declare function roleChoices(defined: readonly string[], inUse: readonly string[]): string[];
+/**
+ * The Roles grid: one checkbox per catalogue entry, named `p:<id>`. Which
+ * are on for a role follows from its effective grants, wildcards included
+ * ("all" ticks every box). Pure.
+ */
+export declare function checkedFor(granted: readonly string[], catalogueIds: readonly string[]): string[];
+/**
+ * The grid posted back: the catalogue entries whose box was on, in
+ * catalogue order. Ids outside the catalogue are ignored, so a form can
+ * never grant something the app does not gate. Pure.
+ */
+export declare function grantedFromFields(fields: Record<string, string>, catalogueIds: readonly string[]): string[];

package/dist/core/admin.js

@@ -0,0 +1,90 @@
+// ─────────────────────────────────────────────────────────────
+// The admin page's rules. Pure.
+//
+//   admins: ben@example.com …   (b17_auth.yaml, or AUTH_ADMINS) may open
+//                               /auth/admin and do what the CLI does:
+//                               users, memberships, and what each role
+//                               may do (saved in the database; the yaml
+//                               is the starting point). Never the yaml.
+//
+// An admin is an email, not a role: a role lives in one organization,
+// the admin page spans all of them.
+// ─────────────────────────────────────────────────────────────
+import { OWNER, hasPermission } from "./org.js";
+import { PERMISSION_ID } from "./options.js";
+export const ADMIN_PATH = "/auth/admin";
+export function isAdmin(session, admins) {
+    return !!session && admins.includes(session.user.email.toLowerCase());
+}
+/**
+ * Who may change what a role may do, per scope. Pure.
+ *   every organization (scope "")   a system admin (admins: in the yaml)
+ *   one organization (its id)       a system admin, or that organization's owner
+ * The owner role itself is never editable: it holds everything.
+ */
+export function mayEditRoles(admin, scope, roleInScope) {
+    if (admin)
+        return true;
+    return scope !== "" && roleInScope === OWNER;
+}
+/** The forms on the page. Each is one POST with `action` and a few fields. */
+/**
+ * add: two flows by the button pressed (`mode`): Register (email + password, ready and verified)
+ *      or Invite (email only; a seven-day link to set a password, which verifies and signs in)
+ * invite: send the Invite link again to an existing user
+ */
+export const USER_ACTIONS = ["add", "invite", "set-password", "sign-out", "verify", "send-verify", "remove"];
+export const ORG_ACTIONS = ["create", "add-member", "set-role", "remove-member", "remove-org"];
+/** set-permissions: save the ticked boxes · defaults: back to the yaml starting point (scope "") · follow: drop an organization's own rule (scope id) */
+export const ROLE_ACTIONS = ["set-permissions", "defaults", "follow"];
+export const isUserAction = (a) => USER_ACTIONS.includes(a);
+export const isOrgAction = (a) => ORG_ACTIONS.includes(a);
+export const isRoleAction = (a) => ROLE_ACTIONS.includes(a);
+/** A role is one word: letters, digits, - or _ */
+export const ROLE_NAME = /^[a-z0-9_-]{1,32}$/i;
+/**
+ * What an admin may not do to themselves: remove or lock out the account
+ * they are using. (Their own password change is fine: it ends their other
+ * sessions, and the page signs them in again.)
+ */
+export function refusedOnSelf(action, targetEmail, selfEmail) {
+    if (targetEmail.toLowerCase() !== selfEmail.toLowerCase())
+        return null;
+    if (action === "remove")
+        return "You cannot remove the account you are signed in with.";
+    if (action === "sign-out")
+        return "Use /auth/sign-out to end your own session.";
+    return null;
+}
+/**
+ * Where to land after an action: the view the form was on. Only a few
+ * shapes exist, so the value is rebuilt from parts, never taken from the form as is.
+ */
+export function backTo(fields) {
+    if (fields.org && /^[0-9a-f-]{36}$/i.test(fields.org))
+        return `org=${fields.org}`;
+    if (fields.tab === "users" || fields.tab === "settings" || fields.tab === "roles")
+        return `tab=${fields.tab}`;
+    return "";
+}
+/** Roles the page offers in its dropdowns: whatever is defined or saved, plus any role already in use. Owner first. */
+export function roleChoices(defined, inUse) {
+    return [...new Set([OWNER, "admin", "member", ...defined, ...inUse])];
+}
+/**
+ * The Roles grid: one checkbox per catalogue entry, named `p:<id>`. Which
+ * are on for a role follows from its effective grants, wildcards included
+ * ("all" ticks every box). Pure.
+ */
+export function checkedFor(granted, catalogueIds) {
+    const s = { authorization: { role: null, permissions: [...granted] } };
+    return catalogueIds.filter((id) => hasPermission(s, id));
+}
+/**
+ * The grid posted back: the catalogue entries whose box was on, in
+ * catalogue order. Ids outside the catalogue are ignored, so a form can
+ * never grant something the app does not gate. Pure.
+ */
+export function grantedFromFields(fields, catalogueIds) {
+    return catalogueIds.filter((id) => PERMISSION_ID.test(id) && !!fields[`p:${id}`]);
+}

package/dist/core/config.d.ts

@@ -1,8 +1,15 @@
 export declare const COOKIE_NAME = "auth_session";
+/**
+ * In production the cookie carries the __Host- prefix: the browser then
+ * refuses it unless it is Secure, has Path=/ and no Domain, so a
+ * subdomain or a plain-http page cannot plant one. Pure.
+ */
+export declare function cookieName(production: boolean): string;
+/** The default; b17_auth.yaml `sessionDays` overrides it */
 export declare const SESSION_DAYS = 7;
-export declare const SIGN_IN_PATH = "/auth/sign-in";
+/** The built-in pages; b17_auth.yaml `pages:` can move them (core/pages.ts) */
+export { SIGN_IN_PATH, SIGN_UP_PATH } from "./pages.ts";
 export declare const SIGN_OUT_PATH = "/auth/sign-out";
-export declare const SIGN_UP_PATH = "/auth/sign-up";
-export declare const TABLE = "auth_users";
+export declare const TABLE = "users";
 export declare function getSecret(): string;
 export declare function getDatabaseUrl(): string;

package/dist/core/config.js

@@ -1,24 +1,38 @@
 // ─────────────────────────────────────────────────────────────
-// Configuration. Two env vars, nothing else.
+// Constants, and the two values nothing works without.
 //
-//   DATABASE_URL  Postgres connection string (Neon)
-//   AUTH_SECRET   signs the session cookie; generated by the CLI
+// Everything configurable comes from core/options.ts: b17_auth.yaml
+// with ${NAME} references, or the env vars on their own:
+//
+//   DATABASE_URL   Postgres connection string (Neon)      required
+//   AUTH_SECRET    signs the session cookie               generated by the CLI
+//   the rest       see core/options.ts
 // ─────────────────────────────────────────────────────────────
+import { options } from "./options.js";
 export const COOKIE_NAME = "auth_session";
+/**
+ * In production the cookie carries the __Host- prefix: the browser then
+ * refuses it unless it is Secure, has Path=/ and no Domain, so a
+ * subdomain or a plain-http page cannot plant one. Pure.
+ */
+export function cookieName(production) {
+    return production ? `__Host-${COOKIE_NAME}` : COOKIE_NAME;
+}
+/** The default; b17_auth.yaml `sessionDays` overrides it */
 export const SESSION_DAYS = 7;
-export const SIGN_IN_PATH = "/auth/sign-in";
+/** The built-in pages; b17_auth.yaml `pages:` can move them (core/pages.ts) */
+export { SIGN_IN_PATH, SIGN_UP_PATH } from "./pages.js";
 export const SIGN_OUT_PATH = "/auth/sign-out";
-export const SIGN_UP_PATH = "/auth/sign-up";
-export const TABLE = "auth_users";
+export const TABLE = "users";
 export function getSecret() {
-    const secret = process.env.AUTH_SECRET;
+    const secret = options().secret;
     if (!secret || secret.length < 16) {
         throw new Error("AUTH_SECRET is missing. Run: npx @binary1702/auth");
     }
     return secret;
 }
 export function getDatabaseUrl() {
-    const url = process.env.DATABASE_URL;
+    const url = options().database;
     if (!url) {
         throw new Error("DATABASE_URL is missing. Run: npx @binary1702/auth");
     }