@ofidj/generator-fidj 1.0.1 → 1.0.4

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

@@ -1,3 +1,4 @@
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
 import "./style.css";
@@ -23,6 +24,9 @@ let message =
 let failed = false;
 let busy = false;
 let leaving = false;
+let signInEmail = "";
+let signInPassword = "";
+let signInAgreementAccepted = false;
 const accountRoutes = ["forgot", "reset", "verify", "account"];
 let linkToken = "";
 let verificationConfirmed = false;
@@ -45,6 +49,56 @@ const escape = (value: unknown) =>
   );
 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>`;
+}
+function banner() {
+  return message
+    ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>`
+    : "";
+}
+
+// One navigation bar for every in-app screen, so signing out stays one click
+// away wherever you are. The sign-in entry and the pre-authentication account
+// screens are full-bleed and carry none.
+function appNav(current: "content" | "privacy" | "account") {
+  const tab = (id: string, label: string, selected: boolean) =>
+    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}>${label}</button>`;
+  return `<nav class="content-nav" aria-label="App navigation">${tab("content-tab", "Content", current === "content")}${tab("privacy-tab", signedIn ? "My privacy" : "Sign in", current === "privacy")}${signedIn ? tab("account-tab", "My account", current === "account") : ""}${tab("exit", signedIn ? "Sign out" : "Back to sign in", false)}</nav>`;
+}
+
+function wireNav() {
+  element("content-tab")?.addEventListener("click", () => navigate("content"));
+  element("account-tab")?.addEventListener("click", () => navigate("account"));
+  element("privacy-tab")?.addEventListener("click", () =>
+    navigate(signedIn ? "privacy" : "signin"),
+  );
+  element("exit")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        if (signedIn) await sdk.logout(true);
+        signedIn = false;
+        anonymous = false;
+        navigate("signin");
+      }),
+  );
+}
+
+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, {
@@ -169,44 +223,46 @@ function render() {
     route = "content";
   if (route === "privacy" && !signedIn) route = "signin";
   window.history.replaceState(null, "", "#/" + route);
-  if (accountRoutes.includes(route)) {
+  // My account is a signed-in screen and keeps the app's chrome. Recovery and
+  // verification are reached without a session, so they stand alone.
+  const standaloneAccount =
+    accountRoutes.includes(route) && !(route === "account" && signedIn);
+  document.body.classList.toggle(
+    "signin-view",
+    route === "signin" || standaloneAccount,
+  );
+  if (standaloneAccount) {
     renderAccount(route);
     return;
   }
+  if (route === "account") {
+    root.innerHTML = `${appNav("account")}<section class="card content-account">${banner()}${accountForm("account")}</section>`;
+    wireNav();
+    wireAccount("account");
+    return;
+  }
   if (route === "content" && config.moduleEntry) {
     root.innerHTML = '<p role="status">Opening your app…</p>';
     window.location.assign(config.moduleEntry);
     return;
   }
   if (route === "content") {
-    root.innerHTML = `<nav class="content-nav" aria-label="App navigation"><button id="content-tab" class="selected" aria-current="page">Content</button><button id="privacy-tab">${signedIn ? "My privacy" : "Sign in"}</button><button id="account-tab">My account</button><button id="exit">${signedIn ? "Sign out" : "Back to sign in"}</button></nav>${element<HTMLTemplateElement>("public-content")!.innerHTML}`;
-    element("account-tab")!.addEventListener("click", () =>
-      navigate("account"),
-    );
-    element("privacy-tab")!.addEventListener("click", () =>
-      navigate(signedIn ? "privacy" : "signin"),
-    );
-    element("exit")!.addEventListener(
-      "click",
-      () =>
-        void action(async () => {
-          if (signedIn) await sdk.logout(true);
-          signedIn = false;
-          anonymous = false;
-          navigate("signin");
-        }),
-    );
+    root.innerHTML = `${appNav("content")}${element<HTMLTemplateElement>("public-content")!.innerHTML}`;
+    wireNav();
     return;
   }
-  root.innerHTML = `<section class="${route === "signin" ? "signin-shell" : "card content-account"}">
-  ${message ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>` : ""}
+  root.innerHTML = `${route === "signin" ? "" : appNav("privacy")}<section class="${route === "signin" ? "signin-shell" : "card content-account"}">
+  ${route === "signin" ? "" : banner()}
   ${
     route === "signin"
-      ? `<div class="signin-intro"><p class="eyebrow">${escape(config.title)}</p><h1>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p><div class="signin-trust"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><div><strong>Your account, with Fidj</strong><p>One identity. Your own choices for every app.</p></div></div></div>
-  <div class="signin-form"><h2>Welcome back</h2><p>Sign in to continue to ${escape(config.title)}.</p><form id="signin"><label for="email">Email address</label><input id="email" type="email" placeholder="you@example.com" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" autocomplete="current-password" required><button class="primary" type="submit">Sign in</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button></form><a href="#/forgot">Forgot your password?</a>${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>`
+      ? `<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>
+  <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>` : ""}
+  <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>`
       : `
-  <button id="back-content">← Content</button><h2>My privacy in ${escape(config.title)}</h2><p>Roles: ${roles.map(escape).join(" · ") || "No assigned roles"}</p><button id="refresh">Refresh access</button><button id="signout">Sign out</button>
+  <h2>My privacy in ${escape(config.title)}</h2><p>Roles: ${roles.map(escape).join(" · ") || "No assigned roles"}</p><button id="refresh">Refresh access</button>
   <p>These choices apply only to this app.${config.allowAnonymous ? " You can also view the public content by entering anonymously." : ""}</p>
   <p>Service agreement: ${consent.terms ? "Accepted" : "Not recorded"}. ${consent.terms ? "Leaving withdraws this agreement." : 'This generated example uses a demo agreement. <button id="terms">Accept demo agreement</button>'}</p>
   ${["analytics", "communications", "optionalData"].map((key, i) => `<label class="toggle"><span>${["Analytics", "Communications", "Optional data"][i]}</span><input type="checkbox" data-purpose="${key}" ${consent[key] ? "checked" : ""}></label>`).join("")}
@@ -225,26 +281,53 @@ function render() {
   <button id="export">Export my app data</button>
   <p>This app stores its session in this browser. The export covers Fidj-held records for this membership. There is no separate app database in this static template.</p>
   ${roles.includes("Owner") ? "<p>Resolve app ownership before leaving.</p>" : leaving ? '<p>Confirm departure: your membership and its Fidj-held data will be removed. Your other apps remain available.</p><button id="confirm-leave" class="danger">Confirm leaving this app</button><button id="cancel-leave">Keep my membership</button>' : '<button id="leave" class="danger">Leave this app</button>'}
-  <p><a href="${escape(config.dashboardUrl)}/#/my">Manage my apps and privacy on Fidj ↗</a></p>`
+  <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>`
   }</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;
     navigate("content");
   });
-  element("back-content")?.addEventListener("click", () => navigate("content"));
-  if (oidc && element("signin")) element("signin")!.innerHTML = '<p>Continue securely with your Fidj account. Your password stays with Fidj.</p><button class="primary" type="submit">Continue with Fidj</button>';
+  if (oidc && element("signin")) element("signin")!.innerHTML = agreementMarkup() + '<p>Continue securely with your Fidj account. Your password stays with Fidj.</p><button class="primary" type="submit">Continue with Fidj</button>';
+  void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
   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");
+    signInEmail = email;
+    signInPassword = password;
+    signInAgreementAccepted = agreement?.checked === true;
+    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
+    if (!acceptance) {
+      failed = true;
+      message = "Please accept the service agreement before continuing.";
+      render();
+      return;
+    }
     const signup = (event.submitter as HTMLButtonElement)?.name === "signup";
     void action(async () => {
       if (oidc) {window.location.assign(await oidc.beginLogin()); return;}
-      await sdk.login(email, password, { autoSignup: signup });
+      try {
+        await sdk.login(email, password, { autoSignup: signup, ...acceptance });
+      } catch (error) {
+        throw new Error(signInErrorMessage(error));
+      }
       await refresh();
       anonymous = false;
-      navigate(signup ? "account" : "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");
     });
   });
   element("refresh")?.addEventListener("click", () => void action(refresh));
@@ -264,7 +347,7 @@ function render() {
       void action(async () => {
         await request(appPath + "/consents", "PUT", {
           terms: true,
-          termsVersion: "starter-demo-1",
+          cguVersion: "starter-demo-1",
           source: "profile",
         });
         await refresh();
@@ -327,19 +410,27 @@ function render() {
   });
 }
 
-function renderAccount(route: string) {
-  const notice = message
-    ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>`
-    : "";
-  const form =
-    route === "forgot"
+// The four account screens. My account is shown inside the app; the recovery
+// and verification ones are reached without a session and stand alone.
+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>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><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button>`;
-  root.innerHTML = `<section class="signin-shell"><div class="signin-intro"><p class="eyebrow">${escape(config.title)}</p><h1>Your account.<br>Your control.</h1><p class="signin-description">Secure access to the apps you use, with one Fidj identity.</p><div class="signin-trust"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><p>You choose what you share.</p></div></div><div class="signin-form">${notice}${form}<p><a href="#/signin">Back to sign in</a></p></div></section>`;
+}
+
+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>
+  <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>`;
+  wireAccount(route);
+}
+
+function wireAccount(route: string) {
   element("continue-app")?.addEventListener("click", () => navigate("content"));
   element("check-verification")?.addEventListener(
     "click",

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

@@ -0,0 +1,92 @@
+/* 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/main.ts

@@ -1,3 +1,4 @@
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
 import { FidjNodeService } from "@ofidj/node";
 import "./style.css";
 
@@ -23,6 +24,10 @@ let view = "workspace";
 let notice = "";
 let error = "";
 let busy = false;
+let leaving = false;
+let signInEmail = "";
+let signInPassword = "";
+let signInAgreementAccepted = false;
 const escape = (value: unknown) =>
   String(value ?? "").replace(
     /[&<>"']/g,
@@ -83,7 +88,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><p>Sign in with your Fidj account.</p><label for="email">Email</label><input id="email" type="email" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" autocomplete="current-password" required><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>`
+      ? `<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><p>Sign in with your Fidj account.</p><label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" value="${escape(signInPassword)}" autocomplete="current-password" required>${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>`
       : `
   <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>
@@ -101,16 +106,30 @@ function render() {
                 )
                 .join("")
             : "<p>No changes yet.</p>"
-        }<hr><h2>Leave this app</h2><p>This removes your app membership and this starter’s notes. Your Fidj account and other memberships remain.</p>${session.roles.includes("Owner") ? "<p>As the app owner, resolve ownership before leaving.</p>" : '<button id="leave" class="danger">Leave and erase my app data</button>'}<p class="fineprint">Exports here include your Fidj membership and this starter’s notes. The registered app-data handler lets Fidj export and erase these notes too. If cleanup is pending, retry from My privacy on Fidj. Minimal completion receipts are retained; backups and unregistered systems are outside this operation.</p></article></section>`
+        }<hr><h2>Leave this app</h2><p>This removes your app membership and this starter’s notes. Your Fidj account and other memberships remain.</p>${session.roles.includes("Owner") ? "<p>As the app owner, resolve ownership before leaving.</p>" : leaving ? '<div role="alertdialog" aria-labelledby="leave-title"><h3 id="leave-title">Confirm departure</h3><p>Your membership, consent and notes in this app will be removed. Your Fidj account and other apps remain available.</p><button id="confirm-leave" class="danger">Confirm leaving and erase</button><button id="cancel-leave">Keep my membership</button></div>' : '<button id="leave" class="danger">Leave and erase my app data</button>'}<p class="fineprint">Exports here include your Fidj membership and this starter’s notes. The registered app-data handler lets Fidj export and erase these notes too. If cleanup is pending, retry from My privacy on Fidj. Minimal completion receipts are retained; backups and unregistered systems are outside this operation.</p></article></section>`
   }`
   }
   <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);
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
     const email = el<HTMLInputElement>("email").value;
     const password = el<HTMLInputElement>("password").value;
+    signInEmail = email;
+    signInPassword = password;
+    signInAgreementAccepted = el<HTMLInputElement>("service-agreement").checked;
+    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
+    if (!acceptance) {
+      error = "Please accept the service agreement before continuing.";
+      render();
+      return;
+    }
     void action(async () => {
-      await sdk.login(email, password, { autoSignup: false });
+      try {
+        await sdk.login(email, password, { autoSignup: false, ...acceptance });
+      } catch (reason) {
+        throw new Error(signInErrorMessage(reason));
+      }
       await load();
     });
   });
@@ -202,12 +221,14 @@ function render() {
       }),
   );
   el("leave")?.addEventListener("click", () => {
-    if (
-      !confirm(
-        `Leave ${settings.title}? Your membership, consent and notes here will be removed. Other apps remain available.`,
-      )
-    )
-      return;
+    leaving = true;
+    render();
+  });
+  el("cancel-leave")?.addEventListener("click", () => {
+    leaving = false;
+    render();
+  });
+  el("confirm-leave")?.addEventListener("click", () => {
     void action(async () => {
       const result = await api("privacy/leave", "DELETE", {
         confirm: settings.appId,
@@ -216,6 +237,7 @@ function render() {
       session = null;
       notes = [];
       privacy = null;
+      leaving = false;
       notice =
         result.status === "pending"
           ? "Access revoked. Cleanup is pending. Open My privacy on Fidj and choose Retry cleanup."

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

@@ -0,0 +1,51 @@
+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></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;
+  const checkbox = form.querySelector<HTMLInputElement>("#service-agreement")!;
+  const read = form.querySelector<HTMLButtonElement>("#read-agreement")!;
+  const dialog = form.querySelector<HTMLDialogElement>("#agreement-dialog")!;
+  const status = form.querySelector<HTMLElement>("#agreement-status")!;
+  const submitButtons = form.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());
+  try {
+    const response = await fetch(`${endpoint}/apps/${encodeURIComponent(appId)}`, {signal: AbortSignal.timeout(10000)});
+    if (!response.ok) throw new Error("Agreement unavailable");
+    const agreement = (await response.json()).app?.agreement;
+    if (!agreement || typeof agreement.version !== "string" || !agreement.version || typeof agreement.text !== "string" || !agreement.text) throw new Error("Agreement unavailable");
+    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 {
+    if (form.isConnected) status.textContent = "The service agreement could not be loaded. Reload this page to try again.";
+  }
+}