@ofidj/generator-fidj 3.13.0 → 3.14.0

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

@@ -15,8 +15,8 @@
     "privacy:rehearse": "npm run build && node --test test/server.test.mjs"
   },
   "dependencies": {
-    "@ofidj/entry": "^3.13.0",
-    "@ofidj/node": "^3.13.0"
+    "@ofidj/entry": "^3.14.0",
+    "@ofidj/node": "^3.14.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",

package/generators/app/templates/typescript/scripts/render-content.mjs

@@ -32,6 +32,6 @@ function mountedHead(config) {
 export function renderContent(config) {
   // HTML is supplied by the developer at generation time, never by an app visitor.
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="referrer" content="no-referrer"><title>${escape(config.title)}</title><link rel="icon" href="${escape(config.favicon)}"><link rel="stylesheet" href="./main.css">${mountedHead(config)}</head><body>
-  <header class="topbar"><a class="brand" href="#/content"><img src="${escape(config.logo)}" alt="">${escape(config.title)}</a><nav class="content-nav" id="app-nav" aria-label="App navigation" hidden></nav></header>
+  <header class="topbar"><a class="brand" href="#/content"><img src="${escape(config.logo)}" alt=""><span class="brand-name">${escape(config.title)}</span></a><nav class="content-nav" id="app-nav" aria-label="App navigation" hidden></nav></header>
   <main><template id="public-content"><section class="card public-content"><h1>${escape(config.welcome)}</h1><div>${config.content}</div></section></template><div id="app" aria-live="polite"></div><footer>Built with Fidj · Your choices belong to this app.</footer></main><script type="module" src="./main.js"></script></body></html>`;
 }

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

@@ -45,7 +45,7 @@ let accountEmail = "";
 // with the agreement unchecked folded the form away and left the complaint
 // floating above a door the person could no longer see.
 let emailEntryOpen = false;
-const accountRoutes = ["forgot", "reset", "verify", "account"];
+const accountRoutes = ["forgot", "reset", "verify", "profile"];
 let linkToken = "";
 let verificationConfirmed = false;
 function currentRoute() {
@@ -88,17 +88,23 @@ function banner() {
 // account, and it lives on that account's screen.
 function appNav(current: "content" | "account") {
   const tab = (id: string, label: string, selected: boolean) =>
-    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}>${label}</button>`;
+    `<button id="${id}"${selected ? ' class="selected" aria-current="page"' : ""}><span class="tab-label">${label}</span></button>`;
   const account = signedIn
     ? tab(
         "account-tab",
-        accountEmail ? `Account (${escape(accountEmail)})` : "Account",
+        accountEmail ? `Profile (${escape(accountEmail)})` : "Profile",
         current === "account",
       )
     : tab("account-tab", "Sign in", false);
   return tab("content-tab", "Content", current === "content") + account;
 }
 
+function profileSummary() {
+  const publicUrl = `${config.dashboardUrl}/#/pub/${encodeURIComponent(config.appId)}`;
+  const badgeUrl = `${config.apiEndpoint}/apps/${encodeURIComponent(config.appId)}/badge`;
+  return `<header class="profile-summary"><div class="profile-summary-copy"><span class="eyebrow">Profile</span><strong>${escape(accountEmail)}</strong><span>${escape(config.title)}</span></div><a class="profile-public" href="${escape(publicUrl)}" target="_blank" rel="noopener"><img src="${escape(badgeUrl)}" alt="${escape(config.title)} public badge" width="133" height="20"></a><button id="exit" class="danger">Sign out</button></header>`;
+}
+
 // The bar belongs to the document, not to the screen being drawn: it survives
 // every route change, so it is filled rather than rebuilt with the page.
 function renderNav(current: "content" | "account") {
@@ -112,7 +118,7 @@ function renderNav(current: "content" | "account") {
 function wireNav() {
   element("content-tab")?.addEventListener("click", () => navigate("content"));
   element("account-tab")?.addEventListener("click", () =>
-    navigate(signedIn ? "account" : "signin"),
+    navigate(signedIn ? "profile" : "signin"),
   );
 }
 
@@ -557,15 +563,15 @@ function render() {
     route = "signin";
   else if (!["signin", "content", "privacy", ...accountRoutes].includes(route))
     route = "content";
-  // The privacy screen and the account screen became one. The address that
+  // The privacy screen and the profile screen became one. The address that
   // named the first still means something to anyone who bookmarked it, so it
   // arrives where that screen went rather than nowhere.
-  if (route === "privacy") route = signedIn ? "account" : "signin";
+  if (route === "privacy") route = signedIn ? "profile" : "signin";
   window.history.replaceState(null, "", "#/" + route);
-  // My account is a signed-in screen and keeps the app's chrome. Recovery and
+  // Profile is a signed-in screen and keeps the app's chrome. Recovery and
   // verification are reached without a session, so they stand alone.
   const standaloneAccount =
-    accountRoutes.includes(route) && !(route === "account" && signedIn);
+    accountRoutes.includes(route) && !(route === "profile" && signedIn);
   document.body.classList.toggle(
     "signin-view",
     route === "signin" || standaloneAccount,
@@ -584,11 +590,11 @@ function render() {
     renderAccount(route);
     return;
   }
-  if (route === "account") {
+  if (route === "profile") {
     // The two ways out, last and together: back to the app, or out of this
     // session. Leaving the app itself is a different decision and stays where
     // the things it erases are listed.
-    root.innerHTML = `<section class="card content-account">${banner()}${accountForm("account", {linkToken, verificationConfirmed, emailVerified, accountEmail})}${privacyBlock()}<div class="account-actions"><button id="continue-app" class="primary">Continue to ${escape(config.title)}</button><button id="exit">Sign out</button></div></section>`;
+    root.innerHTML = `<section class="content-account">${profileSummary()}<div class="card profile-body">${banner()}${accountForm("account", {linkToken, verificationConfirmed, emailVerified, accountEmail}, {compact: true})}${privacyBlock()}</div></section>`;
     renderNav("account");
     wireAccount("account");
     wireSignOut();

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

@@ -213,7 +213,7 @@ function render() {
   const canWrite = session?.roles.some((role) =>
     ["Owner", "Editor"].includes(role),
   );
-  root.innerHTML = `<header class="topbar"><a class="brand" href="/"><span class="app-symbol">✳</span>${escape(settings.title)}</a><a class="fidj-brand" href="${escape(settings.dashboardUrl)}" target="_blank" rel="noopener"><img src="/fidj-logo.png" alt="Fidj">Privacy with Fidj ↗</a></header>
+  root.innerHTML = `<header class="topbar"><a class="brand" href="/"><span class="app-symbol">✳</span><span class="brand-name">${escape(settings.title)}</span></a><a class="fidj-brand" href="${escape(settings.dashboardUrl)}" target="_blank" rel="noopener"><img src="/fidj-logo.png" alt="Fidj">Privacy with Fidj ↗</a></header>
   <main>${notice ? `<p class="notice" role="status">${escape(notice)}</p>` : ""}${error ? `<p class="error" role="alert">${escape(error)}</p>` : ""}
   ${
     !session

package/package.json

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