@ofidj/generator-fidj 3.11.0 → 3.13.0

package/README.md

@@ -64,6 +64,13 @@ generated to reach them. A style change now lands in that package, and this
 template is what remains genuinely the generator's: the shells that hold the
 screens, the content app and the Notes app.
 
+This is an architecture boundary, not only a packaging detail: never copy a
+credential, signup, recovery or agreement component into a generated output.
+The template may compose a shell and call `@ofidj/entry` after dynamic rendering,
+but the markup rules and browser behavior such as password reveal belong in
+`fidj-entry`. A fix there must reach Fidj, mleweb and newly generated apps
+without maintaining parallel component implementations.
+
 The design system is `@ofidj/entry`'s `tokens.css` — every colour, family and
 radius — and its `style.css`, which may not introduce a literal of its own.
 Fonts are self-hosted under `public/fonts` and served from the build manifest,

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

@@ -15,8 +15,8 @@
     "privacy:rehearse": "npm run build && node --test test/server.test.mjs"
   },
   "dependencies": {
-    "@ofidj/entry": "^3.11.0",
-    "@ofidj/node": "^3.11.0"
+    "@ofidj/entry": "^3.13.0",
+    "@ofidj/node": "^3.13.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

package/generators/app/templates/typescript/server/index.ts

@@ -342,7 +342,8 @@ if (require.main === module) {
     localDemo:
       process.env.LOCAL_DEMO === "true" &&
       host === "127.0.0.1" &&
-      ["localhost", "127.0.0.1"].includes(api.hostname),
+      (["localhost", "127.0.0.1"].includes(api.hostname) ||
+        api.hostname.endsWith(".localhost")),
   };
   createApp(settings, {
     dataDir: process.env.FIDJ_DATA_DIR,

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

@@ -1,5 +1,5 @@
-import {signInErrorMessage, agreementRequired, agreementFromRefusal, verificationPending, pollVerification, rememberSignIn, forgetSignIn, signInHint, type SigninShape} from "@ofidj/entry";
-import {agreementScreen, bindAgreementScreen, acceptedAgreement, verificationWait, providerEntry, showEmailEntry, showVersionBadge, escape, masthead, highlightCells, badgeStrip, credentialFields, accountForm, returnNotice} from "@ofidj/entry/dom";
+import {agreementModel, signInErrorMessage, agreementRequired, agreementFromRefusal, verificationPending, pollVerification, rememberSignIn, forgetSignIn, signInHint, type SigninShape} from "@ofidj/entry";
+import {agreementScreen, bindAgreementScreen, bindPasswordReveal, acceptedAgreement, verificationWait, providerEntry, showEmailEntry, showVersionBadge, escape, masthead, highlightCells, badgeStrip, credentialFields, accountForm, returnNotice} from "@ofidj/entry/dom";
 import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "@ofidj/entry/window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
@@ -123,7 +123,10 @@ function wireSignOut() {
     () =>
       void action(async () => {
         const wasSignedIn = signedIn;
-        if (signedIn) await sdk.logout(true);
+        if (signedIn) {
+          if (oidc?.hasSession()) await oidc.logout();
+          else await sdk.logout(true);
+        }
         forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
@@ -497,6 +500,8 @@ function render() {
   if (interactionId && !addressedInteraction()) {
     interactionId = "";
     interactionError = "";
+    interactionResent = false;
+    interactionNotYet = false;
     interaction = null;
     interactionFailed = false;
   }
@@ -609,18 +614,10 @@ function render() {
   root.innerHTML = `<section class="signin-shell"><div class="signin-intro${config.highlights?.length ? "" : " is-plain"}">${masthead(config.logo, config.title)}
   <div class="signin-identity"><h1>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p></div>
   ${highlightCells(config.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><button class="primary" type="submit">Sign in</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-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin">${credentialFields({email: signInEmail, password: signInPassword})}</form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
   <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>Your account, with Fidj</strong></p><p>Signing in creates one Fidj account you keep across every app that uses Fidj.</p><p>You choose what this app may store — and can export or erase it at any moment.</p></div></div>
   ${badgeStrip(config.badges)}</div></section>`;
   wireNav();
-  element("reveal")?.addEventListener("click", () => {
-    const field = element<HTMLInputElement>("password");
-    const button = element("reveal");
-    if (!field || !button) return;
-    const hidden = field.type === "password";
-    field.type = hidden ? "text" : "password";
-    button.textContent = hidden ? "Hide" : "Show";
-  });
   element("anonymous")?.addEventListener("click", () => {
     if (!config.allowAnonymous) return;
     anonymous = true;
@@ -647,13 +644,14 @@ function render() {
   // form's place rather than sitting under it: the credentials were accepted,
   // and what is left is a decision about this app.
   if (pendingAgreement && element("signin")) {
-    element("signin")!.innerHTML = agreementScreen(config.title, pendingAgreement);
+    element("signin")!.innerHTML = agreementScreen(config.title, pendingAgreement, `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}/agreements/${encodeURIComponent(pendingAgreement.version || "")}`);
     bindAgreementScreen(element<HTMLFormElement>("signin"));
   }
   // The app's own form, for whoever came to type a password. Folded away rather
   // than removed: the door above it is the one to take, and the person who
   // wants this one is one click from it.
   if (!pendingAgreement && emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && element("signin")) bindPasswordReveal(element("signin")!);
   element("use-email")?.addEventListener("click", () => {
     emailEntryOpen = !emailEntryOpen;
     showEmailEntry(emailEntryOpen, true);
@@ -817,14 +815,12 @@ function completeSignIn() {
       // every app must not be mintable by one that collects its own passwords.
       if (isFidjItself) {
         try {
-          await sdk.sendOnEndpoint({
-            verb: "POST",
-            key: "me",
-            relativePath: "oidc/session",
-            // The whole point of the call is the cookie it comes back with, and
-            // a cross-origin response's Set-Cookie is dropped without this.
-            withCredentials: true,
-          });
+          const transfer = await request("/me/oidc/session-transfer", "POST");
+          // The provider cookie belongs to the API origin. A cross-site fetch
+          // cannot reliably replace it, so let that origin answer once as the
+          // top-level page, consume a one-use ticket, then send us back here.
+          window.location.assign(transfer.location);
+          return;
         } catch {
           // Being signed in here still worked. The person is inside Fidj; what
           // they lose is being recognised by the next app without typing again,
@@ -970,14 +966,24 @@ function privacyBlock() {
 type Interaction = {
   prompt: string;
   csrf: string;
+  // The address this interaction is waiting on, when it is waiting rather than
+  // asking. Empty on every other screen.
+  awaiting?: string;
   app: { id: string; title: string; description: string };
   scopes: string[];
   termsUri: string;
   privacyUri: string;
+  // The agreement's own text, so it can be read here rather than in another tab.
+  agreement?: {version: string; text: string} | null;
   action: string;
 };
 let interactionId = "";
 let interactionError = "";
+// Whether the link was just sent again, or pressed Continue before opening it.
+// They are about the wait, not about the person, so they travel in the address
+// where the address itself does not.
+let interactionResent = false;
+let interactionNotYet = false;
 let interaction: Interaction | null = null;
 let interactionFailed = false;
 
@@ -1026,6 +1032,8 @@ function readInteraction() {
   if (!uid) return false;
   interactionId = uid;
   interactionError = parameters.get("error") || "";
+  interactionResent = parameters.get("resent") === "1";
+  interactionNotYet = parameters.get("notyet") === "1";
   // The id stays in the address while the screen is up. Taking it out looked
   // tidier and made the screen a trap: the address became "#/signin", so going
   // back to "#/signin" changed nothing, the document never reloaded, and the
@@ -1049,6 +1057,15 @@ async function loadInteraction() {
 }
 
 
+// What the wait has to say beyond the address, if anything.
+function interactionWaitNotice() {
+  if (interactionNotYet)
+    return '<p class="fineprint">The link has not been opened yet. Open it, then press Continue again.</p>';
+  if (interactionResent)
+    return '<p class="fineprint">The link was sent again. Only the newest one works.</p>';
+  return "";
+}
+
 function interactionScreen() {
   const details = interaction!;
   const asking = escape(details.app.title);
@@ -1067,8 +1084,24 @@ function interactionScreen() {
   // sees your password" about itself is nonsense in the same family as offering
   // to sign in with Fidj on Fidj.
   const itself = details.app.id === config.appId;
-  const body =
-    details.prompt === "login"
+  // The wait, when this interaction is waiting on an address rather than asking
+  // for anything. It is not a refusal and must not be drawn as one: the account
+  // exists, the link was sent, and what is left is opening it. The address is
+  // read from the interaction's own context rather than from the URL, so
+  // nothing about the person travels in an address bar.
+  const body = details.awaiting
+    ? `<h2>Check your email</h2>
+  <p class="signin-lead">Your account is created. Waiting for you to open the link sent to <strong>${escape(details.awaiting)}</strong>.</p>
+  ${returnNotice(itself ? "Fidj" : asking)}
+  <form method="post" action="${escape(action)}" id="interaction">
+    <input type="hidden" name="csrf" value="${escape(details.csrf)}">
+    <p class="fineprint">The link may take a minute, and it sometimes lands in spam. Open it, then come back here.</p>
+    ${interactionWaitNotice()}
+    <button class="primary" type="submit" name="action" value="continue">Continue</button>
+    <button class="secondary" type="submit" name="action" value="resend">Send the link again</button>
+    <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
+  </form>`
+    : details.prompt === "login"
       ? `<h2>${itself ? "Sign in to Fidj" : "Sign in to continue to " + asking}</h2>
   <p class="signin-lead">${itself ? "One account across every app that uses Fidj, and a separate set of choices for each one." : `This is Fidj, the account behind ${asking}. One account, and separate choices for every app that uses it — ${asking} never sees your password.`}</p>
   ${returnNotice(itself ? "Fidj" : asking)}
@@ -1092,7 +1125,8 @@ function interactionScreen() {
     .join("")}</ul>
   <form method="post" action="${escape(action)}" id="interaction">
     <input type="hidden" name="csrf" value="${escape(details.csrf)}">
-    <label class="agreement-choice"><input type="checkbox" name="terms" value="true" required><span>I accept ${asking}'s service agreement.</span></label>
+    <label class="agreement-choice"><input type="checkbox" name="terms" value="true" required><span>${escape(agreementModel(details.app.title, {}).checkboxLabel)}</span></label>
+    ${details.agreement ? `<details class="agreement"><summary>Read service agreement</summary><p class="fineprint">Version ${escape(details.agreement.version)}</p><p>${escape(details.agreement.text)}</p></details><p class="fineprint">Required to sign in. Optional data choices stay separate.</p>` : ""}
     ${details.termsUri ? `<p class="fineprint"><a href="${escape(details.termsUri)}" target="_blank" rel="noopener noreferrer">Service agreement</a>${details.privacyUri ? ` · <a href="${escape(details.privacyUri)}" target="_blank" rel="noopener noreferrer">Privacy notice</a>` : ""}</p>` : ""}
     <button class="primary" type="submit" name="action" value="continue">Allow and continue</button>
     <button class="quiet" type="submit" id="not-me" name="action" value="switch" formnovalidate>Not you? Sign in with another account</button>
@@ -1106,14 +1140,7 @@ function interactionScreen() {
   <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>What Fidj is</strong></p><p>Fidj holds your account so each app does not have to. You can see every app you use, what it holds, and take it back — at any time.</p></div></div>
   ${badgeStrip(config.badges)}</section>`;
 
-  element("reveal")?.addEventListener("click", () => {
-    const field = element<HTMLInputElement>("password");
-    const button = element("reveal");
-    if (!field || !button) return;
-    const hidden = field.type === "password";
-    field.type = hidden ? "text" : "password";
-    button.textContent = hidden ? "Hide" : "Show";
-  });
+  if (element("interaction")) bindPasswordReveal(element("interaction")!);
   // Being recognised is the point, and a dead end when the person is not who
   // Fidj thinks — a shared computer, a second account, somebody else's tab. So
   // the screen that recognises them asks again on request. It goes back to the
@@ -1141,6 +1168,7 @@ function renderAccount(route: string) {
   <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, {linkToken, verificationConfirmed, emailVerified, accountEmail})}</div><footer class="signin-badges"><a href="#/signin">Back to sign in</a></footer></div></section>`;
+  bindPasswordReveal(root);
   wireAccount(route);
 }
 

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

@@ -1,5 +1,5 @@
 import {agreementRequired, agreementFromRefusal, signInErrorMessage, rememberSignIn, forgetSignIn, type SigninShape} from "@ofidj/entry";
-import {acceptedAgreement, agreementScreen, bindAgreementScreen, providerEntry, showEmailEntry, showVersionBadge} from "@ofidj/entry/dom";
+import {acceptedAgreement, agreementScreen, bindAgreementScreen, bindPasswordReveal, providerEntry, showEmailEntry, showVersionBadge} from "@ofidj/entry/dom";
 import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "@ofidj/entry/window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import "@ofidj/entry/style.css";
@@ -79,7 +79,7 @@ async function api(path: string, method = "GET", data?: unknown) {
 // The credential fields, in one place because the entry shows them beside the
 // Fidj door rather than instead of it.
 function credentialFields() {
-  return `<label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" autocomplete="username"><label for="password">Password</label><input id="password" type="password" value="${escape(signInPassword)}" autocomplete="current-password"><button class="primary" type="submit" name="entry" value="credentials">Continue</button>`;
+  return `<label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" autocomplete="username"><label for="password">Password</label><div class="password-field"><input id="password" type="password" value="${escape(signInPassword)}" autocomplete="current-password"><button type="button" aria-controls="password">Show</button></div><button class="primary" type="submit" name="entry" value="credentials">Continue</button>`;
 }
 
 async function load() {
@@ -241,11 +241,12 @@ function render() {
   <footer>Built with Fidj · One identity. Separate choices for every app.</footer></main>`;
   // The agreement takes the form's place once the API says this app is owed one.
   if (pendingAgreement && el("signin")) {
-    el("signin")!.innerHTML = agreementScreen(settings.title, pendingAgreement);
+    el("signin")!.innerHTML = agreementScreen(settings.title, pendingAgreement, `${settings.apiEndpoint}/apps/${encodeURIComponent(settings.appId)}/agreements/${encodeURIComponent(pendingAgreement.version || "")}`);
     bindAgreementScreen(el<HTMLFormElement>("signin"));
   }
   // The app's own form, folded away under the Fidj door rather than beside it.
   if (!pendingAgreement && emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && el("signin")) bindPasswordReveal(el("signin")!);
   el("use-email")?.addEventListener("click", () => {
     emailEntryOpen = !emailEntryOpen;
     showEmailEntry(emailEntryOpen, true);

package/lib/scaffold.cjs

@@ -81,7 +81,8 @@ function scaffold(destination, options) {
     );
   if (
     api.protocol === "http:" &&
-    !["localhost", "127.0.0.1", "[::1]"].includes(api.hostname)
+    !["localhost", "127.0.0.1", "[::1]"].includes(api.hostname) &&
+    !api.hostname.endsWith(".localhost")
   )
     throw new Error("Use HTTPS for a remote API.");
   if (options.oidcIssuer) {
@@ -198,7 +199,7 @@ function scaffold(destination, options) {
   const issuerSetting = options.oidcIssuer ? `FIDJ_OIDC_ISSUER=${options.oidcIssuer}\n` : "";
   const settings = `FIDJ_APP_ID=${options.appId}\nFIDJ_API_ENDPOINT=${api.href.replace(/\/$/, "")}\n${issuerSetting}FIDJ_DASHBOARD_URL=https://fidj.ovh\nAPP_TITLE=${title}\nAPP_VERSION=${releaseVersion}\nFIDJ_SIGNIN=${signin}\nPORT=8200\nHOST=127.0.0.1\nLOCAL_DEMO=false\nFIDJ_DATA_DIR=../.fidj-data/${name}\nFIDJ_PRIVACY_ADAPTER_KEY=\n`;
   const localApi = options.local
-    ? "http://localhost:3201/v3"
+    ? process.env.FIDJ_LOCAL_API_ENDPOINT || "http://localhost:3201/v3"
     : api.href.replace(/\/$/, "");
   const configuration = {
     appId: options.appId,
@@ -209,7 +210,9 @@ function scaffold(destination, options) {
       ? new URL("/oidc", localApi).href
       : null,
     apiEndpoint: localApi,
-    dashboardUrl: options.local ? "http://localhost:4200" : dashboardFor(api),
+    dashboardUrl: options.local
+      ? process.env.FIDJ_LOCAL_DASHBOARD_URL || "http://localhost:4200"
+      : dashboardFor(api),
     title,
     releaseVersion,
     localDemo: Boolean(options.local),

package/package.json

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