fedipod-server 0.6.0 → 0.8.0

package/web/admin/admin.js

@@ -28,7 +28,7 @@ const MODERATION = $('moderation');
 const STATUS = $('status-ctl');
 const STATUS_PICK = $('status-pick');   // held: getElementById can't see it mid-render
 const BSKY_CTL = $('bsky-ctl');
-const BSKY_CONNECT_CTL = $('bsky-connect-ctl');
+const IDENT_CTL = $('ident-ctl');
 const FOLLOWS_CTL = $('follows-ctl');
 const FOLLOWS_PICK = $('follows-pick');
 const UPDATE_CTL = $('update-ctl');
@@ -113,6 +113,49 @@ document.getElementById('win').addEventListener('win:closed', () => {
 });
 
 
+// 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]);
+  };
+  if (config.atproto?.connected) {
+    const a = document.createElement('a');
+    a.href = `https://bsky.app/profile/${config.atproto.handle}`;
+    a.textContent = `@${config.atproto.handle}`;
+    a.target = '_blank';
+    a.rel = 'noopener';
+    a.title = `   Open this account's Bluesky page in a new tab`;
+    BSKY_CTL.hidden = false;
+    BSKY_CROSSPOST.value = config.atproto.crossPost ? 'on' : 'off';
+    row('Bluesky', a, ' ', BSKY_CTL);
+  } else {
+    BSKY_CTL.hidden = true;
+  }
+  for (const acct of config.fediAccounts || []) {
+    const name = document.createElement('span');
+    name.textContent = acct.needsReconnect ? `${acct.handle} — sign in again` : acct.handle;
+    if (acct.needsReconnect) name.className = 'warn';
+    const off = document.createElement('button');
+    off.type = 'button';
+    off.className = 'inline danger';
+    off.textContent = 'Disconnect';
+    off.title = `   Stop reading ${acct.handle} and remove its stored token`;
+    off.addEventListener('click', async () => {
+      if (await write('/fediacct/disconnect', { id: acct.id }, `${acct.handle} disconnected`)) await load();
+    });
+    row(acct.host, name, ' ', off);
+  }
+  return out;
+}
+
 function render() {
   // The bar names the actor, the same way on every page. Only the tab title is
   // this page's own business.
@@ -134,7 +177,7 @@ function render() {
     ['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],
-    ['Bluesky identity', 'ctl'],
+    ['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.
@@ -142,11 +185,14 @@ function render() {
       .replace(/\/$/, '')],
   ];
   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');
@@ -185,6 +231,11 @@ function render() {
       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);
@@ -201,27 +252,19 @@ function render() {
       UPDATE_WORD.textContent = words.join('; ');
       UPDATE_GO.hidden = !u?.available;
     }
-    // Connected: the account itself, then the way out. Not: a form on the page.
-    if (k === 'Bluesky identity') {
+    // 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 = '';
-      if (config.atproto?.connected) {
-        const a = document.createElement('a');
-        a.href = `https://bsky.app/profile/${config.atproto.handle}`;
-        a.textContent = `@${config.atproto.handle}`;
-        a.target = '_blank';
-        a.rel = 'noopener';
-        a.title = `   Open this account's Bluesky page in a new tab`;
-        dd.append(a, ' ', BSKY_CTL);
-        BSKY_CTL.hidden = false;
-        BSKY_CONNECT_CTL.hidden = true;
-        BSKY_CROSSPOST.value = config.atproto.crossPost ? 'on' : 'off';
-      } else {
-        dd.append(BSKY_CONNECT_CTL);
-        BSKY_CONNECT_CTL.hidden = false;
-        BSKY_CTL.hidden = true;
-      }
+      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');
@@ -237,7 +280,6 @@ function render() {
   renderAliases();
   renderOthers();
   renderInbox();
-  renderGateway();
   if (config.kind === 'group') {
     // Its lists have no bound, so this page scrolls — see body.group in the CSS.
     document.body.classList.add('group');
@@ -415,9 +457,17 @@ function setRail(closed) {
 $('rail-toggle').addEventListener('click', () => setRail(!$('rail').classList.contains('closed')));
 if (matchMedia('(max-width: 47rem)').matches) setRail(true);
 
-$('bsky-open').addEventListener('click', () => {
+// One way in for both networks, because from the record they are the same
+// thing: an account elsewhere whose timeline joins the one you read here.
+$('ident-open').addEventListener('click', () => {
   closePanels();
-  solWindow.show('bsky-form', 'Connect Bluesky account');
+  solWindow.show('ident-form', 'Connect an identity');
+});
+$('ident-pick-fedi').addEventListener('click', () => {
+  solWindow.show('fediacct-form', 'Connect a Fediverse account');
+});
+$('ident-pick-bsky').addEventListener('click', () => {
+  solWindow.show('bsky-form', 'Connect a Bluesky account');
 });
 
 let bskyBusy = false;
@@ -438,6 +488,20 @@ $('bsky-form').addEventListener('submit', async (ev) => {
     }
   } finally { bskyBusy = false; }
 });
+// The sign-in happens at the other server, so this hands the browser over
+// rather than taking a password. What comes back lands on /fediacct/callback,
+// which this machine answers and nowhere else does.
+let fediBusy = false;
+$('fediacct-form').addEventListener('submit', async (ev) => {
+  ev.preventDefault();
+  if (fediBusy) return;
+  fediBusy = true;
+  try {
+    const r = await write('/fediacct/connect', { host: $('fediacct-host').value.trim() }, '');
+    if (r?.authorize) location.href = r.authorize;
+  } finally { fediBusy = false; }
+});
+
 $('bsky-disconnect').addEventListener('click', async () => {
   if (bskyBusy) return;
   bskyBusy = true;
@@ -937,35 +1001,62 @@ async function renderInbox() {
   panel.hidden = false;
 }
 
-// The gateway panel: attach through a multi-user front with this agent's own
-// credential, see what the door has verified, detach back to the pod inbox.
-let gwTimer = null;
-async function renderGateway() {
+// The gateway, as a facts row under software: attach through a multi-user
+// front with this agent's own credential, detach back to the pod inbox. The
+// forms live in the floating window, like every other disclosure.
+const GATEWAY_CTL = $('gateway-ctl');           // held: it rides into a generated row
+const GATEWAY_WORD = $('gateway-word');
+const GW_OPEN_ATTACH = $('gateway-open-attach');
+const GW_OPEN_DETACH = $('gateway-open-detach');
+let gwState = null;
+async function refreshGateway() {
   const { status, json: g } = await api('/gateway');
-  if (status !== 200 || !g) return;              // no answer, no surface
-  $('pane-gateway').hidden = false;
+  if (status !== 200 || !g) return;
+  gwState = g;
+  GATEWAY_CTL.hidden = false;
   if (g.configured) {
-    const host = (() => { try { return new URL(g.url).host; } catch { return g.url; } })();
-    const st = g.stats || {};
-    $('gateway-summary').textContent = `Attached to ${host} (mode ${g.mode})`
-      + (g.frontActor ? `, publishing as ${g.frontActor}` : '')
-      + ` — ${st.verified || 0} deliveries verified, ${st.unverified || 0} unverified.`;
-    $('gateway-attach-form').hidden = true;
-    $('gateway-attached').hidden = false;
+    let host = g.url;
+    try { host = new URL(g.url).host; } catch { /* show it as-is */ }
+    const frontName = g.frontActor?.match(/\/u\/([^/]+)\/ap\/actor\/?$/)?.[1];
+    GATEWAY_WORD.textContent = frontName ? `${host} — publishing as @${frontName}@${host}` : host;
+    GW_OPEN_ATTACH.hidden = true;
+    GW_OPEN_DETACH.hidden = false;
   } else {
-    $('gateway-summary').textContent = 'Mail arrives directly at your pod\'s own inbox.';
-    $('gateway-attach-form').hidden = false;
-    $('gateway-attached').hidden = true;
-    if (!$('gw-name').value && config?.handle) $('gw-name').value = config.handle;
+    GATEWAY_WORD.textContent = '';
+    GW_OPEN_ATTACH.hidden = false;
+    GW_OPEN_DETACH.hidden = true;
   }
 }
+const gwShape = () => document.querySelector('input[name=gwShape]:checked')?.value || 'pod';
+function gwPreviews() {
+  $('gw-pod-preview').textContent = config?.address || `@${config?.handle || 'you'}@your.pod`;
+  try { $('gw-front-host').textContent = new URL($('gw-front').value.trim()).host; }
+  catch { /* not a URL yet — the placeholder host stands */ }
+}
+function gwShapeChanged() { gwPreviews(); gwCheck(); }
+for (const r of document.querySelectorAll('input[name=gwShape]')) r.addEventListener('change', gwShapeChanged);
+// Typing in the blank IS choosing that shape.
+$('gw-name').addEventListener('focus', () => {
+  const r = document.querySelector('input[name=gwShape][value=front]');
+  if (!r.checked) { r.checked = true; gwShapeChanged(); }
+});
+GW_OPEN_ATTACH.addEventListener('click', () => {
+  gwShapeChanged();
+  solWindow.show('gateway-attach-form', 'Attach to a gateway');
+});
+GW_OPEN_DETACH.addEventListener('click', () => {
+  $('gw-detach-fronted').hidden = !gwState?.frontActor;
+  $('gw-detach-plain').hidden = !!gwState?.frontActor;
+  solWindow.show('gateway-detach-form', 'Detach from gateway');
+});
 // Live availability, asked through the agent (the front answers it without CORS).
+let gwTimer = null;
 function gwCheck() {
   clearTimeout(gwTimer);
   const front = $('gw-front').value.trim().replace(/\/+$/, '');
   const name = $('gw-name').value.trim().toLowerCase();
   $('gw-name-msg').textContent = ''; $('gw-name-msg').className = 'hint';
-  if (!front || !name) return;
+  if (gwShape() !== 'front' || !front || !name) return;
   gwTimer = setTimeout(async () => {
     const { status, json } = await postJson('/gateway', { action: 'check', front, handle: name });
     if (status !== 200 || !json) return;
@@ -975,24 +1066,30 @@ function gwCheck() {
     $('gw-name-msg').className = json.available ? 'hint' : 'warn';
   }, 300);
 }
-$('gw-front').addEventListener('input', gwCheck);
-$('gw-name').addEventListener('input', gwCheck);
-$('gw-attach').onclick = async () => {
+$('gw-front').addEventListener('input', () => { gwPreviews(); gwCheck(); });
+$('gw-name').addEventListener('input', () => { gwPreviews(); gwCheck(); });
+$('gw-attach').addEventListener('click', async () => {
   const front = $('gw-front').value.trim().replace(/\/+$/, '');
-  const fronted = $('gw-shape').value === 'front';
+  const fronted = gwShape() === 'front';
+  const name = $('gw-name').value.trim().toLowerCase();
+  if (fronted && !name) { say('give the handle you want at the gateway', 'err'); return; }
   $('gw-attach').disabled = true;
+  // Pod-based sends no name: the door's label is the agent's business, not
+  // the user's, and the agent picks a free variant by itself.
   const r = await write('/gateway',
-    { action: 'attach', front, handle: $('gw-name').value.trim().toLowerCase(), fronted },
-    fronted ? 'attached — restart the agent to publish under the gateway name'
+    { action: 'attach', front, ...(fronted ? { handle: name, fronted: true } : {}) },
+    fronted ? 'attached — the agent is restarting to publish under the gateway handle; reload in a moment'
       : 'attached — your mail now arrives through the gateway, filtered');
   $('gw-attach').disabled = false;
-  if (r) renderGateway();
-};
-$('gw-detach').onclick = async () => {
+  if (r) { closePanels(); refreshGateway(); }
+});
+$('gw-detach').addEventListener('click', async () => {
+  const fronted = !!gwState?.frontActor;
   const r = await write('/gateway', { action: 'forget' },
-    'detached — the actor was republished advertising your pod\'s own inbox');
-  if (r) renderGateway();
-};
+    fronted ? 'detached — the agent is restarting under your pod\'s own name; reload in a moment'
+      : 'detached — the actor was republished advertising your pod\'s own inbox');
+  if (r) { closePanels(); refreshGateway(); }
+});
 
 $('inbox-keep').addEventListener('click', () => {
   dismissed = true;

package/web/admin/index.html

@@ -15,14 +15,14 @@
 :root { color-scheme: light dark; font-size: 112.5%;
   --bar-col: 1280px;                 /* the bar centres on the same column */
   --link: #1a4f8a; --heading: #5b3a8e;
-  --ink: #1b1c1e; --muted: #5f6368;
+  --ink: #1b1c1e; --muted: #4a4e53;
   --btn-bg: #f4efe6; --btn-bg-hover: #ece3d2; --btn-bg-active: #e2d5bd; --btn-edge: #8a7a61;
   --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
   --danger: #b00020; --ring: var(--link);
   --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23444444' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
 @media (prefers-color-scheme: dark) {
   :root { --link: #7fb3e8; --heading: #b9a3e3;
-    --ink: #e8eaed; --muted: #a5a9ad;
+    --ink: #e8eaed; --muted: #b9bdc2;
     --btn-bg: #35302a; --btn-bg-hover: #423b31; --btn-bg-active: #4d4436; --btn-edge: #9a8d7a;
     --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
     --danger: #ff8a8a;
@@ -98,7 +98,8 @@ p { margin: .5rem 0; }
 fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding: .75rem 1rem 1rem; }
 legend { padding: 0 .3rem; font-weight: 600; color: var(--heading); }
 label { display: block; margin: .75rem 0 .2rem; }
-.hint { color: var(--muted); font-size: .9rem; margin: .15rem 0 0; }
+.hint { color: var(--muted); font-size: 1rem; margin: .15rem 0 0; }
+.choice input[type=text] { width: 9ch; display: inline-block; padding: .15rem .3rem; }
 /* SETTINGS: light wells, unmistakably fields, in both schemes. */
 input[type=text], input[type=email], input[type=url], input[type=password], textarea {
   font: inherit; width: 100%; padding: .5rem; box-sizing: border-box;
@@ -132,6 +133,9 @@ dl { margin: .5rem 0; }        /* grid only above 34rem — see the media query
     gap: .6rem .9rem; align-items: baseline; }
 }
 dt { color: var(--muted); }
+/* An identity connected under "Other identities" belongs to the row above it,
+   and the indent is what says so. */
+dt.under { padding-left: 1.25rem; }
 dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .rows { list-style: none; padding: 0; margin: .3rem 0; }
 .rows li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
@@ -215,16 +219,16 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
       <label class="choice"><input type="radio" name="newKind" value="person" checked>
         A <strong>person</strong> — an account you read and post from</label>
       <label class="choice"><input type="radio" name="newKind" value="group">
-        A <strong>group</strong> of fediverse users you manage</label>
+        A <strong>group</strong> of Fediverse users you manage</label>
     </fieldset>
 
     <fieldset>
       <legend>Actor's Handle</legend>
       <label for="new-handle">Handle</label>
       <input type="text" id="new-handle" autocomplete="off"
-        placeholder="handle part of fediverse address: @HANDLE@server"
+        placeholder="handle part of Fediverse address: @HANDLE@server"
         aria-describedby="new-handle-hint">
-      <p class="hint" id="new-handle-hint">The name in your fediverse address. This is permanent.
+      <p class="hint" id="new-handle-hint">The name in your Fediverse address. This is permanent.
         Letters, digits, hyphens, and underscores only.</p>
     </fieldset>
 
@@ -302,8 +306,8 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
       <option value="auto">accepted automatically</option>
     </select>
   </span>
-  <span id="bsky-connect-ctl" hidden>
-    <button type="button" id="bsky-open" class="inline" title="   Connect a Bluesky account this identity also posts as">Connect Bluesky account</button>
+  <span id="ident-ctl" hidden>
+    <button type="button" id="ident-open" class="inline" title="   Connect an account you hold on another network, so its timeline joins the one you read here">Connect an identity</button>
   </span>
   <span id="bsky-ctl" hidden>
     <select id="bsky-crosspost" aria-label="Bluesky crossposting" title="   Whether your public posts also go to the Bluesky account">
@@ -314,36 +318,13 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
   </span>
 </section>
 
-<!-- The inbox gateway: a mail filter for an account that stays yours. -->
-<section id="pane-gateway" hidden>
-  <h2><span class="hlabel">Gateway</span></h2>
-  <p id="gateway-summary"></p>
-  <div id="gateway-attach-form" hidden>
-    <p class="hint">A gateway filters your fediverse mail before it reaches your pod: your
-      actor advertises the gateway's door as its inbox, each delivery is verified there,
-      spam is dropped, and the rest lands in your pod as before. Attaching proves the pod
-      with this agent's own credential — no password leaves this machine.</p>
-    <p>
-      <label for="gw-front">Gateway</label>
-      <input type="url" id="gw-front" placeholder="https://fedipod.net" autocomplete="off">
-      <label for="gw-name">Your name there</label>
-      <input type="text" id="gw-name" autocomplete="off" autocapitalize="off" spellcheck="false">
-    </p>
-    <p id="gw-name-msg" class="hint"></p>
-    <p>
-      <select id="gw-shape" aria-label="Name shape" title="   Which address the fediverse sees — the pod-based name keeps everything on your pod; a gateway-based name survives changing pods">
-        <option value="pod">keep my pod-based name</option>
-        <option value="front">use a gateway-based name</option>
-      </select>
-      <button id="gw-attach" class="primary" title="   Create the gateway account and point your mail through its door">Attach</button>
-    </p>
-  </div>
-  <div id="gateway-attached" hidden>
-    <p>
-      <button id="gw-detach" class="inline danger" title="   Republish the actor with your pod's own inbox and forget the gateway">Detach</button>
-    </p>
-  </div>
-</section>
+<span id="gateway-ctl" hidden>
+  <span id="gateway-word"></span>
+  <button type="button" id="gateway-open-attach" class="inline" hidden
+    title="   Attach this account to a mail-filtering gateway">Attach to a gateway</button>
+  <button type="button" id="gateway-open-detach" class="inline danger" hidden
+    title="   Go back to your pod's own inbox">Detach from gateway</button>
+</span>
 
 <section id="pane-group" hidden>
   <!-- Both queues are consequences of a moderation setting: with the setting off
@@ -366,7 +347,7 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
        on arrival. Shown only when something is actually waiting. -->
   <div id="block-modqueue" hidden>
     <h3>Moderation requests <span class="muted" id="modqueue-count"></span></h3>
-    <p class="hint">Asked for by a moderator over the fediverse. A delivery cannot prove who
+    <p class="hint">Asked for by a moderator over the Fediverse. A delivery cannot prove who
       sent it, so nothing here has been acted on.</p>
     <ul class="rows" role="list" id="modqueue"></ul>
   </div>
@@ -445,9 +426,74 @@ pre { overflow-x: auto; background: #0001; padding: .6rem; border-radius: .3rem;
     <button id="bsky-connect" type="submit" class="primary" title="   Sign in to the Bluesky account with the app password">Connect</button>
   </p>
 </form>
+<form id="ident-form" hidden>
+  <p class="hint">Either kind brings that account's timeline and notifications
+    into the feed you read here, and acts as that account when you reply to,
+    favourite or boost one of its posts.</p>
+  <p>
+    <button type="button" id="ident-pick-fedi" class="primary" title="   Sign in at a Mastodon-API server: Mastodon, GoToSocial, Pleroma, Akkoma, Pixelfed or Friendica">A Fediverse account</button>
+    <button type="button" id="ident-pick-bsky" title="   Sign in to Bluesky or another ATProto server with an app password">A Bluesky account</button>
+  </p>
+</form>
+<form id="fediacct-form" hidden>
+  <ol class="hint">
+    <li>Name the server your other account is on.</li>
+    <li>That server asks you to sign in and to allow FediPod. It is the only
+      place your password is typed; this agent never sees or stores one.</li>
+    <li>Its timeline and notifications then join the ones you already read here,
+      and a like or a reply on one of its posts goes out as that account.</li>
+    <li>What arrives is held on this machine for reading. None of it is written
+      to your pod.</li>
+  </ol>
+  <label for="fediacct-host">server</label>
+  <input type="text" id="fediacct-host" placeholder="mastodon.social" autocomplete="off"
+    title="   The server your other account lives on — Mastodon, GoToSocial, Pleroma, Akkoma, Pixelfed and Friendica all speak the API this needs">
+  <p>
+    <button id="fediacct-connect" type="submit" class="primary" title="   Go to that server to sign in and allow FediPod">Continue to that server</button>
+  </p>
+</form>
 <!-- Every consequence is written here rather than assembled in script: the
      page asking "are you sure" has to say what it is sure about, and this is
      the only record of it. Script picks which block to show, nothing else. -->
+<!-- The gateway popups: attach proves the pod with this agent's own credential;
+     detach republishes the pod's own inbox. -->
+<form id="gateway-attach-form" hidden>
+  <p class="hint">A gateway filters your Fediverse mail before it reaches your pod: each
+    delivery is verified at its door, spam is dropped, and the rest lands in your pod as
+    before. Attaching proves the pod with this agent's own credential — no password
+    leaves this machine.</p>
+  <label for="gw-front">gateway</label>
+  <input type="url" id="gw-front" placeholder="https://fedipod.net" autocomplete="off">
+  <fieldset>
+    <legend>Your Fediverse handle</legend>
+    <label class="choice"><input type="radio" name="gwShape" value="pod" checked>
+      Keep my pod-based handle: <strong id="gw-pod-preview"></strong><br>
+      <span class="hint">Your address stays tied to your own pod — you can drop the
+        gateway any time and keep everything.</span></label>
+    <label class="choice"><input type="radio" name="gwShape" value="front">
+      Create a handle at the gateway:
+      @<input type="text" id="gw-name" placeholder="name" autocomplete="off"
+        autocapitalize="off" spellcheck="false">@<span id="gw-front-host">fedipod.net</span><br>
+      <span class="hint">Your address lives on the gateway's domain, but not your data
+        or key; you can change pods later and keep the handle.</span>
+      <span id="gw-name-msg" class="hint"></span></label>
+  </fieldset>
+  <p>
+    <button id="gw-attach" type="button" class="primary"
+      title="   Create the gateway account and point your mail through its door">Attach</button>
+  </p>
+</form>
+<form id="gateway-detach-form" hidden>
+  <p class="hint" id="gw-detach-plain">Deliveries go back to your pod's own inbox — the
+    actor is republished advertising it. Your name and data never moved.</p>
+  <p class="warn" id="gw-detach-fronted" hidden>This identity publishes under the gateway's
+    name. Detaching moves every published id back to the pod — a rename other servers
+    see, not just a mail change.</p>
+  <p>
+    <button id="gw-detach" type="button" class="primary"
+      title="   Forget the gateway and republish the actor with the pod inbox">Detach</button>
+  </p>
+</form>
 <form id="confirm-form" hidden>
   <div id="warn-rotate-key" class="warn" hidden>
     <p>A new keypair replaces the one in this home and the actor is republished so other

package/web/admin/setup/index.html

@@ -20,7 +20,7 @@ fieldset { border: 1px solid #bbb; border-radius: .4rem; margin: 1rem 0; padding
 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], textarea {
+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;
 }
@@ -94,7 +94,8 @@ button:disabled { opacity: .5; cursor: default; }
   <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></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>
@@ -124,8 +125,19 @@ button:disabled { opacity: .5; cursor: default; }
       <label class="choice"><input type="radio" name="mode" value="existing">
         Use a pod I already have</label>
 
-      <label for="issuer">Solid identity provider</label>
-      <input type="url" id="issuer" name="issuer" value="https://solidcommunity.net" autocomplete="url">
+      <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>
+        </select>
+        <p class="hint" id="issuer-new-hint">Providers that give each pod its own subdomain, so the
+          Fediverse address works everywhere.</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">
@@ -153,6 +165,10 @@ button:disabled { opacity: .5; cursor: default; }
       </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>
+
     <h2>You will be</h2>
     <p class="address" id="preview">…</p>
     <div id="preview-notes"></div>

package/web/admin/setup/setup.js

@@ -60,20 +60,34 @@ function paneForm() {
     if (fr.kind) $('form').elements.kind.value = fr.kind;
     if (fr.handle) $('handle').value = fr.handle;
     if (fr.pod) { $('form').elements.mode.value = 'existing'; $('pod').value = fr.pod; }
-    if (fr.issuer) $('issuer').value = fr.issuer;
+    // A gateway-arranged signup names its own provider; give the dropdown that
+    // choice too, so the carried-over answer survives the narrower control.
+    if (fr.issuer) {
+      $('issuer').value = fr.issuer;
+      const sel = $('issuer-new');
+      if (![...sel.options].some(o => o.value === fr.issuer)) {
+        const o = document.createElement('option');
+        o.value = fr.issuer;
+        o.textContent = host(fr.issuer);
+        sel.appendChild(o);
+      }
+      sel.value = fr.issuer;
+    }
     if (fr.gatewayHost) strap(`finishing your ${fr.gatewayHost} signup — enter your Solid account details`);
   }
   // Resuming: the account exists and the credential is minted. Asking for a
   // password again would mint a second one and orphan the first, which cannot
   // be recovered.
-  if (state.resumable) {
-    // Both already settled in the credential this run is resuming from.
-    $('fs-pod').hidden = true;
-    $('row-password').hidden = true;
-    $('submit').textContent = 'Finish setting up';
-  } else if (state.passwordSupplied) {
-    $('row-password').hidden = true;      // AP_PASSWORD is set in the environment
-  }
+  // Set both ways, not just hidden-when-resuming: re-entering credentials
+  // re-renders this in the other mode, and a one-way hide would strand the
+  // account and pod fields off-screen. Resuming settles the account and the
+  // credential, so those fields go; a fresh run shows them.
+  $('row-reenter').hidden = !state.resumable;
+  $('fs-pod').hidden = state.resumable;
+  // The password field also goes when AP_PASSWORD supplied it in the environment.
+  $('row-password').hidden = state.resumable || state.passwordSupplied;
+  $('submit').textContent = state.resumable ? 'Finish setting up' : 'Create it';
+  if (state.resumable) $('form-reenter').onclick = reEnter;   // the escape from a wrong credential
   show('pane-form');
   // The markup's autofocus was set while this pane was still hidden, so it
   // never fired — move focus to the first field now that the pane is showing.
@@ -94,7 +108,7 @@ function answers() {
     kind,
     mode,
     handle: f.handle.value.trim(),
-    issuer: f.issuer.value.trim(),
+    issuer: (mode === 'new' ? f.issuerNew.value : f.issuer.value).trim(),
     email: f.email.value.trim(),
   };
   if (mode === 'new') a.podName = f.podName.value.trim() || a.handle;
@@ -123,6 +137,8 @@ function onEdit() {
   const mode = state.resumable ? 'existing' : $('form').elements.mode.value;
   $('row-podname').hidden = mode !== 'new';
   $('row-pod').hidden = mode === 'new';
+  $('row-issuer-new').hidden = mode !== 'new';
+  $('row-issuer-existing').hidden = mode === 'new';
   clearTimeout(editTimer);
   editTimer = setTimeout(preview, 150);
 }
@@ -194,6 +210,30 @@ async function watchRun() {
     state = json || state;
     paneForm();
   };
+  // A failure past the credential (a wrong pod answering 401 to the first
+  // write) leaves a credential that "Try again" can only re-use. Offer to
+  // discard it and re-enter the account and pod — only when there is one.
+  const { json: st } = await api('/setup/state');
+  const reenter = $('run-reenter');
+  reenter.hidden = !st?.hasCredential;
+  reenter.onclick = reEnter;
+}
+
+// Discard the saved credential (server confirms, then the full form returns).
+// Destructive and unrecoverable — a minted credential is shown once — so it
+// asks first.
+async function reEnter() {
+  if (!confirm('Discard the saved account credential and enter the account and pod again?\n\n'
+    + 'The old credential is left on your account — revoke it from the account dashboard if you want it gone.')) return;
+  const { status, json } = await postJson('/setup/reset', {});
+  if (status !== 200) {
+    const box = $('pane-form').hidden ? $('run-error') : $('form-error');
+    box.textContent = json?.error || `could not reset (HTTP ${status})`;
+    return;
+  }
+  const { json: st } = await api('/setup/state');
+  state = st || {};
+  paneForm();
 }
 
 function renderRun(run) {