@ofidj/generator-fidj 1.0.0 → 1.0.1

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

@@ -0,0 +1,416 @@
+import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
+import config from "../app.config.json";
+import "./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;
+const root = document.querySelector<HTMLDivElement>("#app")!;
+const appPath = `/me/apps/${encodeURIComponent(config.appId)}`;
+let signedIn = false;
+let emailVerified = false;
+let anonymous = false;
+let initialized = false;
+let roles: string[] = [];
+let consent: Record<string, boolean> = {};
+let history: Array<{ type: string; granted: boolean; changedAt: string }> = [];
+const departure = new URLSearchParams(window.location.search).get("departure");
+let message =
+  departure === "completed"
+    ? `You left ${config.title}. Your other memberships and shared identity remain.`
+    : departure === "pending"
+      ? "Access was revoked. Cleanup is queued; follow its progress in Fidj."
+      : "";
+let failed = false;
+let busy = false;
+let leaving = false;
+const accountRoutes = ["forgot", "reset", "verify", "account"];
+let linkToken = "";
+let verificationConfirmed = false;
+function currentRoute() {
+  const [route, query] = window.location.hash.slice(2).split("?");
+  if (["reset", "verify"].includes(route) && query) {
+    verificationConfirmed = false;
+    linkToken = new URLSearchParams(query).get("token") || "";
+    window.history.replaceState(null, "", "#/" + route);
+  }
+  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;
+async function request(path: string, method = "GET", data?: unknown) {
+  const token = await sdk.fidjGetIdToken();
+  const response = await fetch(config.apiEndpoint + path, {
+    method,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: data === undefined ? undefined : JSON.stringify(data),
+    signal: AbortSignal.timeout(10000),
+  });
+  const result = await response.json();
+  if (!response.ok) {
+    if ([401, 403].includes(response.status)) {
+      signedIn = false;
+      await sdk.logout(true);
+    }
+    throw new Error(result.message || result.status || "Please retry.");
+  }
+  return result;
+}
+async function refresh() {
+  const membership = await request(
+    `/apps/${encodeURIComponent(config.appId)}/me`,
+  );
+  roles = membership.roles.map((role: { type: string }) => role.type);
+  [consent, history] = await Promise.all([
+    request(appPath + "/consents"),
+    request(appPath + "/consents/history").then((result) => result.history),
+  ]);
+  emailVerified = (await request("/me")).user?.verified === true;
+  signedIn = true;
+}
+async function action(task: () => Promise<void>) {
+  if (busy) return;
+  busy = true;
+  root.setAttribute("aria-busy", "true");
+  root
+    .querySelectorAll<HTMLButtonElement | HTMLInputElement>("button, input")
+    .forEach((control) => {
+      control.disabled = true;
+    });
+  const submit = root.querySelector<HTMLButtonElement>("button.primary");
+  if (submit) submit.textContent = "Please wait…";
+  failed = false;
+  if (initialized) message = "";
+  try {
+    await task();
+  } catch (error) {
+    failed = true;
+    const detail = error as {
+      code?: number;
+      reason?: unknown;
+      message?: unknown;
+    };
+    if (detail.code === 429)
+      message = "Too many attempts. Please wait before trying again.";
+    else if (detail.message || detail.reason) {
+      let reason: any = detail.message || detail.reason;
+      try {
+        if (typeof reason === "string") reason = JSON.parse(reason);
+      } catch {}
+      message =
+        typeof reason === "string"
+          ? reason
+          : reason.message ||
+            reason.status ||
+            "The request could not be completed. Please retry.";
+    } else
+      message =
+        error instanceof Error
+          ? error.message
+          : "The request could not be completed. Please retry.";
+    if (
+      /jwt expired|session revoked|session expired|token.*expired/i.test(
+        message,
+      )
+    )
+      message = "Your session has ended. Please sign in again.";
+  } finally {
+    busy = false;
+    initialized = true;
+    root.setAttribute("aria-busy", "false");
+    render();
+  }
+}
+function navigate(route: string) {
+  window.history.replaceState(null, "", "#/" + route);
+  if (!busy) render();
+}
+function moduleRoute() {
+  const route = window.location.hash.slice(2).split("?")[0];
+  if (
+    !config.moduleEntry ||
+    !route ||
+    ["signin", "content", "privacy", ...accountRoutes].includes(route)
+  )
+    return null;
+  const target = new URL(config.moduleEntry, window.location.href);
+  target.hash = window.location.hash;
+  return target.href;
+}
+function render() {
+  if (!initialized) {
+    root.innerHTML = '<p role="status">Loading your session…</p>';
+    return;
+  }
+  const applicationRoute = moduleRoute();
+  if (applicationRoute) {
+    root.innerHTML = '<p role="status">Opening your app…</p>';
+    window.location.replace(applicationRoute);
+    return;
+  }
+  let route = currentRoute();
+  if (
+    !signedIn &&
+    !(config.allowAnonymous && anonymous) &&
+    !["forgot", "reset", "verify"].includes(route)
+  )
+    route = "signin";
+  else if (!["signin", "content", "privacy", ...accountRoutes].includes(route))
+    route = "content";
+  if (route === "privacy" && !signedIn) route = "signin";
+  window.history.replaceState(null, "", "#/" + route);
+  if (accountRoutes.includes(route)) {
+    renderAccount(route);
+    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");
+        }),
+    );
+    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>` : ""}
+  ${
+    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>`
+      : `
+  <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>
+  <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("")}
+  <h3>Consent history</h3>${
+    history.length
+      ? history
+          .slice()
+          .reverse()
+          .map(
+            (entry) =>
+              `<p>${escape(entry.type)} · ${entry.granted ? "Accepted" : "Withdrawn"} · ${escape(entry.changedAt)}</p>`,
+          )
+          .join("")
+      : "<p>No changes yet.</p>"
+  }
+  <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>`
+  }</section>`;
+  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>';
+  element<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const email = element<HTMLInputElement>("email")?.value || "";
+    const password = element<HTMLInputElement>("password")?.value || "";
+    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 });
+      await refresh();
+      anonymous = false;
+      navigate(signup ? "account" : "content");
+    });
+  });
+  element("refresh")?.addEventListener("click", () => void action(refresh));
+  element("signout")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await sdk.logout(true);
+        signedIn = false;
+        anonymous = false;
+        navigate("signin");
+      }),
+  );
+  element("terms")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await request(appPath + "/consents", "PUT", {
+          terms: true,
+          termsVersion: "starter-demo-1",
+          source: "profile",
+        });
+        await refresh();
+      }),
+  );
+  root.querySelectorAll<HTMLInputElement>("[data-purpose]").forEach((input) =>
+    input.addEventListener(
+      "change",
+      () =>
+        void action(async () => {
+          await request(appPath + "/consents", "PUT", {
+            [input.dataset.purpose!]: input.checked,
+            source: "profile",
+          });
+          await refresh();
+          message = "Saved for this app.";
+        }),
+    ),
+  );
+  element("export")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        const data = await request(appPath + "/export");
+        const url = URL.createObjectURL(
+          new Blob([JSON.stringify(data, null, 2)], {
+            type: "application/json",
+          }),
+        );
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${config.appId}-my-data.json`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        message = "Export downloaded.";
+      }),
+  );
+  element("leave")?.addEventListener("click", () => {
+    leaving = true;
+    render();
+  });
+  element("cancel-leave")?.addEventListener("click", () => {
+    leaving = false;
+    render();
+  });
+  element("confirm-leave")?.addEventListener("click", () => {
+    void action(async () => {
+      const result = await request(appPath, "DELETE", {
+        confirm: config.appId,
+      });
+      await sdk.logout(true);
+      signedIn = false;
+      anonymous = false;
+      leaving = false;
+      message =
+        result.status === "pending"
+          ? "Access revoked. Storage cleanup is pending; contact the app owner."
+          : "You left this app. Your other memberships remain available.";
+    });
+  });
+}
+
+function renderAccount(route: string) {
+  const notice = message
+    ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>`
+    : "";
+  const form =
+    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>`;
+  element("continue-app")?.addEventListener("click", () => navigate("content"));
+  element("check-verification")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        const result = await request("/me");
+        emailVerified = result.user?.verified === true;
+        message = emailVerified
+          ? "Your email address is verified."
+          : "Your email is not verified yet. Request a verification email below.";
+      }),
+  );
+  element("resend-verification")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await sdk.resendVerification();
+        message =
+          "Verification email sent. Open the link and confirm your address. If it does not arrive, check your spam folder.";
+      }),
+  );
+  element<HTMLFormElement>("recovery")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const email = element<HTMLInputElement>("recovery-email")?.value || "";
+    const password = element<HTMLInputElement>("new-password")?.value || "";
+    const confirmation =
+      element<HTMLInputElement>("confirm-password")?.value || "";
+    void action(async () => {
+      if (route === "forgot") {
+        await sdk.fidjForgotPasswordRequest(email);
+        message =
+          "If an account matches that email, a reset link is on its way. Check your inbox and spam folder.";
+      } else if (route === "reset") {
+        if (password !== confirmation)
+          throw new Error("The passwords do not match.");
+        if (new TextEncoder().encode(password).length > 72)
+          throw new Error(
+            "Use a shorter password: the limit is 72 UTF-8 bytes.",
+          );
+        await sdk.resetPassword({ token: linkToken, password });
+        linkToken = "";
+        signedIn = false;
+        anonymous = false;
+        message =
+          "Your password has been changed. Sign in with your new password.";
+        navigate("signin");
+      } else {
+        await sdk.verifyEmail({ token: linkToken });
+        verificationConfirmed = true;
+        linkToken = "";
+        message =
+          "Your email address is now verified. You can return to your app.";
+      }
+    });
+  });
+}
+window.addEventListener("hashchange", render);
+render();
+void action(async () => {
+  if (oidc && new URL(window.location.href).searchParams.has("state")) {
+    const callback = new URL(window.location.href);
+    window.history.replaceState(null, "", window.location.pathname + "#/content");
+    await oidc.completeLogin(callback);
+  }
+  await sdk.init(config.appId, {
+    apiEndpoint: config.apiEndpoint,
+    prod: !config.localDemo,
+  });
+  if (sdk.isLoggedIn()) {
+    await refresh();
+    if (!moduleRoute() && !accountRoutes.includes(currentRoute()))
+      navigate("content");
+  }
+});

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

@@ -0,0 +1,243 @@
+import { FidjNodeService } from "@ofidj/node";
+import "./style.css";
+
+type Session = { username: string; roles: string[] };
+type Note = { id: string; title: string; body: string; createdAt: string };
+type Settings = {
+  title: string;
+  appId: string;
+  apiEndpoint: string;
+  dashboardUrl: string;
+  localDemo: boolean;
+};
+const root = document.querySelector<HTMLDivElement>("#app")!;
+const sdk = new FidjNodeService();
+let settings: Settings;
+let session: Session | null = null;
+let notes: Note[] = [];
+let privacy: {
+  consent: Record<string, boolean>;
+  history: Array<{ type: string; granted: boolean; changedAt: string }>;
+} | null = null;
+let view = "workspace";
+let notice = "";
+let error = "";
+let busy = false;
+const escape = (value: unknown) =>
+  String(value ?? "").replace(
+    /[&<>"']/g,
+    (char) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        char
+      ]!,
+  );
+const el = <T extends HTMLElement>(id: string) =>
+  document.getElementById(id) as T;
+async function api(path: string, method = "GET", data?: unknown) {
+  const token = await sdk.fidjGetIdToken();
+  const response = await fetch("/api/" + path, {
+    method,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: data === undefined ? undefined : JSON.stringify(data),
+  });
+  const result = await response.json();
+  if (!response.ok) {
+    if (response.status === 401) {
+      session = null;
+      await sdk.logout(true);
+    }
+    throw new Error(result.message || "Please retry.");
+  }
+  return result;
+}
+async function load() {
+  session = await api("session");
+  [notes, privacy] = await Promise.all([
+    api("notes").then((result) => result.notes),
+    api("privacy"),
+  ]);
+}
+async function action(task: () => Promise<void>) {
+  if (busy) return;
+  busy = true;
+  error = "";
+  notice = "";
+  try {
+    await task();
+  } catch (reason) {
+    error = reason instanceof Error ? reason.message : String(reason);
+  } finally {
+    busy = false;
+    render();
+  }
+}
+function render() {
+  document.title = settings.title + " · Fidj";
+  const canWrite = session?.roles.some((role) =>
+    ["Owner", "Editor"].includes(role),
+  );
+  root.innerHTML = `<header class="topbar"><a class="brand" href="/"><span class="app-symbol">✳</span>${escape(settings.title)}</a><a class="fidj-brand" href="${escape(settings.dashboardUrl)}" target="_blank" rel="noopener"><img src="/fidj-logo.png" alt="Fidj">Privacy with Fidj ↗</a></header>
+  <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>`
+      : `
+  <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>
+  ${
+    view === "workspace"
+      ? `<section class="workspace"><div><div class="section-heading"><h2>Your notes</h2><span>${notes.length} saved</span></div>${notes.length ? notes.map((note) => `<article class="card note"><small>${escape(new Date(note.createdAt).toLocaleString())}</small><h3>${escape(note.title)}</h3><p>${escape(note.body)}</p></article>`).join("") : `<article class="card empty"><span>✳</span><h3>Room for your next idea.</h3><p>Your saved notes will appear here. Only you can read your notes.</p></article>`}</div><form id="note" class="card"><p class="eyebrow">CAPTURE SOMETHING</p><h2>A fresh note</h2><p>${canWrite ? "You have permission to save notes." : "Ask your app owner for Editor access to save notes."}</p><label for="note-title">Title</label><input id="note-title" maxlength="120" required ${!canWrite ? "disabled" : ""}><label for="note-body">Your note</label><textarea id="note-body" rows="6" maxlength="5000" ${!canWrite ? "disabled" : ""}></textarea><button class="primary" type="submit" ${!canWrite ? "disabled" : ""}>Save note</button><small>Your notes are saved by this app and survive a server restart.</small></form></section>`
+      : `<section class="privacy-grid"><article class="card"><p class="eyebrow">ONLY ${escape(settings.title).toUpperCase()}</p><h2>Your choices in this app</h2><p>These preferences are independent of Fidj and your other apps.</p><div class="agreement"><strong>Service agreement</strong><span>${privacy?.consent.terms ? "Accepted" : "Not recorded"}</span>${!privacy?.consent.terms ? '<p>This starter uses a demo agreement. Accept it to record your choice.</p><button id="accept-terms">Accept demo agreement</button>' : "<p>Leaving this app withdraws its required agreement.</p>"}</div>${["analytics", "communications", "optionalData"].map((key, index) => `<label class="toggle"><span><strong>${["Analytics", "Communications", "Optional data"][index]}</strong><small>${["Help improve this app.", "Receive optional news and updates.", "Allow data beyond the essential service."][index]}</small></span><input type="checkbox" data-purpose="${key}" ${privacy?.consent[key] ? "checked" : ""}></label>`).join("")}<button id="export">Export my data</button></article><article class="card"><h2>Consent history</h2>${
+          privacy?.history.length
+            ? privacy.history
+                .slice()
+                .reverse()
+                .map(
+                  (entry) =>
+                    `<p><strong>${escape(entry.type)}</strong> · ${entry.granted ? "Accepted" : "Withdrawn"}<br><small>${escape(new Date(entry.changedAt).toLocaleString())}</small></p>`,
+                )
+                .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>`
+  }`
+  }
+  <footer>Built with Fidj · One identity. Separate choices for every app.</footer></main>`;
+  el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const email = el<HTMLInputElement>("email").value;
+    const password = el<HTMLInputElement>("password").value;
+    void action(async () => {
+      await sdk.login(email, password, { autoSignup: false });
+      await load();
+    });
+  });
+  root.querySelectorAll<HTMLButtonElement>("[data-demo]").forEach((button) =>
+    button.addEventListener("click", () => {
+      el<HTMLInputElement>("email").value = button.dataset.demo + "@fidj.local";
+      el<HTMLInputElement>("password").value =
+        button.dataset.demo === "alex"
+          ? "local-demo-only"
+          : "local-member-only";
+    }),
+  );
+  el("signout")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await sdk.logout(true);
+        session = null;
+        notes = [];
+        privacy = null;
+      }),
+  );
+  el("workspace-tab")?.addEventListener("click", () => {
+    view = "workspace";
+    render();
+  });
+  el("privacy-tab")?.addEventListener("click", () => {
+    view = "privacy";
+    render();
+  });
+  el("refresh")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await load();
+        notice = "Access and preferences refreshed.";
+      }),
+  );
+  el<HTMLFormElement>("note")?.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const data = {
+      title: el<HTMLInputElement>("note-title").value,
+      body: el<HTMLTextAreaElement>("note-body").value,
+    };
+    void action(async () => {
+      await api("notes", "POST", data);
+      await load();
+      notice = "Note saved.";
+    });
+  });
+  root.querySelectorAll<HTMLInputElement>("[data-purpose]").forEach((input) =>
+    input.addEventListener(
+      "change",
+      () =>
+        void action(async () => {
+          await api("privacy", "PUT", {
+            [input.dataset.purpose!]: input.checked,
+          });
+          await load();
+          notice = "Saved for this app. Your other apps are unchanged.";
+        }),
+    ),
+  );
+  el("accept-terms")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        await api("privacy", "PUT", { terms: true });
+        await load();
+        notice = "Demo agreement accepted.";
+      }),
+  );
+  el("export")?.addEventListener(
+    "click",
+    () =>
+      void action(async () => {
+        const data = await api("privacy/export");
+        const url = URL.createObjectURL(
+          new Blob([JSON.stringify(data, null, 2)], {
+            type: "application/json",
+          }),
+        );
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `${settings.appId}-my-data.json`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+        notice = "Exported your membership, choices and notes.";
+      }),
+  );
+  el("leave")?.addEventListener("click", () => {
+    if (
+      !confirm(
+        `Leave ${settings.title}? Your membership, consent and notes here will be removed. Other apps remain available.`,
+      )
+    )
+      return;
+    void action(async () => {
+      const result = await api("privacy/leave", "DELETE", {
+        confirm: settings.appId,
+      });
+      await sdk.logout(true);
+      session = null;
+      notes = [];
+      privacy = null;
+      notice =
+        result.status === "pending"
+          ? "Access revoked. Cleanup is pending. Open My privacy on Fidj and choose Retry cleanup."
+          : "You left this app. Its membership and registered app data were erased. Your other apps are unchanged.";
+    });
+  });
+}
+async function start() {
+  try {
+    settings = await (await fetch("/api/config")).json();
+    await sdk.init(settings.appId, {
+      apiEndpoint: settings.apiEndpoint,
+      prod: !settings.localDemo,
+    });
+    if (sdk.isLoggedIn()) await load();
+  } catch (reason) {
+    error =
+      reason instanceof Error ? reason.message : "Cannot connect to Fidj.";
+  }
+  if (settings) render();
+  else
+    root.textContent =
+      "This app could not load. Please check the server and retry.";
+}
+void start();