npm - @tokenoftrust/storefront-runner - Versions diffs - 0.1.0 - Mend

@tokenoftrust/storefront-runner 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/apps/storefront/src/pages/dashboard/[appDomain]/index.astro ADDED Viewed

@@ -0,0 +1,100 @@
+---
+/**
+ * /dashboard/<appDomain> — a single vendor's console (#8425 Stage 0).
+ *
+ * Guarded by the signed-in session: the viewer must hold a membership for this
+ * appDomain (near-side authZ, deny-by-default), else bounce to the picker. The
+ * page is a thin hub — today it links to the Team page (invite developers) and
+ * the existing preview/grants surfaces for this tenant.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { membershipFor } from "@/lib/dashboard/tenantSelection";
+const cspNonce = Astro.locals.cspNonce;
+const appDomain = decodeURIComponent(Astro.params.appDomain ?? "");
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect(
+    `/auth/login?next=${encodeURIComponent(`/dashboard/${appDomain}`)}`,
+    302,
+  );
+}
+// Member OR ToT-staff admitted via an explicit vendor selection (distinct path —
+// the staff marker is not a tenants[] membership). membershipFor returns a
+// staff-derived stand-in (role = the staffRoles capability) when the selection is live.
+const membership = membershipFor(session.tenants, appDomain, {
+  selection: session.staffSelection,
+  nowSeconds: Math.floor(Date.now() / 1000),
+});
+if (!membership) {
+  // Signed in but no access to THIS vendor — back to the picker/search.
+  return Astro.redirect("/dashboard", 302);
+}
+const teamHref = `/dashboard/${encodeURIComponent(appDomain)}/team`;
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>{appDomain} — vendor dashboard</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body { font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 44rem; margin-inline: auto; }
+      .top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      .role { font: 600 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em;
+        color: #4a6; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; }
+      .sub { color: #6a6a6a; margin: .2rem 0 1.75rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+      @media (max-width: 32rem) { .grid { grid-template-columns: 1fr; } }
+      a.card { display: block; text-decoration: none; color: inherit; background: #fff;
+        border: 1px solid #e6e4de; border-radius: 12px; padding: 1.15rem 1.25rem; }
+      @media (prefers-color-scheme: dark) { a.card { background: #1e1e28; border-color: #33333f; } }
+      a.card:hover { border-color: #b7d0ff; }
+      .card .h { font-weight: 600; margin: 0 0 .25rem; }
+      .card .d { color: #8a8a8a; font-size: .88rem; margin: 0; }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .who a { color: inherit; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
+      .logout { display: inline; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="top">
+        <div>
+          <p class="eyebrow">Vendor dashboard</p>
+          <h1>{appDomain}</h1>
+        </div>
+        <span class="role">{membership.role}</span>
+      </div>
+      <p class="sub">Manage this vendor's developer team and preview.</p>
+      <div class="grid">
+        <a class="card" href={teamHref}>
+          <p class="h">Team &amp; invites →</p>
+          <p class="d">See who has developer access and invite new developers by email.</p>
+        </a>
+        <a class="card" href={`/preview/dashboard?tenant=${encodeURIComponent(appDomain)}`}>
+          <p class="h">Preview &amp; deploy →</p>
+          <p class="d">The tenant's shared preview: target vs actual, reconcile, preview URL.</p>
+        </a>
+      </div>
+      <p class="who">Signed in as {session.email} ·
+        <a href="/dashboard">Switch vendor</a> ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+  </body>
+</html>

package/apps/storefront/src/pages/dashboard/[appDomain]/team.astro ADDED Viewed

@@ -0,0 +1,154 @@
+---
+/**
+ * /dashboard/<appDomain>/team — a vendor's developer team + invite-by-email
+ * (#8425 Stage 0).
+ *
+ * Guarded by the signed-in session (membership for this appDomain). The page is a
+ * thin client over two session-authed endpoints:
+ *   GET  /api/grants/team-members?tenant=<appDomain>  → current developer invites
+ *   POST /api/grants/team-invite   {tenant, email}    → invite a developer
+ * Both re-check membership server-side; the appDomain here is carried from the
+ * guarded route, and every call is authorized by the `tot_session` cookie.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { membershipFor } from "@/lib/dashboard/tenantSelection";
+const cspNonce = Astro.locals.cspNonce;
+const appDomain = decodeURIComponent(Astro.params.appDomain ?? "");
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect(
+    `/auth/login?next=${encodeURIComponent(`/dashboard/${appDomain}/team`)}`,
+    302,
+  );
+}
+// Member OR ToT-staff admitted via an explicit vendor selection (distinct path).
+const membership = membershipFor(session.tenants, appDomain, {
+  selection: session.staffSelection,
+  nowSeconds: Math.floor(Date.now() / 1000),
+});
+if (!membership) {
+  return Astro.redirect("/dashboard", 302);
+}
+// #8453 (`staff-can-invite-governed`, REVERSING the earlier members-only block):
+// a ToT-staff viewer admitted via an explicit vendor selection may now invite too —
+// the write endpoint mints a signed broker assertion from their session email and
+// tot20 verifies it to permit the invite. So the form shows for member OR staff
+// (everyone admitted to this page). `isRealMember` is kept only to tailor the copy.
+const isRealMember = !!membershipFor(session.tenants, appDomain);
+const backHref = `/dashboard/${encodeURIComponent(appDomain)}`;
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Team — {appDomain}</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body { font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 44rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin: 2rem 0 .6rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      .card { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.25rem; }
+      @media (prefers-color-scheme: dark) { .card { background: #1e1e28; border-color: #33333f; } }
+      label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .4rem; }
+      label[for=role], label[for=note] { margin-top: .9rem; }
+      input[type=email], select, textarea { width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 9px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit; font-family: inherit; }
+      select { margin-bottom: .2rem; }
+      textarea { min-height: 4.5rem; resize: vertical; line-height: 1.4; }
+      @media (prefers-color-scheme: dark) { input[type=email], select, textarea { background: #14141a; border-color: #40404d; } }
+      button { margin-top: 1rem; padding: .7rem 1.1rem; border: 0; border-radius: 9px; background: #1a1a1a;
+        color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; }
+      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
+      button:disabled { opacity: .5; cursor: default; }
+      .rowbtn { margin: 0; padding: .3rem .6rem; font-size: .78rem; background: transparent; color: inherit;
+        border: 1px solid #cfccc4; border-radius: 7px; font-weight: 600; }
+      @media (prefers-color-scheme: dark) { .rowbtn { border-color: #40404d; } }
+      .rowbtn:hover:not(:disabled) { border-color: #b7d0ff; }
+      td.act { text-align: right; white-space: nowrap; }
+      table { width: 100%; border-collapse: collapse; }
+      th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid #e6e4de; font-size: .9rem; }
+      @media (prefers-color-scheme: dark) { th, td { border-color: #33333f; } }
+      th { font: 600 .7rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; color: #999; }
+      .msg { margin-top: 1rem; font-size: .9rem; border-radius: 9px; padding: .6rem .8rem; display: none; }
+      .msg.ok { display: block; background: #eaf7ee; border: 1px solid #bfe4c9; color: #1b6b34; }
+      .msg.err { display: block; background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c; }
+      @media (prefers-color-scheme: dark) {
+        .msg.ok { background: #16311f; border-color: #2f6b41; color: #a7e0ba; }
+        .msg.err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; }
+      }
+      .muted { color: #9a9a9a; font-size: .85rem; }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .who a, a.back { color: inherit; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; margin: 0; }
+      .logout { display: inline; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow"><a class="back" href={backHref}>← {appDomain}</a></p>
+      <h1>Team</h1>
+      <p class="sub">Developers with access to <strong>{appDomain}</strong>.{isRealMember
+        ? " Invite by email — they'll get a branded sign-in link and become eligible on this vendor."
+        : " Viewing as Token of Trust staff — invite by email to grant a developer access."}</p>
+      <h2>Invite a developer</h2>
+      <div class="card">
+        <label for="email">Developer email</label>
+        <input id="email" type="email" placeholder="dev@agency.com" autocomplete="off" />
+        {!isRealMember && (
+          <>
+            {/* #8453: ToT staff may grant any role; a plain member is developer-only
+                (no selector — tot20 ignores a member's role and pins to developer).
+                Values are tot20's role vocabulary: developer | appAdmin | appOwner. */}
+            <label for="role">Role</label>
+            <select id="role">
+              <option value="developer" selected>Developer</option>
+              <option value="appAdmin">Admin</option>
+              <option value="appOwner">Owner</option>
+            </select>
+          </>
+        )}
+        <label for="note">Note to the developer (optional)</label>
+        <textarea id="note" rows="3" maxlength="1000"
+          placeholder="Add a personal message — they'll see it in the invite email."></textarea>
+        <button id="inviteBtn" type="button">Send invite</button>
+        <div id="msg" class="msg"></div>
+      </div>
+      <h2>Current developers</h2>
+      <div class="card">
+        <table>
+          <thead><tr><th>Developer</th><th>Roles</th><th></th></tr></thead>
+          <tbody id="members" data-tenant={appDomain}><tr><td colspan="3" class="muted">Loading…</td></tr></tbody>
+        </table>
+      </div>
+      <p class="who">Signed in as {session.email} ·
+        <a href="/dashboard">Switch vendor</a> ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+    <!--
+      Client behavior is a STATIC same-origin file (public/js/dashboard-team.js),
+      referenced via src so the strict CSP allows it through `script-src 'self'` — no
+      nonce, no per-build content-hash. An inline <script> here is blocked: Astro's
+      `is:inline` drops the templated nonce, and a processed inline script would need
+      its hash pinned in cspStaticHashes on every edit. `is:inline` keeps Astro from
+      trying to bundle the external-src tag; `defer` runs it after the DOM parses.
+    -->
+    <script src="/js/dashboard-team.js" is:inline defer></script>
+  </body>
+</html>

package/apps/storefront/src/pages/dashboard/index.astro ADDED Viewed

@@ -0,0 +1,160 @@
+---
+/**
+ * /dashboard — the vendor console entry (#8425 Stage 0).
+ *
+ * Federated: the viewer signed in via ToT (email OTP → offline-verified id_token →
+ * `tot_session`). This page holds NO identity of its own — it reads the session's
+ * tenant memberships and routes per the L3 contract
+ * (docs/architecture/identity-and-authorization.md):
+ *   0 memberships → "nothing to manage"; 1 → straight into that vendor; ≥2 → picker.
+ *
+ * STAGE-0: tot20's id_token currently carries only the one resource signed against,
+ * so this resolves to a single vendor in practice; the picker activates unchanged
+ * once tot20 populates all memberships (flagged to the workstream lead).
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { selectTenant } from "@/lib/dashboard/tenantSelection";
+import { isStaffSession } from "@/lib/dashboard/staffAdmission";
+const cspNonce = Astro.locals.cspNonce;
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect("/auth/login?next=%2Fdashboard", 302);
+}
+// ToT-STAFF viewers reach ANY vendor by explicit SEARCH-and-enter (a distinct
+// path from tenants[] membership). When staff, we always render the hub (their
+// memberships, if any, PLUS a vendor search) and skip the single-membership
+// auto-redirect so they can still search for a vendor they don't belong to.
+const isStaff = isStaffSession(session);
+const selection = selectTenant(session.tenants);
+if (!isStaff && selection.mode === "single") {
+  return Astro.redirect(`/dashboard/${encodeURIComponent(selection.tenant.resource)}`, 302);
+}
+const vendors =
+  selection.mode === "picker"
+    ? selection.tenants
+    : selection.mode === "single"
+      ? [selection.tenant]
+      : [];
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Your stores — Token of Trust</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body { font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 40rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.75rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
+      a.vendor { display: flex; align-items: center; justify-content: space-between; text-decoration: none;
+        background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1rem 1.25rem; color: inherit; }
+      @media (prefers-color-scheme: dark) { a.vendor { background: #1e1e28; border-color: #33333f; } }
+      a.vendor:hover { border-color: #b7d0ff; }
+      .name { font-weight: 600; }
+      .role { font: 600 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em;
+        color: #4a6; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .who a { color: inherit; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
+      .logout { display: inline; }
+      .empty { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.5rem; }
+      @media (prefers-color-scheme: dark) { .empty { background: #1e1e28; border-color: #33333f; } }
+      /* Staff vendor search */
+      .staff { margin-top: 2.25rem; }
+      h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin: 0 0 .3rem; }
+      .staff .hint { color: #8a8a8a; font-size: .85rem; margin: 0 0 .7rem; }
+      .staff .hint code { font: .8em ui-monospace, monospace; background: #ece9e1; color: #4a4a4a;
+        padding: .1em .35em; border-radius: 5px; }
+      @media (prefers-color-scheme: dark) { .staff .hint code { background: #2a2a33; color: #cfcfda; } }
+      .search { position: relative; }
+      #vendorSearch { width: 100%; padding: .75rem .85rem; font-size: 1rem; border-radius: 10px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit; }
+      @media (prefers-color-scheme: dark) { #vendorSearch { background: #14141a; border-color: #40404d; } }
+      #vendorResults { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
+      #vendorResults button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
+        text-align: left; background: #fff; border: 1px solid #e6e4de; border-radius: 10px; padding: .8rem 1rem;
+        color: inherit; font: inherit; cursor: pointer; }
+      @media (prefers-color-scheme: dark) { #vendorResults button { background: #1e1e28; border-color: #33333f; } }
+      #vendorResults button:hover, #vendorResults button:focus-visible { border-color: #b7d0ff; }
+      #vendorResults button:disabled { opacity: .5; cursor: default; }
+      #vendorResults .dn { font-weight: 600; }
+      #vendorResults .ad { font: 600 .68rem/1 ui-monospace, monospace; color: #8a8a8a; }
+      #vendorSearchMsg { margin-top: .6rem; font-size: .88rem; color: #8a8a8a; min-height: 1.1em; }
+      #vendorSearchMsg.err { color: #9a1c1c; }
+      @media (prefers-color-scheme: dark) { #vendorSearchMsg.err { color: #f6b9b9; } }
+      .badge { display: inline-block; font: 600 .6rem/1 ui-monospace, monospace; letter-spacing: .08em;
+        text-transform: uppercase; color: #8a7f66; border: 1px solid currentColor; border-radius: 999px;
+        padding: .18rem .5rem; margin-left: .5rem; vertical-align: middle; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow">Token of Trust</p>
+      <h1>Your stores{isStaff && <span class="badge">ToT staff</span>}</h1>
+      {vendors.length ? (
+        <>
+          <p class="sub">Choose a store to manage its team and preview.</p>
+          <ul>
+            {vendors.map((v) => (
+              <li>
+                <a class="vendor" href={`/dashboard/${encodeURIComponent(v.resource)}`}>
+                  <span class="name">{v.resource}</span>
+                  <span class="role">{v.role}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        !isStaff && (
+          <div class="empty">
+            <p style="margin:0">You're signed in as <strong>{session.email}</strong>, but
+              you don't have access to any store yet. Ask a store's merchant to invite you.</p>
+          </div>
+        )
+      )}
+      {isStaff && (
+        <section class="staff">
+          <h2>Find a store</h2>
+          <p class="hint">As Token of Trust staff you can enter any store's console. Search by
+            domain, then select one to enter — every admission is logged.</p>
+          <p class="hint">Tip: <code>^</code> matches the start, <code>$</code> the end — e.g.
+            <code>^acme.com$</code> for an exact match, <code>acme$</code> to end with “acme”.</p>
+          <div class="search">
+            <input id="vendorSearch" type="text" placeholder="acme.com"
+              autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
+              aria-label="Search stores by domain" />
+            <ul id="vendorResults"></ul>
+            <p id="vendorSearchMsg" aria-live="polite"></p>
+          </div>
+        </section>
+      )}
+      <p class="who">Signed in as {session.email} ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+    <!--
+      Staff vendor-search behavior is a STATIC same-origin file
+      (public/js/dashboard-vendor-search.js), referenced via src so the strict CSP
+      allows it through `script-src 'self'` — no nonce, no per-build content-hash
+      (see public/js/dashboard-team.js for the proven pattern). The file no-ops when
+      #vendorSearch is absent (non-staff), so it's safe to always include.
+    -->
+    <script src="/js/dashboard-vendor-search.js" is:inline defer></script>
+  </body>
+</html>