@ofidj/generator-fidj 1.0.1 → 1.0.3

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} from "./service-agreement";
 import { FidjNodeService } from "@ofidj/node";
 import "./style.css";
 
@@ -23,6 +24,7 @@ let view = "workspace";
 let notice = "";
 let error = "";
 let busy = false;
+let leaving = false;
 const escape = (value: unknown) =>
   String(value ?? "").replace(
     /[&<>"']/g,
@@ -83,7 +85,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" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" autocomplete="current-password" required>${agreementMarkup()}<button class="primary" type="submit" disabled>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 +103,19 @@ 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);
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
+    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
+    if (!acceptance) return;
     const email = el<HTMLInputElement>("email").value;
     const password = el<HTMLInputElement>("password").value;
     void action(async () => {
-      await sdk.login(email, password, { autoSignup: false });
+      await sdk.login(email, password, { autoSignup: false, ...acceptance });
       await load();
     });
   });
@@ -202,12 +207,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 +223,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,40 @@
+export function agreementMarkup() {
+  return `<div class="signin-agreement"><label class="agreement-choice"><input id="service-agreement" type="checkbox" required 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 async function bindAgreement(form: HTMLFormElement | null, title: string, endpoint: string, appId: string) {
+  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 = !acceptedAgreement(form); });
+  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;
+    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.";
+  }
+}