@ofidj/generator-fidj 3.10.2 → 3.11.0

package/generators/app/templates/typescript/src/main.ts

@@ -1,8 +1,8 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn, showEmailEntry, type SigninShape} from "./service-agreement";
-import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "./provider-window";
+import {agreementRequired, agreementFromRefusal, signInErrorMessage, rememberSignIn, forgetSignIn, type SigninShape} from "@ofidj/entry";
+import {acceptedAgreement, agreementScreen, bindAgreementScreen, providerEntry, showEmailEntry, showVersionBadge} from "@ofidj/entry/dom";
+import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "@ofidj/entry/window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
-import "./style.css";
-import { showVersionBadge } from "./version";
+import "@ofidj/entry/style.css";
 
 type Session = { username: string; roles: string[] };
 type Note = { id: string; title: string; body: string; createdAt: string };
@@ -39,7 +39,9 @@ let busy = false;
 let leaving = false;
 let signInEmail = "";
 let signInPassword = "";
-let signInAgreementAccepted = false;
+// The agreement this app is owed, once the API has said so. There is no
+// account creation here, so there is no verification wait to hold either.
+let pendingAgreement: {version: string; text: string} | null = null;
 // Whether the person asked for the app's own form: the entry is rebuilt on every
 // render, and a refused sign-in is a render, so it has to be remembered or the
 // form folds away under the complaint about it.
@@ -183,6 +185,29 @@ async function action(task: () => Promise<void>) {
     render();
   }
 }
+// The API decides whether this is a session or the agreement it has not
+// recorded for this app. Returns true when it answered with a screen.
+async function refusedBeforeSignIn(
+  email: string,
+  password: string,
+  acceptance?: {termsAccepted: boolean; termsVersion: string},
+): Promise<boolean> {
+  try {
+    await sdk.login(email, password, {autoSignup: false, ...acceptance});
+    pendingAgreement = null;
+    return false;
+  } catch (reason) {
+    if (agreementRequired(reason)) {
+      pendingAgreement = agreementFromRefusal(reason);
+      if (!pendingAgreement) {
+        throw new Error("We cannot reach Fidj right now. Please try again.");
+      }
+      return true;
+    }
+    throw new Error(signInErrorMessage(reason));
+  }
+}
+
 function render() {
   document.title = settings.title + " · Fidj";
   const canWrite = session?.roles.some((role) =>
@@ -192,7 +217,7 @@ function render() {
   <main>${notice ? `<p class="notice" role="status">${escape(notice)}</p>` : ""}${error ? `<p class="error" role="alert">${escape(error)}</p>` : ""}
   ${
     !session
-      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}${agreementMarkup()}<button class="primary" type="submit">Continue</button>${settings.localDemo ? `<div class="demo"><strong>Try the local example</strong><p>Alex owns the app. Maya and Sam start with the Free role.</p><button type="button" data-demo="alex">Alex · owner</button><button type="button" data-demo="maya">Maya · member</button><button type="button" data-demo="sam">Sam · member</button></div>` : ""}`}</form></section>`
+      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}<button class="primary" type="submit">Sign in</button>${settings.localDemo ? `<div class="demo"><strong>Try the local example</strong><p>Alex owns the app. Maya and Sam start with the Free role.</p><button type="button" data-demo="alex">Alex · owner</button><button type="button" data-demo="maya">Maya · member</button><button type="button" data-demo="sam">Sam · member</button></div>` : ""}`}</form></section>`
       : `
   <div class="page-heading"><div><p class="eyebrow">YOUR WORKSPACE</p><h1>A place to think.</h1><p>${escape(session.username)} <span class="roles">${session.roles.map(escape).join(" · ") || "No assigned roles"}</span></p></div><button id="signout">Sign out</button></div>
   <nav><button id="workspace-tab" class="${view === "workspace" ? "selected" : ""}">My notes</button><button id="privacy-tab" class="${view === "privacy" ? "selected" : ""}">My privacy</button><button id="refresh">Refresh access</button></nav>
@@ -214,31 +239,35 @@ function render() {
   }`
   }
   <footer>Built with Fidj · One identity. Separate choices for every app.</footer></main>`;
-  void bindAgreement(el<HTMLFormElement>("signin"), settings.title, settings.apiEndpoint, settings.appId, signInAgreementAccepted);
+  // The agreement takes the form's place once the API says this app is owed one.
+  if (pendingAgreement && el("signin")) {
+    el("signin")!.innerHTML = agreementScreen(settings.title, pendingAgreement);
+    bindAgreementScreen(el<HTMLFormElement>("signin"));
+  }
   // The app's own form, folded away under the Fidj door rather than beside it.
-  if (emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && emailEntryOpen) showEmailEntry(true);
   el("use-email")?.addEventListener("click", () => {
     emailEntryOpen = !emailEntryOpen;
     showEmailEntry(emailEntryOpen, true);
   });
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
+    // Answering the agreement screen: the credentials were accepted already and
+    // are not re-read from a form that no longer shows them.
+    if (pendingAgreement) {
+      const accepted = acceptedAgreement(event.currentTarget as HTMLFormElement);
+      if (!accepted) return;
+      void action(async () => {
+        if (await refusedBeforeSignIn(signInEmail, signInPassword, accepted))
+          return;
+        await load();
+      });
+      return;
+    }
     const email = el<HTMLInputElement>("email")?.value || "";
     const password = el<HTMLInputElement>("password")?.value || "";
     signInEmail = email;
     signInPassword = password;
-    signInAgreementAccepted =
-      el<HTMLInputElement>("service-agreement")?.checked === true;
-    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
-    // Only a credential entry is gated here. When Fidj is the door, it asks for
-    // this app's agreement a moment later, on the screen that names the app,
-    // and records the acceptance with its version — so asking first cost a
-    // second click and kept nothing.
-    if (!oidc && !acceptance) {
-      error = "Please accept the service agreement before continuing.";
-      render();
-      return;
-    }
     // The Fidj door opens a window of its own, from inside this click: opening
     // it after the authorization URL has been fetched is what a popup blocker
     // refuses, because the browser no longer attributes it to the press.
@@ -247,11 +276,7 @@ function render() {
       return;
     }
     void action(async () => {
-      try {
-        await sdk.login(email, password, { autoSignup: false, ...acceptance });
-      } catch (reason) {
-        throw new Error(signInErrorMessage(reason));
-      }
+      if (await refusedBeforeSignIn(email, password)) return;
       await load();
     });
   });

package/lib/scaffold.cjs

@@ -176,6 +176,18 @@ function scaffold(destination, options) {
     releaseVersion = sdk.version;
     pkg.dependencies["@ofidj/node"] = "file:" + sdkPath;
   }
+  // The entry — the sign-in and account screens, the agreement and the design
+  // system — is a package now rather than a copy in this template, so a local
+  // build of it is pointed at the same way the SDK is.
+  if (options.entryPath) {
+    const entryPath = path.resolve(options.entryPath);
+    const entry = JSON.parse(
+      fs.readFileSync(path.join(entryPath, "package.json"), "utf8"),
+    );
+    if (entry.name !== "@ofidj/entry")
+      throw new Error("Entry path must contain a built @ofidj/entry package.");
+    pkg.dependencies["@ofidj/entry"] = "file:" + entryPath;
+  }
   fs.writeFileSync(
     path.join(dir, "package.json"),
     JSON.stringify(pkg, null, 2) + "\n",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "3.10.2",
+  "version": "3.11.0",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {

package/generators/app/templates/typescript/src/fonts.css

@@ -1,92 +0,0 @@
-/* The design system's typefaces, self-hosted.
- *
- * A generated site has to stay statically hostable, and an app that sells
- * privacy should not hand a third party a request log on every sign-in. Latin
- * and latin-ext only; other scripts fall back to the stack in tokens.css.
- *
- * The url()s are runtime paths relative to the built main.css, not bundle
- * inputs — the files ride along in public/ and esbuild leaves them external.
- * A consumer that serves the same tokens from somewhere else (fidj-app mounts
- * its console under /module/) writes its own @font-face block instead.
- */
-
-@font-face {
-  font-family: "IBM Plex Sans";
-  font-style: normal;
-  font-weight: 400 600;
-  font-display: swap;
-  src: url("fonts/IBMPlexSans-400_600-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "IBM Plex Sans";
-  font-style: normal;
-  font-weight: 400 600;
-  font-display: swap;
-  src: url("fonts/IBMPlexSans-400_600-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
-    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "IBM Plex Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("fonts/IBMPlexMono-400-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "IBM Plex Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
-    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "IBM Plex Mono";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("fonts/IBMPlexMono-500-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "IBM Plex Mono";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
-    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-@font-face {
-  font-family: "Instrument Serif";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("fonts/InstrumentSerif-400-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-@font-face {
-  font-family: "Instrument Serif";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("fonts/InstrumentSerif-400-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
-    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
-    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}

package/generators/app/templates/typescript/src/provider-window.ts

@@ -1,177 +0,0 @@
-// Signing in happens in a window of its own.
-//
-// Fidj's screens are served from another origin — Fidj's front end, or the API
-// itself, depending on the deployment — and that origin refuses to be framed,
-// so no dialog drawn inside this page can hold them. A window can, and it keeps
-// the page the person was already on: they come back to what they were reading,
-// not to a shell that reloaded underneath them and forgot where they were.
-//
-// The window is opened empty and synchronously, before anything is awaited. A
-// window opened after an await is a window the browser no longer connects to
-// the click that asked for it, and every popup blocker refuses it — so the
-// authorization URL, which takes a discovery round-trip to build, is fetched
-// afterwards and navigated into a window that already exists.
-
-// One window per page, not one per browser.
-//
-// Naming it is what lets a second press reuse the window instead of stacking
-// another one on top, and that much is wanted. Sharing the name across tabs is
-// not: the answer comes back to whichever page opened the window, so a second
-// tab reusing the first tab's window would hand that tab's sign-in to a page
-// that never asked, and leave the one that did waiting forever. Stable for this
-// document, unique to it.
-const WINDOW_NAME = "fidj-signin-" + Math.random().toString(36).slice(2, 10);
-const CALLBACK = "fidj:oidc-callback";
-
-// Comfortable rather than minimal: the provider asks for a password, states who
-// is asking and where the person is going back to, and a cramped window turns
-// that into scrolling. Clamped to the screen so a small display still gets a
-// window it can show whole, and centred on the display the opener is on.
-function features() {
-  const width = Math.min(560, Math.max(320, window.screen.availWidth - 80));
-  const height = Math.min(760, Math.max(480, window.screen.availHeight - 80));
-  const left = Math.round(
-    (window.screenX || 0) + Math.max(0, (window.outerWidth - width) / 2),
-  );
-  const top = Math.round(
-    (window.screenY || 0) + Math.max(0, (window.outerHeight - height) / 3),
-  );
-  return `popup=yes,width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
-}
-
-export type ProviderWindow = {
-  // Send the opened window to the provider. Separate from opening it because
-  // the URL is not known yet at the moment the click has to be honoured.
-  show(url: string): void;
-  // Still open, and still the one being waited for.
-  isOpen(): boolean;
-  // Bring it back in front. A window can be behind the page that opened it, on
-  // another desktop, or minimised, and from the page that looks exactly like
-  // nothing having happened — so the page needs to be able to fetch it.
-  focus(): void;
-  // Close it: the provider could not be reached and there is nothing for the
-  // window to show, or the person asked to stop.
-  giveUp(): void;
-  // The callback the provider handed to that window, or null when the person
-  // closed it without finishing. Closing is a decision, not a failure: it
-  // resolves so the entry simply reappears, with nothing said.
-  answer(): Promise<URL | null>;
-};
-
-export function openProviderWindow(): ProviderWindow | null {
-  let opened: Window | null = null;
-  try {
-    opened = window.open("", WINDOW_NAME, features());
-  } catch {
-    opened = null;
-  }
-  // Blocked, or a browser that refuses named windows. The caller falls back to
-  // leaving this page, which is the flow this one replaced.
-  if (!opened) return null;
-  try {
-    opened.document.write(
-      '<!doctype html><meta charset="utf-8"><title>Signing in with Fidj</title><body style="margin:0;font:15px/1.5 system-ui;color:#4a4540;display:grid;place-items:center;height:100vh">Opening Fidj…</body>',
-    );
-    opened.document.close();
-  } catch {}
-  return {
-    show(url: string) {
-      // `replace`, so the blank placeholder is not a history entry the person
-      // can press Back into.
-      try {
-        opened!.location.replace(url);
-      } catch {
-        opened!.location.href = url;
-      }
-    },
-    isOpen() {
-      try {
-        return !opened!.closed;
-      } catch {
-        return false;
-      }
-    },
-    focus() {
-      try {
-        opened!.focus();
-      } catch {}
-    },
-    giveUp() {
-      try {
-        opened!.close();
-      } catch {}
-    },
-    answer() {
-      return new Promise<URL | null>((resolve) => {
-        let done = false;
-        const finish = (result: URL | null) => {
-          if (done) return;
-          done = true;
-          window.removeEventListener("message", onMessage);
-          window.clearInterval(watch);
-          try {
-            opened!.close();
-          } catch {}
-          resolve(result);
-        };
-        const onMessage = (event: MessageEvent) => {
-          // Only this origin, and only the window this entry opened: the
-          // callback carries a single-use authorization code, and anything else
-          // posting into this page is not part of this conversation.
-          if (event.origin !== window.location.origin) return;
-          if (event.source !== opened) return;
-          const data = event.data as { fidj?: string; href?: string } | null;
-          if (!data || data.fidj !== CALLBACK || typeof data.href !== "string")
-            return;
-          let callback: URL;
-          try {
-            callback = new URL(data.href);
-          } catch {
-            return;
-          }
-          if (callback.origin !== window.location.origin) return;
-          finish(callback);
-        };
-        window.addEventListener("message", onMessage);
-        // A window closed by hand answers nothing, and nothing is what this
-        // page would wait for forever otherwise. `closed` is the only signal a
-        // cross-origin window gives, so it is polled.
-        const watch = window.setInterval(() => {
-          if (opened!.closed) finish(null);
-        }, 400);
-      });
-    },
-  };
-}
-
-// The other half, running in that window: the provider has just answered into
-// it, and its only remaining job is to hand the answer back and get out of the
-// way. It never completes the sign-in itself — the transaction that has to
-// match the answer was written by the page that opened it, and session storage
-// is copied into a new window, not shared with it.
-//
-// Answering `true` means the hand-off was made and this window asked to close;
-// the caller shows one line and, if the browser refuses to close a window it
-// did not see scripted open, finishes the sign-in here after all.
-export function relayProviderAnswer(): boolean {
-  let opener: Window | null = null;
-  try {
-    opener = window.opener as Window | null;
-  } catch {
-    return false;
-  }
-  if (!opener || opener === window || opener.closed) return false;
-  if (!new URL(window.location.href).searchParams.has("state")) return false;
-  try {
-    opener.postMessage(
-      { fidj: CALLBACK, href: window.location.href },
-      window.location.origin,
-    );
-  } catch {
-    return false;
-  }
-  try {
-    window.close();
-  } catch {}
-  return true;
-}

package/generators/app/templates/typescript/src/service-agreement.ts

@@ -1,203 +0,0 @@
-export function agreementMarkup() {
-  return `<div class="signin-agreement"><label class="agreement-choice"><input id="service-agreement" type="checkbox" aria-required="true" disabled><span id="agreement-label">I accept the service agreement for this app.</span></label><button type="button" id="read-agreement" disabled>Read service agreement</button><p id="agreement-status" class="fineprint" role="status">Loading service agreement…</p><button type="button" id="retry-agreement" hidden>Retry</button></div><dialog id="agreement-dialog" aria-labelledby="agreement-heading"><h2 id="agreement-heading">Service agreement</h2><p id="agreement-version"></p><p id="agreement-text"></p><button type="button" id="close-agreement">Close agreement</button></dialog>`;
-}
-
-export function acceptedAgreement(form: HTMLFormElement) {
-  const checkbox = form.querySelector<HTMLInputElement>("#service-agreement");
-  if (!checkbox?.checked || checkbox.disabled || !checkbox.dataset.version) return null;
-  return { termsAccepted: true, termsVersion: checkbox.dataset.version };
-}
-
-export function signInErrorMessage(error: unknown) {
-  const detail = error as {code?: number; reason?: unknown; message?: unknown};
-  const reason = typeof detail?.reason === "string" ? detail.reason : typeof detail?.message === "string" ? detail.message : "";
-  if (detail?.code === 429) return "Too many attempts. Please wait before trying again.";
-  if (reason === "unknown-user") return "We could not sign in to this account. Check the email and password.";
-  if (reason === "already exists - inconsistent request") return "An account already uses this email. Check the password or sign in instead.";
-  if (/ECONNREFUSED|ENOTFOUND|ETIMEDOUT|ECONNRESET|EHOSTUNREACH|network/i.test(reason)) return "We cannot reach Fidj right now. Please try again.";
-  return "We could not sign in to this account. Please try again.";
-}
-
-export async function bindAgreement(form: HTMLFormElement | null, title: string, endpoint: string, appId: string, checked = false) {
-  if (!form) return;
-  // An app whose only door is Fidj carries no agreement block: Fidj asks for
-  // this app's agreement on the screen that names it, and records the version.
-  const checkbox = form.querySelector<HTMLInputElement>("#service-agreement");
-  if (!checkbox) return;
-  const read = form.querySelector<HTMLButtonElement>("#read-agreement")!;
-  const dialog = form.querySelector<HTMLDialogElement>("#agreement-dialog")!;
-  const status = form.querySelector<HTMLElement>("#agreement-status")!;
-  const retry = form.querySelector<HTMLButtonElement>("#retry-agreement")!;
-  // What this agreement gates is the app's own door, and only that one. The
-  // Fidj door is about to be asked the same question on the screen that names
-  // the app, where the answer is recorded with its version — so an agreement
-  // that is still loading, or that could not be loaded at all, must not be what
-  // stands between a person and the door that does not need it.
-  const gated = form.querySelector("#email-entry") || form;
-  const submitButtons = gated.querySelectorAll<HTMLButtonElement>('button[type="submit"]');
-  const update = () => submitButtons.forEach(button => { button.disabled = checkbox.disabled; });
-  form.querySelector("#agreement-label")!.textContent = `I accept the service agreement for ${title}.`;
-  update();
-  checkbox.addEventListener("change", update);
-  read.addEventListener("click", () => dialog.showModal());
-  form.querySelector("#close-agreement")!.addEventListener("click", () => dialog.close());
-  const load = async () => {
-    retry.hidden = true;
-    status.textContent = "Loading service agreement…";
-    try {
-      const response = await fetch(`${endpoint}/apps/${encodeURIComponent(appId)}`, {signal: AbortSignal.timeout(10000)});
-      if (!response.ok) throw new Error(response.status === 404 ? "missing" : "unreachable");
-      const agreement = (await response.json()).app?.agreement;
-      if (!agreement || typeof agreement.version !== "string" || !agreement.version || typeof agreement.text !== "string" || !agreement.text) throw new Error("missing");
-      if (!form.isConnected) return;
-      checkbox.dataset.version = agreement.version;
-      checkbox.disabled = false;
-      checkbox.checked = checked;
-      read.disabled = false;
-      dialog.querySelector("#agreement-version")!.textContent = `Version ${agreement.version}`;
-      dialog.querySelector("#agreement-text")!.textContent = agreement.text;
-      status.textContent = "Required to sign in. Optional data choices stay separate.";
-      update();
-    } catch (error) {
-      if (!form.isConnected) return;
-      status.textContent = error instanceof Error && error.message === "missing"
-        ? "This app has no service agreement available."
-        : "We cannot reach Fidj right now. Try again.";
-      retry.hidden = false;
-    }
-  };
-  retry.addEventListener("click", load);
-  await load();
-}
-
-// The entry every app that delegates to the provider renders, in one place
-// because both app shapes render it and they had drifted apart.
-//
-// "Continue with Fidj" alone borrows the grammar of an optional social login —
-// that button always sits next to an email and a password — so on an app whose
-// accounts *are* Fidj accounts, the missing form reads as something broken. The
-// explanation therefore comes before the button, not as reassurance after it,
-// and nothing presupposes an account the person may not have yet.
-const hintKey = (appId: string) => "fidj.entry." + appId;
-
-export function signInHint(appId: string) {
-  try {
-    return localStorage.getItem(hintKey(appId)) || "";
-  } catch {
-    return "";
-  }
-}
-
-// Remembered on this app's own origin, about this app's own member: no
-// cross-site question is asked, and none is answered. Signing out forgets, so a
-// shared browser does not show the next person an address.
-export function rememberSignIn(appId: string, label: string) {
-  try {
-    if (label) localStorage.setItem(hintKey(appId), label);
-  } catch {}
-}
-
-export function forgetSignIn(appId: string) {
-  try {
-    localStorage.removeItem(hintKey(appId));
-  } catch {}
-}
-
-// Both doors, but not side by side. An app that delegates to Fidj still has
-// people who would rather type an address and a password than be sent
-// somewhere, so the credential form stays — folded away under a line of text
-// rather than standing in front of the door most people should take. Offering
-// the two as equals asked every arrival to choose between them, and the one
-// that looked like an ordinary login won by looking ordinary.
-//
-// The trade-off is stated where it is made: on the credential path the app's
-// own page handles the Fidj password, so it is the app — not only Fidj — that
-// must be trusted with it. The Fidj entry above it never is, which is why it is
-// the one wearing the accent.
-export type SigninShape = "button" | "inline" | "both";
-
-export function providerEntry(
-  title: string,
-  appId: string,
-  credentials: string,
-  isFidjItself = false,
-  shape: SigninShape = "button",
-) {
-  const escapeText = (value: unknown) =>
-    String(value ?? "").replace(
-      /[&<>"']/g,
-      (char) =>
-        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
-          char
-        ]!,
-    );
-  const hint = signInHint(appId);
-  const both = shape === "both" && Boolean(credentials);
-  // The app's own form and nothing else. Nothing is folded away because there is
-  // no second way in to fold it under, and the trade-off is stated plainly:
-  // on this path it is this site that holds the password.
-  if (shape === "inline")
-    return (
-      `<p class="signin-lead">${
-        isFidjItself
-          ? "One account across every app that uses Fidj, and a separate set of choices for each one."
-          : `${escapeText(title)} accounts are Fidj accounts. Sign in below — ${escapeText(title)} handles your password itself on this page.`
-      }</p>` +
-      agreementMarkup() +
-      credentials
-    );
-  const lead = hint
-    ? `<p class="signin-lead">You signed in here with Fidj before. ${escapeText(title)} accounts are Fidj accounts — continue as yourself, or use another.</p>`
-    : both
-      ? `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. Fidj asks in a window of its own, so this site never sees your password.</p>`
-      : isFidjItself
-        ? `<p class="signin-lead">One account across every app that uses Fidj, and a separate set of choices for each one. Fidj asks in a window of its own; this page stays where it is.</p>`
-        : `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. You will sign in — or create yours — in a Fidj window, so this site never sees your password.</p>`;
-  // The accent is the Fidj mark, and this is the one control on the screen that
-  // is Fidj's rather than the app's. It is also the door the app would rather
-  // people took, and those two happen to want the same thing.
-  const fidj = hint
-    ? `<button class="primary fidj-entry" type="submit" name="entry" value="fidj">Continue as ${escapeText(hint)}</button><button type="button" id="forget-hint" class="quiet">Use a different account</button>`
-    : `<button class="primary fidj-entry" type="submit" name="entry" value="fidj">${isFidjItself ? "Sign in" : "Sign in with Fidj"}</button>`;
-  // Fidj is the only door: it collects the agreement itself, a moment later, on
-  // the screen that names the app — and records it with its version. Collecting
-  // it here first recorded nothing and asked the same question twice.
-  if (shape !== "both" || !both) return lead + fidj;
-  // Both doors. The app's own one is a second thought for the person who wants
-  // it, which is what a disclosure is for: it costs one click and takes nothing
-  // away, where a second button of equal weight cost everybody a decision.
-  return (
-    lead +
-    fidj +
-    `<div class="signin-alternate"><button type="button" id="use-email" class="signin-toggle" aria-expanded="false" aria-controls="email-entry"><span class="signin-toggle-label">Inline form<span class="caret" aria-hidden="true"></span></span></button>
-  <div id="email-entry" hidden>${agreementMarkup()}${credentials}</div></div>`
-  );
-}
-
-// Opening the app's own form takes the space the Fidj door was using.
-//
-// The two are alternatives, not a list, and watching one fold away as the other
-// arrives is what says so — where a form appearing underneath a button that is
-// still there reads as "and also". The toggle stays put through both states, so
-// it ends up labelling whichever one is on screen: a caret pointing down at a
-// form that is not here yet, and up at the one it would put away.
-//
-// Shared, because both app shapes render the same entry.
-export function showEmailEntry(open: boolean, focus = false) {
-  const fields = document.getElementById("email-entry");
-  const toggle = document.getElementById("use-email");
-  if (!fields || !toggle) return;
-  toggle.setAttribute("aria-expanded", String(open));
-  fields.hidden = !open;
-  const door = document.querySelector<HTMLButtonElement>(".fidj-entry");
-  if (door) {
-    door.classList.toggle("is-folded", open);
-    // Out of the tab order and out of the accessibility tree the moment it
-    // starts leaving: something mid-fold is not something to press, and an
-    // animation is not what decides that.
-    if (open) door.setAttribute("aria-hidden", "true");
-    else door.removeAttribute("aria-hidden");
-    door.tabIndex = open ? -1 : 0;
-  }
-  if (open && focus) document.getElementById("email")?.focus();
-}