@ofidj/generator-fidj 3.7.5 → 3.8.1

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

@@ -578,11 +578,12 @@ body.has-module {
   line-height: 1.55;
   color: var(--fidj-on-ink-faint);
 }
+/* No rule of its own: the disclosure above already draws one across the panel,
+ * and two lines a few pixels apart read as a mistake rather than as structure. */
 .signin-trust {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  border-top: 1px solid var(--fidj-line-soft);
   padding-top: 20px;
 }
 .signin-trust-head {
@@ -646,7 +647,10 @@ body.has-module {
 .signin-form input {
   min-height: 48px;
 }
-.signin-form form > button {
+/* The app's own buttons sit one level deeper now that the credential form is
+ * inside a disclosure, so the rule follows them in rather than losing them. */
+.signin-form form > button,
+.signin-form form #email-entry > button {
   min-height: 48px;
   width: 100%;
   margin-top: 12px;
@@ -780,13 +784,63 @@ body.has-module {
 .content-account input:not([type="checkbox"]) {
   width: 100%;
 }
-.content-nav {
+/* The app's navigation lives in the app's own bar, past its mark and its name
+ * and past a rule — the shape Fidj's console uses for the same job. It used to
+ * sit in the page under a bar that carried only a name, which read as two
+ * headers for one app and put the way out a scroll away from the way in. */
+.topbar .content-nav {
+  border: 0;
+  border-left: 1px solid var(--fidj-ink-line-soft);
+  border-radius: 0;
+  margin: 0 auto 0 0;
+  padding-left: clamp(12px, 2vw, 20px);
+  gap: 2px;
+  flex-wrap: nowrap;
+}
+.topbar .content-nav button {
+  padding: 8px 12px;
+  font-size: 13.5px;
+  color: var(--fidj-on-ink-faint);
+  border-bottom: 0;
+  white-space: nowrap;
+}
+.topbar .content-nav button:hover:not(:disabled) {
+  color: var(--fidj-on-ink);
+}
+.topbar .content-nav button.selected {
+  color: var(--fidj-on-ink);
+  font-weight: 600;
+}
+.topbar .content-nav button:last-child {
+  margin-left: 0;
+}
+/* Who you are, said where it can be checked against what follows. */
+.account-identity {
+  font-size: 15px;
+}
+/* The two ways out of this screen, last and together. */
+.account-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 10px;
+  margin-top: 28px;
+  padding-top: 22px;
+  border-top: 1px solid var(--fidj-line-soft);
 }
-.content-nav #exit {
-  margin-left: auto;
+.account-actions .primary {
+  width: auto;
+  flex: 1;
+  min-width: 200px;
+  margin: 0;
+}
+
+/* The account tab carries the address it is about, and that address is long.
+ * It gives way before the app's own name does. */
+.topbar .content-nav #account-tab {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 .signin-logo {
   width: 22px;
@@ -957,3 +1011,147 @@ button.quiet {
   cursor: pointer;
   width: auto;
 }
+
+/* The Fidj door.
+ *
+ * The accent is the Fidj mark, and this is the one control on an app's entry
+ * that belongs to Fidj rather than to the app. It is also the door the app
+ * would rather people took — the one where the password is never typed here —
+ * and those two reasons happen to want the same paint. Nothing else on the
+ * screen wears it, which is what makes it read as the way in rather than as one
+ * option among several. */
+.primary.fidj-entry {
+  background: var(--fidj-accent);
+  border-color: var(--fidj-accent);
+  color: var(--fidj-on-accent);
+  margin-top: 0;
+}
+.primary.fidj-entry:hover:not(:disabled) {
+  background: var(--fidj-accent-strong);
+  border-color: var(--fidj-accent-strong);
+}
+/* While the Fidj window is open, the door is no longer the way in — it is the
+ * way back to the window doing the work. So it reads as a state rather than an
+ * invitation, and keeps the pointer, because it is the one thing on the screen
+ * somebody who has lost that window behind this page needs to be able to press. */
+.primary.fidj-entry.is-waiting,
+.primary.fidj-entry.is-waiting:hover:not(:disabled) {
+  background: var(--fidj-surface-sunk);
+  border-color: var(--fidj-line);
+  color: var(--fidj-text-faint);
+  cursor: pointer;
+}
+.primary.fidj-entry.is-waiting:hover:not(:disabled) {
+  border-color: var(--fidj-line-hover);
+  color: var(--fidj-text-muted);
+}
+
+/* The app's own form, second. A disclosure rather than a second button of equal
+ * weight: it costs the person who wants it one click, and costs everybody else
+ * nothing — where two buttons side by side charged every arrival a decision.
+ *
+ * It sits with the button it is an alternative to, not a rule and a gap away:
+ * separated, the two read as unrelated parts of the screen rather than as the
+ * two ways in. */
+.signin-alternate {
+  margin-top: 2px;
+}
+/* A seam across the panel rather than a link hanging off its left edge: the
+ * label in the middle with a rule running out to each side, which is what says
+ * "below this, a different way in" instead of "here is one more control". */
+.signin-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 0;
+  min-height: 0;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 13.5px;
+  color: var(--fidj-text-muted);
+  cursor: pointer;
+}
+.signin-toggle::before,
+.signin-toggle::after {
+  content: "";
+  height: 1px;
+  flex: 1;
+  background: var(--fidj-line);
+}
+.signin-toggle-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.signin-toggle:hover:not(:disabled) {
+  color: var(--fidj-text);
+}
+.signin-toggle:hover:not(:disabled)::before,
+.signin-toggle:hover:not(:disabled)::after {
+  background: var(--fidj-line-hover);
+}
+/* The caret points at what pressing it does: down at a form that is not here
+ * yet, and — turned over — up at the one it would put away again. */
+.signin-toggle .caret {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+  transition: transform 220ms ease;
+}
+.signin-toggle[aria-expanded="true"] .caret {
+  transform: rotate(180deg);
+}
+.signin-alternate #email-entry {
+  margin-top: 6px;
+}
+
+/* Opening the form folds the Fidj door away, because the two are alternatives
+ * and only one of them is being used. Folding rather than vanishing is the part
+ * that says so: the form visibly takes the room the door was holding. */
+.primary.fidj-entry {
+  overflow: hidden;
+  max-height: 64px;
+  transition:
+    max-height 220ms ease,
+    min-height 220ms ease,
+    opacity 140ms ease,
+    margin 220ms ease,
+    padding 220ms ease,
+    border-width 220ms ease;
+}
+.primary.fidj-entry.is-folded {
+  /* `min-height` wins over `max-height`, so the entry's own 48px floor has to
+   * come down too or nothing moves. */
+  min-height: 0;
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-width: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .primary.fidj-entry,
+  .signin-toggle .caret {
+    transition: none;
+  }
+}
+
+/* A window that opened itself over the page somebody was on owes them the way
+ * back before it asks for a password. */
+.signin-return {
+  margin: 0 0 18px;
+  padding: 10px 12px;
+  background: var(--fidj-surface-sunk);
+  border-left: 2px solid var(--fidj-accent);
+  color: var(--fidj-text-muted);
+  font-size: 13.5px;
+  line-height: 1.5;
+}

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

@@ -34,6 +34,11 @@
   /* Accents. The red is the Fidj mark; it identifies the account and privacy
    * provider, so it stays sparing — a dot, a rule, a hover. */
   --fidj-accent: #d6342c;
+  /* The one place the accent is a surface rather than a mark: the Fidj door on
+   * a sign-in entry. It is the control that belongs to Fidj and not to the app
+   * around it, so it is the one thing allowed to carry the mark's weight. */
+  --fidj-accent-strong: #b52a23;
+  --fidj-on-accent: #fbfaf8;
   --fidj-danger: #b8352c;
   --fidj-danger-strong: #8c2a22;
   --fidj-danger-tint: #fdf7f6;

package/lib/scaffold.cjs

@@ -25,15 +25,27 @@ 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.
+  // How this app asks, in the owner's words.
+  //
+  // `button` delegates every sign-in to Fidj, which is the promise the entry
+  // makes — this app never sees a password — so it is what an owner gets
+  // without asking. `inline` keeps the app's own form and nothing else, for an
+  // owner who has decided that their page, not only Fidj, is to be trusted with
+  // the credential. `both` leads with the button and folds the form under it.
+  //
+  // One input with three values rather than a boolean, because "no button" and
+  // "no form" are different apps and a flag named after one cannot say the
+  // other. `--credentials true|false` said the same thing about a product that
+  // had only two shapes; it still means what it meant, and `--signin` wins when
+  // both are given.
   const credentials = options.credentials ?? false;
   if (![true, false, "true", "false"].includes(credentials))
     throw new Error("--credentials must be true or false.");
+  const signin =
+    options.signin ??
+    (credentials === true || credentials === "true" ? "both" : "button");
+  if (!["button", "inline", "both"].includes(signin))
+    throw new Error("--signin must be button, inline or both.");
   const name = options.name || path.basename(path.resolve(destination));
   if (!/^[a-z0-9][a-z0-9-]{0,63}$/.test(name))
     throw new Error(
@@ -157,7 +169,7 @@ function scaffold(destination, options) {
   // The app's own server serves this to its page: the entry cannot redirect to
   // a provider it was never told about.
   const issuerSetting = options.oidcIssuer ? `FIDJ_OIDC_ISSUER=${options.oidcIssuer}\n` : "";
-  const settings = `FIDJ_APP_ID=${options.appId}\nFIDJ_API_ENDPOINT=${api.href.replace(/\/$/, "")}\n${issuerSetting}FIDJ_DASHBOARD_URL=https://fidj.ovh\nAPP_TITLE=${title}\nAPP_VERSION=${releaseVersion}\nPORT=8200\nHOST=127.0.0.1\nLOCAL_DEMO=false\nFIDJ_DATA_DIR=../.fidj-data/${name}\nFIDJ_PRIVACY_ADAPTER_KEY=\n`;
+  const settings = `FIDJ_APP_ID=${options.appId}\nFIDJ_API_ENDPOINT=${api.href.replace(/\/$/, "")}\n${issuerSetting}FIDJ_DASHBOARD_URL=https://fidj.ovh\nAPP_TITLE=${title}\nAPP_VERSION=${releaseVersion}\nFIDJ_SIGNIN=${signin}\nPORT=8200\nHOST=127.0.0.1\nLOCAL_DEMO=false\nFIDJ_DATA_DIR=../.fidj-data/${name}\nFIDJ_PRIVACY_ADAPTER_KEY=\n`;
   const localApi = options.local
     ? "http://localhost:3201/v3"
     : api.href.replace(/\/$/, "");
@@ -175,7 +187,7 @@ function scaffold(destination, options) {
     releaseVersion,
     localDemo: Boolean(options.local),
     allowAnonymous: anonymous === true || anonymous === "true",
-    ownCredentials: credentials === true || credentials === "true",
+    signin,
     welcome: options.welcome || title,
     description:
       options.description ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ofidj/generator-fidj",
-  "version": "3.7.5",
+  "version": "3.8.1",
   "description": "Generate a TypeScript app with Fidj sign-in, live server-side roles and per-app privacy.",
   "homepage": "https://fidj.ovh",
   "bugs": {
@@ -22,7 +22,9 @@
   "dependencies": {
     "yeoman-generator": "^4.12.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "knip": "^6.35.1"
+  },
   "eslintConfig": {
     "extends": "xo-space",
     "env": {
@@ -31,7 +33,8 @@
   },
   "repository": "https://github.com/ofidj/generator-fidj.git",
   "scripts": {
-    "test": "node --test test/*.test.cjs"
+    "test": "node --test test/*.test.cjs",
+    "bp:dead-code": "knip"
   },
   "license": "MIT",
   "bin": {