fedipod-server 0.7.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.
@@ -148,6 +191,8 @@ function render() {
   // 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');
@@ -207,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');
@@ -420,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;
@@ -443,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;

package/web/admin/index.html

@@ -133,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;
@@ -216,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>
 
@@ -303,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">
@@ -344,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>
@@ -423,20 +426,46 @@ 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
+  <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>
+    <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

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) {

package/web/front/admin.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FediPod — accounts on this server</title>
+<style>
+  :root { color-scheme: light dark; --line:#d9d4c7; --dim:#45443d; --accent:#6a8a5a; }
+  @media (prefers-color-scheme: dark) { :root { --dim:#c2c0b4; } }
+  body { font: 19px/1.6 system-ui, sans-serif; max-width: 44rem; margin: 2rem auto; padding: 0 1.1rem; }
+  h1 { font-size: 1.7rem; margin: 0 0 .2rem; }
+  p.lede { color: var(--dim); margin-top: 0; }
+  label { display: block; font-weight: 600; margin: .8rem 0 .2rem; }
+  input[type=url] { width: 100%; padding: .5rem .6rem; font: inherit;
+    border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
+  .hint { color: var(--dim); font-size: .95rem; }
+  .primary { background: var(--accent); color: #fff; border: none; border-radius: 9px;
+    padding: .6rem 1.1rem; font: inherit; cursor: pointer; }
+  .primary[disabled] { opacity: .5; cursor: not-allowed; }
+  button { font: inherit; cursor: pointer; }
+  [hidden] { display: none !important; }
+  table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; }
+  th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
+  th { font-weight: 600; }
+</style>
+</head>
+<body>
+<h1>Accounts on this server</h1>
+<p class="lede">Every name this server answers for: accounts whose identity lives here, and
+accounts that only use it as their gateway. Sign in as the server's admin to see them.</p>
+
+<form id="roster-form">
+  <p class="field">
+  <label for="roster-issuer">Your identity provider</label>
+  <input type="url" id="roster-issuer" autocomplete="off" value="https://solidcommunity.net">
+  </p>
+  <p class="actions">
+    <button type="submit" id="roster-signin" class="primary">Sign in &amp; list accounts</button>
+  </p>
+  <p class="hint" id="roster-note" hidden></p>
+</form>
+
+<table id="roster-table" hidden>
+  <thead>
+    <tr><th>Account</th><th>Kind</th><th>Identity</th><th>Pod</th><th>Remove</th></tr>
+  </thead>
+  <tbody id="roster-rows"></tbody>
+</table>
+
+<script type="module">
+  const $ = (id) => document.getElementById(id);
+  const note = (text) => { const n = $('roster-note'); n.hidden = !text; n.textContent = text || ''; };
+
+  // The Solid-OIDC client for the sign-in round trip. Constructed once; the
+  // redirect state lives in this tab's sessionStorage, so the same session
+  // finishes the login on the way back.
+  let session = null;
+  try {
+    const { SessionCore } = await import('/solid-oidc-client.js');
+    session = new SessionCore({ redirect_uris: [location.origin + '/admin'], client_name: 'FediPod admin' });
+  } catch { /* leave null — the "did not load" note fires */ }
+
+  $('roster-issuer').addEventListener('input', () => {
+    $('roster-signin').disabled = !/^https?:\/\/\S+/.test($('roster-issuer').value.trim());
+  });
+
+  $('roster-form').addEventListener('submit', (ev) => {
+    ev.preventDefault();
+    if (!session) { note('the sign-in library did not load — reload and try again'); return; }
+    session.login($('roster-issuer').value.trim(), location.origin + '/admin')
+      .catch((e) => note('sign-in failed to start: ' + e.message));
+  });
+
+  // Back from the identity provider: read the roster with the proven login.
+  (async () => {
+    if (!session) return;
+    await session.handleRedirectFromLogin().catch(() => {});
+    if (!session.isActive) return;
+    const webId = session.webId;
+
+    // Signed fetches build a DPoP proof from the URL, so it must be absolute.
+    const load = async () => {
+      let res;
+      try { res = await session.authFetch(location.origin + '/api/roster'); }
+      catch (e) { note('the roster request failed: ' + e.message); return; }
+      const d = await res.json().catch(() => ({}));
+      if (res.status === 403) { note('signed in as ' + webId + ', which is not this server’s admin'); return; }
+      if (res.status === 501) { note('this server names no admin — set FEDIPOD_ADMIN_WEBID and redeploy'); return; }
+      if (res.status !== 200) { note('roster unavailable: ' + (d.error || 'HTTP ' + res.status)); return; }
+      const rows = $('roster-rows');
+      rows.textContent = '';
+      for (const a of d.accounts || []) {
+        const tr = document.createElement('tr');
+        const cell = (child) => { const td = document.createElement('td'); td.append(child); tr.append(td); };
+        cell(a.address);
+        cell(a.kind);
+        cell(a.fronted ? 'lives here' : 'gateway only');
+        const pod = document.createElement('a');
+        pod.href = a.podHome; pod.textContent = new URL(a.podHome).host;
+        cell(pod);
+        const rm = document.createElement('button');
+        rm.type = 'button'; rm.textContent = 'Remove';
+        rm.onclick = () => revoke(a);
+        cell(rm);
+        rows.append(tr);
+      }
+      $('roster-table').hidden = false;
+      note((d.accounts || []).length + ' account(s) on ' + d.host);
+    };
+
+    const revoke = async (a) => {
+      if (!confirm('Remove ' + a.address + ' from this server? The name stops resolving here; nothing on their pod is touched.')) return;
+      let res;
+      try {
+        res = await session.authFetch(location.origin + '/api/revoke', {
+          method: 'POST', headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ handle: a.handle }),
+        });
+      } catch (e) { note('the remove request failed: ' + e.message); return; }
+      const d = await res.json().catch(() => ({}));
+      if (res.status !== 200) { note('remove refused: ' + (d.error || 'HTTP ' + res.status)); return; }
+      if (!d.removed) { note(a.address + ' stays: ' + d.reason); return; }
+      await load();
+      note('removed ' + a.address);
+    };
+
+    note('signed in as ' + webId + ' — reading the roster…');
+    await load();
+  })();
+</script>
+<i>(cc) 4.0 By, Jeff Zucker, 2026</i>
+</body>
+</html>

package/web/front/new-account.html

@@ -19,8 +19,8 @@
 </style>
 </head>
 <body>
-<h1>FediPod - join the fediverse from a Solid pod.</h1>
-<p class="lede">Welcome to <b>FediPod</b>! Here, you can get a free pod and fediverse account or link to your existing pod/account.</p>
+<h1>FediPod - join the Fediverse from a Solid pod.</h1>
+<p class="lede">Welcome to <b>FediPod</b>! Here, you can get a free pod and Fediverse account or link to your existing pod/account.</p>
 
 <p class="hint" id="current-version" hidden>Current FediPod: <strong id="current-version-num"></strong><br>
  — install or update an existing install with <code id="current-version-cmd"></code></p>

package/web/front/run.html

@@ -25,7 +25,7 @@
 </head>
 <body>
 <h1>Run your identity on this server</h1>
-<p class="lede">If your pod is hosted by this server, the server can run your fediverse identity
+<p class="lede">If your pod is hosted by this server, the server can run your Fediverse identity
 for you: it accepts follows, delivers your posts and serves your Mastodon app, with nothing for
 you to keep running. Sign in with your pod to prove it is yours.</p>
 
@@ -45,10 +45,18 @@ you to keep running. Sign in with your pod to prove it is yours.</p>
   <p class="hint" id="run-note" hidden></p>
 </form>
 
-<script src="/solid-client-authn.bundle.js"></script>
-<script>
+<script type="module">
   const $ = (id) => document.getElementById(id);
 
+  // The Solid-OIDC client for the sign-in round trip. Constructed once; the
+  // redirect state (PKCE, csrf) lives in this tab's sessionStorage, so the same
+  // session finishes the login on the way back.
+  let session = null;
+  try {
+    const { SessionCore } = await import('/solid-oidc-client.js');
+    session = new SessionCore({ redirect_uris: [location.origin + '/run'], client_name: 'FediPod gateway' });
+  } catch { /* leave null — the "did not load" notes below fire */ }
+
   // Offered only where this server actually runs identities. An
   // unauthenticated probe tells the two apart: 501 = not offered here,
   // anything else = offered (a real opt-in still needs the signed-in proof).
@@ -85,36 +93,32 @@ you to keep running. Sign in with your pod to prove it is yours.</p>
   $('run-issuer').addEventListener('input', runFormCheck);
 
   const runStart = (action) => {
-    const auth = window.solidClientAuthentication;
     const n = $('run-note');
-    if (!auth) { n.hidden = false; n.textContent = 'the sign-in library did not load — reload and try again'; return; }
+    if (!session) { n.hidden = false; n.textContent = 'the sign-in library did not load — reload and try again'; return; }
     const u = new URL($('run-pod-url').value.trim());
     if (u.pathname === '') u.pathname = '/';
     if (!u.pathname.endsWith('/')) u.pathname += '/';
     u.search = ''; u.hash = '';
     sessionStorage.setItem('fp-run', JSON.stringify({ podBase: u.href, action }));
-    auth.login({
-      oidcIssuer: $('run-issuer').value.trim(),
-      redirectUrl: location.origin + '/run',
-      clientName: 'FediPod gateway',
-    }).catch((e) => { n.hidden = false; n.textContent = 'sign-in failed to start: ' + e.message; });
+    session.login($('run-issuer').value.trim(), location.origin + '/run')
+      .catch((e) => { n.hidden = false; n.textContent = 'sign-in failed to start: ' + e.message; });
   };
   $('run-continue').onclick = () => runStart('opt-in');
   $('run-leave').onclick = () => runStart('opt-out');
 
   // Back from the identity provider: finish the opt-in with the proven login.
   (async () => {
-    const auth = window.solidClientAuthentication;
-    if (!auth) return;
-    const info = await auth.handleIncomingRedirect().catch(() => null);
+    if (!session) return;
+    await session.handleRedirectFromLogin().catch(() => {});
     const pending = sessionStorage.getItem('fp-run');
-    if (!info?.isLoggedIn || !pending) return;
+    if (!session.isActive || !pending) return;
     sessionStorage.removeItem('fp-run');
     const p = JSON.parse(pending);
     const n = $('run-note');
     n.hidden = false;
-    n.textContent = 'signed in as ' + info.webId + ' — asking the server…';
-    const res = await auth.fetch('/api/agent', {
+    n.textContent = 'signed in as ' + session.webId + ' — asking the server…';
+    // The signed fetch builds a DPoP proof from the URL, so it must be absolute.
+    const res = await session.authFetch(location.origin + '/api/agent', {
       method: 'POST', headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ action: p.action, podBase: p.podBase }),
     }).catch(() => null);