astro-atmosphere-comments 0.4.2 → 0.6.0

package/components/AtmosphereReactions.astro

@@ -15,9 +15,17 @@
 // A link marked `data-atmosphere-follow="<DID>"` (and
 // `data-atmosphere-follow-handle="you.bsky.social"`), such as "Follow me on
 // Bluesky", becomes a Follow / Following button for signed-in readers; a
-// second press unfollows. The first follow asks for one more permission. Only
+// second press unfollows. Only
 // `allowedAuthors` can be followed through your site.
 //
+// With the integration's `standardSite` option, a button marked
+// `data-atmosphere-subscribe` (and `hidden`, as it needs JavaScript) becomes
+// Subscribe / ✓ Subscribed for the site's publication. Anyone not signed in is
+// offered the sign-in form first, and subscribed once they're back. Its label
+// goes in an element inside it marked `data-atmosphere-subscribe-label`;
+// without one it keeps its own content (style it by `aria-pressed`).
+// (AtmosphereComments has its own panel for this under each post.)
+//
 // Signed-in readers like and repost from your page. Anyone else who presses
 // Like or Repost is offered the sign-in form in an overlay, and the like or
 // repost is done once they're back. Only posts by the integration's
@@ -25,7 +33,8 @@
 //
 // Props: locale, messages (as for AtmosphereComments).
 import settings from "../lib/settings";
-import { messagesFor, pickLocale, translate } from "../lib/i18n";
+import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
+import { escapeHtml } from "../lib/translate";
 import SignInForm from "./SignInForm.astro";
 import Composer from "./Composer.astro";
 import "./atmosphere.css";
@@ -47,8 +56,27 @@ const { base } = settings;
   <dialog class="atmo atmo-signin" aria-label={t("dialog.heading")} data-signin-dialog>
     <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
     <SignInForm id="atmo-dialog" returnTo={Astro.url.pathname} messages={messages} lang={lang} heading={t("dialog.heading")} />
+    <p
+      class="atmo__elsewhere"
+      data-dialog-elsewhere
+      hidden
+      set:html={translateHtml(messages, lang, "elsewhere.text", {
+        link: `<a target="_blank" rel="noopener" class="atmo__elsewhere-link">${escapeHtml(t("elsewhere.link"))}</a>`,
+      })}
+    />
     <p class="atmo-signin__status" role="status" data-dialog-status></p>
   </dialog>
+  {/* Before asking the reader's account host for one more permission: what it's for. */}
+  <dialog class="atmo atmo-signin atmo-permission" aria-labelledby="atmo-permission-heading" data-permission-dialog>
+    <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
+    <p class="atmo-permission__heading" id="atmo-permission-heading">{t("permission.heading")}</p>
+    <p data-permission-text></p>
+    <p class="atmo__hint">{t("permission.approve")}</p>
+    <div class="atmo__row">
+      <button type="button" class="atmo__button" data-permission-continue>{t("comment.continue")}</button>
+      <button type="button" class="atmo__link-button" data-close>{t("comment.cancel")}</button>
+    </div>
+  </dialog>
   {/* Reply or Quote, for signed-in readers: the comment box in an overlay. */}
   <dialog class="atmo atmo-signin atmo-compose" aria-label={t("postActions.replyLabel")} data-compose-dialog>
     <button type="button" class="atmo-signin__close" aria-label={t("dialog.close")} data-close>×</button>
@@ -65,6 +93,9 @@ const { base } = settings;
   import { translate } from "../lib/translate";
   import { enhanceHandleBox } from "../lib/client/handle-suggestions";
   import { MAX, quotePreview, setUpComposer, type Posted } from "../lib/client/composer";
+  import { following, handleSignInForm, me as whoIsSignedIn, send as act, signIn, signOut as endSignIn, state } from "../lib/client/account";
+  import { addSubscribeButtons, finishPendingSubscribe, loadSubscribed } from "../lib/client/subscribe";
+  import type { Permission } from "../lib/permissions";
 
   const HEART = '<path d="M12 20.5s-7.5-4.4-7.5-10.1A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8c0 5.7-7.5 10.1-7.5 10.1Z" />';
   const ARROWS = '<path d="M7 8h10l-3-3M17 16H7l3 3M5 13V9.5A1.5 1.5 0 0 1 6.5 8M19 11v3.5a1.5 1.5 0 0 1-1.5 1.5" />';
@@ -83,7 +114,6 @@ const { base } = settings;
   // Error codes from the routes, and their wording (as in the comments).
   const MESSAGE_KEYS: Record<string, string> = {
     "signed-out": "messages.signedOut",
-    "new-permissions": "messages.newPermissions",
     "not-allowed": "messages.notAllowed",
     "too-long": "messages.tooLong",
     "too-many": "messages.tooMany",
@@ -101,11 +131,30 @@ const { base } = settings;
       const status = dialog.querySelector<HTMLElement>("[data-dialog-status]")!;
       let signedIn = false;
       let handle = "";
-      let me: { did?: string; handle?: string; displayName?: string; avatar?: string } = {};
+      let me: { did?: string; handle?: string; displayName?: string; avatar?: string; can?: string[] } = {};
+      const can = (permission: Permission) => !!me.can?.includes(permission);
+      // One more permission from the reader's account host, then back to
+      // `hash` on this page to finish what they pressed. An overlay says
+      // what it's for first: the host may ask them to sign in again before
+      // it shows what's asked for, which is puzzling without warning.
+      const permissionDialog = this.querySelector<HTMLDialogElement>("[data-permission-dialog]")!;
+      let pendingPermission: { permission: Permission; hash: string } | null = null;
+      const askPermission = (permission: Permission, hash: string, vars: Record<string, string> = {}) => {
+        pendingPermission = { permission, hash };
+        permissionDialog.querySelector("[data-permission-text]")!.textContent = t(`permission.${permission}`, vars);
+        if (!permissionDialog.open) permissionDialog.showModal();
+        permissionDialog.querySelector<HTMLButtonElement>("[data-permission-continue]")!.focus();
+      };
+      permissionDialog.querySelector("[data-permission-continue]")!.addEventListener("click", () => {
+        if (!pendingPermission) return;
+        const { permission, hash } = pendingPermission;
+        void signIn(me.did!, { permissions: [permission], returnTo: `${location.pathname}${location.search}${hash}`, lang });
+      });
       // What the reader has liked or reposted, by post.
       const known: Record<string, { liked: boolean; reposted: boolean }> = {};
 
       enhanceHandleBox(form, base);
+      handleSignInForm(form, lang);
       for (const overlay of this.querySelectorAll<HTMLDialogElement>("dialog")) {
         overlay.querySelectorAll("[data-close]").forEach((button) => button.addEventListener("click", () => overlay.close()));
         // A click on the dimmed page around the overlay closes it.
@@ -150,7 +199,11 @@ const { base } = settings;
           this.dispatchEvent(new CustomEvent("atmosphere:commented", { detail: data, bubbles: true }));
         },
         onError: (code, tell) => {
-          if (code === "signed-out" || code === "new-permissions") signedIn = false;
+          if (code === "signed-out") signedIn = false;
+          if (code === "needs-permission") {
+            compose.close();
+            return void askPermission("post", `#atmo-compose=${composeMode}:${encodeURIComponent(composeRoot)}`);
+          }
           tell(message(code));
         },
         onInput: () => quote.update(),
@@ -197,22 +250,29 @@ const { base } = settings;
         return element;
       };
 
-      // Not signed in: the sign-in form, coming back to finish this like or repost.
-      const askToSignIn = (kind: Kind, uri: string, problem = "") => {
-        form.querySelector<HTMLInputElement>("[data-return-to]")!.value =
-          `${location.pathname}${location.search}#atmo-react=${kind}:${encodeURIComponent(uri)}`;
+      // The sign-in overlay: says what it's for, and comes back to `hash`,
+      // where what the reader pressed is finished.
+      const dialogHeading = form.querySelector("label")!;
+      const dialogElsewhere = dialog.querySelector<HTMLElement>("[data-dialog-elsewhere]")!;
+      const openSignIn = (heading: string, hash: string, problem = "", blueskyUrl = "") => {
+        dialogHeading.textContent = heading;
+        dialog.setAttribute("aria-label", heading);
+        form.querySelector<HTMLInputElement>("[data-return-to]")!.value = `${location.pathname}${location.search}${hash}`;
         status.textContent = problem;
+        dialogElsewhere.hidden = !blueskyUrl;
+        if (blueskyUrl) dialogElsewhere.querySelector("a")!.href = blueskyUrl;
         if (!dialog.open) dialog.showModal();
         form.querySelector<HTMLInputElement>('input[name="handle"]')!.focus();
       };
+      const blueskyUrlOf = (uri: string) => posts().find((post) => post.dataset.atmospherePost === uri)?.dataset.atmosphereUrl ?? "";
+      const SIGN_IN_HEADINGS = { like: "signInFirst.likePost", repost: "signInFirst.repostPost", reply: "signInFirst.reply", quote: "signInFirst.quotePost" };
+      // Not signed in: the overlay, coming back to finish this like or repost.
+      const askToSignIn = (kind: Kind, uri: string, problem = "") =>
+        openSignIn(t(SIGN_IN_HEADINGS[kind]), `#atmo-react=${kind}:${encodeURIComponent(uri)}`, problem, blueskyUrlOf(uri));
+      // The same for Reply and Quote, coming back to the comment box.
+      const askToSignInToCompose = (mode: "reply" | "quote", uri: string, problem = "") =>
+        openSignIn(t(SIGN_IN_HEADINGS[mode]), `#atmo-compose=${mode}:${encodeURIComponent(uri)}`, problem, blueskyUrlOf(uri));
 
-      const send = (body: unknown) =>
-        fetch(`${base}/react`, {
-          method: "POST",
-          credentials: "same-origin",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify(body),
-        });
 
       const icon = (paths: string) => `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`;
 
@@ -228,7 +288,7 @@ const { base } = settings;
         button.setAttribute("aria-pressed", String(on));
         setCount(button, Math.max(0, before + (on ? 1 : -1)));
         try {
-          const response = await send({ post: uri, kind, on });
+          const response = await act("react", { post: uri, kind, on });
           if (response.ok) {
             known[uri] = { ...(known[uri] ?? { liked: false, reposted: false }), [kind === "like" ? "liked" : "reposted"]: on };
             return;
@@ -236,10 +296,12 @@ const { base } = settings;
           const data = (await response.json().catch(() => ({}))) as { error?: string };
           button.setAttribute("aria-pressed", String(!on));
           setCount(button, before);
-          if (data.error === "signed-out" || data.error === "new-permissions") {
+          // Signed in to comment before likes and reposts were asked for.
+          if (data.error === "needs-permission") return void askPermission("react", `#atmo-react=${kind}:${encodeURIComponent(uri)}`);
+          if (data.error === "signed-out") {
             signedIn = false;
             labelButton(button, kind);
-            askToSignIn(kind, uri, t(data.error === "signed-out" ? "messages.signedOut" : "messages.newPermissions"));
+            askToSignIn(kind, uri, t("messages.signedOut"));
           }
         } catch {
           button.setAttribute("aria-pressed", String(!on));
@@ -278,7 +340,8 @@ const { base } = settings;
       };
 
       // Reply and Quote: the comment box in an overlay for signed-in readers,
-      // otherwise the post on Bluesky (as also with ⌘-click or a middle click).
+      // otherwise the sign-in overlay. ⌘-click or a middle click opens the post
+      // on Bluesky.
       // Icons only, as on Bluesky, with their names for screen readers and as
       // tooltips.
       const bskyLink = (post: HTMLElement, paths: string) => {
@@ -291,8 +354,11 @@ const { base } = settings;
         labelLink(link);
         link.innerHTML = icon(paths);
         link.addEventListener("click", (event) => {
-          if (!signedIn || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
           event.preventDefault();
+          if (!signedIn) return askToSignInToCompose(mode, post.dataset.atmospherePost!);
+          // A sign-in without posting (from an older version): asked for first.
+          if (!can("post")) return void askPermission("post", `#atmo-compose=${mode}:${encodeURIComponent(post.dataset.atmospherePost!)}`);
           openCompose(post, mode);
         });
         return link;
@@ -323,8 +389,7 @@ const { base } = settings;
         const uris = posts().map((post) => post.dataset.atmospherePost!);
         if (!signedIn || !uris.length) return;
         try {
-          const query = uris.map((uri) => `post=${encodeURIComponent(uri)}`).join("&");
-          const response = await fetch(`${base}/state?${query}`, { credentials: "same-origin" });
+          const response = await state(uris);
           if (!response.ok) return;
           const state = ((await response.json()) as { posts?: typeof known }).posts ?? {};
           Object.assign(known, state);
@@ -345,17 +410,8 @@ const { base } = settings;
       const followButtons = new Map<string, { following: boolean; set: (on: boolean) => void; press: () => Promise<void> }>();
       // Following isn't part of signing in: the first follow asks the
       // reader's account host for it, then carries on when they're back.
-      const askFollowPermission = (subject: string) => {
-        const permit = Object.assign(document.createElement("form"), { method: "post", action: `${base}/login` });
-        permit.hidden = true;
-        const field = (name: string, value: string) =>
-          permit.append(Object.assign(document.createElement("input"), { type: "hidden", name, value }));
-        field("handle", me.did || me.handle || "");
-        field("permission", "follow");
-        field("returnTo", `${location.pathname}${location.search}#atmo-follow=${encodeURIComponent(subject)}`);
-        document.body.append(permit);
-        permit.submit();
-      };
+      const askFollowPermission = (subject: string, who: string) =>
+        askPermission("follow", `#atmo-follow=${encodeURIComponent(subject)}`, { handle: who });
       const setUpFollow = async () => {
         for (const link of document.querySelectorAll<HTMLElement>("[data-atmosphere-follow]")) {
           const subject = link.dataset.atmosphereFollow!;
@@ -365,19 +421,19 @@ const { base } = settings;
           const who = link.dataset.atmosphereFollowHandle ? `@${link.dataset.atmosphereFollowHandle}` : t("comment.someone");
           const button = make("button", "atmo-follow");
           button.type = "button";
-          let following = false;
+          let isFollowing = false;
           // The account's avatar, through the site (its own accounts' are always served).
           const avatar = make("img", "atmo-follow__avatar");
           avatar.src = `${base}/media?avatar=${encodeURIComponent(subject)}`;
           avatar.alt = "";
           avatar.onerror = () => avatar.remove();
           const render = () => {
-            button.setAttribute("aria-pressed", String(following));
+            button.setAttribute("aria-pressed", String(isFollowing));
             // The butterfly, then "Follow" with the account's avatar beside its
             // handle (wherever the language puts the handle), or the avatar
             // with "Following".
             button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${BUTTERFLY}</svg>`;
-            if (following) {
+            if (isFollowing) {
               button.append(avatar, make("span", "", `✓ ${t("follow.following")}`));
             } else {
               const [before, after = ""] = t("follow.follow").split("{{handle}}");
@@ -385,47 +441,46 @@ const { base } = settings;
               button.append(avatar, make("span", "", who));
               if (after.trim()) button.append(make("span", "", after.trim()));
             }
-            button.title = following ? t("follow.followingLabel", { handle: who }) : t("follow.followAs", { handle: who, me: handle });
+            button.title = isFollowing ? t("follow.followingLabel", { handle: who }) : t("follow.followAs", { handle: who, me: handle });
             button.setAttribute("aria-label", button.title);
           };
           const set = (on: boolean) => {
-            following = on;
+            isFollowing = on;
             render();
           };
           const press = async () => {
             button.disabled = true;
             try {
-              const response = await fetch(`${base}/follow`, {
-                method: "POST",
-                credentials: "same-origin",
-                headers: { "content-type": "application/json" },
-                body: JSON.stringify({ subject, on: !following }),
-              });
+              const response = await act("follow", { subject, on: !isFollowing });
               const data = (await response.json().catch(() => ({}))) as { following?: boolean; error?: string };
               if (response.ok) return set(!!data.following);
-              if (data.error === "needs-permission") return askFollowPermission(subject);
-              if (data.error === "signed-out" || data.error === "new-permissions") location.reload();
+              if (data.error === "needs-permission") return void askFollowPermission(subject, who);
+              if (data.error === "signed-out") location.reload();
             } finally {
               button.disabled = false;
             }
           };
           button.addEventListener("click", () => void press());
-          followButtons.set(subject, { get following() { return following; }, set, press });
+          followButtons.set(subject, { get following() { return isFollowing; }, set, press });
           render();
           // The button takes the link's place. (Inline, as a site's own style
           // for the link could otherwise keep it showing.)
           link.hidden = true;
           link.style.display = "none";
           link.after(button);
-          try {
-            const response = await fetch(`${base}/follow?subject=${encodeURIComponent(subject)}`, { credentials: "same-origin" });
-            if (response.ok) set(!!((await response.json()) as { following?: boolean }).following);
-          } catch {
-            // Shown as Follow; pressing it still works.
-          }
+          const known = await following(subject);
+          if (known !== null) set(known);
         }
       };
 
+      // Subscribe buttons the site places (the comments look after their own).
+      const askToSubscribe = (problem = "") => openSignIn(t("subscribe.signIn"), "#atmo-subscribe", problem);
+      addSubscribeButtons(
+        [...document.querySelectorAll<HTMLButtonElement>("[data-atmosphere-subscribe]")].filter((button) => !button.closest("atmosphere-comments")),
+        t,
+        askToSubscribe,
+      );
+
       // Back from approving following: follow as they asked.
       const finishPendingFollow = async () => {
         const pending = location.hash.match(/^#atmo-follow=(.+)$/);
@@ -464,6 +519,30 @@ const { base } = settings;
         if (button && button.getAttribute("aria-pressed") !== "true") await react(post, button, kind as Kind, true);
       };
 
+      // Back from signing in or allowing posting: open the Reply or Quote box they pressed.
+      const finishPendingCompose = async () => {
+        const pending = location.hash.match(/^#atmo-compose=(reply|quote):(.+)$/);
+        if (!pending) return;
+        const url = new URL(location.href);
+        const problem = url.searchParams.get("atmosphere") ?? "";
+        if (!document.querySelector("atmosphere-comments")) url.searchParams.delete("atmosphere");
+        const uri = decodeURIComponent(pending[2]);
+        const mode = pending[1] as "reply" | "quote";
+        // The page may still be loading its posts (a server island, say).
+        for (let tries = 0; tries < 40 && !posts().some((post) => post.dataset.atmospherePost === uri); tries++) {
+          await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
+        const post = posts().find((candidate) => candidate.dataset.atmospherePost === uri);
+        if (!post) return;
+        post.scrollIntoView({ block: "center" });
+        if (!signedIn) {
+          if (SIGN_IN_PROBLEMS[problem]) askToSignInToCompose(mode, uri, t(SIGN_IN_PROBLEMS[problem]));
+        } else if (can("post")) {
+          openCompose(post, mode);
+        }
+      };
+
       // The reader's avatar wherever the page marks data-atmosphere-account,
       // opening a menu with who they're signed in as and Sign out.
       const showAccount = (me: { handle?: string; displayName?: string; avatar?: string }) => {
@@ -492,7 +571,7 @@ const { base } = settings;
           signOut.type = "button";
           signOut.addEventListener("click", async () => {
             signOut.disabled = true;
-            await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
+            await endSignIn();
             location.reload();
           });
           menu.append(who, signOut);
@@ -521,9 +600,8 @@ const { base } = settings;
         }
       };
 
-      fetch(`${base}/me`, { credentials: "same-origin" })
-        .then((response) => response.json())
-        .then((found: { signedIn?: boolean; handle?: string; displayName?: string; avatar?: string }) => {
+      whoIsSignedIn()
+        .then((found) => {
           me = found;
           signedIn = !!found.signedIn;
           handle = found.handle ? `@${found.handle}` : "";
@@ -542,10 +620,13 @@ const { base } = settings;
           addActions();
           await loadState();
           await finishPending();
+          await finishPendingCompose();
           if (signedIn) {
             await setUpFollow();
             await finishPendingFollow();
+            await loadSubscribed();
           }
+          await finishPendingSubscribe(t, askToSubscribe);
         });
 
       // Posts that arrive later (a server island, say) get buttons too.
@@ -562,38 +643,14 @@ const { base } = settings;
 </script>
 
 <style>
-  .atmo-signin {
-    /* Centred on the screen, whatever margin a site gives .atmo. */
-    margin: auto;
-    width: min(92vw, 520px);
-    padding: 22px 22px 18px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: calc(var(--atmo-radius, 10px) + 6px);
-    background: var(--atmo-dialog-bg, var(--atmo-menu-bg, Canvas));
-    color: var(--atmo-text, CanvasText);
-    box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
-  }
-
-  .atmo-signin::backdrop {
-    background: rgb(0 0 0 / 0.55);
-  }
-
-  .atmo-signin :global(.atmo__login) {
-    margin-top: 0;
+  .atmo-permission p {
+    margin: 0 0 10px;
   }
 
-  .atmo-signin__close {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    padding: 4px 8px;
-    border: 0;
-    background: none;
-    color: var(--atmo-muted, inherit);
-    font: inherit;
-    font-size: 1.4em;
-    line-height: 1;
-    cursor: pointer;
+  .atmo-permission__heading {
+    /* Clear of the close button. */
+    padding-right: 32px;
+    font-weight: 700;
   }
 
   .atmo-compose {
@@ -608,16 +665,6 @@ const { base } = settings;
     margin: 0 0 12px;
   }
 
-  .atmo-signin__status {
-    margin: 10px 0 0;
-    color: var(--atmo-muted, inherit);
-    font-size: 0.9em;
-  }
-
-  .atmo-signin__status:empty {
-    display: none;
-  }
-
   /* The row under each post. Defaults carry no weight, so a site's own
      rules always win. */
   :global(:where(.atmo-post-actions)) {

package/components/Composer.astro

@@ -56,7 +56,7 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
         <div class="atmo__quoted">
           <p class="atmo__preview-author">
             <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
-            <strong data-quoted-name></strong> <span data-quoted-handle></span>
+            <strong data-quoted-name></strong> <span data-quoted-handle></span> <span data-quoted-age></span>
           </p>
           <p class="atmo__preview-text" data-quoted-text></p>
           <div class="atmo__card" data-card hidden>
@@ -64,7 +64,10 @@ const th = (key: string, html: Record<string, string>) => translateHtml(messages
             <div>
               <strong data-card-title></strong>
               <span data-card-description></span>
-              <span class="atmo__card-domain" data-card-domain></span>
+              <span class="atmo__card-domain">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9s1.3-6.5 3.8-9Z" /></svg>
+                <span data-card-domain></span>
+              </span>
             </div>
           </div>
         </div>

package/components/SignInForm.astro

@@ -1,6 +1,8 @@
 ---
 // The sign-in form: a handle box (which suggests matching accounts, see
 // lib/client/handle-suggestions.ts) and a "Sign in with Atmosphere" button.
+// Signing in happens in the browser (handleSignInForm in
+// lib/client/account.ts), so the form needs JavaScript.
 // Used under posts by AtmosphereComments and in the sign-in overlay of
 // AtmosphereReactions; not meant to be used on its own.
 //
@@ -9,7 +11,10 @@
 //   returnTo  where the reader comes back to after signing in
 //   messages, lang  the wording (see lib/i18n.ts)
 //   heading   the form's heading, instead of "signIn.heading"
+//   permissions  more to ask for (groups in lib/permissions.ts) on top of
+//             everything readers can do here (DEFAULT_PERMISSIONS)
 import logo from "../assets/union.svg?url";
+import type { Permission } from "../lib/permissions";
 import settings from "../lib/settings";
 import { translate, translateHtml } from "../lib/i18n";
 import { escapeHtml } from "../lib/translate";
@@ -20,10 +25,11 @@ interface Props {
   messages: Record<string, string>;
   lang: string;
   heading?: string;
+  permissions?: Permission[];
 }
 
-const { id, returnTo, messages, lang, heading } = Astro.props;
-const { base } = settings;
+const { id, returnTo, messages, lang, heading, permissions = [] } = Astro.props;
+const { policyUri } = settings;
 const t = (key: string) => translate(messages, lang, key);
 const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
 // Links lead off the page, so they open in a new tab.
@@ -31,13 +37,14 @@ const link = (href: string, text: string) =>
   `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(text)}</a>`;
 ---
 
-<form class="atmo__login" id={`${id}-login`} method="post" action={`${base}/login`} data-login-form>
+<form class="atmo__login" id={`${id}-login`} data-login-form>
   <label for={`${id}-handle`}>{heading ?? t("signIn.heading")}</label>
   <p
     class="atmo__hint"
     set:html={th("signIn.anyAccount", {
       atmosphereAccount: link("https://atmosphereaccount.com", t("signIn.atmosphereAccount")),
       bluesky: link("https://bsky.app", "Bluesky"),
+      createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")),
     })}
   />
   <div class="atmo__row">
@@ -67,15 +74,22 @@ const link = (href: string, text: string) =>
       ></ul>
     </span>
     <input type="hidden" name="returnTo" value={returnTo} data-return-to />
+    {permissions.map((permission) => <input type="hidden" name="permission" value={permission} />)}
     <button type="submit" class="atmo__button atmo__button--sign-in">
       <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
+      <span class="atmo__spinner" aria-hidden="true"></span>
       {t("signIn.button")}
     </button>
   </div>
-  <p
-    class="atmo__hint"
-    set:html={th("signIn.privacy", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
-  />
+  {/* The detail, for anyone who wants it. */}
+  <details class="atmo__details">
+    <summary>{t("signIn.more")}</summary>
+    <p class="atmo__hint">{t("signIn.privacy")}</p>
+    <p class="atmo__hint">
+      {t("signIn.access")}
+      {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
+    </p>
+  </details>
 </form>
 
 <style>
@@ -94,6 +108,17 @@ const link = (href: string, text: string) =>
     font-weight: 700;
   }
 
+  .atmo__details summary {
+    width: fit-content;
+    color: var(--atmo-muted, inherit);
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+
+  .atmo__details .atmo__hint {
+    margin-top: 6px;
+  }
+
   .atmo__hint {
     margin: 0;
     color: var(--atmo-muted, inherit);
@@ -154,6 +179,39 @@ const link = (href: string, text: string) =>
     cursor: pointer;
   }
 
+  /* While signing in, a spinner takes the logo's place, so the button keeps its size. */
+  .atmo__spinner {
+    display: none;
+    flex: none;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: atmo-spin 700ms linear infinite;
+  }
+
+  [data-signing-in] .atmo__spinner {
+    display: inline-block;
+  }
+
+  [data-signing-in] .atmo__button .atmo__logo {
+    display: none;
+  }
+
+  @keyframes atmo-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .atmo__spinner {
+      animation-duration: 2.5s;
+    }
+  }
+
   .atmo__button .atmo__logo {
     flex: none;
     width: 20px;