@ofidj/generator-fidj 3.7.5 → 3.8.1

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

@@ -1,4 +1,5 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn, showEmailEntry, type SigninShape} from "./service-agreement";
+import {openProviderWindow, relayProviderAnswer, type ProviderWindow} from "./provider-window";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import "./style.css";
 import { showVersionBadge } from "./version";
@@ -16,7 +17,7 @@ type Settings = {
   // An owner may let their own app collect the credential beside the Fidj door.
   // Off unless asked for: the promise the entry makes otherwise is that this app
   // never sees a password.
-  ownCredentials?: boolean;
+  signin?: SigninShape;
 };
 const root = document.querySelector<HTMLDivElement>("#app")!;
 const sdk = new FidjNodeService();
@@ -39,6 +40,10 @@ let leaving = false;
 let signInEmail = "";
 let signInPassword = "";
 let signInAgreementAccepted = false;
+// 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.
+let emailEntryOpen = false;
 const escape = (value: unknown) =>
   String(value ?? "").replace(
     /[&<>"']/g,
@@ -85,6 +90,85 @@ async function load() {
     api("privacy"),
   ]);
 }
+// Taking the Fidj door, from inside the click that asked for it. The window has
+// to exist before the authorization URL is fetched — building it costs a
+// discovery round-trip, and a window opened after an await is one the browser
+// no longer attributes to the press, which every popup blocker refuses.
+// The window this page is waiting on, while it is waiting on it.
+let waitingFor: ProviderWindow | null = null;
+
+// What the entry says while that window is open: the way back to it, and the way
+// out of it. The waiting happens in a window that can be behind this page, and
+// from here that looks exactly like nothing having happened.
+function offerTheWindowBack(providerWindow: ProviderWindow) {
+  const waiting = root.querySelector<HTMLButtonElement>("button[data-busy]");
+  if (!waiting) return;
+  waiting.classList.add("is-waiting");
+  // It says what is happening rather than what to do, because what to do is
+  // happening in the other window. Dropping the accent is the point: this is a
+  // state, not the way in. It stays pressable all the same — somebody who has
+  // lost that window behind this page needs precisely this to be pressable.
+  waiting.textContent = "Connecting with Fidj…";
+  waiting.title = "Bring the Fidj window back to the front";
+  // Borrowing a submit button's press: submitting would open a second window.
+  waiting.onclick = (event) => {
+    event.preventDefault();
+    providerWindow.focus();
+  };
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.id = "cancel-provider";
+  cancel.className = "quiet";
+  cancel.textContent = "Cancel";
+  cancel.onclick = () => {
+    cancel.disabled = true;
+    providerWindow.giveUp();
+  };
+  waiting.insertAdjacentElement("afterend", cancel);
+}
+
+function signInThroughProvider(trigger: HTMLElement | null) {
+  // Held, not read again: `oidc` is settled once at start-up, and reading it
+  // inside the callback asks the compiler to prove that across an await.
+  const provider = oidc;
+  if (!provider) return;
+  // Already open: bring that one back rather than start a second conversation.
+  if (waitingFor?.isOpen()) {
+    waitingFor.focus();
+    return;
+  }
+  const providerWindow = openProviderWindow();
+  trigger?.setAttribute("data-busy", "true");
+  void action(async () => {
+    let url: string;
+    try {
+      // Somebody who has just signed out is asked again rather than recognised:
+      // otherwise pressing the door undoes the sign-out without a screen.
+      url = await provider.beginLogin(
+        provider.signedOutHere() ? {prompt: "login"} : {},
+      );
+    } catch (reason) {
+      providerWindow?.giveUp();
+      throw reason;
+    }
+    // Blocked, or a browser that would not open one: leaving this page is the
+    // flow this one replaced, and it still works.
+    if (!providerWindow) {
+      window.location.assign(url);
+      return;
+    }
+    providerWindow.show(url);
+    waitingFor = providerWindow;
+    offerTheWindowBack(providerWindow);
+    const callback = await providerWindow.answer().finally(() => {
+      waitingFor = null;
+    });
+    // Closed by hand. A person who changed their mind is not owed an error.
+    if (!callback) return;
+    await provider.completeLogin(callback);
+    await load();
+  });
+}
 async function action(task: () => Promise<void>) {
   if (busy) return;
   busy = true;
@@ -108,7 +192,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.ownCredentials ? credentialFields() : "") : `<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()}${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>
@@ -131,6 +215,12 @@ 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 app's own form, folded away under the Fidj door rather than beside it.
+  if (emailEntryOpen) showEmailEntry(true);
+  el("use-email")?.addEventListener("click", () => {
+    emailEntryOpen = !emailEntryOpen;
+    showEmailEntry(emailEntryOpen, true);
+  });
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
     const email = el<HTMLInputElement>("email")?.value || "";
@@ -149,11 +239,14 @@ function render() {
       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.
+    if (oidc) {
+      signInThroughProvider(event.submitter as HTMLElement | null);
+      return;
+    }
     void action(async () => {
-      if (oidc) {
-        window.location.assign(await oidc.beginLogin());
-        return;
-      }
       try {
         await sdk.login(email, password, { autoSignup: false, ...acceptance });
       } catch (reason) {
@@ -308,4 +401,15 @@ async function start() {
     root.textContent =
       "This app could not load. Please check the server and retry.";
 }
-void start();
+// This document is the window the entry opened, and the provider has just
+// answered into it: hand the answer to the page that opened it and get out of
+// the way. A window the browser will not close was not scripted open, so the
+// ordinary return path runs after all rather than stranding somebody here.
+if (relayProviderAnswer()) {
+  root.innerHTML = '<p role="status">Signing you in…</p>';
+  window.setTimeout(() => {
+    if (!window.closed) void start();
+  }, 800);
+} else {
+  void start();
+}

package/generators/app/templates/typescript/src/provider-window.ts

@@ -0,0 +1,177 @@
+// 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;
+}

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

@@ -28,7 +28,13 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
   const dialog = form.querySelector<HTMLDialogElement>("#agreement-dialog")!;
   const status = form.querySelector<HTMLElement>("#agreement-status")!;
   const retry = form.querySelector<HTMLButtonElement>("#retry-agreement")!;
-  const submitButtons = form.querySelectorAll<HTMLButtonElement>('button[type="submit"]');
+  // What this agreement gates is the app's own door, and only that one. The
+  // Fidj door is about to be asked the same question on the screen that names
+  // the app, where the answer is recorded with its version — so an agreement
+  // that is still loading, or that could not be loaded at all, must not be what
+  // stands between a person and the door that does not need it.
+  const gated = form.querySelector("#email-entry") || form;
+  const submitButtons = gated.querySelectorAll<HTMLButtonElement>('button[type="submit"]');
   const update = () => submitButtons.forEach(button => { button.disabled = checkbox.disabled; });
   form.querySelector("#agreement-label")!.textContent = `I accept the service agreement for ${title}.`;
   update();
@@ -97,21 +103,25 @@ export function forgetSignIn(appId: string) {
   } catch {}
 }
 
-// Both doors, not one. An app that delegates to Fidj still has people who would
-// rather type an address and a password than be sent somewhere, and people Fidj
-// already recognises who should not have to. So the entry offers the credential
-// form and the Fidj entry together, and leads with whichever fits what this
-// browser knows: a remembered address puts Fidj first, no memory puts the form
-// first.
+// Both doors, but not side by side. An app that delegates to Fidj still has
+// people who would rather type an address and a password than be sent
+// somewhere, so the credential form stays — folded away under a line of text
+// rather than standing in front of the door most people should take. Offering
+// the two as equals asked every arrival to choose between them, and the one
+// that looked like an ordinary login won by looking ordinary.
 //
-// The trade-off is stated where it is made: on this path the app's own page
-// handles the Fidj password, so it is the app — not only Fidj — that must be
-// trusted with it. The Fidj entry beside it never is.
+// The trade-off is stated where it is made: on the credential path the app's
+// own page handles the Fidj password, so it is the app — not only Fidj — that
+// must be trusted with it. The Fidj entry above it never is, which is why it is
+// the one wearing the accent.
+export type SigninShape = "button" | "inline" | "both";
+
 export function providerEntry(
   title: string,
   appId: string,
   credentials: string,
   isFidjItself = false,
+  shape: SigninShape = "button",
 ) {
   const escapeText = (value: unknown) =>
     String(value ?? "").replace(
@@ -122,25 +132,72 @@ export function providerEntry(
         ]!,
     );
   const hint = signInHint(appId);
-  const both = Boolean(credentials);
+  const both = shape === "both" && Boolean(credentials);
+  // The app's own form and nothing else. Nothing is folded away because there is
+  // no second way in to fold it under, and the trade-off is stated plainly:
+  // on this path it is this site that holds the password.
+  if (shape === "inline")
+    return (
+      `<p class="signin-lead">${
+        isFidjItself
+          ? "One account across every app that uses Fidj, and a separate set of choices for each one."
+          : `${escapeText(title)} accounts are Fidj accounts. Sign in below — ${escapeText(title)} handles your password itself on this page.`
+      }</p>` +
+      agreementMarkup() +
+      credentials
+    );
   const lead = hint
     ? `<p class="signin-lead">You signed in here with Fidj before. ${escapeText(title)} accounts are Fidj accounts — continue as yourself, or use another.</p>`
     : both
-      ? `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. Sign in below, or let Fidj do it on its own page — where this site never sees your password.</p>`
+      ? `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. Fidj asks in a window of its own, so this site never sees your password.</p>`
       : isFidjItself
-        ? `<p class="signin-lead">One account across every app that uses Fidj, and a separate set of choices for each one. Sign in, or create yours, on the next screen.</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>`;
+        ? `<p class="signin-lead">One account across every app that uses Fidj, and a separate set of choices for each one. Fidj asks in a window of its own; this page stays where it is.</p>`
+        : `<p class="signin-lead">${escapeText(title)} accounts are Fidj accounts. You will sign in — or create yours — in a Fidj window, so this site never sees your password.</p>`;
+  // The accent is the Fidj mark, and this is the one control on the screen that
+  // is Fidj's rather than the app's. It is also the door the app would rather
+  // people took, and those two happen to want the same thing.
   const fidj = hint
-    ? `<button class="primary" type="submit" name="entry" value="fidj">Continue as ${escapeText(hint)}</button><button type="button" id="forget-hint" class="quiet">Use a different account</button>`
-    : `<button class="${both ? "secondary" : "primary"}" type="submit" name="entry" value="fidj">${isFidjItself ? "Sign in" : "Sign in with Fidj"}</button>`;
+    ? `<button class="primary fidj-entry" type="submit" name="entry" value="fidj">Continue as ${escapeText(hint)}</button><button type="button" id="forget-hint" class="quiet">Use a different account</button>`
+    : `<button class="primary fidj-entry" type="submit" name="entry" value="fidj">${isFidjItself ? "Sign in" : "Sign in with Fidj"}</button>`;
   // Fidj is the only door: it collects the agreement itself, a moment later, on
   // the screen that names the app — and records it with its version. Collecting
   // it here first recorded nothing and asked the same question twice.
-  if (!both) return lead + fidj;
-  // Both doors. A remembered address puts Fidj first because it is one tap; no
-  // memory puts the form first, because that is what the person came to do.
-  const divider = `<div class="signin-divider"><span>or</span></div>`;
-  return hint
-    ? lead + agreementMarkup() + fidj + divider + credentials
-    : lead + agreementMarkup() + credentials + divider + fidj;
+  if (shape !== "both" || !both) return lead + fidj;
+  // Both doors. The app's own one is a second thought for the person who wants
+  // it, which is what a disclosure is for: it costs one click and takes nothing
+  // away, where a second button of equal weight cost everybody a decision.
+  return (
+    lead +
+    fidj +
+    `<div class="signin-alternate"><button type="button" id="use-email" class="signin-toggle" aria-expanded="false" aria-controls="email-entry"><span class="signin-toggle-label">Inline form<span class="caret" aria-hidden="true"></span></span></button>
+  <div id="email-entry" hidden>${agreementMarkup()}${credentials}</div></div>`
+  );
+}
+
+// Opening the app's own form takes the space the Fidj door was using.
+//
+// The two are alternatives, not a list, and watching one fold away as the other
+// arrives is what says so — where a form appearing underneath a button that is
+// still there reads as "and also". The toggle stays put through both states, so
+// it ends up labelling whichever one is on screen: a caret pointing down at a
+// form that is not here yet, and up at the one it would put away.
+//
+// Shared, because both app shapes render the same entry.
+export function showEmailEntry(open: boolean, focus = false) {
+  const fields = document.getElementById("email-entry");
+  const toggle = document.getElementById("use-email");
+  if (!fields || !toggle) return;
+  toggle.setAttribute("aria-expanded", String(open));
+  fields.hidden = !open;
+  const door = document.querySelector<HTMLButtonElement>(".fidj-entry");
+  if (door) {
+    door.classList.toggle("is-folded", open);
+    // Out of the tab order and out of the accessibility tree the moment it
+    // starts leaving: something mid-fold is not something to press, and an
+    // animation is not what decides that.
+    if (open) door.setAttribute("aria-hidden", "true");
+    else door.removeAttribute("aria-hidden");
+    door.tabIndex = open ? -1 : 0;
+  }
+  if (open && focus) document.getElementById("email")?.focus();
 }