@ofidj/generator-fidj 1.1.0 → 1.2.0

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

@@ -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) {
@@ -345,7 +369,12 @@ 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);
+  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();
@@ -384,8 +413,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

@@ -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";
@@ -66,6 +66,9 @@ async function api(path: string, method = "GET", data?: unknown) {
 }
 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 +97,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) : `<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>`
       : `
   <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 +160,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

@@ -60,3 +60,55 @@ 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 {}
+}
+
+export function providerEntry(title: string, appId: string) {
+  const escapeText = (value: unknown) =>
+    String(value ?? "").replace(
+      /[&<>"']/g,
+      (char) =>
+        ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[
+          char
+        ]!,
+    );
+  const hint = signInHint(appId);
+  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;
+}

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

@@ -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/package.json

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