@ofidj/generator-fidj 3.10.2 → 3.13.0

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

@@ -1,9 +1,9 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn, signInHint, showEmailEntry, type SigninShape} from "./service-agreement";
-import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "./provider-window";
+import {agreementModel, signInErrorMessage, agreementRequired, agreementFromRefusal, verificationPending, pollVerification, rememberSignIn, forgetSignIn, signInHint, type SigninShape} from "@ofidj/entry";
+import {agreementScreen, bindAgreementScreen, bindPasswordReveal, acceptedAgreement, verificationWait, providerEntry, showEmailEntry, showVersionBadge, escape, masthead, highlightCells, badgeStrip, credentialFields, accountForm, returnNotice} from "@ofidj/entry/dom";
+import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "@ofidj/entry/window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
-import "./style.css";
-import { showVersionBadge } from "./version";
+import "@ofidj/entry/style.css";
 
 const sdk = new FidjNodeService();
 const oidc = config.oidcIssuer ? new FidjOidcClient({issuer: config.oidcIssuer, clientId: config.appId, redirectUri: window.location.origin + window.location.pathname, apiEndpoint: config.apiEndpoint, storage: sessionStorage}) : null;
@@ -29,7 +29,13 @@ 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, and the address a
+// just-created account is waiting on. Only one of them is ever set.
+let pendingAgreement: {version: string; text: string} | null = null;
+let awaitingVerification = "";
+let verificationResent = false;
+let verificationNotice = "";
+let stopWatchingVerification: (() => void) | null = null;
 // Who is signed in, as this app's own membership answers it. The bar names them
 // and the account screen says it again where it can be checked; the ID token of
 // a code flow carries only a subject, so this comes from the membership.
@@ -51,23 +57,8 @@ function currentRoute() {
   }
   return route;
 }
-const escape = (value: unknown) =>
-  String(value ?? "").replace(
-    /[&<>"']/g,
-    (char) =>
-      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
-        char
-      ]!,
-  );
 const element = <T extends HTMLElement>(id: string) =>
   document.getElementById(id) as T | null;
-function badges() {
-  const entries: string[] = config.badges;
-  if (!entries?.length) return "";
-  return `<footer class="signin-badges">${entries
-    .map((entry) => `<span>${escape(entry)}</span>`)
-    .join("")}</footer>`;
-}
 // Signing out of this app revokes this app's access and nothing else: the Fidj
 // session survives, which is what makes the next app free to enter. That is a
 // good design and a bad surprise, so the notice says what actually happened and
@@ -132,7 +123,10 @@ function wireSignOut() {
     () =>
       void action(async () => {
         const wasSignedIn = signedIn;
-        if (signedIn) await sdk.logout(true);
+        if (signedIn) {
+          if (oidc?.hasSession()) await oidc.logout();
+          else await sdk.logout(true);
+        }
         forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
@@ -145,16 +139,6 @@ function wireSignOut() {
   );
 }
 
-function highlights() {
-  const entries: Array<{ heading: string; body: string }> = config.highlights;
-  if (!entries?.length) return "";
-  return `<div class="signin-highlights">${entries
-    .map(
-      (entry, index) =>
-        `<article><p class="eyebrow">${String(index + 1).padStart(2, "0")}</p><h2>${escape(entry.heading)}</h2><p>${escape(entry.body)}</p></article>`,
-    )
-    .join("")}</div>`;
-}
 async function request(path: string, method = "GET", data?: unknown) {
   const token = await sdk.fidjGetIdToken();
   const response = await fetch(config.apiEndpoint + path, {
@@ -333,6 +317,19 @@ let recognising = false;
 function mightBeRecognised() {
   if (!oidc || !isFidjItself) return false;
   if ((moduleRoute() || "").split("/")[0] === PUBLIC_ROUTE) return false;
+  // Not on a screen somebody was sent to by a link.
+  //
+  // Asking the provider is a navigation: it leaves this address and comes back
+  // at the redirect URI, without the hash the link carried. On these routes the
+  // hash is the point — it holds a token that works once — so asking spent the
+  // link and dropped the person on the entry, with nothing to show for having
+  // opened their mail.
+  //
+  // It hid well. Every other way of reaching these screens comes from a page
+  // that already asked once and recorded it below, and the ask is once per
+  // document; only a tab that has never seen Fidj fires it here, which is
+  // exactly the tab a mail client opens and the one nothing exercised.
+  if (["forgot", "reset", "verify"].includes(currentRoute())) return false;
   if (oidc.signedOutHere()) return false;
   try {
     return sessionStorage.getItem(RECOGNITION_ASKED) !== "true";
@@ -345,6 +342,19 @@ async function askWhetherFidjKnowsThisBrowser() {
   if (!oidc || !isFidjItself || sdk.isLoggedIn() || oidc.signedOutHere())
     return false;
   if ((moduleRoute() || "").split("/")[0] === PUBLIC_ROUTE) return false;
+  // Not on a screen somebody was sent to by a link.
+  //
+  // Asking the provider is a navigation: it leaves this address and comes back
+  // at the redirect URI, without the hash the link carried. On these routes the
+  // hash is the point — it holds a token that works once — so asking spent the
+  // link and dropped the person on the entry, with nothing to show for having
+  // opened their mail.
+  //
+  // It hid well. Every other way of reaching these screens comes from a page
+  // that already asked once and recorded it below, and the ask is once per
+  // document; only a tab that has never seen Fidj fires it here, which is
+  // exactly the tab a mail client opens and the one nothing exercised.
+  if (["forgot", "reset", "verify"].includes(currentRoute())) return false;
   // Once per document: the answer comes back as a redirect to this same page,
   // so without this a refusal would ask again, and again.
   try {
@@ -427,11 +437,6 @@ function navigate(route: string) {
   if (route !== currentRoute()) window.history.pushState(null, "", "#/" + route);
   if (!busy) render();
 }
-// The credential fields, in one place because the entry now shows them beside
-// the Fidj door rather than instead of it.
-function credentialFields() {
-  return `<label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" placeholder="you@company.com" autocomplete="username"><div class="field-head"><label for="password">Password</label><a href="#/forgot">Forgot?</a></div><div class="password-field"><input id="password" type="password" value="${escape(signInPassword)}" placeholder="••••••••••" autocomplete="current-password"><button type="button" id="reveal" aria-controls="password">Show</button></div><button class="primary" type="submit" name="entry" value="credentials">Continue</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button>`;
-}
 
 function moduleRoute() {
   const route = window.location.hash.slice(2).split("?")[0];
@@ -495,6 +500,8 @@ function render() {
   if (interactionId && !addressedInteraction()) {
     interactionId = "";
     interactionError = "";
+    interactionResent = false;
+    interactionNotYet = false;
     interaction = null;
     interactionFailed = false;
   }
@@ -581,7 +588,7 @@ function render() {
     // The two ways out, last and together: back to the app, or out of this
     // session. Leaving the app itself is a different decision and stays where
     // the things it erases are listed.
-    root.innerHTML = `<section class="card content-account">${banner()}${accountForm("account")}${privacyBlock()}<div class="account-actions"><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button><button id="exit">Sign out</button></div></section>`;
+    root.innerHTML = `<section class="card content-account">${banner()}${accountForm("account", {linkToken, verificationConfirmed, emailVerified, accountEmail})}${privacyBlock()}<div class="account-actions"><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button><button id="exit">Sign out</button></div></section>`;
     renderNav("account");
     wireAccount("account");
     wireSignOut();
@@ -604,21 +611,13 @@ function render() {
   }
   // Only the entry reaches here now: the privacy screen and the account
   // screen became one, and that one is drawn above.
-  root.innerHTML = `<section class="signin-shell"><div class="signin-intro${config.highlights?.length ? "" : " is-plain"}"><header class="signin-masthead"><img class="app-mark" src="${escape(config.logo)}" alt=""><strong>${escape(config.title)}</strong></header>
+  root.innerHTML = `<section class="signin-shell"><div class="signin-intro${config.highlights?.length ? "" : " is-plain"}">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p></div>
-  ${highlights()}</div>
-  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin"><label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" placeholder="you@company.com" autocomplete="username" required><div class="field-head"><label for="password">Password</label><a href="#/forgot">Forgot?</a></div><div class="password-field"><input id="password" type="password" value="${escape(signInPassword)}" placeholder="••••••••••" autocomplete="current-password" required><button type="button" id="reveal" aria-controls="password">Show</button></div>${agreementMarkup()}<button class="primary" type="submit">Continue</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button></form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
+  ${highlightCells(config.highlights)}</div>
+  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
   <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>Your account, with Fidj</strong></p><p>Signing in creates one Fidj account you keep across every app that uses Fidj.</p><p>You choose what this app may store — and can export or erase it at any moment.</p></div></div>
-  ${badges()}</div></section>`;
+  ${badgeStrip(config.badges)}</div></section>`;
   wireNav();
-  element("reveal")?.addEventListener("click", () => {
-    const field = element<HTMLInputElement>("password");
-    const button = element("reveal");
-    if (!field || !button) return;
-    const hidden = field.type === "password";
-    field.type = hidden ? "text" : "password";
-    button.textContent = hidden ? "Hide" : "Show";
-  });
   element("anonymous")?.addEventListener("click", () => {
     if (!config.allowAnonymous) return;
     anonymous = true;
@@ -635,14 +634,24 @@ function render() {
     element("signin")!.innerHTML = providerEntry(
       config.title,
       config.appId,
-      config.signin === "button" ? "" : credentialFields(),
+      config.signin === "button"
+        ? ""
+        : credentialFields({email: signInEmail, password: signInPassword}),
       isFidjItself,
       config.signin as SigninShape,
     );
+  // The agreement, when the API has said this app is owed one. It takes the
+  // form's place rather than sitting under it: the credentials were accepted,
+  // and what is left is a decision about this app.
+  if (pendingAgreement && element("signin")) {
+    element("signin")!.innerHTML = agreementScreen(config.title, pendingAgreement, `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}/agreements/${encodeURIComponent(pendingAgreement.version || "")}`);
+    bindAgreementScreen(element<HTMLFormElement>("signin"));
+  }
   // The app's own form, for whoever came to type a password. Folded away rather
   // than removed: the door above it is the one to take, and the person who
   // wants this one is one click from it.
-  if (emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && element("signin")) bindPasswordReveal(element("signin")!);
   element("use-email")?.addEventListener("click", () => {
     emailEntryOpen = !emailEntryOpen;
     showEmailEntry(emailEntryOpen, true);
@@ -662,31 +671,61 @@ function render() {
     }
     render();
   });
-  void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
+  // The wait a just-created account owes its address, under the form that
+  // created it — not a screen, because nobody was taken anywhere.
+  if (awaitingVerification)
+    element("signin")?.insertAdjacentHTML(
+      "beforeend",
+      verificationWait({
+        email: awaitingVerification,
+        resent: verificationResent,
+        error: verificationNotice,
+      }),
+    );
+  element("resend-verification")?.addEventListener("click", () =>
+    void action(async () => {
+      verificationResent = false;
+      verificationNotice = "";
+      try {
+        await sdk.resendVerification();
+        verificationResent = true;
+      } catch {
+        // No session yet — the account was created and never signed in, which
+        // is the whole point of this screen. Creating it again with the same
+        // address is what sends another link.
+        verificationNotice =
+          "Press Create an account again to send another link.";
+      }
+    }),
+  );
   element<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
     const email = element<HTMLInputElement>("email")?.value || "";
     const password = element<HTMLInputElement>("password")?.value || "";
-    const agreement = element<HTMLInputElement>("service-agreement");
+    const submitter = event.submitter as HTMLButtonElement | null;
+    // Answering the agreement screen. The credentials are the ones already
+    // accepted, so they are not re-read from a form that no longer shows them.
+    if (pendingAgreement) {
+      const acceptance = acceptedAgreement(
+        event.currentTarget as HTMLFormElement,
+      );
+      if (!acceptance) return;
+      submitter?.setAttribute("data-busy", "true");
+      void action(async () => {
+        if (
+          await refusedBeforeSignIn(signInEmail, signInPassword, false, acceptance)
+        )
+          return;
+        await completeSignIn();
+      });
+      return;
+    }
     signInEmail = email;
     signInPassword = password;
-    signInAgreementAccepted = agreement?.checked === true;
-    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
-    const submitter = event.submitter as HTMLButtonElement | null;
     const signup = submitter?.name === "signup";
     // Which door was used. The Fidj one leaves for the provider; the credential
     // one signs in here, which is why it is the app's own form and not Fidj's.
     const throughFidj = submitter?.name === "entry" && submitter.value === "fidj";
-    // Only the credential door is gated here. The Fidj one is about to be asked
-    // the same question on the screen that names this app, where the answer is
-    // recorded with its version — so asking first cost a second click and kept
-    // nothing.
-    if (!throughFidj && !acceptance) {
-      failed = true;
-      message = "Please accept the service agreement before continuing.";
-      render();
-      return;
-    }
     if (oidc && throughFidj) {
       // "Continue as <them>" promises to carry on as that person, and handed
       // them over to an empty email field — so the promise cost a second
@@ -704,11 +743,69 @@ function render() {
       if (oidc && (!email || !password)) {
         throw new Error("Enter your email and password, or sign in with Fidj.");
       }
-      try {
-        await sdk.login(email, password, { autoSignup: signup, ...acceptance });
-      } catch (error) {
-        throw new Error(signInErrorMessage(error));
+      if (await refusedBeforeSignIn(email, password, signup)) return;
+      await completeSignIn();
+    });
+  });
+}
+
+// The API decides what the entry owes somebody next: a session, the agreement it
+// has not recorded for this app, or a wait on an address nobody has proved they
+// own. Returns true when it answered with a screen rather than a session.
+async function refusedBeforeSignIn(
+  email: string,
+  password: string,
+  signup: boolean,
+  acceptance?: {termsAccepted: boolean; termsVersion: string},
+): Promise<boolean> {
+  try {
+    await sdk.login(email, password, {autoSignup: signup, ...acceptance});
+    pendingAgreement = null;
+    awaitingVerification = "";
+    return false;
+  } catch (error) {
+    const created = verificationPending(error);
+    if (created) {
+      awaitingVerification = created.email || email;
+      verificationResent = false;
+      verificationNotice = "";
+      return true;
+    }
+    if (agreementRequired(error)) {
+      pendingAgreement = agreementFromRefusal(error) || (await readAgreement());
+      if (!pendingAgreement) {
+        throw new Error("We cannot reach Fidj right now. Please try again.");
       }
+      return true;
+    }
+    throw new Error(signInErrorMessage(error));
+  }
+}
+
+// An API that refused without saying which agreement it wanted. Older ones
+// cannot say, so the app is asked directly; it is the same agreement unless the
+// owner published between the two calls.
+async function readAgreement() {
+  try {
+    const response = await fetch(
+      `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}`,
+      {signal: AbortSignal.timeout(10000)},
+    );
+    if (!response.ok) return null;
+    const agreement = (await response.json()).app?.agreement;
+    return typeof agreement?.version === "string" &&
+      agreement.version &&
+      typeof agreement?.text === "string" &&
+      agreement.text
+      ? {version: agreement.version, text: agreement.text}
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function completeSignIn() {
+  return (async () => {
       // Fidj collects the credential on its own page rather than sending itself
       // through its own door, and that sign-in created no session the provider
       // could see: the first app opened afterwards asked for the password again,
@@ -718,14 +815,12 @@ function render() {
       // every app must not be mintable by one that collects its own passwords.
       if (isFidjItself) {
         try {
-          await sdk.sendOnEndpoint({
-            verb: "POST",
-            key: "me",
-            relativePath: "oidc/session",
-            // The whole point of the call is the cookie it comes back with, and
-            // a cross-origin response's Set-Cookie is dropped without this.
-            withCredentials: true,
-          });
+          const transfer = await request("/me/oidc/session-transfer", "POST");
+          // The provider cookie belongs to the API origin. A cross-site fetch
+          // cannot reliably replace it, so let that origin answer once as the
+          // top-level page, consume a one-use ticket, then send us back here.
+          window.location.assign(transfer.location);
+          return;
         } catch {
           // Being signed in here still worked. The person is inside Fidj; what
           // they lose is being recognised by the next app without typing again,
@@ -734,12 +829,11 @@ function render() {
       }
       await refresh();
       anonymous = false;
-      // A new account belongs where a returning one lands: inside the app.
-      // Sending it to the account card instead dropped people who had just
-      // signed up on the shell, one click short of the app they came for.
-      navigate("content");
-    });
-  });
+    // A new account belongs where a returning one lands: inside the app.
+    // Sending it to the account card instead dropped people who had just
+    // signed up on the shell, one click short of the app they came for.
+    navigate("content");
+  })();
 }
 
 // Everything the account screen lets a person do about what this app holds:
@@ -829,8 +923,8 @@ function wirePrivacy() {
   });
 }
 
-// The four account screens. My account is shown inside the app; the recovery
-// and verification ones are reached without a session and stand alone.
+
+
 // What this app holds about the person signed in, and what they can do
 // about it. It used to be a screen of its own called My privacy, one tab
 // away from the account it was about — so a person looking for their own
@@ -858,17 +952,6 @@ function privacyBlock() {
   <p class="leaving"><a href="${escape(config.dashboardUrl)}/#/my" target="_blank" rel="noopener">Open Fidj to manage every app you use ↗</a><br><small>Fidj is the account provider behind ${escape(config.title)}. This opens it in a new tab; you stay signed in here.</small></p>`;
 }
 
-function accountForm(route: string) {
-  return    route === "forgot"
-      ? `<h2>Reset your password</h2><p>We’ll email you a link to choose a new password for your shared Fidj account.</p><form id="recovery"><label for="recovery-email">Email address</label><input id="recovery-email" type="email" autocomplete="email" required><button class="primary">Send reset link</button></form>`
-      : route === "reset"
-        ? `<h2>Choose a new password</h2><p>This changes your Fidj password across all your apps and signs out existing sessions.</p>${linkToken ? '<form id="recovery"><label for="new-password">New password</label><input id="new-password" type="password" autocomplete="new-password" minlength="12" required><label for="confirm-password">Confirm password</label><input id="confirm-password" type="password" autocomplete="new-password" minlength="12" required><p>Use at least 12 characters (up to 72 UTF-8 bytes).</p><button class="primary">Save new password</button></form>' : '<p>Request a new link if you no longer have an active reset link.</p><a href="#/forgot">Request a reset link</a>'}`
-        : route === "verify"
-          ? `<h2>${verificationConfirmed ? "Email verified" : "Verify your email"}</h2>${verificationConfirmed ? "<p>Your account is ready. Return to your app to continue.</p>" : "<p>Confirm that this email address belongs to you.</p>"}${verificationConfirmed ? "" : linkToken ? '<form id="recovery"><button class="primary">Confirm email address</button></form>' : "<p>Sign in to your account to request a new verification email.</p>"}`
-          : `<h2>My Fidj account</h2><p class="account-identity">Signed in as <strong>${escape(accountEmail)}</strong></p><p>Your identity is shared across your apps. Privacy choices remain separate for each app.</p><p id="verification-status">${emailVerified ? "Your email address is verified." : "Your email is not verified yet."}</p><button id="check-verification">Refresh verification status</button>${emailVerified ? "" : '<button id="resend-verification">Send verification email</button>'}<p><a href="#/forgot">Reset my password</a></p>`;
-}
-
-
 // ------------------------------------------------ signing in, for the provider
 //
 // When Fidj's provider needs a person to identify themselves it hands them to a
@@ -883,14 +966,24 @@ function accountForm(route: string) {
 type Interaction = {
   prompt: string;
   csrf: string;
+  // The address this interaction is waiting on, when it is waiting rather than
+  // asking. Empty on every other screen.
+  awaiting?: string;
   app: { id: string; title: string; description: string };
   scopes: string[];
   termsUri: string;
   privacyUri: string;
+  // The agreement's own text, so it can be read here rather than in another tab.
+  agreement?: {version: string; text: string} | null;
   action: string;
 };
 let interactionId = "";
 let interactionError = "";
+// Whether the link was just sent again, or pressed Continue before opening it.
+// They are about the wait, not about the person, so they travel in the address
+// where the address itself does not.
+let interactionResent = false;
+let interactionNotYet = false;
 let interaction: Interaction | null = null;
 let interactionFailed = false;
 
@@ -939,6 +1032,8 @@ function readInteraction() {
   if (!uid) return false;
   interactionId = uid;
   interactionError = parameters.get("error") || "";
+  interactionResent = parameters.get("resent") === "1";
+  interactionNotYet = parameters.get("notyet") === "1";
   // The id stays in the address while the screen is up. Taking it out looked
   // tidier and made the screen a trap: the address became "#/signin", so going
   // back to "#/signin" changed nothing, the document never reloaded, and the
@@ -961,12 +1056,14 @@ async function loadInteraction() {
   interaction = (await response.json()) as Interaction;
 }
 
-// A window that opened on its own, over the page somebody was on, owes them the
-// way out before it asks for anything. Naming the app they came from is also the
-// only thing on this screen that they can check against what they were doing a
-// second ago — which is exactly what a page asking for a password should offer.
-function returnNotice(asking: string) {
-  return `<p class="signin-return" role="note">When you are done, this window closes and takes you back to ${escape(asking)}.</p>`;
+
+// What the wait has to say beyond the address, if anything.
+function interactionWaitNotice() {
+  if (interactionNotYet)
+    return '<p class="fineprint">The link has not been opened yet. Open it, then press Continue again.</p>';
+  if (interactionResent)
+    return '<p class="fineprint">The link was sent again. Only the newest one works.</p>';
+  return "";
 }
 
 function interactionScreen() {
@@ -987,8 +1084,24 @@ function interactionScreen() {
   // sees your password" about itself is nonsense in the same family as offering
   // to sign in with Fidj on Fidj.
   const itself = details.app.id === config.appId;
-  const body =
-    details.prompt === "login"
+  // The wait, when this interaction is waiting on an address rather than asking
+  // for anything. It is not a refusal and must not be drawn as one: the account
+  // exists, the link was sent, and what is left is opening it. The address is
+  // read from the interaction's own context rather than from the URL, so
+  // nothing about the person travels in an address bar.
+  const body = details.awaiting
+    ? `<h2>Check your email</h2>
+  <p class="signin-lead">Your account is created. Waiting for you to open the link sent to <strong>${escape(details.awaiting)}</strong>.</p>
+  ${returnNotice(itself ? "Fidj" : asking)}
+  <form method="post" action="${escape(action)}" id="interaction">
+    <input type="hidden" name="csrf" value="${escape(details.csrf)}">
+    <p class="fineprint">The link may take a minute, and it sometimes lands in spam. Open it, then come back here.</p>
+    ${interactionWaitNotice()}
+    <button class="primary" type="submit" name="action" value="continue">Continue</button>
+    <button class="secondary" type="submit" name="action" value="resend">Send the link again</button>
+    <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
+  </form>`
+    : details.prompt === "login"
       ? `<h2>${itself ? "Sign in to Fidj" : "Sign in to continue to " + asking}</h2>
   <p class="signin-lead">${itself ? "One account across every app that uses Fidj, and a separate set of choices for each one." : `This is Fidj, the account behind ${asking}. One account, and separate choices for every app that uses it — ${asking} never sees your password.`}</p>
   ${returnNotice(itself ? "Fidj" : asking)}
@@ -1012,28 +1125,22 @@ function interactionScreen() {
     .join("")}</ul>
   <form method="post" action="${escape(action)}" id="interaction">
     <input type="hidden" name="csrf" value="${escape(details.csrf)}">
-    <label class="agreement-choice"><input type="checkbox" name="terms" value="true" required><span>I accept ${asking}'s service agreement.</span></label>
+    <label class="agreement-choice"><input type="checkbox" name="terms" value="true" required><span>${escape(agreementModel(details.app.title, {}).checkboxLabel)}</span></label>
+    ${details.agreement ? `<details class="agreement"><summary>Read service agreement</summary><p class="fineprint">Version ${escape(details.agreement.version)}</p><p>${escape(details.agreement.text)}</p></details><p class="fineprint">Required to sign in. Optional data choices stay separate.</p>` : ""}
     ${details.termsUri ? `<p class="fineprint"><a href="${escape(details.termsUri)}" target="_blank" rel="noopener noreferrer">Service agreement</a>${details.privacyUri ? ` · <a href="${escape(details.privacyUri)}" target="_blank" rel="noopener noreferrer">Privacy notice</a>` : ""}</p>` : ""}
     <button class="primary" type="submit" name="action" value="continue">Allow and continue</button>
     <button class="quiet" type="submit" id="not-me" name="action" value="switch" formnovalidate>Not you? Sign in with another account</button>
     <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
   </form>`;
 
-  root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain"><header class="signin-masthead"><img class="app-mark" src="${escape(config.logo)}" alt=""><strong>${escape(config.title)}</strong></header>
+  root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>Your identity.<br>Your choices.</h1><p class="signin-description">One account across every app that uses Fidj, and a separate set of choices for each one.</p></div>
-  ${highlights()}</div>
+  ${highlightCells(config.highlights)}</div>
   <div class="signin-form"><div>${body}</div>
   <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>What Fidj is</strong></p><p>Fidj holds your account so each app does not have to. You can see every app you use, what it holds, and take it back — at any time.</p></div></div>
-  ${badges()}</section>`;
+  ${badgeStrip(config.badges)}</section>`;
 
-  element("reveal")?.addEventListener("click", () => {
-    const field = element<HTMLInputElement>("password");
-    const button = element("reveal");
-    if (!field || !button) return;
-    const hidden = field.type === "password";
-    field.type = hidden ? "text" : "password";
-    button.textContent = hidden ? "Hide" : "Show";
-  });
+  if (element("interaction")) bindPasswordReveal(element("interaction")!);
   // Being recognised is the point, and a dead end when the person is not who
   // Fidj thinks — a shared computer, a second account, somebody else's tab. So
   // the screen that recognises them asks again on request. It goes back to the
@@ -1057,10 +1164,11 @@ function interactionScreen() {
 }
 
 function renderAccount(route: string) {
-  root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain"><header class="signin-masthead"><img class="app-mark" src="${escape(config.logo)}" alt=""><strong>${escape(config.title)}</strong></header>
+  root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>Your account.<br>Your control.</h1><p class="signin-description">Secure access to the apps you use, with one Fidj identity.</p></div>
   </div>
-  <div class="signin-form"><div>${banner()}${accountForm(route)}</div><footer class="signin-badges"><a href="#/signin">Back to sign in</a></footer></div></section>`;
+  <div class="signin-form"><div>${banner()}${accountForm(route, {linkToken, verificationConfirmed, emailVerified, accountEmail})}</div><footer class="signin-badges"><a href="#/signin">Back to sign in</a></footer></div></section>`;
+  bindPasswordReveal(root);
   wireAccount(route);
 }