astro-atmosphere-comments 0.4.2 → 0.5.0

package/components/AtmosphereReactions.astro

@@ -15,7 +15,7 @@
 // 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.
 //
 // Signed-in readers like and repost from your page. Anyone else who presses
@@ -49,6 +49,17 @@ const { base } = settings;
     <SignInForm id="atmo-dialog" returnTo={Astro.url.pathname} messages={messages} lang={lang} heading={t("dialog.heading")} />
     <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 +76,8 @@ 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 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 +96,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 +113,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 +181,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(),
@@ -206,13 +241,6 @@ const { base } = settings;
         form.querySelector<HTMLInputElement>('input[name="handle"]')!.focus();
       };
 
-      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 +256,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 +264,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));
@@ -293,6 +323,8 @@ const { base } = settings;
         link.addEventListener("click", (event) => {
           if (!signedIn || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
           event.preventDefault();
+          // 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 +355,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 +376,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 +387,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,44 +407,35 @@ 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);
         }
       };
 
@@ -464,6 +477,18 @@ const { base } = settings;
         if (button && button.getAttribute("aria-pressed") !== "true") await react(post, button, kind as Kind, true);
       };
 
+      // Back from allowing posting: open the Reply or Quote box they pressed.
+      const finishPendingCompose = () => {
+        const pending = location.hash.match(/^#atmo-compose=(reply|quote):(.+)$/);
+        if (!pending) return;
+        const url = new URL(location.href);
+        if (!document.querySelector("atmosphere-comments")) url.searchParams.delete("atmosphere");
+        history.replaceState(history.state, "", `${url.pathname}${url.search}`);
+        const uri = decodeURIComponent(pending[2]);
+        const post = posts().find((candidate) => candidate.dataset.atmospherePost === uri);
+        if (post && signedIn && can("post")) openCompose(post, pending[1] as "reply" | "quote");
+      };
+
       // 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 +517,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 +546,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,6 +566,7 @@ const { base } = settings;
           addActions();
           await loadState();
           await finishPending();
+          finishPendingCompose();
           if (signedIn) {
             await setUpFollow();
             await finishPendingFollow();
@@ -574,6 +599,16 @@ const { base } = settings;
     box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
   }
 
+  .atmo-permission p {
+    margin: 0 0 10px;
+  }
+
+  .atmo-permission__heading {
+    /* Clear of the close button. */
+    padding-right: 32px;
+    font-weight: 700;
+  }
+
   .atmo-signin::backdrop {
     background: rgb(0 0 0 / 0.55);
   }

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,7 +37,7 @@ 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"
@@ -67,6 +73,7 @@ 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>
       {t("signIn.button")}
@@ -76,6 +83,10 @@ const link = (href: string, text: string) =>
     class="atmo__hint"
     set:html={th("signIn.privacy", { createAccount: link("https://atmosphereaccount.com", t("signIn.createAccount")) })}
   />
+  <p class="atmo__hint">
+    {t("signIn.access")}
+    {policyUri && <Fragment> <a href={policyUri} target="_blank" rel="noopener">{t("signIn.policy")}</a></Fragment>}
+  </p>
 </form>
 
 <style>

package/components/atmosphere.css

@@ -610,3 +610,24 @@ dialog.atmo:not([open]) {
 .atmo-comment-action[data-kind="like"][aria-pressed="true"] svg {
   fill: currentColor;
 }
+
+/* "One more permission" under posts, for readers who signed in only to like
+   and repost. */
+.atmo__permission {
+  display: grid;
+  gap: 8px;
+  max-width: 560px;
+  margin-top: 14px;
+}
+
+.atmo__permission p {
+  margin: 0;
+}
+
+/* In place of a comment whose author asks not to be shown to logged-out people. */
+:where(.atmo-comment__withheld) {
+  margin: 0;
+  color: var(--atmo-muted, inherit);
+  font-size: 0.9em;
+  font-style: italic;
+}

package/index.mjs

@@ -4,44 +4,39 @@
 // replies to the post's announcement, written to the reader's own account, so
 // they can delete them there at any time.
 //
-// Sign-in uses AT Protocol OAuth straight to the reader's own account host:
-// no third-party login service is involved. This site only ever holds a
-// grant to create posts and to create and delete likes and reposts, plus, if
-// a reader allows it when they first delete a comment, to delete posts (see
-// SCOPE and DELETE_SCOPE in lib/oauth.ts).
+// Sign-in uses AT Protocol OAuth straight to the reader's own account host,
+// as a browser client: the sign-in is kept only in the reader's browser, and
+// the site's server never sees it, so the server can't act for anyone.
+// Signing out cancels it at the reader's host. See lib/client/account.ts.
 //
 // It adds /oauth-client-metadata.json at the site's root (what account hosts
-// read to know the site), and these routes under `base` (default /atmosphere):
-//   jwks.json                        the public half of the site's signing key
-//   login (POST)                     starts sign-in with the reader's handle
-//   callback                         where the reader's host sends them back
-//   logout (POST)                    signs out and revokes the site's grant
-//   me                               who's signed in (for the comment box)
-//   comment (POST)                   posts a comment (or quote post) as the reader
-//   state                            whether the reader has liked or reposted
-//   react (POST)                     likes or reposts, or undoes that
-//   post                             the announcement, for the Quote preview
-//   media                            avatars and link-card pictures, via this site
-//   typeahead                        @mention suggestions as the reader types
-//   thread                           the comments, likes and reposts to show
-// and a component, AtmosphereComments.astro, to put under each post.
+// read to know the site), and these routes under `base` (default /atmosphere),
+// none of which act for a reader:
+//   callback       the page readers come back to after approving
+//   identity       looks up an account for signing in
+//   profile        a reader's public profile, for the comment box
+//   richtext       links, @mentions and #hashtags in a comment, before it's posted
+//   following      whether an account follows one of the site's accounts
+//   post           the announcement, for the Quote preview
+//   media          avatars and link-card pictures, via this site
+//   typeahead      account suggestions as the reader types
+//   thread         the comments, likes and reposts to show
+// and two components: AtmosphereComments.astro under each post, and
+// AtmosphereReactions.astro once in the layout.
 //
 // It needs an on-demand (server) adapter such as @astrojs/node.
 import { fileURLToPath } from "node:url";
 
 const VIRTUAL_ID = "virtual:atmosphere-comments/settings";
+// The settings that are safe for readers' browsers (lib/public-settings.ts).
+const PUBLIC_ID = "virtual:atmosphere-comments/public-settings";
 
 const ROUTES = {
-  "jwks.json": "jwks.json.ts",
-  login: "login.ts",
-  callback: "callback.ts",
-  logout: "logout.ts",
-  me: "me.ts",
-  comment: "comment.ts",
-  state: "state.ts",
-  react: "react.ts",
-  delete: "delete.ts",
-  follow: "follow.ts",
+  callback: "callback.astro",
+  identity: "identity.ts",
+  profile: "profile.ts",
+  richtext: "richtext.ts",
+  following: "following.ts",
   post: "post.ts",
   media: "media.ts",
   typeahead: "typeahead.ts",
@@ -102,14 +97,29 @@ export default function atmosphereComments(options) {
           });
         }
 
-        // The routes and component read the settings from a virtual module.
+        const publicSettings = {
+          clientName: settings.clientName,
+          allowedAuthors,
+          base,
+          site: settings.site,
+          logoUri: settings.logoUri,
+          policyUri: settings.policyUri,
+          tosUri: settings.tosUri,
+        };
+
+        // The routes and components read the settings from virtual modules.
         updateConfig({
           vite: {
             plugins: [
               {
                 name: "atmosphere-comments-settings",
-                resolveId: (id) => (id === VIRTUAL_ID ? `\0${VIRTUAL_ID}` : undefined),
-                load: (id) => (id === `\0${VIRTUAL_ID}` ? `export default ${JSON.stringify(settings)};` : undefined),
+                resolveId: (id) => (id === VIRTUAL_ID || id === PUBLIC_ID ? `\0${id}` : undefined),
+                load: (id) =>
+                  id === `\0${VIRTUAL_ID}`
+                    ? `export default ${JSON.stringify(settings)};`
+                    : id === `\0${PUBLIC_ID}`
+                      ? `export default ${JSON.stringify(publicSettings)};`
+                      : undefined,
               },
             ],
           },