@magland/mochi 0.3.1

package/dist/forms.js

@@ -0,0 +1,737 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flashBanner = flashBanner;
+exports.loginPage = loginPage;
+exports.newRepoPage = newRepoPage;
+exports.forkPage = forkPage;
+exports.importPage = importPage;
+exports.newCollectionPage = newCollectionPage;
+exports.collectionSettingsPage = collectionSettingsPage;
+exports.editFilePage = editFilePage;
+exports.newFilePage = newFilePage;
+exports.uploadPage = uploadPage;
+exports.deleteFilePage = deleteFilePage;
+exports.conflictPage = conflictPage;
+exports.settingsPage = settingsPage;
+exports.adminUsersPage = adminUsersPage;
+exports.adminUserPage = adminUserPage;
+exports.adminShell = adminShell;
+exports.adminIndexPage = adminIndexPage;
+exports.egressPage = egressPage;
+exports.appearancePage = appearancePage;
+exports.tokenPage = tokenPage;
+exports.opErrorPage = opErrorPage;
+const avatar_1 = require("./avatar");
+const html_1 = require("./html");
+const icons_1 = require("./icons");
+const logo_1 = require("./logo");
+const render_1 = require("./render");
+const perms_1 = require("./perms");
+const vault_1 = require("./vault");
+const views_1 = require("./views");
+// Form pages for the UI operations. Every mutating form embeds the session's
+// CSRF value and posts back to a handler that re-checks authorization against
+// live vault.json.
+function errorBanner(error) {
+    return error ? (0, html_1.html) `<div class="form-error">${error}</div>` : '';
+}
+function flashBanner(msg) {
+    return msg ? (0, html_1.html) `<div class="flash">${msg}</div>` : '';
+}
+function loginPage(next, error) {
+    // A narrow card under the mark, centred on the page: signing in is the one
+    // thing this page is for, so nothing else is on it.
+    const content = (0, html_1.html) `<div class="signin">
+<div class="signin-mark">${(0, html_1.raw)(logo_1.MARK)}</div>
+<h1>Sign in to Mochi Forge</h1>
+${errorBanner(error)}
+<div class="form-box">
+<form method="post" action="/login">
+<input type="hidden" name="next" value="${next}">
+<div class="field"><label for="username">Username</label><input type="text" id="username" name="username" autocomplete="username" autofocus required></div>
+<div class="field"><label for="token">Token</label><input type="password" id="token" name="token" autocomplete="current-password" required></div>
+<button type="submit" class="btn btn-primary">Sign in</button>
+</form>
+</div>
+<p class="muted small signin-note">A token is what git uses for pushing. Tokens are minted by an administrator; there are no passwords.</p>
+</div>`;
+    return (0, views_1.layout)('Sign in', content, { path: '/login' });
+}
+function newRepoPage(viewer, collectionNames, preset, error) {
+    const datalist = collectionNames.map((o) => (0, html_1.html) `<option value="${o}">`);
+    const content = (0, html_1.html) `<div class="form-box wide">
+<h1>Create a new repository</h1>
+<p class="muted">A repository is a directory in the vault holding a bare git repository. Its name and the collection it sits in are its address.</p>
+<hr class="rule">
+${errorBanner(error)}
+<form method="post" action="/new">
+${(0, views_1.csrfField)(viewer)}
+<div class="name-row">
+  <div class="field"><label for="collection">Collection</label><input type="text" id="collection" name="collection" list="collections" value="${preset.collection ?? ''}" required><datalist id="collections">${datalist}</datalist></div>
+  <div class="name-slash">/</div>
+  <div class="field"><label for="name">Repository name</label><input type="text" id="name" name="name" value="${preset.name ?? ''}" required></div>
+</div>
+<p class="muted small">The collection may be one that exists or a new one to create along with the repository.</p>
+<div class="field"><label for="description">Description <span class="muted">(optional)</span></label><input type="text" id="description" name="description" value="${preset.description ?? ''}"></div>
+<hr class="rule">
+<div class="field"><label class="checkbox"><input type="checkbox" name="init" value="1" checked> Initialize with a README</label>
+<p class="muted small">Gives the repository a first commit on <span class="mono">main</span>, so it can be browsed and cloned straight away.</p></div>
+<div class="field"><label class="checkbox"><input type="checkbox" name="private" value="1"> Private</label>
+<p class="muted small">A private repository is visible only to its collaborators, the collection's owners, and site admins. Everything else in a vault reads anonymously.</p></div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('repo')}<span>Create repository</span></button>
+</form>
+</div>`;
+    return (0, views_1.layout)('New repository', content, { viewer, path: '/new' });
+}
+/**
+ * The fork form. GitHub asks where the copy should go and lets the name be
+ * changed on the way; so does this, with the collection defaulting to one
+ * named after the signed-in user, which is the shape most vaults have.
+ */
+function forkPage(ctx, viewer, collectionNames, preset, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const datalist = collectionNames.map((o) => (0, html_1.html) `<option value="${o}">`);
+    const content = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<div class="form-box wide">
+<h1>Fork ${ctx.collection}/${ctx.repo}</h1>
+<p class="muted">A fork is a copy of the repository somewhere else in this vault. Its objects are shared with the original on disk until one of them gains new ones, so a fork costs almost nothing.</p>
+<hr class="rule">
+${errorBanner(error)}
+<form method="post" action="${base}/fork">
+${(0, views_1.csrfField)(viewer)}
+<div class="name-row">
+  <div class="field"><label for="collection">Collection</label><input type="text" id="collection" name="collection" list="collections" value="${preset.collection ?? ''}" required><datalist id="collections">${datalist}</datalist></div>
+  <div class="name-slash">/</div>
+  <div class="field"><label for="name">Repository name</label><input type="text" id="name" name="name" value="${preset.name ?? ctx.repo}" required></div>
+</div>
+<p class="muted small">You need permission to create in the destination collection: your own, one you own, or anywhere for a site admin. Branches and tags come across; issues, releases, and workflow runs stay with the original.</p>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('repo-forked')}<span>Create fork</span></button>
+</form>
+</div>`;
+    return (0, views_1.layout)(`Fork ${ctx.collection}/${ctx.repo}`, content, (0, views_1.repoOpts)(ctx, `${base}/fork`));
+}
+/**
+ * The import page. Importing has always run on the reader's machine rather than
+ * on the server, and what this page does is hand them the command
+ * that does it. Earlier it asked for the source in a form and wrote a shell
+ * one-liner from the answers, which put a form in front of an operation the
+ * page cannot perform; now `mochi import` performs it, so the page only has
+ * to say what to run, with the collection and the vault's own URL filled in.
+ * The git commands remain below for a machine with no Node on it.
+ */
+function importPage(viewer, opts) {
+    const collection = opts.collection ?? 'mycollection';
+    const back = opts.collection
+        ? (0, html_1.html) `<p><a class="btn" href="/${encodeURIComponent(opts.collection)}">Back to ${opts.collection}</a></p>`
+        : '';
+    const fallback = opts.gitCommand
+        ? (0, html_1.html) `<hr class="rule">
+<h2>Without the CLI</h2>
+<p class="muted small">The same two steps by hand. Replace the source URL, and the name after the collection if you want one other than the source's.</p>
+${(0, views_1.copyRow)(opts.gitCommand)}`
+        : '';
+    const content = (0, html_1.html) `<div class="form-box wide">
+<h1>Import a repository</h1>
+<p class="muted">Importing runs on your machine, not on this server: git reads the source with the credentials you already have there and pushes it here, which creates the repository. The <span class="mono">mochi</span> command does both.</p>
+<hr class="rule">
+<h2>Once per machine</h2>
+${(0, views_1.copyRow)('npm install -g @magland/mochi')}
+${(0, views_1.copyRow)(`mochi login ${opts.vaultUrl}`)}
+<h2>Then, for each repository</h2>
+${(0, views_1.copyRow)(`mochi import https://github.com/owner/repo ${collection}`)}
+<p class="muted small">The source may be an https or ssh git URL, or <span class="mono">owner/repo</span> for GitHub. The repository takes its name from the source; write <span class="mono">${collection}/another-name</span> to choose another. Add <span class="mono">--lfs</span> to carry Git LFS objects too. A collection that does not exist yet is created by the push. A public GitHub source also has its description read from GitHub and set here.</p>
+${fallback}
+${back}
+</div>`;
+    return (0, views_1.layout)('Import a repository', content, { viewer, path: '/import' });
+}
+/**
+ * Creating a collection on its own. A push creates the collection it lands in,
+ * so this is for the order where the collection comes first: an empty one to
+ * import into, or to hand someone push access over before anything is in it.
+ */
+function newCollectionPage(viewer, preset, error) {
+    const content = (0, html_1.html) `<div class="form-box wide">
+<h1>Create a new collection</h1>
+<p class="muted">A collection is a directory in the vault holding repositories. It may be empty; repositories arrive by creation, import, or push.</p>
+<hr class="rule">
+${errorBanner(error)}
+<form method="post" action="/new/collection">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="name">Collection name</label><input type="text" id="name" name="name" value="${preset.name ?? ''}" required autofocus></div>
+<p class="muted small">Letters, digits, dot, underscore, and dash. The collection named after you is yours to create; any other name takes a site admin.</p>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('plus')}<span>Create collection</span></button>
+</form>
+</div>`;
+    return (0, views_1.layout)('New collection', content, { viewer, path: '/new/collection' });
+}
+/**
+ * A collection's own settings, which today is one operation: its name.
+ *
+ * Repository settings live under the repository, so a collection's live under
+ * the collection, at the same place in the path. The rename is graded amber
+ * rather than red for the same reason a repository's is: what it breaks can be
+ * put back by renaming it again.
+ */
+function collectionSettingsPage(viewer, collection, repoCount, owners, msg, error) {
+    const base = `/${encodeURIComponent(collection)}`;
+    const holds = repoCount === 0
+        ? 'This collection is empty.'
+        : `Every one of its ${repoCount === 1 ? 'repository' : `${repoCount} repositories`} moves with it, along with their sites, workflow runs, issues, pull requests, releases, and LFS objects.`;
+    const content = (0, html_1.html) `<div class="page-head"><h1 class="with-avatar">${(0, avatar_1.avatar)(collection, 28, 'square')}${collection}</h1></div>
+<h2>Settings</h2>
+${flashBanner(msg)}
+${errorBanner(error)}
+<div class="box settings-box"><div class="box-header">${(0, icons_1.icon)('people')}Owners</div><div class="box-body">
+<p class="muted small">Owners hold the admin role on every repository in the collection, may create repositories in it,
+and manage these settings. A user named <span class="mono">${collection}</span> owns it by bearing its name and is not
+listed here.</p>
+${owners.length
+        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>User</th><th class="right"></th></tr>${owners.map((o) => (0, html_1.html) `<tr><td class="with-avatar">${(0, avatar_1.avatar)(o, 24)}<b>${o}</b></td><td class="right">
+<form method="post" action="${base}/settings/owners/remove" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<input type="hidden" name="username" value="${o}">
+<button type="submit" class="btn btn-danger-outline">Remove</button>
+</form></td></tr>`)}</tbody></table>`
+        : (0, html_1.html) `<p class="muted">No owners are listed.</p>`}
+<form method="post" action="${base}/settings/owners" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<label for="ownerUser">User</label><input type="text" id="ownerUser" name="username" required>
+<button type="submit" class="btn">${(0, icons_1.icon)('people')}<span>Add owner</span></button>
+</form>
+</div></div>
+<div class="danger-zone caution">
+<h3>Rename</h3>
+<p>${holds} The old address is redirected here, so links and existing clones keep working until something else is created under that name, but token scopes naming the old collection have to be granted again under the new name.</p>
+<form method="post" action="${base}/settings/rename" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<label for="toName">Collection name</label><input type="text" id="toName" name="name" value="${collection}" required>
+<button type="submit" class="btn">${(0, icons_1.icon)('pencil')}<span>Rename</span></button>
+</form>
+</div>`;
+    return (0, views_1.layout)(`Settings - ${collection}`, content, {
+        crumbs: (0, html_1.html) ` / <a href="${base}">${collection}</a>`,
+        viewer,
+        path: `${base}/settings`,
+    });
+}
+/**
+ * The commit box: a summary and an optional extended description, which is
+ * GitHub's shape and git's own (the two are joined by a blank line before the
+ * commit is made). The face beside the heading is whose commit it will be.
+ */
+function commitFields(viewer, expectedHead, messagePlaceholder, branch) {
+    // Committing to a new branch is GitHub's second choice in this box, and the
+    // one that keeps a shared branch clean. The name field is only read when
+    // that choice is made, so leaving it filled in is harmless.
+    const branchChoice = branch === undefined
+        ? ''
+        : (0, html_1.html) `<div class="commit-target">
+<label class="checkbox"><input type="checkbox" name="newBranchWanted" value="1"> Commit to a new branch</label>
+<div class="field"><label class="sr-only" for="newBranch">New branch name</label><input type="text" id="newBranch" name="newBranch" placeholder="${branch}-patch" autocomplete="off"></div>
+<p class="muted small">Leave it unticked to commit straight to <span class="mono">${branch}</span>.</p>
+</div>`;
+    return (0, html_1.html) `${(0, views_1.csrfField)(viewer)}
+<input type="hidden" name="expected" value="${expectedHead ?? ''}">
+<div class="commit-box-head">${(0, avatar_1.avatar)(viewer.auth.username, 28)}<b>Commit changes</b></div>
+<div class="field"><label class="sr-only" for="message">Commit message</label><input type="text" id="message" name="message" placeholder="${messagePlaceholder}"></div>
+<div class="field"><label class="sr-only" for="description">Extended description</label><textarea id="description" name="description" rows="3" placeholder="Add an optional extended description"></textarea></div>
+${branchChoice}`;
+}
+function editFilePage(ctx, filePath, content, expectedHead, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const action = `${base}/edit/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const cancel = `${base}/blob/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const rows = Math.min(30, Math.max(12, content.split('\n').length + 2));
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<h2 class="file-head">Editing <span class="mono">${filePath}</span> on <span class="mono">${ctx.ref}</span></h2>
+${errorBanner(error)}
+<form method="post" action="${action}">
+<div class="field"><label for="path">Path</label><input type="text" id="path" name="path" value="${filePath}" spellcheck="false"><p class="muted small">Changing it renames or moves the file in the same commit.</p></div>
+<textarea class="code-editor" name="content" rows="${rows}" spellcheck="false">${content}</textarea>
+<div class="commit-box">
+${commitFields(ctx.viewer, expectedHead, `Update ${filePath.split('/').pop()}`, ctx.ref)}
+<div class="actions"><button type="submit" class="btn btn-primary">Commit changes</button><a class="btn" href="${cancel}">Cancel</a></div>
+</div>
+</form>`;
+    return (0, views_1.layout)(`Editing ${filePath} - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
+}
+function newFilePage(ctx, branch, dir, expectedHead, preset, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const action = `${base}/new/${(0, views_1.encPath)(branch)}${dir === '' ? '' : `/${(0, views_1.encPath)(dir)}`}`;
+    const cancel = expectedHead === null ? base : `${base}/tree/${(0, views_1.encPath)(branch)}${dir === '' ? '' : `/${(0, views_1.encPath)(dir)}`}`;
+    const prefix = dir === '' ? '' : `${dir}/`;
+    const branchNote = expectedHead === null
+        ? (0, html_1.html) `<p class="muted small">This repository is empty; committing will create the <span class="mono">${branch}</span> branch.</p>`
+        : '';
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<h2 class="file-head">New file in <span class="mono">${prefix || '/'}</span> on <span class="mono">${branch}</span></h2>
+${branchNote}
+${errorBanner(error)}
+<form method="post" action="${action}">
+<div class="field"><label for="filename">File name</label><div class="filename-row"><span class="mono muted">${prefix}</span><input type="text" id="filename" name="filename" value="${preset.filename ?? ''}" placeholder="path/to/file.md" required></div></div>
+<textarea class="code-editor" name="content" rows="18" spellcheck="false">${preset.content ?? ''}</textarea>
+<div class="commit-box">
+${commitFields(ctx.viewer, expectedHead, 'Create new file', expectedHead === null ? undefined : branch)}
+<div class="actions"><button type="submit" class="btn btn-primary">Commit new file</button><a class="btn" href="${cancel}">Cancel</a></div>
+</div>
+</form>`;
+    return (0, views_1.layout)(`New file - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
+}
+/**
+ * The upload form. A file input and the same commit box as the editor, so
+ * uploading is the same act as writing a file: a commit with a message, on
+ * this branch or on a new one.
+ */
+function uploadPage(ctx, branch, dir, expectedHead, maxBytes, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const action = `${base}/upload/${(0, views_1.encPath)(branch)}${dir === '' ? '' : `/${(0, views_1.encPath)(dir)}`}`;
+    const cancel = `${base}/tree/${(0, views_1.encPath)(branch)}${dir === '' ? '' : `/${(0, views_1.encPath)(dir)}`}`;
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<h2 class="file-head">Uploading to <span class="mono">${dir === '' ? '/' : `${dir}/`}</span> on <span class="mono">${branch}</span></h2>
+${errorBanner(error)}
+<form method="post" action="${action}" enctype="multipart/form-data">
+<div class="field"><label for="files">Files</label>
+<input type="file" id="files" name="files" multiple required>
+<p class="muted small">Up to ${Math.floor(maxBytes / (1024 * 1024))} MB in one commit. A file that is already there is replaced, keeping its mode. Large binaries are better pushed with Git LFS.</p></div>
+<div class="commit-box">
+${commitFields(ctx.viewer, expectedHead, 'Add files via upload', branch)}
+<div class="actions"><button type="submit" class="btn btn-primary">${(0, icons_1.icon)('upload')}<span>Commit changes</span></button><a class="btn" href="${cancel}">Cancel</a></div>
+</div>
+</form>`;
+    return (0, views_1.layout)(`Upload to ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx, action));
+}
+function deleteFilePage(ctx, filePath, expectedHead, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const action = `${base}/delete/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const cancel = `${base}/blob/${(0, views_1.encPath)(ctx.ref)}/${(0, views_1.encPath)(filePath)}`;
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<h2 class="file-head">Delete <span class="mono">${filePath}</span> from <span class="mono">${ctx.ref}</span></h2>
+${errorBanner(error)}
+<div class="form-box">
+<p>This commits the removal of <b>${filePath}</b> to the <b>${ctx.ref}</b> branch. The file stays in the history.</p>
+<form method="post" action="${action}">
+${commitFields(ctx.viewer, expectedHead, `Delete ${filePath.split('/').pop()}`)}
+<div class="actions"><button type="submit" class="btn btn-danger">Delete file</button><a class="btn" href="${cancel}">Cancel</a></div>
+</form>
+</div>`;
+    return (0, views_1.layout)(`Delete ${filePath} - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
+}
+function conflictPage(ctx, branch, retryUrl) {
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'code')}
+<div class="form-box">
+<h2>The branch has moved</h2>
+<p>Someone updated <b>${branch}</b> while you were editing, so your change was not committed; committing it now could silently undo theirs.</p>
+<p><a class="btn btn-primary" href="${retryUrl}">Reload and try again</a></p>
+</div>`;
+    return (0, views_1.layout)(`Conflict - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx));
+}
+function settingsPage(ctx, description, access, msg, error) {
+    const base = (0, views_1.repoUrl)(ctx);
+    const branchOptions = ctx.branches.map((b) => (0, html_1.html) `<option value="${b.name}"${b.name === ctx.defaultBranch ? (0, html_1.raw)(' selected') : ''}>${b.name}</option>`);
+    const defaultBranchField = ctx.branches.length > 0
+        ? (0, html_1.html) `<div class="field"><label for="defaultBranch">Default branch</label><select id="defaultBranch" name="defaultBranch">${branchOptions}</select></div>`
+        : '';
+    const settingsForm = ctx.canPush
+        ? (0, html_1.html) `<div class="box settings-box"><div class="box-header">${(0, icons_1.icon)('sliders')}General</div><div class="box-body">
+<form method="post" action="${base}/settings">
+${(0, views_1.csrfField)(ctx.viewer)}
+<div class="field"><label for="description">Description</label><input type="text" id="description" name="description" value="${description}"><p class="muted small">Shown beside the repository in listings and in the About panel.</p></div>
+${defaultBranchField}
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form>
+</div></div>`
+        : '';
+    // Who may see and write the repository. Admin only, like the rename below:
+    // access is the repository's own business.
+    const collaboratorRows = access.collaborators.map(({ username, role }) => (0, html_1.html) `<tr><td class="with-avatar">${(0, avatar_1.avatar)(username, 24)}<b>${username}</b></td><td class="muted">${role}</td><td class="right">
+<form method="post" action="${base}/settings/collaborators/remove" class="inline-form">
+${(0, views_1.csrfField)(ctx.viewer)}
+<input type="hidden" name="username" value="${username}">
+<button type="submit" class="btn btn-danger-outline">Remove</button>
+</form></td></tr>`);
+    const ownersNote = access.owners.length
+        ? (0, html_1.html) `<p class="muted small">Owners of <span class="mono">${ctx.collection}</span> (${(0, html_1.joinHtml)(access.owners.map((o) => (0, html_1.html) `<b>${o}</b>`), ', ')}, and the user the collection is named after) hold the admin role here without being listed.</p>`
+        : (0, html_1.html) `<p class="muted small">The user the collection is named after, and any owners added to it, hold the admin role here without being listed.</p>`;
+    const accessBox = ctx.canAdmin
+        ? (0, html_1.html) `<div class="box settings-box"><div class="box-header">${(0, icons_1.icon)('people')}Access</div><div class="box-body">
+<form method="post" action="${base}/settings/visibility">
+${(0, views_1.csrfField)(ctx.viewer)}
+<input type="hidden" name="private" value="${ctx.isPrivate ? 'false' : 'true'}">
+<p>${ctx.isPrivate
+            ? (0, html_1.html) `This repository is <b>private</b>: visible to its collaborators, the collection's owners, and site admins, on the web, over git, and in the API alike.${ctx.hasSite
+                ? (0, html_1.html) ` Its published <a href="${ctx.siteUrl}">site</a> stays world-readable; remove the site directory if the site must go too.`
+                : ''}`
+            : (0, html_1.html) `This repository is <b>public</b>: anyone can read and clone it, as everything in a vault is by default.`}</p>
+<button type="submit" class="btn">${ctx.isPrivate ? 'Make public' : 'Make private'}</button>
+</form>
+<hr class="rule">
+<h3>Collaborators</h3>
+${collaboratorRows.length
+            ? (0, html_1.html) `<table class="listing"><tbody><tr><th>User</th><th>Role</th><th class="right"></th></tr>${collaboratorRows}</tbody></table>`
+            : (0, html_1.html) `<p class="muted">No collaborators.</p>`}
+${ownersNote}
+<form method="post" action="${base}/settings/collaborators" class="inline-form">
+${(0, views_1.csrfField)(ctx.viewer)}
+<label for="collabUser">User</label><input type="text" id="collabUser" name="username" required>
+<label for="collabRole">Role</label><select id="collabRole" name="role">
+<option value="read">read</option>
+<option value="write" selected>write</option>
+<option value="admin">admin</option>
+</select>
+<button type="submit" class="btn">${(0, icons_1.icon)('people')}<span>Add</span></button>
+</form>
+<p class="muted small">read may see a private repository; write may also push and edit; admin may also change its settings, visibility, and collaborators.</p>
+</div></div>`
+        : '';
+    // Renaming and moving are one operation, since both are a directory rename.
+    // It is flagged because every URL to this repository, and every remote
+    // pointing at it, changes with it; it takes the amber grade rather than the
+    // red one because what it breaks can be put back by renaming it again.
+    const renameForm = ctx.canAdmin
+        ? (0, html_1.html) `<div class="danger-zone caution">
+<h3>Rename or move</h3>
+<p>Everything moves with the repository: its site, its workflow runs, its issues, its releases, and its LFS objects. The old address is redirected here, so links and existing clones keep working, until something else is created under that name.</p>
+<form method="post" action="${base}/settings/rename" class="inline-form">
+${(0, views_1.csrfField)(ctx.viewer)}
+<label for="toCollection">Collection</label><input type="text" id="toCollection" name="collection" value="${ctx.collection}" required>
+<label for="toName">Name</label><input type="text" id="toName" name="name" value="${ctx.repo}" required>
+<button type="submit" class="btn">${(0, icons_1.icon)('pencil')}<span>Rename</span></button>
+</form>
+</div>`
+        : '';
+    const dangerZone = ctx.canAdmin
+        ? (0, html_1.html) `<div class="danger-zone">
+<h3>Danger zone</h3>
+<p>Deleting a repository removes its directory${ctx.hasSite ? ' and its site' : ''} from the vault permanently. There is no undo.</p>
+<form method="post" action="${base}/settings/delete">
+${(0, views_1.csrfField)(ctx.viewer)}
+<div class="field"><label for="confirm">Type <b class="mono">${ctx.collection}/${ctx.repo}</b> to confirm</label><input type="text" id="confirm" name="confirm" autocomplete="off"></div>
+<button type="submit" class="btn btn-danger">${(0, icons_1.icon)('trash')}<span>Delete this repository</span></button>
+</form>
+</div>`
+        : '';
+    const body = (0, html_1.html) `${(0, views_1.repoHeader)(ctx, 'settings')}
+<h2>Settings</h2>
+${flashBanner(msg)}
+${errorBanner(error)}
+${settingsForm}
+${accessBox}
+${renameForm}
+${dangerZone}`;
+    return (0, views_1.layout)(`Settings - ${ctx.collection}/${ctx.repo}`, body, (0, views_1.repoOpts)(ctx, `${base}/settings`));
+}
+function adminUsersPage(viewer, users, msg, error) {
+    const rows = users.map(({ name, user }) => {
+        const actions = (0, html_1.html) `<details class="dropdown"><summary class="btn">${(0, icons_1.icon)('kebab')}<span>Manage</span></summary><div class="dropdown-menu dd-right user-actions">
+<form method="post" action="/admin/users/${encodeURIComponent(name)}/grant" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<input type="hidden" name="siteAdmin" value="${user.siteAdmin ? 'false' : 'true'}">
+<button type="submit" class="btn">${user.siteAdmin ? 'Withdraw site admin' : 'Make site admin'}</button>
+</form>
+<form method="post" action="/admin/users/${encodeURIComponent(name)}/token" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<input type="text" name="tokenScope" placeholder="token scope (optional)">
+<button type="submit" class="btn">Mint token</button>
+</form>
+</div></details>`;
+        const userUrl = `/admin/users/${encodeURIComponent(name)}`;
+        return (0, html_1.html) `<tr><td class="with-avatar">${(0, avatar_1.avatar)(name, 24)}<a href="${userUrl}"><b>${name}</b></a></td><td class="muted small">${user.siteAdmin ? 'site admin' : ''}</td><td class="right muted small"><a href="${userUrl}">${user.tokens.length} token${user.tokens.length === 1 ? '' : 's'}</a></td><td>${actions}</td></tr>`;
+    });
+    const content = (0, html_1.html) `<h1>Users</h1>
+${flashBanner(msg)}
+${errorBanner(error)}
+<table class="listing"><tbody><tr><th>User</th><th>Site admin</th><th class="right">Tokens</th><th></th></tr>${rows}</tbody></table>
+<div class="form-box" style="margin-top:24px">
+<h2>Add user</h2>
+<form method="post" action="/admin/users">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="username">Username</label><input type="text" id="username" name="username" required>
+<p class="muted small">A user owns the collection named after them: they create repositories there, administer them, and
+may grant others access. Everything else is granted per repository (collaborators) or per collection (owners).</p></div>
+<div class="field"><label><input type="checkbox" name="siteAdmin" value="true"> Site admin</label>
+<p class="muted small">Site admins hold the admin role everywhere and manage users, runners, and the vault's settings.</p></div>
+<button type="submit" class="btn btn-primary">Create user and mint token</button>
+</form>
+<p class="muted small">The new token is shown once on the next page.</p>
+</div>`;
+    return adminShell(viewer, 'users', 'Users', '/admin/users', content);
+}
+/**
+ * One user: their scopes, each token they hold, and the way to take either
+ * away. The tokens are the point of the page. Every write to a vault is
+ * authorized by a bearer token, so a leaked one needs an off switch that does
+ * not involve editing vault.json by hand, and this is it: revocation reads
+ * live on the next request, for git and for the web session alike, since both
+ * resolve the token against vault.json every time.
+ */
+function adminUserPage(viewer, name, user, msg, error) {
+    const self = name === viewer.auth.username;
+    const base = `/admin/users/${encodeURIComponent(name)}`;
+    const tokenRows = user.tokens.map((t) => {
+        const id = (0, vault_1.tokenId)(t);
+        const current = self && (0, vault_1.tokenId)(viewer.auth.token) === id;
+        const revoke = (0, html_1.html) `<form method="post" action="${base}/tokens/${encodeURIComponent(id)}/revoke" class="inline-form">
+${(0, views_1.csrfField)(viewer)}
+<button type="submit" class="btn btn-danger-outline">Revoke</button>
+</form>`;
+        return (0, html_1.html) `<tr><td class="mono">${id}${current ? (0, html_1.raw)(' <span class="counter">this session</span>') : ''}</td><td class="muted small">${t.created ? (0, render_1.timeTag)(t.created, '') : (0, html_1.raw)('<span class="muted">before minting was dated</span>')}</td><td class="mono small">${t.scope?.join(' ') ?? ''}${t.scope ? '' : (0, html_1.raw)('<span class="muted">the user’s scope</span>')}</td><td class="right">${revoke}</td></tr>`;
+    });
+    const tokens = user.tokens.length > 0
+        ? (0, html_1.html) `<table class="listing"><tbody><tr><th>Token</th><th>Minted</th><th>Scope</th><th class="right"></th></tr>${tokenRows}</tbody></table>
+<p class="muted small">Only a SHA-256 hash of each token is stored, so there is nothing to show beyond its id. Revocation
+is immediate: the next push and the next page load are both refused. Revoking the token this session was signed in with
+signs you out.</p>`
+        : (0, html_1.html) `<div class="empty-state">No tokens. This user cannot push or sign in until one is minted.</div>`;
+    const mint = (0, html_1.html) `<div class="form-box">
+<h2>Mint a token</h2>
+<form method="post" action="${base}/token">
+${(0, views_1.csrfField)(viewer)}
+<input type="hidden" name="next" value="${base}">
+<div class="field"><label for="tokenScope">Token scope <span class="muted">(optional)</span></label>
+<input type="text" id="tokenScope" name="tokenScope" placeholder="e.g. mycollection/*">
+<p class="muted small">Globs that narrow this one token below the user's own scope. A token with a scope of its own
+carries no admin rights. Leave empty for a token as broad as the user.</p></div>
+<button type="submit" class="btn btn-primary">Mint token</button>
+</form>
+<p class="muted small">Minting does not revoke anything: the user's other tokens keep working until each is revoked here.</p>
+</div>`;
+    const grant = (0, html_1.html) `<div class="form-box">
+<h2>Site admin</h2>
+<form method="post" action="${base}/grant">
+${(0, views_1.csrfField)(viewer)}
+<input type="hidden" name="next" value="${base}">
+<input type="hidden" name="siteAdmin" value="${user.siteAdmin ? 'false' : 'true'}">
+<p>${user.siteAdmin
+        ? (0, html_1.html) `<b>${name}</b> is a site admin: the admin role everywhere, plus users, runners, and the vault's settings.`
+        : (0, html_1.html) `<b>${name}</b> owns the collection <span class="mono">${name}</span> by name; anything more is granted per
+repository (collaborators), per collection (owners), or with the site-admin bit here.`}</p>
+<button type="submit" class="btn">${user.siteAdmin ? 'Withdraw site admin' : 'Make site admin'}</button>
+</form>
+</div>`;
+    const identity = (0, html_1.html) `<div class="form-box">
+<h2>Identity</h2>
+<form method="post" action="${base}/emails">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="emails">Git author emails</label>
+<input type="text" id="emails" name="emails" value="${(user.emails ?? []).join(' ')}" placeholder="e.g. jane@example.org">
+<p class="muted small">Commits by these addresses are attributed to ${name}: one contributor, one face, however they
+were authored. Edits made in the web interface as ${name} are attributed automatically. Space-separated; saving an
+empty list clears it.</p></div>
+<button type="submit" class="btn">Save emails</button>
+</form>
+</div>`;
+    const danger = self
+        ? (0, html_1.html) `<p class="muted small">A user cannot delete themselves; another administrator can, or edit <span class="mono">vault.json</span> by hand.</p>`
+        : (0, html_1.html) `<div class="danger-zone">
+<h3>Danger zone</h3>
+<p>Deleting a user revokes every token they hold, immediately. Nothing they pushed is touched: commits, issues, and
+comments keep their name.</p>
+<form method="post" action="${base}/delete">
+${(0, views_1.csrfField)(viewer)}
+<div class="field"><label for="confirm">Type <b class="mono">${name}</b> to confirm</label><input type="text" id="confirm" name="confirm" autocomplete="off"></div>
+<button type="submit" class="btn btn-danger">${(0, icons_1.icon)('trash')}<span>Delete this user</span></button>
+</form>
+</div>`;
+    const content = (0, html_1.html) `<div class="page-head"><div class="with-avatar">${(0, avatar_1.avatar)(name, 32)}<h1>${name}</h1></div></div>
+${flashBanner(msg)}
+${errorBanner(error)}
+<p class="muted">${user.siteAdmin ? 'Site admin' : (0, html_1.html) `Owns the collection <span class="mono">${name}</span> by name`}</p>
+<h2>Tokens</h2>
+${tokens}
+${mint}
+${grant}
+${identity}
+${danger}
+<p><a href="/admin/users">&larr; All users</a></p>`;
+    return adminShell(viewer, 'users', `${name} - Users`, base, content);
+}
+/**
+ * The shell every administration page sits in: the sections down the left, as
+ * GitHub's settings pages have. It saves each page a "Back" link and makes it
+ * plain what else there is to administer.
+ */
+function adminShell(viewer, active, title, path, body) {
+    const item = (id, href, label, glyph) => (0, html_1.html) `<a class="${active === id ? 'current' : ''}" href="${href}">${(0, icons_1.icon)(glyph)}<span>${label}</span></a>`;
+    // Every admin page is the site admin's now, but the shell keeps the check
+    // so a page added for a weaker audience later hides what is not theirs.
+    const canVault = (0, perms_1.isSiteAdmin)(viewer.auth);
+    const nav = (0, html_1.html) `<aside class="admin-side"><div class="side-block"><h3>${(0, icons_1.icon)('sliders')}Administration</h3><div class="side-links">
+${item('users', '/admin/users', 'Users', 'people')}
+${item('runners', '/admin/runners', 'Runners', 'server')}
+${canVault ? item('egress', '/admin/egress', 'Egress', 'upload') : ''}
+${canVault ? item('appearance', '/admin/appearance', 'Appearance', 'appearance') : ''}
+</div></div></aside>`;
+    // The bar locates an admin page the way it locates a repository page: the
+    // trail up from here, for after the heading has scrolled away.
+    const sections = {
+        index: null,
+        users: { href: '/admin/users', label: 'Users' },
+        runners: { href: '/admin/runners', label: 'Runners' },
+        egress: { href: '/admin/egress', label: 'Egress' },
+        appearance: { href: '/admin/appearance', label: 'Appearance' },
+    };
+    const section = sections[active];
+    const crumbs = (0, html_1.html) ` / <a href="/admin">admin</a>${section ? (0, html_1.html) ` / <a href="${section.href}">${section.label}</a>` : ''}`;
+    return (0, views_1.layout)(title, (0, html_1.html) `<div class="admin-layout">${nav}<div class="admin-main">${body}</div></div>`, {
+        viewer,
+        path,
+        crumbs,
+    });
+}
+function adminIndexPage(viewer, canVault) {
+    const card = (href, title, blurb) => (0, html_1.html) `<a class="card" href="${href}"><b>${title}</b><span class="muted small">${blurb}</span></a>`;
+    const content = (0, html_1.html) `<h1>Administration</h1>
+<div class="card-list">
+${card('/admin/users', 'Users', 'Create users, grant site admin, mint tokens.')}
+${card('/admin/runners', 'Runners', 'Register the machines that execute workflow jobs.')}
+${canVault
+        ? card('/admin/egress', 'Egress', 'See what has been sent out today, per repository, and cap what a day may send.')
+        : ''}
+${canVault
+        ? card('/admin/appearance', 'Appearance', 'Choose the theme this vault is served with.')
+        : ''}
+</div>
+${canVault
+        ? ''
+        : (0, html_1.html) `<p class="muted small">Appearance and the egress budget are vault-wide settings, so they are the site admin's.</p>`}`;
+    return adminShell(viewer, 'index', 'Administration', '/admin', content);
+}
+/**
+ * What the vault has sent out today, and the cap on it.
+ *
+ * The page a bill sends someone looking, so it answers the two questions in
+ * that order: how much has gone out today and which repository it went for,
+ * then how to bound it. The breakdown is the honest part of the design and the
+ * cap is the useful one, and both are on one page because a number without a
+ * lever is just worrying.
+ */
+function egressPage(viewer, snap, opts) {
+    const capped = snap.capBytes > 0;
+    const share = capped ? Math.min(1, snap.total / snap.capBytes) : 0;
+    // Amber before the vault stops answering rather than after, since the point
+    // of looking at this page is to act before it does.
+    const level = !capped ? 'off' : share >= 1 ? 'over' : share >= 0.8 ? 'near' : 'under';
+    const meter = capped
+        ? (0, html_1.html) `<div class="egress-meter"><span class="fill ${level}" style="width:${(share * 100).toFixed(1)}%"></span></div>`
+        : '';
+    const hours = Math.floor(snap.resetsIn / 3600);
+    const mins = Math.round((snap.resetsIn % 3600) / 60);
+    const resets = hours > 0 ? `${hours}h ${mins}m` : `${Math.max(1, mins)}m`;
+    const banner = snap.overBudget
+        ? (0, html_1.html) `<div class="form-error">This vault has reached its daily limit and is refusing ordinary requests. Administration pages
+and signing in keep working. The counters reset at 00:00 UTC, in ${resets}; raising the limit below takes effect
+immediately.</div>`
+        : '';
+    const rows = snap.rows.length > 0
+        ? snap.rows.map((r) => {
+            const bracketed = r.repo.startsWith('(');
+            const name = bracketed
+                ? (0, html_1.html) `<span class="muted">${r.repo}</span>`
+                : (0, html_1.html) `<a href="/${(0, views_1.encPath)(r.repo)}">${r.repo}</a>`;
+            const what = r.site ? (0, html_1.raw)('<span class="counter">site</span>') : '';
+            return (0, html_1.html) `<tr><td>${name} ${what}</td><td class="right mono">${(0, render_1.formatSize)(r.bytes)}</td></tr>`;
+        })
+        : (0, html_1.raw)('<tr><td colspan="2" class="muted">Nothing has gone out yet today.</td></tr>');
+    const history = snap.history.length > 0
+        ? (0, html_1.html) `<h2>Earlier days</h2>
+<table class="listing"><tbody><tr><th>Day (UTC)</th><th class="right">Out</th></tr>
+${snap.history.map((d) => (0, html_1.html) `<tr><td class="mono">${d.day}</td><td class="right mono">${(0, render_1.formatSize)(d.total)}</td></tr>`)}
+</tbody></table>
+<p class="muted small">Up to 30 days are kept, in <span class="mono">egress.json</span> at the root of the vault.</p>`
+        : '';
+    const content = (0, html_1.html) `<div class="page-head"><h1>Egress</h1></div>
+${flashBanner(opts.msg)}
+${banner}
+<p class="muted">Bytes this server has written to clients, counted per repository and totalled per UTC day. A site served
+from its own hostname is counted against the repository it belongs to, on a row of its own. Bytes that belong to no
+repository are two rows: <span class="mono">(vault)</span> for the vault's own pages and API, and
+<span class="mono">(unmatched)</span> for requests that named a repository this vault does not have.</p>
+<div class="egress-total">
+<b class="mono">${(0, render_1.formatSize)(snap.total)}</b>
+<span class="muted">${capped ? `of ${(0, render_1.formatSize)(snap.capBytes)} today` : 'today, with no limit set'}</span>
+</div>
+${meter}
+<p class="muted small">${snap.day} UTC. Resets in ${resets}.</p>
+
+<table class="listing"><tbody><tr><th>Repository</th><th class="right">Out today</th></tr>${rows}</tbody></table>
+
+<h2>Daily limit</h2>
+<div class="form-box">
+<form method="post" action="/admin/egress">
+${(0, views_1.csrfField)(viewer)}
+<div class="field">
+<label for="egressGbPerDay">Gigabytes per day</label>
+<input type="number" id="egressGbPerDay" name="egressGbPerDay" min="0" step="any" value="${snap.capGb}">
+<p class="muted small">Once a day's total reaches this, every ordinary request is refused with a 503 until 00:00 UTC.
+Administration pages, signing in, and the stylesheet they need keep working, within a further 64 MB, so that the limit
+can be raised from here. 0 sends without a limit.</p>
+</div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save limit</span></button>
+</form>
+</div>
+
+${history}
+
+<h2>What is not counted</h2>
+<ul class="muted small">
+<li>Bytes are counted as they are written to the socket, so they include response headers and are compressed already.
+What a host meters will be a little higher, since it also carries TCP and TLS framing.</li>
+${opts.lfsBucket
+        ? (0, html_1.html) `<li>Git LFS objects are served from the configured bucket through presigned URLs, so those downloads never pass
+through this server and are not in these numbers; the bucket's own metering is where they show up. The limit still
+reaches them, one step earlier: a client has to ask this server for a presigned URL before it can fetch anything, and
+that request is refused like any other once the day's budget is spent. Only URLs signed in the previous hour keep
+working.</li>`
+        : ''}
+<li>Counts are written to disk at most every 30 seconds, so a hard kill can lose up to that much. Two servers sharing
+one vault add their counts together at each write, and each may send up to 30 seconds past the limit before it sees the
+other's.</li>
+</ul>`;
+    return adminShell(viewer, 'egress', 'Egress', '/admin/egress', content);
+}
+function appearancePage(viewer, themes, current, msg) {
+    const cards = themes.map((t) => {
+        // The colours are the theme's own tokens, from themes.ts, so they are
+        // markup rather than data: a swatch is the one place the interface paints
+        // with a palette other than the active one.
+        const v = t.vars;
+        const swatch = (0, html_1.raw)(`<div class="theme-swatch" style="background:${v.bg}">
+<div class="bar" style="background:${v.surface};border:1px solid ${v.border}"></div>
+<div class="row"><span class="dot" style="background:${v.accent}"></span><span class="dot" style="background:${v.primary}"></span><span class="dot" style="background:${v.tabMarker}"></span><span style="color:${v.fg};font-size:12px;font-family:${v.fontHead}">Aa</span><span style="color:${v.fgMuted};font-size:12px">muted</span></div>
+</div>`);
+        return (0, html_1.html) `<div class="theme-card${t.name === current ? ' current' : ''}">
+<label>
+${swatch}
+<div class="theme-meta">
+<span class="name"><input type="radio" name="theme" value="${t.name}"${t.name === current ? (0, html_1.raw)(' checked') : ''}> ${t.label}${t.dark ? (0, html_1.raw)(' <span class="counter">dark</span>') : ''}</span>
+<p class="muted small">${t.blurb}</p>
+</div>
+</label>
+</div>`;
+    });
+    const content = (0, html_1.html) `<div class="page-head"><h1>Appearance</h1></div>
+${flashBanner(msg)}
+<p class="muted">The theme applies to the whole vault, for every visitor. It is stored in <span class="mono">config.json</span> next to <span class="mono">vault.json</span>, so it can also be set by hand.</p>
+<form method="post" action="/admin/appearance">
+${(0, views_1.csrfField)(viewer)}
+<div class="theme-grid">${cards}</div>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save theme</span></button>
+</form>`;
+    return adminShell(viewer, 'appearance', 'Appearance', '/admin/appearance', content);
+}
+function tokenPage(viewer, username, token, created) {
+    const heading = created ? `Created user ${username}` : `New token for ${username}`;
+    const content = (0, html_1.html) `<div class="form-box">
+<h1>${heading}</h1>
+<p>Copy the token now; only its SHA-256 hash is stored, so it cannot be shown again.</p>
+<div class="cmd-row"><code>${token}</code>${(0, views_1.copyButton)()}</div>
+<p class="muted small">Use it as the password with username <b>${username}</b> when git asks for credentials, or to sign in here.</p>
+<p><a class="btn" href="/admin/users">Back to users</a></p>
+</div>`;
+    return (0, views_1.layout)(heading, content, { viewer, path: '/admin/users' });
+}
+function opErrorPage(message, opts = {}) {
+    const back = opts.backUrl ? (0, html_1.html) `<p><a class="btn" href="${opts.backUrl}">Go back</a></p>` : '';
+    return (0, views_1.layout)('Error', (0, html_1.html) `<div class="form-box"><h1>That did not work</h1><div class="form-error">${message}</div>${back}</div>`, opts);
+}