npm - @ofidj/generator-fidj - Versions diffs - 1.2.0 → 1.4.0 - Mend

@ofidj/generator-fidj 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/bin/create-fidj.cjs +3 -1
package/generators/app/index.js +2 -0
package/generators/app/templates/typescript/app.config.json +1 -0
package/generators/app/templates/typescript/src/content.ts +170 -3
package/generators/app/templates/typescript/src/main.ts +14 -3
package/generators/app/templates/typescript/src/service-agreement.ts +30 -7
package/lib/scaffold.cjs +10 -0
package/package.json +1 -1

package/bin/create-fidj.cjs CHANGED Viewed

@@ -18,6 +18,7 @@ try {
       logo: { type: "string" },
       favicon: { type: "string" },
       anonymous: { type: "string" },
+      credentials: { type: "string" },
       domain: { type: "string" },
       module: { type: "string" },
       "module-entry": { type: "string" },
@@ -28,7 +29,7 @@ try {
   });
   if (values.help || positionals.length !== 1) {
     console.log(
-      "Usage: create-fidj <directory> --app-id <fidjId> [--api-endpoint <url>] [--title <text> --welcome <text> --description <text> --content <html> --domain <hostname>] [--highlight '<heading>|<body>' ...] [--badge <text> ...] [--logo <image>] [--favicon <image>] [--module <built-directory> --module-entry <index.html#/route>] [--oidc-issuer https://api.example/oidc] [--anonymous true|false] [--local] [--replace]",
+      "Usage: create-fidj <directory> --app-id <fidjId> [--api-endpoint <url>] [--title <text> --welcome <text> --description <text> --content <html> --domain <hostname>] [--highlight '<heading>|<body>' ...] [--badge <text> ...] [--logo <image>] [--favicon <image>] [--module <built-directory> --module-entry <index.html#/route>] [--oidc-issuer https://api.example/oidc] [--anonymous true|false] [--credentials true|false] [--local] [--replace]",
     );
     process.exitCode = values.help ? 0 : 1;
   } else {
@@ -46,6 +47,7 @@ try {
       logo: values.logo,
       favicon: values.favicon,
       anonymous: values.anonymous,
+      credentials: values.credentials,
       domain: values.domain,
       module: values.module,
       moduleEntry: values["module-entry"],

package/generators/app/index.js CHANGED Viewed

@@ -14,6 +14,7 @@ const TEXT_OPTIONS = [
   "description",
   "content",
   "anonymous",
+  "credentials",
   "domain",
   "module",
   "module-entry",
@@ -87,6 +88,7 @@ module.exports = class extends Generator {
       description: this.options.description,
       content: this.options.content,
       anonymous: this.options.anonymous,
+      credentials: this.options.credentials,
       highlights: repeated("highlight", this.options.highlight),
       badges: repeated("badge", this.options.badge),
       logo: this.options.logo,

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

@@ -5,6 +5,7 @@
   "title": "My app",
   "localDemo": false,
   "allowAnonymous": true,
+  "ownCredentials": false,
   "moduleEntry": "",
   "moduleMount": null,
   "description": "A space to explore, with an account that puts you in control.",

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

@@ -220,6 +220,12 @@ function navigate(route: string) {
   if (route !== currentRoute()) window.history.pushState(null, "", "#/" + route);
   if (!busy) render();
 }
+// The credential fields, in one place because the entry now 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)}" placeholder="you@company.com" autocomplete="username"><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"><button type="button" id="reveal" aria-controls="password">Show</button></div><button class="primary" type="submit" name="entry" value="credentials">Continue</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button>`;
+}
 function moduleRoute() {
   const route = window.location.hash.slice(2).split("?")[0];
   if (
@@ -268,6 +274,20 @@ function startModule() {
   }
 }
 function render() {
+  // The provider handed this person here to answer a question. Nothing else
+  // this app might want to show belongs on the screen until they have.
+  if (interactionId) {
+    if (interactionFailed) {
+      root.innerHTML = `<section class="card"><p role="alert" class="error">${escape(message)}</p><p><a href="#/signin">Back to sign in</a></p></section>`;
+      return;
+    }
+    if (!interaction) {
+      root.innerHTML = '<p role="status">Loading…</p>';
+      return;
+    }
+    interactionScreen();
+    return;
+  }
   if (!initialized) {
     root.innerHTML = '<p role="status">Loading your session…</p>';
     return;
@@ -370,7 +390,11 @@ function render() {
     navigate("content");
   });
   if (oidc && element("signin"))
-    element("signin")!.innerHTML = providerEntry(config.title, config.appId);
+    element("signin")!.innerHTML = providerEntry(
+      config.title,
+      config.appId,
+      config.ownCredentials ? credentialFields() : "",
+    );
   element("forget-hint")?.addEventListener("click", () => {
     forgetSignIn(config.appId);
     render();
@@ -391,9 +415,16 @@ function render() {
       render();
       return;
     }
-    const signup = (event.submitter as HTMLButtonElement)?.name === "signup";
+    const submitter = event.submitter as HTMLButtonElement | null;
+    const signup = submitter?.name === "signup";
+    // Which door was used. The Fidj one leaves for the provider; the credential
+    // one signs in here, which is why it is the app's own form and not Fidj's.
+    const throughFidj = submitter?.name === "entry" && submitter.value === "fidj";
     void action(async () => {
-      if (oidc) {window.location.assign(await oidc.beginLogin()); return;}
+      if (oidc && throughFidj) {window.location.assign(await oidc.beginLogin()); return;}
+      if (oidc && (!email || !password)) {
+        throw new Error("Enter your email and password, or sign in with Fidj.");
+      }
       try {
         await sdk.login(email, password, { autoSignup: signup, ...acceptance });
       } catch (error) {
@@ -502,6 +533,128 @@ function accountForm(route: string) {
           : `<h2>My Fidj account</h2><p>Your identity is shared across your apps. Privacy choices remain separate for each app.</p><p id="verification-status">${emailVerified ? "Your email address is verified." : "Your email is not verified yet."}</p><button id="check-verification">Refresh verification status</button>${emailVerified ? "" : '<button id="resend-verification">Send verification email</button>'}<p><a href="#/forgot">Reset my password</a></p><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button>`;
 }
+// ------------------------------------------------ signing in, for the provider
+//
+// When Fidj's provider needs a person to identify themselves it hands them to a
+// Fidj front end — this one — rather than serving a page of its own. So this
+// screen belongs to the provider's conversation, not to this app's: it says who
+// is asking, collects what is being asked for, and posts it straight back.
+//
+// The post is a real form navigation, not a fetch: the provider answers with a
+// redirect that carries the person onward through the authorization, and only a
+// navigation can follow it. The single-use token comes from the context call,
+// which is the only thing that reads the interaction cookie.
+type Interaction = {
+  prompt: string;
+  csrf: string;
+  app: { id: string; title: string; description: string };
+  scopes: string[];
+  termsUri: string;
+  privacyUri: string;
+  action: string;
+};
+let interactionId = "";
+let interactionError = "";
+let interaction: Interaction | null = null;
+let interactionFailed = false;
+const scopeMeaning: Record<string, string> = {
+  openid: "An identity specific to this app",
+  profile: "Your display name",
+  email: "Your email and verification status",
+  offline_access: "Stay signed in",
+  "fidj:api": "Use Fidj account and privacy services for this app",
+};
+const refusals: Record<string, string> = {
+  credentials: "We could not sign you in. Check your email and password.",
+  signup:
+    "Could not create an account. Use a valid email and a password of at least 12 characters, or sign in to your existing account.",
+  agreement: "Accept the app's service agreement to continue.",
+  refused: "That could not be completed. Please try again.",
+};
+function readInteraction() {
+  const query = window.location.hash.slice(2).split("?")[1] || "";
+  const parameters = new URLSearchParams(query);
+  const uid = parameters.get("interaction") || "";
+  if (!uid) return false;
+  interactionId = uid;
+  interactionError = parameters.get("error") || "";
+  // The address is cleaned immediately: the interaction id is single-use and has
+  // no business staying in history or in a shared link.
+  window.history.replaceState(null, "", "#/signin");
+  return true;
+}
+async function loadInteraction() {
+  const endpoint = new URL(
+    `/oidc/interaction/${encodeURIComponent(interactionId)}/context`,
+    config.apiEndpoint,
+  );
+  const response = await fetch(endpoint.href, {
+    credentials: "include",
+    headers: {Accept: "application/json"},
+    signal: AbortSignal.timeout(10000),
+  });
+  if (!response.ok) throw new Error("This sign-in has expired. Start again from the app.");
+  interaction = (await response.json()) as Interaction;
+}
+function interactionScreen() {
+  const details = interaction!;
+  const asking = escape(details.app.title);
+  const notice = interactionError
+    ? `<p role="alert" class="error">${escape(refusals[interactionError] || refusals.refused)}</p>`
+    : "";
+  const action = new URL(details.action, config.apiEndpoint).href;
+  const body =
+    details.prompt === "login"
+      ? `<h2>Sign in to continue to ${asking}</h2>
+  <p class="signin-lead">This is Fidj, the account behind ${asking}. One account, and separate choices for every app that uses it — ${asking} never sees your password.</p>
+  ${notice}
+  <form method="post" action="${escape(action)}" id="interaction">
+    <input type="hidden" name="csrf" value="${escape(details.csrf)}">
+    <label for="email">Email</label><input id="email" name="email" type="email" autocomplete="username" required>
+    <div class="field-head"><label for="password">Password</label><a href="${escape(config.dashboardUrl)}/#/forgot">Forgot?</a></div>
+    <div class="password-field"><input id="password" name="password" type="password" autocomplete="current-password" required><button type="button" id="reveal" aria-controls="password">Show</button></div>
+    <button class="primary" type="submit" name="action" value="continue">Sign in</button>
+    <button class="secondary" type="submit" name="action" value="signup">Create a Fidj account</button>
+    <button class="quiet" type="submit" name="action" value="cancel" formnovalidate>Cancel and go back</button>
+  </form>`
+      : `<h2>Continue to ${asking}</h2>
+  <p class="signin-lead">${asking} is asking for the information below. Optional privacy choices stay separate, and you can change them in Fidj at any time.</p>
+  ${notice}
+  <ul class="scope-list">${details.scopes
+    .filter((scope) => scopeMeaning[scope])
+    .map((scope) => `<li>${escape(scopeMeaning[scope])}</li>`)
+    .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>
+    ${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" name="action" value="cancel" formnovalidate>Cancel and go back</button>
+  </form>`;
+  root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain"><header class="signin-masthead"><img class="app-mark" src="${escape(config.logo)}" alt=""><strong>${escape(config.title)}</strong></header>
+  <div class="signin-identity"><h1>Your identity.<br>Your choices.</h1><p class="signin-description">One account across every app that uses Fidj, and a separate set of choices for each one.</p></div>
+  ${highlights()}</div>
+  <div class="signin-form"><div>${body}</div>
+  <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>
+  ${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";
+  });
+}
 function renderAccount(route: string) {
   root.innerHTML = `<section class="signin-shell"><div class="signin-intro is-plain"><header class="signin-masthead"><img class="app-mark" src="${escape(config.logo)}" alt=""><strong>${escape(config.title)}</strong></header>
   <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>
@@ -569,7 +722,21 @@ function wireAccount(route: string) {
 }
 window.addEventListener("hashchange", render);
 render();
+if (readInteraction()) {
+  render();
+  void loadInteraction()
+    .catch((error) => {
+      interactionFailed = true;
+      failed = true;
+      message =
+        error instanceof Error
+          ? error.message
+          : "This sign-in could not be loaded. Start again from the app.";
+    })
+    .finally(render);
+}
 void action(async () => {
+  if (interactionId) return;
   if (oidc && new URL(window.location.href).searchParams.has("state")) {
     const callback = new URL(window.location.href);
     window.history.replaceState(null, "", window.location.pathname + "#/content");

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

@@ -13,11 +13,16 @@ type Settings = {
   localDemo: boolean;
   releaseVersion: string;
   oidcIssuer?: string;
+  // 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;
 };
 const root = document.querySelector<HTMLDivElement>("#app")!;
 const sdk = new FidjNodeService();
-// When the app is configured with a provider it never sees a password: the
-// entry hands the person to Fidj and gets a code back.
+// When the app is configured with a provider it hands the person to Fidj and
+// gets a code back, seeing no password — unless its owner asked for a form of
+// its own beside that door.
 let oidc: FidjOidcClient | null = null;
 let settings: Settings;
 let session: Session | null = null;
@@ -64,6 +69,12 @@ async function api(path: string, method = "GET", data?: unknown) {
   }
   return result;
 }
+// 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>`;
+}
 async function load() {
   session = await api("session");
   // Remembered on this app's own origin so the entry can offer to continue as
@@ -97,7 +108,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) : `<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, 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>`
       : `
   <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>

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

@@ -94,7 +94,21 @@ export function forgetSignIn(appId: string) {
   } catch {}
 }
-export function providerEntry(title: string, appId: string) {
+// 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.
+//
+// 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.
+export function providerEntry(
+  title: string,
+  appId: string,
+  credentials: string,
+) {
   const escapeText = (value: unknown) =>
     String(value ?? "").replace(
       /[&<>"']/g,
@@ -104,11 +118,20 @@ export function providerEntry(title: string, appId: string) {
         ]!,
     );
   const hint = signInHint(appId);
+  const both = Boolean(credentials);
   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;
+    ? `<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. You will sign in — or create yours — on Fidj's own page, so this site never sees your password.</p>`;
+  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">Sign in with Fidj</button>`;
+  if (!both) return lead + agreementMarkup() + 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;
 }

package/lib/scaffold.cjs CHANGED Viewed

@@ -25,6 +25,15 @@ function scaffold(destination, options) {
   const anonymous = options.anonymous ?? true;
   if (![true, false, "true", "false"].includes(anonymous))
     throw new Error("--anonymous must be true or false.");
+  // An app that delegates to the provider collects no password: that is the
+  // promise its entry makes, and it holds only while the app never sees one.
+  // An owner can decide otherwise for their own app — some people would rather
+  // type an address than be sent somewhere — and then it is the app, not only
+  // Fidj, that must be trusted with the credential. Off by default, so the
+  // promise stays the default.
+  const credentials = options.credentials ?? false;
+  if (![true, false, "true", "false"].includes(credentials))
+    throw new Error("--credentials must be true or false.");
   const name = options.name || path.basename(path.resolve(destination));
   if (!/^[a-z0-9][a-z0-9-]{0,63}$/.test(name))
     throw new Error(
@@ -162,6 +171,7 @@ function scaffold(destination, options) {
     releaseVersion,
     localDemo: Boolean(options.local),
     allowAnonymous: anonymous === true || anonymous === "true",
+    ownCredentials: credentials === true || credentials === "true",
     welcome: options.welcome || title,
     description:
       options.description ||

package/package.json CHANGED Viewed

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