fedipod 0.13.0 → 0.14.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