fedipod-server 0.26.0 → 0.28.0

package/web/app/site/admin/record.js

@@ -1,378 +0,0 @@
-// record.js — the record itself: what the page holds of the config, the
-// messages it says, every write, the load, the panels, and the rows of the
-// facts list with the identity rows and their controls.
-// admin.js — the record, as a page. Everything here is an existing admin
-// route; the CLI's own group commands are thin clients over the same ones.
-//
-// Two rules the routes enforce and this page respects: a write is a MERGE, so a
-// form that never mentions a field cannot delete it; and anything on the wire is
-// not real until the actor is republished, which POST /config does for itself.
-//
-// The UI password is deliberately not here — `fedipod passwd` sets it. It
-// only gates /oauth/authorize, so it does nothing for a loopback-only agent.
-
-let config = null;
-// Held, because render() moves it into a generated row and empties that row's
-// list on the next pass — after which getElementById would not find it again.
-const MODERATION = $('moderation');
-const STATUS = $('status-ctl');
-const STATUS_PICK = $('status-pick');   // held: getElementById can't see it mid-render
-const IDENT_CTL = $('ident-ctl');
-const FOLLOWS_CTL = $('follows-ctl');
-const FOLLOWS_PICK = $('follows-pick');
-const UPDATE_CTL = $('update-ctl');
-const UPDATE_WORD = $('update-word');
-const UPDATE_GO = $('update-go');
-
-// #say and #fatal live in the accessibility tree from load and hide by being
-// empty (see the stylesheet). Unhiding a live region and filling it in the same
-// task is the classic way to get no announcement at all.
-function say(text, cls = 'ok') {
-  const el = $('say');
-  el.className = cls;
-  // Clear first, then set on the next task: a live region that is handed the
-  // same text it already holds announces nothing, so two identical messages in
-  // a row ("nothing changed", "nothing changed") would be silent the second time.
-  el.textContent = '';
-  setTimeout(() => { el.textContent = text; }, 30);
-}
-
-// Every write goes through here, so nothing silently half-succeeds.
-async function write(path, body, done) {
-  const { status, json } = await postJson(path, body);
-  if (status >= 400) { say(json?.error || `refused (HTTP ${status})`, 'err'); return null; }
-  say(done);
-  return json;
-}
-
-UPDATE_GO.onclick = async () => {
-  UPDATE_GO.disabled = true;
-  const r = await write('/update', {}, 'updating — the agents restart when it finishes; reload in a moment');
-  if (!r) UPDATE_GO.disabled = false;
-};
-
-async function load() {
-  const { status, json } = await api('/config');
-  if (status === 409) {
-    $('fatal').textContent = 'This agent has no identity yet.';
-    const a = document.createElement('a');
-    a.href = '/admin/setup/';
-    a.textContent = ' Set it up.';
-    $('fatal').appendChild(a);
-    return;
-  }
-  if (status !== 200 || !json) {
-    $('fatal').textContent = json?.error || `could not read the record (HTTP ${status})`;
-    return;
-  }
-  config = json;
-  render();
-  if (new URLSearchParams(location.search).has('new')) openNewActor();
-}
-
-// Every disclosure on the page — a form, the log, a lifecycle confirmation —
-// is a panel declared inside the floating window and shown by window.js. It
-// used to be an accordion at the foot of the page, which pushed whatever you
-// were reading out from under you and could only ever show one thing.
-//
-// The reset lives here rather than in window.js: the window knows how to show a
-// panel, not what any of them mean.
-function resetConfirm() {
-  pending = null;
-  for (const k of Object.keys(LIFECYCLE)) $(`warn-${k}`)?.hidden !== undefined && ($(`warn-${k}`).hidden = true);
-  $('confirm-handle').value = '';
-  $('confirm-handle-move').value = '';
-  $('move-target').value = '';
-  $('rotate-password').value = '';
-}
-function closePanels(keep = null) {
-  if (!keep) solWindow.close();
-  if (keep !== 'output') outputSource = null;
-  if (keep !== 'confirm-form') resetConfirm();
-}
-// Closing it by the ✕ or by Escape has to clear the same state a Cancel does.
-document.getElementById('win').addEventListener('win:closed', () => {
-  outputSource = null;
-  resetConfirm();
-  $('bsky-password').value = '';        // never leave a secret in a closed panel
-});
-
-
-// One row per identity connected elsewhere, indented under the row that adds
-// them. Each carries its own way out: disconnecting one has nothing to do with
-// the others.
-function identityRows() {
-  const out = [];
-  const row = (label, ...nodes) => {
-    const dt = document.createElement('dt');
-    dt.className = 'under';
-    dt.textContent = label;
-    const dd = document.createElement('dd');
-    dd.append(...nodes);
-    out.push([dt, dd]);
-  };
-  // One descriptor shape for every connected account — Bluesky and each
-  // fediverse account — so the row and its Options menu build the same way.
-  const accounts = [];
-  if (config.atproto?.connected) accounts.push({
-    label: 'Bluesky', handle: `@${config.atproto.handle}`,
-    href: `https://bsky.app/profile/${config.atproto.handle}`,
-    storage: config.atproto.storage || null,
-    feedPaused: 'feedPaused' in config.atproto ? config.atproto.feedPaused : null,
-    crossPost: 'crossPost' in config.atproto ? config.atproto.crossPost : null,
-    feed: (paused) => ['/atproto', { feedPaused: paused }],
-    cross: (on) => ['/atproto', { crossPost: on }],
-    store: (w) => ['/atproto', { storage: w }],
-    off: () => ['/atproto/disconnect', {}],
-  });
-  for (const acct of config.fediAccounts || []) accounts.push({
-    label: acct.host,
-    handle: acct.needsReconnect ? `${acct.handle} — sign in again` : acct.handle,
-    warn: acct.needsReconnect,
-    storage: acct.storage || null,
-    feedPaused: !acct.enabled,
-    crossPost: null,
-    feed: (paused) => ['/fediacct', { id: acct.id, enabled: !paused }],
-    store: (w) => ['/fediacct', { id: acct.id, storage: w }],
-    off: () => ['/fediacct/disconnect', { id: acct.id }],
-  });
-  for (const acct of accounts) {
-    const name = document.createElement(acct.href ? 'a' : 'span');
-    name.textContent = acct.handle;
-    if (acct.href) { name.href = acct.href; name.target = '_blank'; name.rel = 'noopener'; name.title = '   Open this account elsewhere in a new tab'; }
-    if (acct.warn) name.className = 'warn';
-    // Where storage is a real choice (every browser-build account today), two
-    // dropdowns sit in the row itself. Where it isn't (the Node agent's
-    // Bluesky, which shows a cross-post toggle instead), the Options
-    // disclosure it always has is unchanged.
-    row(acct.label, name, ' ', ...(acct.storage ? connectionControls(acct) : [optionsMenu(acct)]));
-  }
-  return out;
-}
-
-// Connected, Paused or Disconnected, and where the key lives — one dropdown
-// each, in the row. Replaces the separate feed and connect dropdowns that used
-// to sit behind an Options disclosure; only reached where acct.storage is set.
-function connectionControls(acct) {
-  const send = async ([path, payload], msg) => { if (await write(path, payload, msg)) await load(); };
-  const pick = (opts, current, onChange, title) => {
-    const el = document.createElement('select');
-    if (title) el.title = title;
-    for (const [v, t] of opts) { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === current; el.appendChild(o); }
-    el.addEventListener('change', () => onChange(el.value));
-    return el;
-  };
-  const conn = pick(
-    [['connected', 'Connected'], ['paused', 'Paused'], ['disconnected', 'Disconnected']],
-    acct.feedPaused ? 'paused' : 'connected',
-    (v) => (v === 'disconnected'
-      ? send(acct.off(), 'disconnected')
-      : send(acct.feed(v === 'paused'), v === 'paused' ? 'paused adding to your feed' : 'added to your home feed')),
-    '   Connected feeds this account into your home feed here; Paused keeps the account but stops adding its posts; Disconnected removes it.');
-  const storage = pick(
-    [['pod', 'Store key on Pod'], ['browser', 'Store key in Browser']],
-    acct.storage,
-    (v) => {
-      if (v === 'pod' && !confirm('Store this account on your pod?\n\nIt will follow you to any browser you sign in from — but a full-access token to that account then lives on your pod.')) { load(); return; }
-      send(acct.store(v), v === 'pod' ? 'stored on your pod' : 'stored in this browser');
-    },
-    '   On your pod the key follows you to any browser you sign in from, and a full-access token then lives there; in this browser the token never leaves this device.');
-  const wrap = document.createElement('span');
-  wrap.className = 'conn-controls';
-  wrap.append(conn, ' ', storage);
-  return [wrap];
-}
-
-// Every connected account without a storage choice carries an Options menu
-// instead: pause its feed, its cross-post toggle (the Node agent's Bluesky),
-// disconnect.
-function optionsMenu(acct) {
-  const d = document.createElement('details');
-  d.className = 'opts';
-  const sum = document.createElement('summary');
-  sum.textContent = 'Options';
-  d.appendChild(sum);
-  const body = document.createElement('div');
-  d.appendChild(body);
-
-  // Each control is one dropdown whose options ARE the states, so it needs no
-  // separate label — the chosen option reads as the current state.
-  const pick = (opts, current, onChange) => {
-    const el = document.createElement('select');
-    for (const [v, t] of opts) { const o = document.createElement('option'); o.value = v; o.textContent = t; o.selected = v === current; el.appendChild(o); }
-    el.addEventListener('change', () => onChange(el.value));
-    body.appendChild(el);
-  };
-  const send = async ([path, payload], msg) => { if (await write(path, payload, msg)) await load(); };
-
-  // Feed: shown in / hidden from the feed you read here.
-  if (acct.feedPaused !== null) {
-    pick([['show', 'Add to home feed'], ['hide', 'Pause adding to home feed']], acct.feedPaused ? 'hide' : 'show',
-      (v) => send(acct.feed(v === 'hide'), v === 'hide' ? 'paused adding to your feed' : 'added to your home feed'));
-  }
-  // Storage where the browser offers the choice; the Node agent's Bluesky shows
-  // its cross-post toggle in the same slot instead.
-  if (acct.storage) {
-    pick([['browser', 'Store key in Browser'], ['pod', 'Store key on Pod']], acct.storage, (v) => {
-      if (v === 'pod' && !confirm('Store this account on your pod?\n\nIt will follow you to any browser you sign in from — but a full-access token to that account then lives on your pod.')) { load(); return; }
-      send(acct.store(v), v === 'pod' ? 'stored on your pod' : 'stored in this browser');
-    });
-  } else if (acct.crossPost !== null) {
-    pick([['on', 'Cross-post On'], ['off', 'Cross-post Off']], acct.crossPost ? 'on' : 'off',
-      (v) => send(acct.cross(v === 'on'), ''));
-  }
-  // Connection: staying connected, or disconnecting.
-  pick([['connected', 'Connected'], ['disconnect', 'Disconnect']], 'connected',
-    (v) => { if (v === 'disconnect') send(acct.off(), 'disconnected'); else load(); });
-
-  // The storage consequence, at the bottom of the box under every dropdown.
-  if (acct.storage) {
-    const hint = document.createElement('p'); hint.className = 'opt-hint';
-    hint.textContent = acct.storage === 'pod'
-      ? 'Follows you to every browser you sign in from; a full-access token lives on your pod.'
-      : 'Stays in this browser; the token never leaves this device.';
-    body.appendChild(hint);
-  }
-  return d;
-}
-
-function render() {
-  // The bar names the actor, the same way on every page. Only the tab title is
-  // this page's own business.
-  document.title = `FediPod — ${config.handle}`;
-  const facts = $('facts');
-  facts.textContent = '';
-  // What this actor IS comes first. The handle is already in the address beside
-  // the heading; the pod, the issuer and the actor URL all read off the WebID;
-  // and where the private half sits is not something you act on from here.
-  const origins = config.origins || {};
-  // Two of these are addresses of things you can open, so they are links. The
-  // fediverse one goes to this actor's own page in the client, same origin, so
-  // it stays in the tab. The Solid one leaves for the pod, so it does not.
-  const rows = [
-    ['kind', config.kind ? config.kind[0].toUpperCase() + config.kind.slice(1) : config.kind],
-    // The value is the select itself — what it shows IS the state, and
-    // changing the word is the whole action, like the moderation controls.
-    ['status', 'ctl'],
-    ['Fediverse identity', config.address || `@${config.handle} — no resolvable address`,
-      config.accountId && config.address ? { href: `/admin/client/#/a/${config.accountId}` } : null],
-    ['Solid identity', config.webId, config.remotePod ? { href: config.remotePod, blank: true } : null],
-    ['Other identities', 'ctl'],
-    ['local store', config.home],
-    // The address you actually open, not the bare number — the named origin when
-    // there is one, since that is what the client and the OAuth redirect use. An
-    // agent with no local host of its own (embedded in a pod server, or in a
-    // browser) sends none, and then there is no row rather than a bare number.
-    ['local host', (origins.named || origins.loopback || '').replace(/\/$/, '') || null],
-  ];
-  if (config.version || config.update || config.pendingUpgrade?.length) rows.push(['software', 'ctl']);
-  rows.push(['gateway', 'ctl']);
-  if (config.quiescedAt) rows.push(['parked since', config.quiescedAt]);
-  if (config.movedTo) rows.push(['moved to', config.movedTo]);
-  // A person gates followers here; a group's gate is the joins control on its
-  // kind row, so the row would be a second switch for the same thing.
-  if (config.kind !== 'group') rows.splice(2, 0, ['new followers', 'ctl']);
-  // Rows that belong under the one being written, appended after it.
-  let kids = null;
-  for (const [k, v, link] of rows) {
-    if (!v) continue;
-    const dt = document.createElement('dt');
-    dt.textContent = k;
-    const dd = document.createElement('dd');
-    if (link) {
-      const a = document.createElement('a');
-      a.href = link.href;
-      a.textContent = v;
-      if (link.blank) {
-        a.target = '_blank';
-        // noopener because the pod is another origin: without it the page we
-        // open gets a handle on this one through window.opener.
-        a.rel = 'noopener';
-        a.title = `   Open ${link.href} in a new tab`;
-      } else {
-        a.title = `   This actor's page in our client`;
-      }
-      dd.appendChild(a);
-    } else {
-      dd.textContent = v;
-    }
-    // What a group can be moderated into is a property of BEING a group, so the
-    // controls sit on the row that says so. Moved rather than built here: the
-    // page still declares them, and `facts` is emptied on every render.
-    if (k === 'kind' && config.kind === 'group') dd.append(MODERATION);
-    if (k === 'status') {
-      dd.textContent = '';
-      dd.append(STATUS);
-      STATUS.hidden = false;
-      renderStatus();
-    }
-    if (k === 'new followers') {
-      dd.textContent = '';
-      dd.append(FOLLOWS_CTL);
-      FOLLOWS_CTL.hidden = false;
-      FOLLOWS_PICK.value = config.autoAcceptFollows ? 'auto' : 'approve';
-    }
-    if (k === 'gateway') {
-      dd.textContent = '';
-      dd.append(GATEWAY_CTL);
-      refreshGateway();
-    }
-    if (k === 'software') {
-      dd.textContent = '';
-      dd.append(UPDATE_CTL);
-      UPDATE_CTL.hidden = false;
-      const u = config.update;
-      // The version this agent is running, never the one sitting in the
-      // checkout — saying otherwise would name a version nobody is serving.
-      const running = config.version || u?.current || null;
-      const words = [];
-      if (running) words.push(u?.available ? `FediPod ${running} — ${u.latest} available` : `FediPod ${running}`);
-      if (config.versionOnDisk && running && config.versionOnDisk !== running)
-        words.push(`${config.versionOnDisk} is on disk — restart to run it`);
-      if (config.pendingUpgrade?.length) words.push('older data layout — run `fedipod upgrade` in a terminal');
-      UPDATE_WORD.textContent = words.join('; ');
-      UPDATE_GO.hidden = !u?.available;
-    }
-    // The way to add one. Each account already connected is a row of its own
-    // underneath, so this row stays the action and never becomes a list.
-    if (k === 'Other identities') {
-      dd.textContent = '';
-      dd.append(IDENT_CTL);
-      IDENT_CTL.hidden = false;
-      kids = identityRows();
-    }
-    facts.append(dt, dd);
-    if (kids) {
-      for (const [ckt, ckd] of kids) facts.append(ckt, ckd);
-      kids = null;
-    }
-  }
-  if (!config.address) {
-    const p = document.createElement('p');
-    p.className = 'warn';
-    p.textContent = `${config.remotePod} is not the root of its own host, so this actor cannot be `
-      + 'discovered as a handle by other servers. Posting and reading still work.';
-    $('pane-identity').appendChild(p);
-  }
-
-  // pane-others carries the create control too, so it appears even when this is
-  // the only actor and even if /profiles cannot be read.
-  for (const id of ['pane-others', 'pane-identity', 'rail']) $(id).hidden = false;
-  renderAliases();
-  renderOthers();
-  renderInbox();
-  if (config.kind === 'group') {
-    // Its lists have no bound, so this page scrolls — see body.group in the CSS.
-    document.body.classList.add('group');
-    $('pane-group').hidden = false;
-    MODERATION.hidden = false;           // only a group has any
-    renderGroupToggles();
-    refreshGroup();
-  } else {
-    // A person has a follow-request queue too now: nothing binds an inbound
-    // Follow to the actor it names, so one that cannot be verified waits here
-    // rather than being accepted on the strength of who it claims to be.
-    refreshRequests();
-  }
-}
-

package/web/app/site/admin/setup/index.html

@@ -1,219 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>FediPod — setup</title>
-<link rel="icon" href="/icons/local.svg" type="image/svg+xml">
-<link rel="stylesheet" href="../tokens.css">
-<style>
-/* 20px on the root, not on body, so every rem below scales with it. */
-:root { color-scheme: light dark; font-size: 125%; --heading: #1a4f8a; }
-body { font: 1rem/1.5 Arial, Helvetica, sans-serif; margin: 0; }
-/* The bar spans the window; the form stays in a centred column under it. */
-/* The same 960 column the bar and the record use, so the three pages line up. */
-#page { max-width: 960px; margin: 0 auto; padding: 1.75rem 1rem 4rem; box-sizing: border-box; }
-h1, h2, h3 { color: var(--heading); }
-h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
-h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
-p { margin: .5rem 0; }
-.sub { color: #666; margin-top: 0; }
-fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
-legend { padding: 0 .3rem; font-weight: 600; }
-label { display: block; margin: .75rem 0 .2rem; }
-.hint { color: #666; font-size: .9rem; margin: .15rem 0 0; }
-input[type=text], input[type=email], input[type=url], input[type=password], select, textarea {
-  font: inherit; width: 100%; padding: .5rem; box-sizing: border-box;
-  border: 1px solid #767676; border-radius: .3rem; background: Field; color: FieldText;
-}
-.choice { display: block; margin: .35rem 0; font-weight: normal; }
-.choice input { margin-right: .4rem; }
-button { font: inherit; padding: .6rem 1.2rem; border-radius: .3rem; border: 1px solid #666;
-  background: ButtonFace; color: ButtonText; cursor: pointer; }
-button.primary { font-weight: 600; }
-button:disabled { opacity: .5; cursor: default; }
-.address { font-size: 1.2rem; font-weight: 600; word-break: break-all; }
-.warn { border-left: .25rem solid #c60; padding-left: .75rem; }
-.err { border-left: .25rem solid #b00020; padding-left: .75rem; color: #b00020; }
-/* Announced, not shown: the step list beside it already says this visually. */
-/* In the accessibility tree from load, hidden by being empty: a live region
-   added to the tree in the same task as its text does not announce. */
-#form-error:empty, #run-error:empty { display: none; }
-.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
-  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.steps { list-style: none; padding: 0; }
-.steps li { padding: .3rem 0; }
-.steps .state { display: inline-block; width: 1.6rem; }
-.note { color: #666; font-size: .9rem; word-break: break-all; }
-.origins { font-family: ui-monospace, monospace; font-size: .95rem; word-break: break-all; }
-@media (prefers-color-scheme: dark) { :root { --heading: #7fb3e8; }
-  .sub, .hint, .note { color: #aaa; } fieldset { border-color: #555; }
-  /* 2.40:1 without this — the record page has always had the override and
-     this page, where an error IS the whole message, did not. */
-  .err { color: #ff8a8a; border-left-color: #ff8a8a; } }
-</style>
-<link rel="stylesheet" href="../bar.css">
-<style>#actor-pick{display:none!important}</style>
-<meta name="fedipod-version" content="1.27.2">
-<meta name="fedipod-build" content="745d128275bf">
-<script src="/update.js" defer></script>
-</head>
-<body>
-
-<nav id="bar" aria-label="Site">
-  <h1 class="name"><a href="/?add">FediPod</a></h1>
-  <span id="bar-handle"></span>
-  <a id="bar-fediverse" href="../client/" title="   Open the client and read your timeline">visit account</a>
-  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
-  <a id="bar-signout" href="/?signout" title="   Sign out of FediPod and clear this browser">sign out</a>
-  <a id="bar-add" href="../?new=1" title="   Set up another actor on this machine, with its own pod" aria-current="page">add new account</a>
-</nav>
-<main id="page">
-<p class="sub" id="strap">setting up…</p>
-
-<!-- Nothing here is wired up by hand: setup.js reads /setup/state and shows
-     exactly one of these. -->
-
-<section id="pane-loading">
-  <p>Reading this agent's state…</p>
-</section>
-
-<section id="pane-done" hidden>
-  <h2>Ready</h2>
-  <p class="address" id="done-address"></p>
-  <p id="done-note"></p>
-  <p id="done-links"></p>
-</section>
-
-<section id="pane-configured" hidden>
-  <h2>This agent is already set up</h2>
-  <p class="address" id="configured-address"></p>
-  <p>
-    <a href="../">Edit the record</a>
-    &nbsp;·&nbsp;
-    <a href="../../" id="configured-client">Open the client</a>
-  </p>
-  <p class="hint">For another actor, use <strong>add new account</strong> above.</p>
-</section>
-
-<section id="pane-run" hidden>
-  <h2 id="run-title">Setting up</h2>
-  <ul class="steps" id="run-steps"></ul>
-  <p class="sr-only" id="run-say" role="status"></p>
-  <p class="err" id="run-error" role="alert"></p>
-  <p><button id="run-again" title="   Try the step that failed again" hidden>Try again</button>
-    <button id="run-reenter" title="   Discard the credential and enter the account and pod again" hidden>Re-enter credentials</button></p>
-</section>
-
-<section id="pane-form" hidden>
-  <form id="form">
-
-    <fieldset>
-      <legend>What kind of Actor?</legend>
-      <label class="choice"><input type="radio" name="kind" value="person" checked>
-        A <strong>person</strong> — an account you read and post from</label>
-      <label class="choice"><input type="radio" name="kind" value="group">
-        A <strong>group</strong> of fediverse users you manage</label>
-    </fieldset>
-
-    <fieldset>
-      <legend>Actor's Handle</legend>
-      <input type="text" id="handle" name="handle" autocomplete="off" autofocus
-        placeholder="handle part of fediverse address: @HANDLE@server"
-        aria-label="Actor's Handle" aria-describedby="handle-hint">
-      <p class="hint" id="handle-hint">The name in your fediverse address. This is permanent. Letters, digits,
-        hyphens, and underscores only.</p>
-    </fieldset>
-
-    <fieldset id="fs-pod">
-      <legend>Actor's Pod</legend>
-      <label class="choice"><input type="radio" name="mode" value="new" checked>
-        Create a Solid account and pod for the Actor</label>
-      <label class="choice"><input type="radio" name="mode" value="existing">
-        Use a pod I already have</label>
-
-      <div id="row-issuer-new">
-        <label for="issuer-new">Solid pod provider</label>
-        <select id="issuer-new" name="issuerNew" aria-describedby="issuer-new-hint">
-          <option value="https://solidcommunity.net">solidcommunity.net</option>
-          <option value="https://privatedatapod.com">privatedatapod.com</option>
-          <option value="https://solid.redpencil.io">redpencil.io</option>
-          <option value="https://pods.solidcommunity.au">solidcommunity.au</option>
-          <option value="https://solidweb.me">solidweb.me</option>
-          <option value="https://teamid.live">teamid.live</option>
-          <option value="">Other…</option>
-        </select>
-        <div id="row-issuer-other" hidden>
-          <label for="issuerOther">Provider address</label>
-          <input type="url" id="issuerOther" name="issuerOther" autocomplete="url" placeholder="https://pods.example.org">
-        </div>
-        <p class="hint" id="issuer-new-hint">The Community Solid Server providers from
-          solidproject.org. A provider that puts pods on paths gives your address at a
-          gateway instead.</p>
-      </div>
-
-      <div id="row-issuer-existing" hidden>
-        <label for="issuer">Solid identity provider</label>
-        <input type="url" id="issuer" name="issuer" value="https://solidcommunity.net" autocomplete="url">
-      </div>
-
-      <label for="email">Solid Account email/username</label>
-      <input type="email" id="email" name="email" autocomplete="email" placeholder="you@example.org">
-
-      <div id="row-password">
-        <label for="password">Solid Account password</label>
-        <input type="password" id="password" name="password" autocomplete="current-password"
-          aria-describedby="password-hint">
-        <p class="hint" id="password-hint">Password is sent once in return for a credential which is stored locally.
-          The password itself is never stored. You may revoke the credential without changing the
-          password.</p>
-      </div>
-
-      <div id="row-podname">
-        <label for="podName">Pod name</label>
-        <input type="text" id="podName" name="podName" autocomplete="off"
-          aria-describedby="podname-hint">
-        <p class="hint" id="podname-hint">The subdomain of your pod address, it will become
-          https://YOUR-POD-NAME.your-identity-provider</p>
-      </div>
-
-      <div id="row-pod" hidden>
-        <label for="pod">Pod address</label>
-        <input type="url" id="pod" name="pod" autocomplete="url" placeholder="https://you.solidcommunity.net/">
-      </div>
-    </fieldset>
-
-    <p id="row-reenter" class="warn" hidden>Finishing a setup that already has an account credential.
-      Wrong account or pod?
-      <button type="button" id="form-reenter" title="   Discard the credential and enter the account and pod again">Re-enter credentials</button></p>
-
-    <fieldset id="fs-shape" hidden>
-      <legend>Where your address lives</legend>
-      <label class="choice"><input type="radio" name="shape" value="pod" checked> On your pod</label>
-      <label class="choice"><input type="radio" name="shape" value="front"> At a gateway</label>
-      <div id="row-gateway" hidden>
-        <label for="gatewayOrigin">Gateway</label>
-        <input type="url" id="gatewayOrigin" name="gatewayOrigin" value="https://fedipod.net" autocomplete="url">
-        <p class="hint">The gateway answers your address and forwards your mail to your pod.</p>
-      </div>
-      <p class="hint" id="shape-note" hidden></p>
-    </fieldset>
-
-    <h2>You will be</h2>
-    <p class="address" id="preview">…</p>
-    <div id="preview-notes"></div>
-    <p>The handle and the pod cannot be changed afterwards. Everything else — display
-      name, bio, pictures — you set in the client.</p>
-
-    <p class="err" id="form-error" role="alert"></p>
-    <p><button type="submit" class="primary" id="submit" title="   Create it">Create it</button></p>
-  </form>
-</section>
-
-</main>
-
-<script src="../bar.js"></script>
-<script src="../common.js"></script>
-<script src="setup.js"></script>
-</body>
-</html>