@ofidj/generator-fidj 1.0.3 → 1.0.4

package/generators/app/templates/typescript/README.md

@@ -76,7 +76,8 @@ Run `npm run privacy:rehearse` for an isolated temporary-store HTTP scenario cov
 
 Sign-in and account creation require the unchecked service-agreement checkbox.
 Read the app's current text/version from the dialog before accepting. If the
-agreement cannot load, the form stays blocked. The API records the accepted
+agreement is not accepted, submitting explains the requirement while preserving
+the form; if the agreement cannot load, the form stays blocked. The API records the accepted
 version per app; optional privacy choices are separate. The app owner must replace
 the default demo agreement using the Fidj app's `configurationAsJSON.serviceAgreement`
 (`version` and `text`) before release. No generated-source edit is needed.

package/generators/app/templates/typescript/package.json

@@ -15,7 +15,7 @@
     "privacy:rehearse": "npm run build && node --test test/server.test.mjs"
   },
   "dependencies": {
-    "@ofidj/node": "^3.6.24"
+    "@ofidj/node": "^3.6.26"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
 import "./style.css";
@@ -24,6 +24,9 @@ let message =
 let failed = false;
 let busy = false;
 let leaving = false;
+let signInEmail = "";
+let signInPassword = "";
+let signInAgreementAccepted = false;
 const accountRoutes = ["forgot", "reset", "verify", "account"];
 let linkToken = "";
 let verificationConfirmed = false;
@@ -255,7 +258,7 @@ function render() {
       ? `<div class="signin-intro${config.highlights?.length ? "" : " 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>${escape(config.welcome)}</h1><p class="signin-description">${escape(config.description)}</p></div>
   ${highlights()}</div>
-  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin"><label for="email">Email</label><input id="email" type="email" placeholder="you@company.com" autocomplete="username" required><div class="field-head"><label for="password">Password</label><a href="#/forgot">Forgot?</a></div><div class="password-field"><input id="password" type="password" placeholder="••••••••••" autocomplete="current-password" required><button type="button" id="reveal" aria-controls="password">Show</button></div>${agreementMarkup()}<button class="primary" type="submit" disabled>Continue</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button></form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
+  <div class="signin-form"><div>${banner()}<h2>Sign in to ${escape(config.title)}</h2><form id="signin"><label for="email">Email</label><input id="email" type="email" value="${escape(signInEmail)}" placeholder="you@company.com" autocomplete="username" required><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" required><button type="button" id="reveal" aria-controls="password">Show</button></div>${agreementMarkup()}<button class="primary" type="submit">Continue</button><button class="secondary" type="submit" name="signup" value="true">Create an account</button></form>${config.allowAnonymous ? `<div class="signin-divider"><span>or explore first</span></div><button class="anonymous-entry" id="anonymous">Enter anonymously <span aria-hidden="true">→</span></button><p class="signin-footnote">No account needed to view the content.</p>` : ""}
   <div class="signin-trust"><p class="signin-trust-head"><img class="signin-logo" src="./fidj-logo.png" alt="Fidj"><strong>Your account, with Fidj</strong></p><p>Signing in creates one Fidj account you keep across every app that uses Fidj.</p><p>You choose what this app may store — and can export or erase it at any moment.</p></div></div>
   ${badges()}</div>`
       : `
@@ -295,17 +298,30 @@ function render() {
     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>';
-  void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId);
+  void bindAgreement(element<HTMLFormElement>("signin"), config.title, config.apiEndpoint, config.appId, signInAgreementAccepted);
   element<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
-    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
-    if (!acceptance) return;
     const email = element<HTMLInputElement>("email")?.value || "";
     const password = element<HTMLInputElement>("password")?.value || "";
+    const agreement = element<HTMLInputElement>("service-agreement");
+    signInEmail = email;
+    signInPassword = password;
+    signInAgreementAccepted = agreement?.checked === true;
+    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
+    if (!acceptance) {
+      failed = true;
+      message = "Please accept the service agreement before continuing.";
+      render();
+      return;
+    }
     const signup = (event.submitter as HTMLButtonElement)?.name === "signup";
     void action(async () => {
       if (oidc) {window.location.assign(await oidc.beginLogin()); return;}
-      await sdk.login(email, password, { autoSignup: signup, ...acceptance });
+      try {
+        await sdk.login(email, password, { autoSignup: signup, ...acceptance });
+      } catch (error) {
+        throw new Error(signInErrorMessage(error));
+      }
       await refresh();
       anonymous = false;
       // A new account belongs where a returning one lands: inside the app.

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

@@ -1,4 +1,4 @@
-import {agreementMarkup, bindAgreement, acceptedAgreement} from "./service-agreement";
+import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
 import { FidjNodeService } from "@ofidj/node";
 import "./style.css";
 
@@ -25,6 +25,9 @@ let notice = "";
 let error = "";
 let busy = false;
 let leaving = false;
+let signInEmail = "";
+let signInPassword = "";
+let signInAgreementAccepted = false;
 const escape = (value: unknown) =>
   String(value ?? "").replace(
     /[&<>"']/g,
@@ -85,7 +88,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><p>Sign in with your Fidj account.</p><label for="email">Email</label><input id="email" type="email" autocomplete="username" required><label for="password">Password</label><input id="password" type="password" autocomplete="current-password" required>${agreementMarkup()}<button class="primary" type="submit" disabled>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><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>
@@ -107,15 +110,26 @@ 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);
+  void bindAgreement(el<HTMLFormElement>("signin"), settings.title, settings.apiEndpoint, settings.appId, signInAgreementAccepted);
   el<HTMLFormElement>("signin")?.addEventListener("submit", (event) => {
     event.preventDefault();
-    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
-    if (!acceptance) return;
     const email = el<HTMLInputElement>("email").value;
     const password = el<HTMLInputElement>("password").value;
+    signInEmail = email;
+    signInPassword = password;
+    signInAgreementAccepted = el<HTMLInputElement>("service-agreement").checked;
+    const acceptance = acceptedAgreement(event.currentTarget as HTMLFormElement);
+    if (!acceptance) {
+      error = "Please accept the service agreement before continuing.";
+      render();
+      return;
+    }
     void action(async () => {
-      await sdk.login(email, password, { autoSignup: false, ...acceptance });
+      try {
+        await sdk.login(email, password, { autoSignup: false, ...acceptance });
+      } catch (reason) {
+        throw new Error(signInErrorMessage(reason));
+      }
       await load();
     });
   });

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

@@ -1,5 +1,5 @@
 export function agreementMarkup() {
-  return `<div class="signin-agreement"><label class="agreement-choice"><input id="service-agreement" type="checkbox" required disabled><span id="agreement-label">I accept the service agreement for this app.</span></label><button type="button" id="read-agreement" disabled>Read service agreement</button><p id="agreement-status" class="fineprint" role="status">Loading service agreement…</p></div><dialog id="agreement-dialog" aria-labelledby="agreement-heading"><h2 id="agreement-heading">Service agreement</h2><p id="agreement-version"></p><p id="agreement-text"></p><button type="button" id="close-agreement">Close agreement</button></dialog>`;
+  return `<div class="signin-agreement"><label class="agreement-choice"><input id="service-agreement" type="checkbox" aria-required="true" disabled><span id="agreement-label">I accept the service agreement for this app.</span></label><button type="button" id="read-agreement" disabled>Read service agreement</button><p id="agreement-status" class="fineprint" role="status">Loading service agreement…</p></div><dialog id="agreement-dialog" aria-labelledby="agreement-heading"><h2 id="agreement-heading">Service agreement</h2><p id="agreement-version"></p><p id="agreement-text"></p><button type="button" id="close-agreement">Close agreement</button></dialog>`;
 }
 
 export function acceptedAgreement(form: HTMLFormElement) {
@@ -8,14 +8,24 @@ export function acceptedAgreement(form: HTMLFormElement) {
   return { termsAccepted: true, termsVersion: checkbox.dataset.version };
 }
 
-export async function bindAgreement(form: HTMLFormElement | null, title: string, endpoint: string, appId: string) {
+export function signInErrorMessage(error: unknown) {
+  const detail = error as {code?: number; reason?: unknown; message?: unknown};
+  const reason = typeof detail?.reason === "string" ? detail.reason : typeof detail?.message === "string" ? detail.message : "";
+  if (detail?.code === 429) return "Too many attempts. Please wait before trying again.";
+  if (reason === "unknown-user") return "We could not sign in to this account. Check the email and password.";
+  if (reason === "already exists - inconsistent request") return "An account already uses this email. Check the password or sign in instead.";
+  if (/ECONNREFUSED|ENOTFOUND|ETIMEDOUT|ECONNRESET|EHOSTUNREACH|network/i.test(reason)) return "We cannot reach Fidj right now. Please try again.";
+  return "We could not sign in to this account. Please try again.";
+}
+
+export async function bindAgreement(form: HTMLFormElement | null, title: string, endpoint: string, appId: string, checked = false) {
   if (!form) return;
   const checkbox = form.querySelector<HTMLInputElement>("#service-agreement")!;
   const read = form.querySelector<HTMLButtonElement>("#read-agreement")!;
   const dialog = form.querySelector<HTMLDialogElement>("#agreement-dialog")!;
   const status = form.querySelector<HTMLElement>("#agreement-status")!;
   const submitButtons = form.querySelectorAll<HTMLButtonElement>('button[type="submit"]');
-  const update = () => submitButtons.forEach(button => { button.disabled = !acceptedAgreement(form); });
+  const update = () => submitButtons.forEach(button => { button.disabled = checkbox.disabled; });
   form.querySelector("#agreement-label")!.textContent = `I accept the service agreement for ${title}.`;
   update();
   checkbox.addEventListener("change", update);
@@ -29,6 +39,7 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
     if (!form.isConnected) return;
     checkbox.dataset.version = agreement.version;
     checkbox.disabled = false;
+    checkbox.checked = checked;
     read.disabled = false;
     dialog.querySelector("#agreement-version")!.textContent = `Version ${agreement.version}`;
     dialog.querySelector("#agreement-text")!.textContent = agreement.text;

package/package.json

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