npm - @tokenoftrust/storefront-runner - Versions diffs - 1.3.2 → 1.3.4-rc.2 - Mend

@tokenoftrust/storefront-runner 1.3.2 → 1.3.4-rc.2

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 (79) hide show

package/apps/storefront/src/pages/auth/magic.astro CHANGED Viewed

@@ -9,33 +9,66 @@
  * the token before the user ever clicked. So: NEVER exchange on GET. The token rides
  * in a hidden form field and leaves only via the POST.
  */
+import { normalizeEmailHint, redactEmailForHint } from "@/lib/privacy/emailHint";
 export const prerender = false;
 const cspNonce = Astro.locals.cspNonce;
 const url = new URL(Astro.request.url);
 const token = url.searchParams.get("token") ?? "";
-const email = (url.searchParams.get("email") ?? "").trim(); // display-only (never trusted)
+const legacyEmail = (url.searchParams.get("email") ?? "").trim(); // legacy display hint only
+const emailHint =
+  normalizeEmailHint(url.searchParams.get("email_hint")) ??
+  redactEmailForHint(legacyEmail) ??
+  "";
+if (url.searchParams.has("email")) {
+  const canonical = new URLSearchParams(url.searchParams);
+  canonical.delete("email");
+  if (emailHint) canonical.set("email_hint", emailHint);
+  return Astro.redirect(
+    `/auth/magic${canonical.toString() ? `?${canonical.toString()}` : ""}`,
+    302,
+  );
+}
+const tenant = (url.searchParams.get("tenant") ?? "").trim().toLowerCase();
+// Destination context for the confirm card. appDomain always rides in `tenant`; the
+// friendly title is optional. Display-only and bounded — Astro escapes on render, so
+// this is XSS-safe; the cap just keeps a hostile/overlong value from breaking layout.
+const appDomain = tenant;
+const appTitle = (url.searchParams.get("app_title") ?? "").trim().slice(0, 80);
+const appLabel = appTitle || appDomain; // primary destination name to show, if any
 const errorCode = url.searchParams.get("error");
+const resendStatus = url.searchParams.get("resend");
 const next = (() => {
   const n = url.searchParams.get("next") ?? "/dashboard";
   return n.startsWith("/") && !n.startsWith("//") ? n : "/dashboard";
 })();
 const ERROR_MESSAGES: Record<string, string> = {
-  invalid: "This sign-in link isn't valid or has already been used. Ask for a fresh invite.",
-  expired: "This sign-in link has expired. Ask for a fresh invite.",
-  used: "This sign-in link was already used. Ask for a fresh invite.",
+  invalid: "This sign-in link isn't valid or has already been used.",
+  expired: "This sign-in link has expired.",
+  used: "This sign-in link was already used.",
   missing: "This sign-in link is missing its token.",
   unconfigured: "Sign-in isn't available right now. Please try again shortly.",
-  verify_failed: "We couldn't complete sign-in. Ask for a fresh invite and try again.",
+  verify_failed: "We couldn't complete sign-in.",
+};
+const RESEND_MESSAGES: Record<string, string> = {
+  invalid: "Enter the email address from your invite and try again.",
+  unavailable: "We couldn't resend a link right now. Please try again shortly.",
 };
 // On GET with a token → confirm card. On GET with ?error → error card. No token, no
 // error → treat as a broken link.
-const errorMessage = errorCode
-  ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong — ask for a fresh invite.")
-  : token
-    ? null
-    : ERROR_MESSAGES.missing;
+const resendMessage = resendStatus ? (RESEND_MESSAGES[resendStatus] ?? null) : null;
+const errorMessage = resendStatus === "sent"
+  ? null
+  : resendMessage
+    ? resendMessage
+    : errorCode
+      ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong.")
+      : token
+        ? null
+        : ERROR_MESSAGES.missing;
+const showResendForm = !!errorMessage && !!tenant && resendStatus !== "sent";
 ---
 <html lang="en">
@@ -44,60 +77,247 @@ const errorMessage = errorCode
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <title>Confirm sign in — Regulated Storefront by Token of Trust©</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap"
+    />
     <style nonce={cspNonce}>
-      :root { color-scheme: light dark; }
+      /* Signed-in developer cockpit design system — the sign-in door matches the
+         room it opens into (apps/storefront/src/pages/cockpit.astro). Theme via the
+         token triple: :root default light, @media dark, and [data-theme] overrides. */
+      :root {
+        --bg: #f7f9fc; --surface: #ffffff;
+        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
+        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
+        --border: #e3e8ef;
+        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
+        --sh: 0 10px 34px -14px rgba(10, 37, 64, .22);
+        --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+        color-scheme: light;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #071320; --surface: #0e2134;
+          --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
+          --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
+          --border: #1b3348;
+          --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+          --sh: 0 18px 44px -22px rgba(0, 0, 0, .7);
+          color-scheme: dark;
+        }
+      }
+      :root[data-theme="dark"] {
+        --bg: #071320; --surface: #0e2134;
+        --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
+        --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
+        --border: #1b3348;
+        --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+        --sh: 0 18px 44px -22px rgba(0, 0, 0, .7);
+        color-scheme: dark;
+      }
+      :root[data-theme="light"] {
+        --bg: #f7f9fc; --surface: #ffffff;
+        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
+        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
+        --border: #e3e8ef;
+        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
+        --sh: 0 10px 34px -14px rgba(10, 37, 64, .22);
+        color-scheme: light;
+      }
       * { 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; display: grid; place-items: center;
-        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
+        padding: 2rem 1.25rem;
+        background:
+          radial-gradient(34rem 18rem at 92% -8%, var(--accent-wash) 0%, transparent 60%),
+          var(--bg);
+        background-repeat: no-repeat;
+        color: var(--ink-2); font-family: var(--body); font-size: 15px; line-height: 1.6;
+        letter-spacing: -.011em; -webkit-font-smoothing: antialiased;
       }
-      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
       .card {
-        width: 100%; max-width: 26rem; background: #fff; border: 1px solid #e6e4de;
-        border-radius: 14px; padding: 2rem 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);
-      }
-      @media (prefers-color-scheme: dark) { .card { background: #1e1e28; border-color: #33333f; box-shadow: none; } }
-      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em;
-        text-transform: uppercase; color: #8a7f66; margin: 0 0 .75rem; }
-      h1 { font-size: 1.4rem; letter-spacing: -.01em; margin: 0 0 .4rem; }
-      .sub { color: #6a6a6a; margin: 0 0 1.5rem; font-size: .95rem; }
-      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
-      .who { font-weight: 600; }
-      button {
-        width: 100%; margin-top: .5rem; padding: .8rem 1rem; border: 0; border-radius: 9px;
-        background: #1a1a1a; color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer;
-      }
-      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
-      button:hover { opacity: .92; }
-      .err { background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c;
-        border-radius: 9px; padding: .7rem .85rem; font-size: .9rem; margin: 0 0 1rem; }
-      @media (prefers-color-scheme: dark) { .err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; } }
-      .note { font-size: .78rem; color: #9a9a9a; margin: 1.1rem 0 0; text-align: center; }
-      a { color: inherit; }
+        width: 100%; max-width: 26rem; background: var(--surface);
+        border: 1px solid var(--accent-line); border-radius: 20px;
+        padding: 2.1rem 1.9rem 1.9rem; position: relative; overflow: hidden;
+        box-shadow: var(--sh); animation: rise .5s cubic-bezier(.2, .9, .3, 1) both;
+      }
+      .card::before {
+        content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
+        background: linear-gradient(90deg, var(--accent), var(--accent-line));
+      }
+      @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+      .mark {
+        width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
+        color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-ink));
+        box-shadow: 0 6px 18px -6px rgba(14, 159, 142, .75); position: relative;
+      }
+      .mark::after {
+        content: ""; position: absolute; inset: -5px; border-radius: 17px;
+        border: 1.5px solid var(--accent); opacity: 0; animation: halo 2.8s ease-in-out infinite;
+      }
+      @keyframes halo { 0%, 100% { opacity: 0; transform: scale(.96); } 50% { opacity: .5; transform: scale(1.04); } }
+      .mark svg { width: 24px; height: 24px; }
+      .eyebrow {
+        font-family: var(--mono); font-size: .66rem; font-weight: 600; text-transform: uppercase;
+        letter-spacing: .13em; color: var(--accent-ink); margin: 1.15rem 0 .55rem;
+      }
+      h1 {
+        font-family: var(--display); font-weight: 800; letter-spacing: -.025em; color: var(--ink);
+        font-size: 1.55rem; margin: 0 0 .5rem; text-wrap: balance;
+      }
+      .sub { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.1rem; }
+      /* identity chip — reassures which inbox this link was sent to. The hint is
+         display-only / never trusted; the token governs the sign-in. */
+      .ident {
+        display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem;
+        padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
+      }
+      .ident .ava {
+        width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
+        font-family: var(--display); font-weight: 700; font-size: .85rem; color: #fff; text-transform: uppercase;
+        background: linear-gradient(150deg, var(--accent), var(--accent-ink));
+      }
+      .ident .ava svg { width: 15px; height: 15px; }
+      .ident-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+      .ident-lbl { font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); }
+      .ident-val { font-size: .9rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .ident-dom { font-family: var(--mono); font-size: .72rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      form { margin: 0; }
+      .cta {
+        width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
+        font-family: var(--display); font-weight: 700; font-size: 1rem; color: #fff; background: var(--accent);
+        border: 0; border-radius: 999px; padding: .9rem 1.3rem; cursor: pointer;
+        box-shadow: 0 10px 26px -10px rgba(14, 159, 142, .85);
+        transition: transform .12s, background .12s, box-shadow .12s;
+      }
+      .cta:hover { transform: translateY(-1px); background: var(--accent-ink); box-shadow: 0 14px 30px -10px rgba(14, 159, 142, .95); }
+      .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+      .cta svg { width: 17px; height: 17px; }
+      .note {
+        display: flex; align-items: center; justify-content: center; gap: .4rem;
+        font-family: var(--mono); font-size: .74rem; color: var(--faint);
+        margin: 1.15rem 0 0; text-align: center;
+      }
+      .note svg { width: 12px; height: 12px; flex: none; opacity: .8; }
+      .err {
+        display: flex; gap: .55rem; align-items: flex-start; background: var(--warn-wash);
+        border: 1px solid var(--warn-line); color: var(--warn); border-radius: 11px;
+        padding: .75rem .9rem; font-size: .9rem; line-height: 1.5; margin: 0 0 .2rem;
+      }
+      .err svg { width: 16px; height: 16px; flex: none; margin-top: .1rem; }
+      .resend {
+        display: grid; gap: .75rem; margin: 1rem 0 0;
+      }
+      .field {
+        display: grid; gap: .35rem;
+      }
+      .hint { margin: -.2rem 0 0; color: var(--muted); font-size: .84rem; }
+      label {
+        font-family: var(--mono); font-size: .66rem; font-weight: 600; text-transform: uppercase;
+        letter-spacing: .12em; color: var(--faint);
+      }
+      input[type="email"] {
+        width: 100%; border: 1px solid var(--border); border-radius: 11px;
+        padding: .8rem .85rem; color: var(--ink); background: var(--bg);
+        font: 600 .95rem/1.35 var(--body);
+      }
+      input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+      .altrow { margin: 1rem 0 0; }
+      .altlink {
+        font-family: var(--display); font-weight: 600; font-size: .9rem;
+        color: var(--accent-ink); text-decoration: none;
+      }
+      .altlink:hover { text-decoration: underline; }
+      .altlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+      @media (prefers-reduced-motion: reduce) {
+        .card, .mark::after { animation: none !important; }
+        .cta { transition: none; }
+      }
     </style>
   </head>
   <body>
     <main class="card">
+      <span class="mark" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none"><path d="M12 2.5 20 6v6c0 4.6-3.2 7.9-8 9.5-4.8-1.6-8-4.9-8-9.5V6l8-3.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m8.5 12 2.4 2.4L15.8 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </span>
       <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
-      {errorMessage ? (
+      {resendStatus === "sent" ? (
+        <>
+          <h1>Check your email</h1>
+          <p class="sub">If that address is still on this store's invite list, a fresh sign-in link is on the way.</p>
+          <p class="altrow"><a class="altlink" href="/auth/login?next=%2Fcockpit">Sign in with a code instead →</a></p>
+        </>
+      ) : errorMessage ? (
         <>
           <h1>Sign-in link problem</h1>
-          <p class="err">{errorMessage}</p>
-          <p class="note"><a href="/auth/login">Sign in with a code instead →</a></p>
+          <p class="err">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/><path d="M12 7.5v5M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+            <span>{errorMessage}</span>
+          </p>
+          {showResendForm ? (
+            <form class="resend" method="post" action="/api/grants/magic-resend">
+              <input type="hidden" name="tenant" value={tenant} />
+              <input type="hidden" name="next" value={next} />
+              <div class="field">
+                <label for="resend-email">Invite email</label>
+                <input id="resend-email" type="email" name="email" autocomplete="email" required />
+              </div>
+              {emailHint ? <p class="hint">Hint: {emailHint}</p> : null}
+              <button class="cta" type="submit">
+                Send a fresh link
+                <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 6.5h16v11H4z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m4.5 7 7.5 5.5L19.5 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </button>
+            </form>
+          ) : (
+            <p class="altrow"><a class="altlink" href="/auth/login?next=%2Fcockpit">Sign in with a code instead →</a></p>
+          )}
         </>
       ) : (
         <>
           <h1>Confirm sign in</h1>
-          <p class="sub">{email
-            ? <>Continue as <span class="who">{email}</span> to the Regulated Storefront dashboard.</>
-            : <>Continue to the Regulated Storefront dashboard.</>}</p>
+          <p class="sub">Confirm it's you to finish signing in.</p>
+          {appLabel ? (
+            <div class="ident">
+              <span class="ava" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 9.5 5.2 5h13.6L20 9.5M4 9.5V19h16V9.5M4 9.5h16M9 19v-5h6v5" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
+              <span class="ident-txt">
+                <span class="ident-lbl">Signing in to</span>
+                <span class="ident-val" title={appLabel}>{appLabel}</span>
+                {appTitle && appDomain && appTitle !== appDomain ? <span class="ident-dom" title={appDomain}>{appDomain}</span> : null}
+              </span>
+            </div>
+          ) : null}
+          {emailHint ? (
+            <div class="ident">
+              <span class="ava" aria-hidden="true">{emailHint.slice(0, 1)}</span>
+              <span class="ident-txt" aria-label={`Invite sent to ${emailHint}`}><span class="ident-lbl">Invite sent to </span><span class="ident-val" title={emailHint}>{emailHint}</span></span>
+            </div>
+          ) : null}
           <form method="post" action="/api/auth/magic-exchange">
             <input type="hidden" name="token" value={token} />
+            <input type="hidden" name="tenant" value={tenant} />
+            <input type="hidden" name="email_hint" value={emailHint} />
             <input type="hidden" name="next" value={next} />
-            <button type="submit">Confirm sign in</button>
+            <button class="cta" type="submit">
+              Confirm sign in
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
           </form>
-          <p class="note">This is a single-use link — confirming completes your sign-in.</p>
+          <p class="note">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="2"/></svg>
+            This is a single-use link — confirming completes your sign-in.
+          </p>
         </>
       )}
     </main>

package/apps/storefront/src/pages/capabilities.astro CHANGED Viewed

@@ -63,7 +63,7 @@ interface CapMeta {
   track: string;
 }
 const CAPS: CapMeta[] = [
-  { key: "cartCheckout", name: "Cart & Checkout", sub: "FoxyCart · Track A", track: "commerce" },
+  { key: "cartCheckout", name: "Cart & Checkout", sub: "Managed checkout · Track A", track: "commerce" },
   { key: "ageVerification", name: "Age & ID Verification", sub: "Token of Trust · 21+", track: "compliance" },
   { key: "exciseTax", name: "Excise Tax Collection", sub: "at checkout · Track B", track: "compliance" },
 ];