@ofidj/generator-fidj 1.0.10 → 1.2.0

package/generators/app/templates/typescript/app.config.json

@@ -6,6 +6,7 @@
   "localDemo": false,
   "allowAnonymous": true,
   "moduleEntry": "",
+  "moduleMount": null,
   "description": "A space to explore, with an account that puts you in control.",
   "highlights": [],
   "badges": [],

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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
 import "./style.css";
@@ -58,10 +58,20 @@ function badges() {
     .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
+// where the rest of it lives — on a shared computer the difference is the whole
+// point.
+let leftTheApp = false;
 function banner() {
-  return message
-    ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>`
+  if (!message) return "";
+  const role = failed ? "alert" : "status";
+  const kind = failed ? "error" : "notice";
+  const finish = leftTheApp
+    ? ` <a href="${escape(config.dashboardUrl)}/#/my/profile" target="_blank" rel="noopener">Sign out of Fidj too</a>`
     : "";
+  return `<p role="${role}" class="${kind}">${escape(message)}${finish}</p>`;
 }
 
 // One navigation bar for every in-app screen, so signing out stays one click
@@ -83,9 +93,15 @@ function wireNav() {
     "click",
     () =>
       void action(async () => {
+        const wasSignedIn = signedIn;
         if (signedIn) await sdk.logout(true);
+        forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
+        if (wasSignedIn) {
+          leftTheApp = true;
+          message = `Signed out of ${config.title}. You are still signed in to Fidj.`;
+        }
         navigate("signin");
       }),
   );
@@ -131,8 +147,13 @@ async function refresh() {
     request(appPath + "/consents"),
     request(appPath + "/consents/history").then((result) => result.history),
   ]);
-  emailVerified = (await request("/me")).user?.verified === true;
+  const me = (await request("/me")).user;
+  emailVerified = me?.verified === true;
   signedIn = true;
+  // The ID token of a code flow carries only the subject, by design, so the
+  // address the entry can offer next time comes from the membership the app
+  // just read — not from a claim it does not have.
+  rememberSignIn(config.appId, String(me?.poc?.email || me?.username || ""));
 }
 async function action(task: () => Promise<void>) {
   if (busy) return;
@@ -146,7 +167,10 @@ async function action(task: () => Promise<void>) {
   const submit = root.querySelector<HTMLButtonElement>("button.primary");
   if (submit) submit.textContent = "Please wait…";
   failed = false;
-  if (initialized) message = "";
+  if (initialized) {
+    message = "";
+    leftTheApp = false;
+  }
   try {
     await task();
   } catch (error) {
@@ -187,8 +211,13 @@ async function action(task: () => Promise<void>) {
     render();
   }
 }
+// A person moving between screens is making history, so push an entry: Back has
+// to return to the screen before, not to whatever preceded the application.
+// Replacing is right everywhere else in this file — stripping a single-use token
+// out of the address, correcting a route the person did not choose, and clearing
+// the sign-in callback — because none of those is a place they navigated to.
 function navigate(route: string) {
-  window.history.replaceState(null, "", "#/" + route);
+  if (route !== currentRoute()) window.history.pushState(null, "", "#/" + route);
   if (!busy) render();
 }
 function moduleRoute() {
@@ -199,19 +228,60 @@ function moduleRoute() {
     ["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;
+  return route;
+}
+// The mounted app starts inside this document, at this address. It used to be a
+// second document under /module/, which put a generator word in the address bar
+// and reloaded the page in the middle of signing in. Starting it here costs one
+// insertion and is not undone: the app owns the document from then on, and
+// leaving it (signing out) reloads the shell from its own address.
+let moduleStarted = false;
+function startModule() {
+  if (moduleStarted) return;
+  const mount = config.moduleMount as unknown as {
+    styles: string[];
+    scripts: Array<{ src: string; module: boolean }>;
+    markup: string;
+  } | null;
+  if (!mount) return;
+  moduleStarted = true;
+  document.body.classList.add("has-module");
+  // The app takes the whole document, not a corner of the shell's. A built
+  // single-page app positions itself against the body — Ionic, for one, fixes
+  // the body and scrolls inside its own container — so leaving the shell's
+  // header and <main> wrapper around it produces a page that cannot scroll and
+  // a second header above its own.
+  document.body.replaceChildren(
+    new Range().createContextualFragment(mount.markup),
+  );
+  for (const href of mount.styles) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    document.head.appendChild(link);
+  }
+  for (const script of mount.scripts) {
+    const element = document.createElement("script");
+    if (script.module) element.type = "module";
+    element.src = script.src;
+    document.body.appendChild(element);
+  }
 }
 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);
+  // Which of its routes need a session is the mounted app's business, not the
+  // shell's: Fidj's own console serves /pub to anyone. So any address the shell
+  // does not own is handed over as it stands.
+  if (moduleRoute()) {
+    startModule();
+    return;
+  }
+  // The mounted app has taken the document; the shell cannot draw over it.
+  if (moduleStarted) {
+    window.location.reload();
     return;
   }
   let route = currentRoute();
@@ -299,7 +369,12 @@ function render() {
     anonymous = true;
     navigate("content");
   });
-  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>';
+  if (oidc && element("signin"))
+    element("signin")!.innerHTML = providerEntry(config.title, config.appId);
+  element("forget-hint")?.addEventListener("click", () => {
+    forgetSignIn(config.appId);
+    render();
+  });
   void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
   element<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
@@ -338,8 +413,11 @@ function render() {
     () =>
       void action(async () => {
         await sdk.logout(true);
+        forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
+        leftTheApp = true;
+        message = `Signed out of ${config.title}. You are still signed in to Fidj.`;
         navigate("signin");
       }),
   );

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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import "./style.css";
 import { showVersionBadge } from "./version";
@@ -66,6 +66,9 @@ async function api(path: string, method = "GET", data?: unknown) {
 }
 async function load() {
   session = await api("session");
+  // Remembered on this app's own origin so the entry can offer to continue as
+  // them next time; signing out forgets it.
+  if (session?.username) rememberSignIn(settings.appId, session.username);
   [notes, privacy] = await Promise.all([
     api("notes").then((result) => result.notes),
     api("privacy"),
@@ -94,7 +97,7 @@ function render() {
   <main>${notice ? `<p class="notice" role="status">${escape(notice)}</p>` : ""}${error ? `<p class="error" role="alert">${escape(error)}</p>` : ""}
   ${
     !session
-      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? `<p>Continue securely with your Fidj account. Your password stays with Fidj.</p>${agreementMarkup()}<button class="primary" type="submit">Continue with Fidj</button>` : `<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>`
+      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId) : `<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>
@@ -157,6 +160,7 @@ function render() {
     () =>
       void action(async () => {
         await sdk.logout(true);
+        forgetSignIn(settings.appId);
         session = null;
         notes = [];
         privacy = null;

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

@@ -60,3 +60,55 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
   retry.addEventListener("click", load);
   await load();
 }
+
+// The entry every app that delegates to the provider renders, in one place
+// because both app shapes render it and they had drifted apart.
+//
+// "Continue with Fidj" alone borrows the grammar of an optional social login —
+// that button always sits next to an email and a password — so on an app whose
+// accounts *are* Fidj accounts, the missing form reads as something broken. The
+// explanation therefore comes before the button, not as reassurance after it,
+// and nothing presupposes an account the person may not have yet.
+const hintKey = (appId: string) => "fidj.entry." + appId;
+
+export function signInHint(appId: string) {
+  try {
+    return localStorage.getItem(hintKey(appId)) || "";
+  } catch {
+    return "";
+  }
+}
+
+// Remembered on this app's own origin, about this app's own member: no
+// cross-site question is asked, and none is answered. Signing out forgets, so a
+// shared browser does not show the next person an address.
+export function rememberSignIn(appId: string, label: string) {
+  try {
+    if (label) localStorage.setItem(hintKey(appId), label);
+  } catch {}
+}
+
+export function forgetSignIn(appId: string) {
+  try {
+    localStorage.removeItem(hintKey(appId));
+  } catch {}
+}
+
+export function providerEntry(title: string, appId: string) {
+  const escapeText = (value: unknown) =>
+    String(value ?? "").replace(
+      /[&<>"']/g,
+      (char) =>
+        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+          char
+        ]!,
+    );
+  const hint = signInHint(appId);
+  const lead = hint
+    ? `<p class="signin-lead">You signed in here with Fidj before. ${escapeText(title)} accounts are Fidj accounts, and this site never sees your password — you can also create or use another one.</p>`
+    : `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. You will sign in — or create yours — on Fidj's own page, so this site never sees your password.</p>`;
+  const action = hint
+    ? `<button class="primary" type="submit">Continue as ${escapeText(hint)}</button><button type="button" id="forget-hint" class="quiet">Use a different account</button>`
+    : `<button class="primary" type="submit">Sign in with Fidj</button>`;
+  return lead + agreementMarkup() + action;
+}

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

@@ -474,6 +474,12 @@ body.signin-view main {
   margin: 0;
   padding: 0;
 }
+/* A mounted app takes the document: the shell removes its own chrome rather
+ * than hiding it, so nothing of the shell's layout reaches the app. The class
+ * stays as the hook for anything an app's own stylesheet wants to key on. */
+body.has-module {
+  margin: 0;
+}
 /* The sign-in entry: ink panel carrying the app's identity, paper panel
  * carrying the form. It stacks below 860px, ink first. */
 .signin-shell {
@@ -929,3 +935,25 @@ summary:focus-visible {
 .signin-agreement button { margin-block: 0.5rem; padding: 0; border: 0; background: transparent; text-decoration: underline; }
 #agreement-dialog { color: var(--fidj-text); background: var(--fidj-paper); border: 1px solid var(--fidj-line); border-radius: var(--fidj-radius); padding: 1.5rem; max-width: min(40rem, calc(100vw - 2rem)); max-height: 80vh; overflow: auto; }
 #agreement-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* The entry explains itself before it offers its button. A person whose account
+ * lives somewhere else needs to know that before they look for the form that is
+ * not coming, so this is body text above the action, not fineprint below it. */
+.signin-lead {
+  margin: 0 0 18px;
+  color: var(--fidj-ink-soft, inherit);
+  line-height: 1.5;
+}
+/* Present but not competing: "use a different account" is the way out of a
+ * remembered address, not an alternative worth the weight of the primary. */
+button.quiet {
+  margin-top: 10px;
+  background: none;
+  border: none;
+  color: inherit;
+  text-decoration: underline;
+  padding: 6px 0;
+  font: inherit;
+  cursor: pointer;
+  width: auto;
+}

package/lib/app-module.cjs

@@ -54,11 +54,9 @@ function inspectModule(source, entry = "index.html", destination) {
     }
   };
   visit(root);
-  // Address a directory rather than its index file: the generated server and
-  // any static host resolve it, and no index.html shows up in the address bar.
-  const address = file.endsWith("index.html")
-    ? file.slice(0, -"index.html".length)
-    : file;
-  return { root, file, entry: "./module/" + address + url.hash };
+  // The entry is now an address inside the shell, not a second document: the
+  // shell starts the module in place, so what it needs is the hash the module
+  // opens on. Without one there is nothing to hand over to.
+  return { root, file, entry: url.hash || "#/" };
 }
 module.exports = { inspectModule };

package/lib/module-mount.cjs

@@ -0,0 +1,61 @@
+const path = require("node:path");
+
+// A mounted app used to be a second document: the shell sent the browser to
+// /module/index.html and the person read "module" — a generator word — in the
+// address bar of their privacy console, after a full page reload in the middle
+// of signing in. Instead, read what the built app needs in order to start, and
+// let the shell start it inside its own document at its own address.
+//
+// Only the entry HTML is interpreted, and only for the three things a built
+// single-page app puts there: its stylesheets, its scripts, and the element it
+// mounts into. Anything else in that file is the build tool's business.
+function describeMount(html, file) {
+  // Relative URLs in the entry resolve against its own directory, which is where
+  // the module's files are copied. The shell addresses them from the site root.
+  const base = path.posix.join("module", path.posix.dirname(file));
+  const resolve = (url) => {
+    if (/^(?:[a-z]+:|\/\/|\/|#)/i.test(url)) return url;
+    return path.posix.normalize(path.posix.join(base, url));
+  };
+  const attribute = (tag, name) =>
+    (tag.match(new RegExp(`\\b${name}\\s*=\\s*["']([^"']*)["']`, "i")) || [])[1];
+
+  const head = html.slice(0, html.search(/<\/head>/i));
+  const body = html.slice(html.search(/<body\b[^>]*>/i)).replace(/^<body\b[^>]*>/i, "");
+
+  const styles = [];
+  for (const tag of head.match(/<link\b[^>]*>/gi) || []) {
+    const rel = (attribute(tag, "rel") || "").toLowerCase();
+    const href = attribute(tag, "href");
+    if (rel === "stylesheet" && href) styles.push(resolve(href));
+  }
+
+  const scripts = [];
+  for (const tag of html.match(/<script\b[^>]*>/gi) || []) {
+    const src = attribute(tag, "src");
+    if (!src) continue;
+    scripts.push({
+      src: resolve(src),
+      module: (attribute(tag, "type") || "").toLowerCase() === "module",
+    });
+  }
+  if (!scripts.length)
+    throw new Error(
+      "Module entry loads no script; supply a built single-page app.",
+    );
+
+  // Everything the app expects to find in the document, minus the scripts the
+  // shell adds itself once the styles are in place.
+  const markup = body
+    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+    .replace(/<\/body>[\s\S]*$/i, "")
+    .trim();
+  if (!markup)
+    throw new Error(
+      "Module entry has an empty body; supply a built single-page app.",
+    );
+
+  return { styles, scripts, markup };
+}
+
+module.exports = { describeMount };

package/lib/scaffold.cjs

@@ -1,11 +1,26 @@
 const fs = require("node:fs");
 const path = require("node:path");
 const { inspectModule } = require("./app-module.cjs");
+const { describeMount } = require("./module-mount.cjs");
 const templateRoot = path.join(
   __dirname,
   "../generators/app/templates/typescript",
 );
 
+const escapeHtml = (value) =>
+  String(value ?? "").replace(
+    /[&<>"']/g,
+    (char) =>
+      ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+        char
+      ],
+  );
+
+// From the module entry's own directory back up to the site root, so the stub
+// left behind forwards correctly however deep the entry sits.
+const moduleRedirectRoot = (file) =>
+  (path.posix.relative(path.posix.dirname("module/" + file), ".") || ".") + "/";
+
 function scaffold(destination, options) {
   const anonymous = options.anonymous ?? true;
   if (![true, false, "true", "false"].includes(anonymous))
@@ -159,6 +174,7 @@ function scaffold(destination, options) {
     logo: logo ? "./brand/logo" + logo.extension : "./fidj-logo.png",
     favicon: favicon ? "./brand/favicon" + favicon.extension : "./fidj-logo.png",
     moduleEntry: appModule?.entry || "",
+    moduleMount: null,
     domain: options.domain,
   };
   if (logo || favicon) fs.mkdirSync(path.join(dir, "public/brand"), { recursive: true });
@@ -182,23 +198,30 @@ function scaffold(destination, options) {
       recursive: true,
     });
     const entryFile = path.join(dir, "public/module", appModule.file);
-    // Point back at the shell's directory, not at its index file, for the same
-    // reason the module entry does: no index.html in the address bar.
-    const toRoot =
-      path.posix.relative(
-        path.posix.dirname("module/" + appModule.file),
-        ".",
-      ) || ".";
-    const relativeSignin = toRoot + "/#/signin";
     const html = fs.readFileSync(entryFile, "utf8");
     if (!html.includes("</head>"))
       throw new Error("Module entry must have an HTML head.");
+    configuration.moduleMount = describeMount(html, appModule.file);
+    // The module's own document is no longer where the app runs — the shell
+    // starts it in place. Addresses people already have must still work, so what
+    // is left at that path forwards them, hash and all, to the same screen.
+    const toRoot = moduleRedirectRoot(appModule.file);
+    // The generated Content-Security-Policy allows scripts from this origin and
+    // no inline ones, so the forward lives in a file beside the stub rather than
+    // in a <script> block that every browser would refuse to run.
+    fs.writeFileSync(
+      path.join(path.dirname(entryFile), "moved.js"),
+      `var to=${JSON.stringify(toRoot)}+location.hash;` +
+        `var go=document.getElementById("go");if(go)go.href=to;` +
+        `location.replace(to);\n`,
+    );
     fs.writeFileSync(
       entryFile,
-      html.replace(
-        "</head>",
-        `<meta name="fidj-signin" content="${relativeSignin}"></head>`,
-      ),
+      `<!doctype html><html lang="en"><head><meta charset="utf-8">` +
+        `<title>${escapeHtml(configuration.title)}</title>` +
+        `<meta name="robots" content="noindex"></head><body>` +
+        `<p>This address moved. <a id="go" href="${toRoot}">Continue</a></p>` +
+        `<script src="moved.js"></script></body></html>\n`,
     );
   }
   fs.writeFileSync(

package/package.json

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