@monster-orange/den 0.4.20 → 0.4.21

package/src/ui/server/public/error-page.js

@@ -268,7 +268,8 @@ export function landingAfterSignIn(loc) {
  */
 function githubBlock(s, t) {
   const g = s.github;
-  if (!g || s.localhost || g.state === "no_client_id") return "";
+  if (!g || s.localhost || g.state === "no_client_id" || g.state === "claim")
+    return "";
   const host = s.machine || "";
   const ready = g.state === "ready";
   const step1 = withHost(t, "err.signin.ghStep1", {
@@ -291,6 +292,9 @@ function githubBlock(s, t) {
         `<button type="button" class="btn primary" id="den-gh-start">${esc(t("err.signin.github"))}</button>` +
         `</div><div id="den-gh-flow" aria-live="polite"></div>`
       : "") +
+    (!ready && g.message
+      ? `<p class="den-gh-note" id="den-gh-norule">${esc(g.message)}</p>`
+      : "") +
     `<p class="den-gh-note" id="den-gh-only">${esc(t("err.signin.ghOnly"))}` +
     (g.learnMore
       ? ` <a id="den-gh-learn" href="${esc(g.learnMore)}" target="_blank" rel="noopener noreferrer">${esc(t("err.signin.ghLearn"))}</a>`
@@ -299,6 +303,57 @@ function githubBlock(s, t) {
   );
 }
 
+/**
+ * D17: a Den with no owner yet that a rule lets someone claim. It leads the
+ * page: Connect your GitHub account. "This is my computer" (with
+ * web.allowed_github_org) goes to localhost and back, which only works in a
+ * browser on the machine Den runs on, then starts the GitHub sign-in with
+ * that proof; "Sign in as @login" (web.owner_github) works from anywhere.
+ */
+function claimBlock(s, t) {
+  const g = s.github;
+  if (!g || g.state !== "claim" || s.localhost) return "";
+  const host = s.machine || "";
+  const back = location.origin + location.pathname + location.search;
+  const here = g.attest ? `${g.attest}?return=${encodeURIComponent(back)}` : "";
+  return (
+    `<div id="den-gh" class="den-claim">` +
+    `<h2 class="den-h" id="den-claim-title">${esc(t("err.signin.claimTitle"))}</h2>` +
+    `<p class="lead" id="den-claim-lead">${esc(t("err.signin.claimLead", { name: s.name || "Den" }))}</p>` +
+    (g.org
+      ? `<p id="den-claim-org">${withHost(t, "err.signin.claimOrg", { org: g.org, host })}</p>`
+      : "") +
+    `<div class="acts" style="margin-top:0">` +
+    (here
+      ? `<a class="btn primary" id="den-claim-here" href="${esc(here)}">${esc(t("err.signin.claimHere"))}</a>`
+      : "") +
+    (g.ownerGithub
+      ? `<button type="button" class="btn${here ? "" : " primary"}" id="den-gh-start">${esc(t("err.signin.claimAs", { login: g.ownerGithub }))}</button>`
+      : "") +
+    `</div><div id="den-gh-flow" aria-live="polite"></div>` +
+    (here
+      ? `<p class="den-gh-note" id="den-claim-note">${withHost(t, "err.signin.claimHereNote", { host })}</p>`
+      : "") +
+    `</div>`
+  );
+}
+
+/** D17: the "This is my computer" code /attest put in the fragment, taken once. */
+export function takeAttestCode(loc = location, hist = history) {
+  const m = /(?:^#|&)den-attest=([^&]+)/.exec(loc.hash || "");
+  if (!m) return "";
+  try {
+    hist.replaceState(null, "", loc.pathname + loc.search);
+  } catch {
+    /* the address keeps it; it is single use anyway */
+  }
+  try {
+    return decodeURIComponent(m[1]);
+  } catch {
+    return "";
+  }
+}
+
 /** How often, and how long, the page watches for an owner (SEC-2a-UX). */
 export const OWNER_POLL_MS = 5000;
 const OWNER_WATCH_MS = 30 * 60 * 1000;
@@ -332,17 +387,23 @@ function watchOwner(root, t, s, pollMs = OWNER_POLL_MS) {
   setTimeout(tick, pollMs);
 }
 
-/** The device flow on the page: start, show the code, poll, go on. */
-function wireGithub(root, t, s) {
+/**
+ * The device flow on the page: start, show the code, poll, go on. D17: with
+ * `attest` (the code "This is my computer" brought back), it starts at once
+ * with that proof.
+ */
+function wireGithub(root, t, s, attest = "") {
   const start = root.querySelector("#den-gh-start");
   const box = root.querySelector("#den-gh-flow");
-  if (!start || !box) return;
+  if (!box || (!start && !attest)) return;
   let timer = null;
   const show = (html) => (box.innerHTML = html);
   const fail = (text) => {
     clearTimeout(timer);
-    start.hidden = false;
-    start.textContent = t("err.signin.githubAgain");
+    if (start) {
+      start.hidden = false;
+      start.textContent = t("err.signin.githubAgain");
+    }
     show(
       `<p class="den-gh-err" role="alert" style="margin-top:12px">${esc(text)}</p>`,
     );
@@ -367,29 +428,31 @@ function wireGithub(root, t, s) {
           return;
         }
         fail(
-          b.state === "refused"
-            ? t("err.signin.githubRefused", {
-                login: b.login ?? "",
-                name: s.name,
-              })
-            : b.state === "expired"
-              ? t("err.signin.githubExpired")
-              : b.state === "denied"
-                ? t("err.signin.githubDenied")
-                : t("err.signin.githubFailed"),
+          b.state === "refused" && b.error
+            ? b.error
+            : b.state === "refused"
+              ? t("err.signin.githubRefused", {
+                  login: b.login ?? "",
+                  name: s.name,
+                })
+              : b.state === "expired"
+                ? t("err.signin.githubExpired")
+                : b.state === "denied"
+                  ? t("err.signin.githubDenied")
+                  : t("err.signin.githubFailed"),
         );
       })
       .catch(() => fail(t("err.signin.githubFailed")));
   };
-  start.addEventListener("click", () => {
+  const begin = (body) => {
     clearTimeout(timer);
-    start.disabled = true;
+    if (start) start.disabled = true;
     fetch("/api/github/signin", {
       method: "POST",
       cache: "no-store",
       credentials: "same-origin",
       headers: { "Content-Type": "application/json" },
-      body: "{}",
+      body: JSON.stringify(body),
     })
       .then((r) =>
         r
@@ -398,7 +461,7 @@ function wireGithub(root, t, s) {
           .then((b) => [r.status, b]),
       )
       .then(([status, b]) => {
-        start.disabled = false;
+        if (start) start.disabled = false;
         if (!b.ok || !b.userCode) {
           fail(
             status === 429
@@ -407,7 +470,11 @@ function wireGithub(root, t, s) {
           );
           return;
         }
-        start.hidden = true;
+        if (start) start.hidden = true;
+        const here = root.querySelector("#den-claim-here");
+        if (here) here.style.display = "none";
+        const note = root.querySelector("#den-claim-note");
+        if (note) note.style.display = "none";
         const url = b.verificationUri || "https://github.com/login/device";
         const shown = url.replace(/^https:\/\//, "");
         show(
@@ -417,21 +484,30 @@ function wireGithub(root, t, s) {
               url: `<a href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(shown)}</a>`,
             },
           )}</p>` +
-            `<pre class="code" id="den-gh-code" style="font-size:22px;letter-spacing:0.12em;text-align:center">${esc(b.userCode)}</pre>` +
+            // The code and its copy button on one line, as every command.
+            cmdLine("den-gh-code", b.userCode, t).replace(
+              'class="den-cmd"',
+              'class="den-cmd den-gh-coderow"',
+            ) +
             `<div class="acts" style="margin-top:0">` +
-            `<a class="btn primary" id="den-gh-open" href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(t("err.signin.githubOpen"))}</a>` +
-            `<button type="button" class="btn" id="den-gh-copy">${esc(t("err.signin.githubCopy"))}</button></div>` +
+            `<a class="btn primary" id="den-gh-open" href="${esc(url)}" target="_blank" rel="noopener noreferrer">${esc(t("err.signin.githubOpen"))}</a></div>` +
             `<p class="den-gh-wait" style="margin-top:12px">${esc(t("err.signin.githubWaiting"))}</p>`,
         );
-        const cp = box.querySelector("#den-gh-copy");
-        cp?.addEventListener("click", () => copy(b.userCode, cp, t));
+        wireCopy(box, t);
         timer = setTimeout(() => poll(b.id), 1500);
       })
       .catch(() => {
-        start.disabled = false;
+        if (start) start.disabled = false;
         fail(t("err.signin.githubFailed"));
       });
-  });
+  };
+  start?.addEventListener("click", () => begin({}));
+  if (attest) {
+    show(
+      `<p class="den-gh-wait" style="margin-top:12px">${esc(t("err.signin.claimChecking", { host: s.machine || "" }))}</p>`,
+    );
+    begin({ attest });
+  }
 }
 
 /**
@@ -604,6 +680,8 @@ function mountSignedOut(root, sh, d) {
     `<div class="sub">${esc(t("err.signin.sub"))}</div></div></div>`;
   if (s.confirm) {
     // SEC-2a: a link `web login` waits on: the code it printed, first.
+    // D17: a plain sign-in page, no shell frame and no error wording.
+    document.body.classList.add("den-plain");
     root.innerHTML =
       `<div class="ph"><div><h1>${esc(t("err.signin.title", { name }))}</h1>` +
       `<div class="sub">${esc(t("err.signin.sub"))}</div></div></div>` +
@@ -617,7 +695,6 @@ function mountSignedOut(root, sh, d) {
       `<p class="den-confirm-err" id="den-confirm-err" role="alert" style="margin-top:12px"></p>` +
       `</form>` +
       `<p class="den-signin-why">${withHost(t, "err.signin.confirmWhy", { host })}</p>` +
-      facts +
       `</div>`;
     const form = root.querySelector("#den-confirm");
     const input = root.querySelector("#den-confirm-code");
@@ -672,15 +749,20 @@ function mountSignedOut(root, sh, d) {
       `<div class="acts"><a class="btn primary" id="den-signin-local" href="${esc(s.localhost)}">${esc(t("err.421.open"))}</a></div></div>`;
     return;
   }
-  const gh = githubBlock(s, t);
+  const claim = claimBlock(s, t);
+  const gh = claim || githubBlock(s, t);
   root.innerHTML =
     head +
     `<div class="empty" id="den-signin">` +
     (s.expired
       ? `<p class="lead" role="alert">${esc(t("err.signin.expiredLead"))}</p>`
       : "") +
-    `<p class="lead" id="den-signin-where">${withHost(t, "err.signin.where", { name, host })}</p>` +
-    gh +
+    claim +
+    // D17: with the claim first, "from another computer" may not be true.
+    (claim
+      ? ""
+      : `<p class="lead" id="den-signin-where">${withHost(t, "err.signin.where", { name, host })}</p>`) +
+    (claim ? "" : gh) +
     `<h2 class="den-h" id="den-pair-title">${esc(t(gh ? "err.signin.approveOr" : "err.signin.approve"))}</h2>` +
     `<div id="den-pair" aria-live="polite"></div>` +
     `<p class="den-signin-why"><b>${esc(t("err.signin.whyTitle"))}</b> ${withHost(t, "err.signin.whyText", { name, host })}</p>` +
@@ -695,7 +777,7 @@ function mountSignedOut(root, sh, d) {
     facts +
     `</div>`;
   wireCopy(root, t);
-  wireGithub(root, t, s);
+  wireGithub(root, t, s, claim ? takeAttestCode() : "");
   watchOwner(root, t, s, window.__denOwnerPollMs || OWNER_POLL_MS);
   wirePair(root, t, s);
   if (s.expired) return;

package/src/ui/server/public/error.html

@@ -48,6 +48,16 @@
         flex-direction: column;
         overflow: hidden;
       }
+      /* D17: the /auth code page is a plain sign-in page: no shell frame
+         around it, the form in the middle. */
+      html body.den-plain > :not(#den-content):not(script):not(style) {
+        display: none !important;
+      }
+      html body.den-plain > #den-content {
+        max-width: 560px;
+        margin: 10vh auto 0;
+        width: 100%;
+      }
       /* .main */
       html body.den-has-shell > #den-content {
         overflow: auto;
@@ -234,6 +244,12 @@
         white-space: pre-wrap;
         overflow-wrap: anywhere;
       }
+      /* The GitHub code (D17): big, centred, its copy button beside it. */
+      .den-gh-coderow pre.code {
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        text-align: center;
+      }
       .btn.den-copy {
         padding: 6px 8px;
         align-self: stretch;

package/src/ui/server/public/header.js

@@ -686,7 +686,7 @@ export async function initChangelog() {
 
 // ── __DEN_TITLE__ config ──────────────────────────────────────────────────────────────
 
-let ___DEN_CLI__Config = null;
+let _cliConfig = null;
 
 /**
  * 0.4.1: true once the shell knows the config fails validation (shell.js
@@ -705,18 +705,16 @@ function apiOff() {
 }
 
 async function getDenConfig() {
-  if (___DEN_CLI__Config) return ___DEN_CLI__Config;
+  if (_cliConfig) return _cliConfig;
   if (configInvalid()) return { environments: ["local"] };
   try {
-    ___DEN_CLI__Config = await fetch("/api/__DEN_CLI__/config").then((r) =>
-      r.json(),
-    );
+    _cliConfig = await fetch("/api/__DEN_CLI__/config").then((r) => r.json());
   } catch {
-    ___DEN_CLI__Config = {
+    _cliConfig = {
       environments: ["local"],
     };
   }
-  return ___DEN_CLI__Config;
+  return _cliConfig;
 }
 
 /**

package/src/ui/server/public/i18n/es.js

@@ -305,6 +305,16 @@
     "err.signin.ghOnly":
       "Solo la cuenta de GitHub del propietario puede iniciar sesión así. Para cualquier otra persona, usa «Aprueba este ordenador».",
     "err.signin.ghLearn": "Más información",
+    "err.signin.claimTitle": "Conecta tu cuenta de GitHub",
+    "err.signin.claimLead":
+      "{name} aún no tiene propietario. Conecta tu cuenta de GitHub para que sea tuyo.",
+    "err.signin.claimOrg":
+      "Los miembros de la organización {org} de GitHub pueden reclamarlo, en un navegador en {host}.",
+    "err.signin.claimHere": "Este es mi ordenador: conectar GitHub",
+    "err.signin.claimAs": "Iniciar sesión como @{login}",
+    "err.signin.claimHereNote":
+      "«Este es mi ordenador» solo funciona en un navegador en {host}. En otro sitio no abre nada.",
+    "err.signin.claimChecking": "Comprobando que esto es {host}…",
     "err.signin.githubRefused":
       "@{login} no es el propietario de este {name}. Solo la cuenta del propietario puede usar Iniciar sesión con GitHub. Usa «Aprueba este ordenador» en su lugar.",
     "err.signin.approveOr": "O aprueba este ordenador",
@@ -354,7 +364,6 @@
     "err.signin.github": "Iniciar sesión con GitHub",
     "err.signin.githubEnter": "Introduce este código en {url}:",
     "err.signin.githubOpen": "Abrir GitHub",
-    "err.signin.githubCopy": "Copiar código",
     "err.signin.githubWaiting": "Esperando a que lo apruebes en GitHub…",
     "err.signin.githubDone": "Sesión iniciada. Cargando…",
     "err.signin.githubExpired": "El código caducó antes de aprobarse.",

package/src/ui/server/public/i18n/ja.js

@@ -293,6 +293,16 @@
     "err.signin.ghOnly":
       "この方法でサインインできるのはオーナーの GitHub アカウントだけです。それ以外の人は「このコンピューターを承認」を使ってください。",
     "err.signin.ghLearn": "詳しく見る",
+    "err.signin.claimTitle": "GitHub アカウントを接続",
+    "err.signin.claimLead":
+      "{name} にはまだオーナーがいません。GitHub アカウントを接続して、自分のものにします。",
+    "err.signin.claimOrg":
+      "GitHub の {org} 組織のメンバーは、{host} 上のブラウザーでこれを登録できます。",
+    "err.signin.claimHere": "これは自分のコンピューター: GitHub を接続",
+    "err.signin.claimAs": "@{login} としてサインイン",
+    "err.signin.claimHereNote":
+      "「これは自分のコンピューター」は {host} 上のブラウザーでだけ使えます。ほかの場所では何も開きません。",
+    "err.signin.claimChecking": "ここが {host} か確認しています…",
     "err.signin.githubRefused":
       "@{login} はこの {name} のオーナーではありません。GitHub でサインインを使えるのはオーナーのアカウントだけです。代わりに「このコンピューターを承認」を使ってください。",
     "err.signin.approveOr": "または、このコンピューターを承認",
@@ -343,7 +353,6 @@
     "err.signin.github": "GitHub でサインイン",
     "err.signin.githubEnter": "{url} でこのコードを入力してください:",
     "err.signin.githubOpen": "GitHub を開く",
-    "err.signin.githubCopy": "コードをコピー",
     "err.signin.githubWaiting": "GitHub での承認を待っています…",
     "err.signin.githubDone": "サインインしました。読み込み中…",
     "err.signin.githubExpired": "承認される前にコードの有効期限が切れました。",

package/src/ui/server/public/settings-registry.js

@@ -425,7 +425,7 @@ function drawPair(host, ctx) {
             out.innerHTML =
               `<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:8px">` +
               `<div id="set-pair-qr" style="line-height:0">${qrSvg(p.url, { scale: 4, margin: 4 })}</div>` +
-              `<div style="flex:1 1 220px;min-width:0"><p class="set-note" style="margin:0 0 8px">Scan it with the other device, or open the link there. It works once, within 60 seconds, and signs that browser in for good.</p>` +
+              `<div style="flex:1 1 220px;min-width:0"><p class="set-note" style="margin:0 0 8px">Scan it with the other device, or open the link there. It works once, until it expires (below), and signs that browser in for good.</p>` +
               `<a id="set-pair-link" href="${escHtml(p.url)}" style="font:12px var(--mono);overflow-wrap:anywhere">${escHtml(p.url)}</a>` +
               `<p class="set-note" id="set-pair-left" style="margin:8px 0 0"></p></div></div>`;
             const until = Date.parse(p.expiresAt);

package/src/ui/server/public/shell.js

@@ -420,6 +420,16 @@
     "err.signin.ghOnly":
       "Only the owner's GitHub account can sign in this way. For anyone else, use Approve this computer.",
     "err.signin.ghLearn": "Learn more",
+    "err.signin.claimTitle": "Connect your GitHub account",
+    "err.signin.claimLead":
+      "{name} has no owner yet. Connect your GitHub account to make it yours.",
+    "err.signin.claimOrg":
+      "Members of the {org} GitHub org can claim it, in a browser on {host}.",
+    "err.signin.claimHere": "This is my computer: connect GitHub",
+    "err.signin.claimAs": "Sign in as @{login}",
+    "err.signin.claimHereNote":
+      "This is my computer works only in a browser on {host}. Anywhere else it opens nothing.",
+    "err.signin.claimChecking": "Checking this is {host}…",
     "err.signin.githubRefused":
       "@{login} isn't the owner of this {name}. Only the owner's account can use Sign in with GitHub. Use Approve this computer instead.",
     "err.signin.approveOr": "Or approve this computer",
@@ -467,7 +477,6 @@
     "err.signin.github": "Sign in with GitHub",
     "err.signin.githubEnter": "Enter this code at {url}:",
     "err.signin.githubOpen": "Open GitHub",
-    "err.signin.githubCopy": "Copy code",
     "err.signin.githubWaiting": "Waiting for you to approve it on GitHub…",
     "err.signin.githubDone": "Signed in. Loading…",
     "err.signin.githubExpired": "The code expired before it was approved.",

package/src/ui/server/route-classes.ts

@@ -243,6 +243,10 @@ export const ROUTES: readonly RouteEntry[] = [
     "/signin",
     "the signed-out landing page (§6b.3): it renders signed out; signed in, it goes on to `next`",
   ),
+  R(
+    "/attest",
+    'D17: "This is my computer", on localhost only: a 303 back to one of this server\'s edge hosts with a short-lived code (it never makes a session)',
+  ),
   M(["POST"], "/api/session/logout", "ends this browser's session"),
   S(
     ["GET", "HEAD"],
@@ -452,6 +456,9 @@ export const SIGNIN_FREE: readonly string[] = [
   "/auth",
   "/signin",
   "/api/session",
+  // D17: "This is my computer" answers for itself: on localhost a 303,
+  // anywhere else its own "only on this computer" page (never a code).
+  "/attest",
   // SEC-2a: Sign in with GitHub, from the signed-out page.
   "/api/github/signin",
   "/api/github/signin/:id",