@ofidj/generator-fidj 3.10.2 → 3.13.0

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

@@ -1,8 +1,8 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn, showEmailEntry, type SigninShape} from "./service-agreement";
-import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "./provider-window";
+import {agreementRequired, agreementFromRefusal, signInErrorMessage, rememberSignIn, forgetSignIn, type SigninShape} from "@ofidj/entry";
+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 "./style.css";
-import { showVersionBadge } from "./version";
+import "@ofidj/entry/style.css";
 
 type Session = { username: string; roles: string[] };
 type Note = { id: string; title: string; body: string; createdAt: string };
@@ -39,7 +39,9 @@ let busy = false;
 let leaving = false;
 let signInEmail = "";
 let signInPassword = "";
-let signInAgreementAccepted = false;
+// The agreement this app is owed, once the API has said so. There is no
+// account creation here, so there is no verification wait to hold either.
+let pendingAgreement: {version: string; text: string} | null = null;
 // Whether the person asked for the app's own form: the entry is rebuilt on every
 // render, and a refused sign-in is a render, so it has to be remembered or the
 // form folds away under the complaint about it.
@@ -77,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() {
@@ -183,6 +185,29 @@ async function action(task: () => Promise<void>) {
     render();
   }
 }
+// The API decides whether this is a session or the agreement it has not
+// recorded for this app. Returns true when it answered with a screen.
+async function refusedBeforeSignIn(
+  email: string,
+  password: string,
+  acceptance?: {termsAccepted: boolean; termsVersion: string},
+): Promise<boolean> {
+  try {
+    await sdk.login(email, password, {autoSignup: false, ...acceptance});
+    pendingAgreement = null;
+    return false;
+  } catch (reason) {
+    if (agreementRequired(reason)) {
+      pendingAgreement = agreementFromRefusal(reason);
+      if (!pendingAgreement) {
+        throw new Error("We cannot reach Fidj right now. Please try again.");
+      }
+      return true;
+    }
+    throw new Error(signInErrorMessage(reason));
+  }
+}
+
 function render() {
   document.title = settings.title + " · Fidj";
   const canWrite = session?.roles.some((role) =>
@@ -192,7 +217,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 ? providerEntry(settings.title, settings.appId, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}${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, settings.signin === "button" ? "" : credentialFields(), false, settings.signin || "button") : `<p>Sign in with your Fidj account.</p>${credentialFields()}<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>
@@ -214,31 +239,36 @@ function render() {
   }`
   }
   <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);
+  // 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, `${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 (emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && emailEntryOpen) showEmailEntry(true);
+  if (!pendingAgreement && el("signin")) bindPasswordReveal(el("signin")!);
   el("use-email")?.addEventListener("click", () => {
     emailEntryOpen = !emailEntryOpen;
     showEmailEntry(emailEntryOpen, true);
   });
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
+    // Answering the agreement screen: the credentials were accepted already and
+    // are not re-read from a form that no longer shows them.
+    if (pendingAgreement) {
+      const accepted = acceptedAgreement(event.currentTarget as HTMLFormElement);
+      if (!accepted) return;
+      void action(async () => {
+        if (await refusedBeforeSignIn(signInEmail, signInPassword, accepted))
+          return;
+        await load();
+      });
+      return;
+    }
     const email = el<HTMLInputElement>("email")?.value || "";
     const password = el<HTMLInputElement>("password")?.value || "";
     signInEmail = email;
     signInPassword = password;
-    signInAgreementAccepted =
-      el<HTMLInputElement>("service-agreement")?.checked === true;
-    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
-    // Only a credential entry is gated here. When Fidj is the door, it asks for
-    // this app's agreement a moment later, on the screen that names the app,
-    // and records the acceptance with its version — so asking first cost a
-    // second click and kept nothing.
-    if (!oidc && !acceptance) {
-      error = "Please accept the service agreement before continuing.";
-      render();
-      return;
-    }
     // The Fidj door opens a window of its own, from inside this click: opening
     // it after the authorization URL has been fetched is what a popup blocker
     // refuses, because the browser no longer attributes it to the press.
@@ -247,11 +277,7 @@ function render() {
       return;
     }
     void action(async () => {
-      try {
-        await sdk.login(email, password, { autoSignup: false, ...acceptance });
-      } catch (reason) {
-        throw new Error(signInErrorMessage(reason));
-      }
+      if (await refusedBeforeSignIn(email, password)) return;
       await load();
     });
   });

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) {
@@ -176,6 +177,18 @@ function scaffold(destination, options) {
     releaseVersion = sdk.version;
     pkg.dependencies["@ofidj/node"] = "file:" + sdkPath;
   }
+  // The entry — the sign-in and account screens, the agreement and the design
+  // system — is a package now rather than a copy in this template, so a local
+  // build of it is pointed at the same way the SDK is.
+  if (options.entryPath) {
+    const entryPath = path.resolve(options.entryPath);
+    const entry = JSON.parse(
+      fs.readFileSync(path.join(entryPath, "package.json"), "utf8"),
+    );
+    if (entry.name !== "@ofidj/entry")
+      throw new Error("Entry path must contain a built @ofidj/entry package.");
+    pkg.dependencies["@ofidj/entry"] = "file:" + entryPath;
+  }
   fs.writeFileSync(
     path.join(dir, "package.json"),
     JSON.stringify(pkg, null, 2) + "\n",
@@ -186,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,
@@ -197,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.10.2",
+  "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": {

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

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

@@ -1,177 +0,0 @@
-// Signing in happens in a window of its own.
-//
-// Fidj's screens are served from another origin — Fidj's front end, or the API
-// itself, depending on the deployment — and that origin refuses to be framed,
-// so no dialog drawn inside this page can hold them. A window can, and it keeps
-// the page the person was already on: they come back to what they were reading,
-// not to a shell that reloaded underneath them and forgot where they were.
-//
-// The window is opened empty and synchronously, before anything is awaited. A
-// window opened after an await is a window the browser no longer connects to
-// the click that asked for it, and every popup blocker refuses it — so the
-// authorization URL, which takes a discovery round-trip to build, is fetched
-// afterwards and navigated into a window that already exists.
-
-// One window per page, not one per browser.
-//
-// Naming it is what lets a second press reuse the window instead of stacking
-// another one on top, and that much is wanted. Sharing the name across tabs is
-// not: the answer comes back to whichever page opened the window, so a second
-// tab reusing the first tab's window would hand that tab's sign-in to a page
-// that never asked, and leave the one that did waiting forever. Stable for this
-// document, unique to it.
-const WINDOW_NAME = "fidj-signin-" + Math.random().toString(36).slice(2, 10);
-const CALLBACK = "fidj:oidc-callback";
-
-// Comfortable rather than minimal: the provider asks for a password, states who
-// is asking and where the person is going back to, and a cramped window turns
-// that into scrolling. Clamped to the screen so a small display still gets a
-// window it can show whole, and centred on the display the opener is on.
-function features() {
-  const width = Math.min(560, Math.max(320, window.screen.availWidth - 80));
-  const height = Math.min(760, Math.max(480, window.screen.availHeight - 80));
-  const left = Math.round(
-    (window.screenX || 0) + Math.max(0, (window.outerWidth - width) / 2),
-  );
-  const top = Math.round(
-    (window.screenY || 0) + Math.max(0, (window.outerHeight - height) / 3),
-  );
-  return `popup=yes,width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
-}
-
-export type ProviderWindow = {
-  // Send the opened window to the provider. Separate from opening it because
-  // the URL is not known yet at the moment the click has to be honoured.
-  show(url: string): void;
-  // Still open, and still the one being waited for.
-  isOpen(): boolean;
-  // Bring it back in front. A window can be behind the page that opened it, on
-  // another desktop, or minimised, and from the page that looks exactly like
-  // nothing having happened — so the page needs to be able to fetch it.
-  focus(): void;
-  // Close it: the provider could not be reached and there is nothing for the
-  // window to show, or the person asked to stop.
-  giveUp(): void;
-  // The callback the provider handed to that window, or null when the person
-  // closed it without finishing. Closing is a decision, not a failure: it
-  // resolves so the entry simply reappears, with nothing said.
-  answer(): Promise<URL | null>;
-};
-
-export function openProviderWindow(): ProviderWindow | null {
-  let opened: Window | null = null;
-  try {
-    opened = window.open("", WINDOW_NAME, features());
-  } catch {
-    opened = null;
-  }
-  // Blocked, or a browser that refuses named windows. The caller falls back to
-  // leaving this page, which is the flow this one replaced.
-  if (!opened) return null;
-  try {
-    opened.document.write(
-      '<!doctype html><meta charset="utf-8"><title>Signing in with Fidj</title><body style="margin:0;font:15px/1.5 system-ui;color:#4a4540;display:grid;place-items:center;height:100vh">Opening Fidj…</body>',
-    );
-    opened.document.close();
-  } catch {}
-  return {
-    show(url: string) {
-      // `replace`, so the blank placeholder is not a history entry the person
-      // can press Back into.
-      try {
-        opened!.location.replace(url);
-      } catch {
-        opened!.location.href = url;
-      }
-    },
-    isOpen() {
-      try {
-        return !opened!.closed;
-      } catch {
-        return false;
-      }
-    },
-    focus() {
-      try {
-        opened!.focus();
-      } catch {}
-    },
-    giveUp() {
-      try {
-        opened!.close();
-      } catch {}
-    },
-    answer() {
-      return new Promise<URL | null>((resolve) => {
-        let done = false;
-        const finish = (result: URL | null) => {
-          if (done) return;
-          done = true;
-          window.removeEventListener("message", onMessage);
-          window.clearInterval(watch);
-          try {
-            opened!.close();
-          } catch {}
-          resolve(result);
-        };
-        const onMessage = (event: MessageEvent) => {
-          // Only this origin, and only the window this entry opened: the
-          // callback carries a single-use authorization code, and anything else
-          // posting into this page is not part of this conversation.
-          if (event.origin !== window.location.origin) return;
-          if (event.source !== opened) return;
-          const data = event.data as { fidj?: string; href?: string } | null;
-          if (!data || data.fidj !== CALLBACK || typeof data.href !== "string")
-            return;
-          let callback: URL;
-          try {
-            callback = new URL(data.href);
-          } catch {
-            return;
-          }
-          if (callback.origin !== window.location.origin) return;
-          finish(callback);
-        };
-        window.addEventListener("message", onMessage);
-        // A window closed by hand answers nothing, and nothing is what this
-        // page would wait for forever otherwise. `closed` is the only signal a
-        // cross-origin window gives, so it is polled.
-        const watch = window.setInterval(() => {
-          if (opened!.closed) finish(null);
-        }, 400);
-      });
-    },
-  };
-}
-
-// The other half, running in that window: the provider has just answered into
-// it, and its only remaining job is to hand the answer back and get out of the
-// way. It never completes the sign-in itself — the transaction that has to
-// match the answer was written by the page that opened it, and session storage
-// is copied into a new window, not shared with it.
-//
-// Answering `true` means the hand-off was made and this window asked to close;
-// the caller shows one line and, if the browser refuses to close a window it
-// did not see scripted open, finishes the sign-in here after all.
-export function relayProviderAnswer(): boolean {
-  let opener: Window | null = null;
-  try {
-    opener = window.opener as Window | null;
-  } catch {
-    return false;
-  }
-  if (!opener || opener === window || opener.closed) return false;
-  if (!new URL(window.location.href).searchParams.has("state")) return false;
-  try {
-    opener.postMessage(
-      { fidj: CALLBACK, href: window.location.href },
-      window.location.origin,
-    );
-  } catch {
-    return false;
-  }
-  try {
-    window.close();
-  } catch {}
-  return true;
-}