@ofidj/generator-fidj 1.0.5 → 1.0.7

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

@@ -2,10 +2,12 @@ import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} f
 import { FidjNodeService, FidjOidcClient } from "@ofidj/node";
 import config from "../app.config.json";
 import "./style.css";
+import { showVersionBadge } from "./version";
 
 const sdk = new FidjNodeService();
 const oidc = config.oidcIssuer ? new FidjOidcClient({issuer: config.oidcIssuer, clientId: config.appId, redirectUri: window.location.origin + window.location.pathname, apiEndpoint: config.apiEndpoint, storage: sessionStorage}) : null;
 const root = document.querySelector<HTMLDivElement>("#app")!;
+showVersionBadge(config.releaseVersion);
 const appPath = `/me/apps/${encodeURIComponent(config.appId)}`;
 let signedIn = false;
 let emailVerified = false;

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

@@ -1,6 +1,7 @@
 import {agreementMarkup, bindAgreement, acceptedAgreement, signInErrorMessage} from "./service-agreement";
 import { FidjNodeService } from "@ofidj/node";
 import "./style.css";
+import { showVersionBadge } from "./version";
 
 type Session = { username: string; roles: string[] };
 type Note = { id: string; title: string; body: string; createdAt: string };
@@ -10,6 +11,7 @@ type Settings = {
   apiEndpoint: string;
   dashboardUrl: string;
   localDemo: boolean;
+  releaseVersion: string;
 };
 const root = document.querySelector<HTMLDivElement>("#app")!;
 const sdk = new FidjNodeService();
@@ -248,6 +250,7 @@ function render() {
 async function start() {
   try {
     settings = await (await fetch("/api/config")).json();
+    showVersionBadge(settings.releaseVersion);
     await sdk.init(settings.appId, {
       apiEndpoint: settings.apiEndpoint,
       prod: !settings.localDemo,

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" 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>`;
+  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><button type="button" id="retry-agreement" hidden>Retry</button></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) {
@@ -24,6 +24,7 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
   const read = form.querySelector<HTMLButtonElement>("#read-agreement")!;
   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"]');
   const update = () => submitButtons.forEach(button => { button.disabled = checkbox.disabled; });
   form.querySelector("#agreement-label")!.textContent = `I accept the service agreement for ${title}.`;
@@ -31,21 +32,31 @@ export async function bindAgreement(form: HTMLFormElement | null, title: string,
   checkbox.addEventListener("change", update);
   read.addEventListener("click", () => dialog.showModal());
   form.querySelector("#close-agreement")!.addEventListener("click", () => dialog.close());
-  try {
-    const response = await fetch(`${endpoint}/apps/${encodeURIComponent(appId)}`, {signal: AbortSignal.timeout(10000)});
-    if (!response.ok) throw new Error("Agreement unavailable");
-    const agreement = (await response.json()).app?.agreement;
-    if (!agreement || typeof agreement.version !== "string" || !agreement.version || typeof agreement.text !== "string" || !agreement.text) throw new Error("Agreement unavailable");
-    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;
-    status.textContent = "Required to sign in. Optional data choices stay separate.";
-    update();
-  } catch {
-    if (form.isConnected) status.textContent = "The service agreement could not be loaded. Reload this page to try again.";
-  }
+  const load = async () => {
+    retry.hidden = true;
+    status.textContent = "Loading service agreement…";
+    try {
+      const response = await fetch(`${endpoint}/apps/${encodeURIComponent(appId)}`, {signal: AbortSignal.timeout(10000)});
+      if (!response.ok) throw new Error(response.status === 404 ? "missing" : "unreachable");
+      const agreement = (await response.json()).app?.agreement;
+      if (!agreement || typeof agreement.version !== "string" || !agreement.version || typeof agreement.text !== "string" || !agreement.text) throw new Error("missing");
+      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;
+      status.textContent = "Required to sign in. Optional data choices stay separate.";
+      update();
+    } catch (error) {
+      if (!form.isConnected) return;
+      status.textContent = error instanceof Error && error.message === "missing"
+        ? "This app has no service agreement available."
+        : "We cannot reach Fidj right now. Try again.";
+      retry.hidden = false;
+    }
+  };
+  retry.addEventListener("click", load);
+  await load();
 }

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

@@ -419,6 +419,21 @@ footer {
   border-top: 1px solid var(--fidj-line-soft);
   padding: 28px 0 10px;
 }
+.fidj-version {
+  position: fixed;
+  right: 10px;
+  bottom: 8px;
+  z-index: 1000;
+  padding: 4px 7px;
+  border: 1px solid var(--fidj-line-soft);
+  border-radius: var(--fidj-radius);
+  background: var(--fidj-paper);
+  color: var(--fidj-text-faint);
+  font-family: var(--fidj-font-mono);
+  font-size: 10px;
+  line-height: 1;
+  opacity: 0.9;
+}
 
 @media (max-width: 760px) {
   main {

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

@@ -0,0 +1,8 @@
+export function showVersionBadge(version: string): void {
+  if (!/^\d{2}\.\d{2}\.\d{2}$/.test(version || "")) return;
+  const badge = document.createElement("div");
+  badge.className = "fidj-version";
+  badge.setAttribute("aria-label", `App version ${version}`);
+  badge.textContent = `v${version}`;
+  document.body.append(badge);
+}

package/lib/scaffold.cjs

@@ -136,6 +136,7 @@ function scaffold(destination, options) {
     apiEndpoint: localApi,
     dashboardUrl: options.local ? "http://localhost:4200" : "https://fidj.ovh",
     title,
+    releaseVersion: new Date().toISOString().slice(2, 10).replaceAll("-", "."),
     localDemo: Boolean(options.local),
     allowAnonymous: anonymous === true || anonymous === "true",
     welcome: options.welcome || title,

package/package.json

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