npm - @ofidj/generator-fidj - Versions diffs - 1.1.0 → 1.3.1 - Mend

@ofidj/generator-fidj 1.1.0 → 1.3.1

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 (9) 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 +57 -8
package/generators/app/templates/typescript/src/main.ts +19 -4
package/generators/app/templates/typescript/src/service-agreement.ts +75 -0
package/generators/app/templates/typescript/src/style.css +22 -0
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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
 import "./style.css";
@@ -58,10 +58,20 @@ function badges() {
     .map((entry) => `<span>${escape(entry)}</span>`)
     .join("")}</footer>`;
 }
+// Signing out of this app revokes this app's access and nothing else: the Fidj
+// session survives, which is what makes the next app free to enter. That is a
+// good design and a bad surprise, so the notice says what actually happened and
+// where the rest of it lives — on a shared computer the difference is the whole
+// point.
+let leftTheApp = false;
 function banner() {
-  return message
-    ? `<p role="${failed ? "alert" : "status"}" class="${failed ? "error" : "notice"}">${escape(message)}</p>`
+  if (!message) return "";
+  const role = failed ? "alert" : "status";
+  const kind = failed ? "error" : "notice";
+  const finish = leftTheApp
+    ? ` <a href="${escape(config.dashboardUrl)}/#/my/profile" target="_blank" rel="noopener">Sign out of Fidj too</a>`
     : "";
+  return `<p role="${role}" class="${kind}">${escape(message)}${finish}</p>`;
 }
 // One navigation bar for every in-app screen, so signing out stays one click
@@ -83,9 +93,15 @@ function wireNav() {
     "click",
     () =>
       void action(async () => {
+        const wasSignedIn = signedIn;
         if (signedIn) await sdk.logout(true);
+        forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
+        if (wasSignedIn) {
+          leftTheApp = true;
+          message = `Signed out of ${config.title}. You are still signed in to Fidj.`;
+        }
         navigate("signin");
       }),
   );
@@ -131,8 +147,13 @@ async function refresh() {
     request(appPath + "/consents"),
     request(appPath + "/consents/history").then((result) => result.history),
   ]);
-  emailVerified = (await request("/me")).user?.verified === true;
+  const me = (await request("/me")).user;
+  emailVerified = me?.verified === true;
   signedIn = true;
+  // The ID token of a code flow carries only the subject, by design, so the
+  // address the entry can offer next time comes from the membership the app
+  // just read — not from a claim it does not have.
+  rememberSignIn(config.appId, String(me?.poc?.email || me?.username || ""));
 }
 async function action(task: () => Promise<void>) {
   if (busy) return;
@@ -146,7 +167,10 @@ async function action(task: () => Promise<void>) {
   const submit = root.querySelector<HTMLButtonElement>("button.primary");
   if (submit) submit.textContent = "Please wait…";
   failed = false;
-  if (initialized) message = "";
+  if (initialized) {
+    message = "";
+    leftTheApp = false;
+  }
   try {
     await task();
   } catch (error) {
@@ -196,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 (
@@ -345,7 +375,16 @@ function render() {
     anonymous = true;
     navigate("content");
   });
-  if (oidc && element("signin")) element("signin")!.innerHTML = agreementMarkup() + '<p>Continue securely with your Fidj account. Your password stays with Fidj.</p><button class="primary" type="submit">Continue with Fidj</button>';
+  if (oidc && element("signin"))
+    element("signin")!.innerHTML = providerEntry(
+      config.title,
+      config.appId,
+      config.ownCredentials ? credentialFields() : "",
+    );
+  element("forget-hint")?.addEventListener("click", () => {
+    forgetSignIn(config.appId);
+    render();
+  });
   void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
   element<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
@@ -362,9 +401,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) {
@@ -384,8 +430,11 @@ function render() {
     () =>
       void action(async () => {
         await sdk.logout(true);
+        forgetSignIn(config.appId);
         signedIn = false;
         anonymous = false;
+        leftTheApp = true;
+        message = `Signed out of ${config.title}. You are still signed in to Fidj.`;
         navigate("signin");
       }),
   );

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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage, providerEntry, rememberSignIn, forgetSignIn} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import "./style.css";
 import { showVersionBadge } from "./version";
@@ -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,8 +69,17 @@ 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
+  // them next time; signing out forgets it.
+  if (session?.username) rememberSignIn(settings.appId, session.username);
   [notes, privacy] = await Promise.all([
     api("notes").then((result) => result.notes),
     api("privacy"),
@@ -94,7 +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 ? `<p>Continue securely with your Fidj account. Your password stays with Fidj.</p>${agreementMarkup()}<button class="primary" type="submit">Continue with Fidj</button>` : `<p>Sign in with your Fidj account.</p><label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" value="${escape(signInPassword)}" autocomplete="current-password" required>${agreementMarkup()}<button class="primary" type="submit">Continue</button>${settings.localDemo ? `<div class="demo"><strong>Try the local example</strong><p>Alex owns the app. Maya and Sam start with the Free role.</p><button type="button" data-demo="alex">Alex · owner</button><button type="button" data-demo="maya">Maya · member</button><button type="button" data-demo="sam">Sam · member</button></div>` : ""}`}</form></section>`
+      ? `<section class="welcome"><div><p class="eyebrow">A LITTLE SPACE FOR YOUR IDEAS</p><h1>Good ideas<br>start here.</h1><p>Keep your notes together, with access you understand and privacy you control.</p><div class="promise"><img src="/fidj-logo.png" alt=""><span>Your account connects through Fidj.<br>Your choices belong to this app.</span></div></div><form id="signin" class="card"><h2>Welcome to ${escape(settings.title)}</h2>${oidc ? providerEntry(settings.title, settings.appId, 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>
@@ -157,6 +171,7 @@ function render() {
     () =>
       void action(async () => {
         await sdk.logout(true);
+        forgetSignIn(settings.appId);
         session = null;
         notes = [];
         privacy = null;

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

@@ -60,3 +60,78 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
   retry.addEventListener("click", load);
   await load();
 }
+// The entry every app that delegates to the provider renders, in one place
+// because both app shapes render it and they had drifted apart.
+//
+// "Continue with Fidj" alone borrows the grammar of an optional social login —
+// that button always sits next to an email and a password — so on an app whose
+// accounts *are* Fidj accounts, the missing form reads as something broken. The
+// explanation therefore comes before the button, not as reassurance after it,
+// and nothing presupposes an account the person may not have yet.
+const hintKey = (appId: string) => "fidj.entry." + appId;
+export function signInHint(appId: string) {
+  try {
+    return localStorage.getItem(hintKey(appId)) || "";
+  } catch {
+    return "";
+  }
+}
+// Remembered on this app's own origin, about this app's own member: no
+// cross-site question is asked, and none is answered. Signing out forgets, so a
+// shared browser does not show the next person an address.
+export function rememberSignIn(appId: string, label: string) {
+  try {
+    if (label) localStorage.setItem(hintKey(appId), label);
+  } catch {}
+}
+export function forgetSignIn(appId: string) {
+  try {
+    localStorage.removeItem(hintKey(appId));
+  } catch {}
+}
+// 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,
+      (char) =>
+        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+          char
+        ]!,
+    );
+  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 — 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/generators/app/templates/typescript/src/style.css CHANGED Viewed

@@ -935,3 +935,25 @@ summary:focus-visible {
 .signin-agreement button { margin-block: 0.5rem; padding: 0; border: 0; background: transparent; text-decoration: underline; }
 #agreement-dialog { color: var(--fidj-text); background: var(--fidj-paper); border: 1px solid var(--fidj-line); border-radius: var(--fidj-radius); padding: 1.5rem; max-width: min(40rem, calc(100vw - 2rem)); max-height: 80vh; overflow: auto; }
 #agreement-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* The entry explains itself before it offers its button. A person whose account
+ * lives somewhere else needs to know that before they look for the form that is
+ * not coming, so this is body text above the action, not fineprint below it. */
+.signin-lead {
+  margin: 0 0 18px;
+  color: var(--fidj-ink-soft, inherit);
+  line-height: 1.5;
+}
+/* Present but not competing: "use a different account" is the way out of a
+ * remembered address, not an alternative worth the weight of the primary. */
+button.quiet {
+  margin-top: 10px;
+  background: none;
+  border: none;
+  color: inherit;
+  text-decoration: underline;
+  padding: 6px 0;
+  font: inherit;
+  cursor: pointer;
+  width: auto;
+}

package/lib/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.1.0",
+  "version": "1.3.1",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {