@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/pages/api/request-access.ts

@@ -0,0 +1,172 @@
+/**
+ * POST /api/request-access — early-access lead capture for the `home` landing page.
+ *
+ * The browser form (tenants/home) POSTs here same-origin (CSP `connect-src 'self'`
+ * + `form-action 'self'`). This route forwards the lead to tot20's generic
+ * messaging endpoint SERVER-SIDE — the storefront's ToT credentials never reach
+ * the browser. The message emails the Trello Success board so a card is created.
+ *
+ * tot20 auth wire: like `@/lib/auth/totAccessClient`, tot20's swagger reads
+ * machine creds from the request BODY fields `totApiKey`/`totSecretKey` (NOT
+ * headers). So we merge those into the JSON POST body.
+ *
+ * GRACEFUL FALLBACK: the tot20 `/api/messages` endpoint is being built in a
+ * parallel workstream (Claim A) and isn't live yet. Until it is — or whenever the
+ * send fails / creds are unset — we still return `{ ok: true }` with a
+ * `fallback: "mailto"` + a prefilled `mailto:` so the client opens the user's mail
+ * client to the board. The form is never a dead end. Once A lands + creds are set,
+ * the server-side send just works and no mailto is returned.
+ *
+ * Deliberately NOT gated on `context.locals.features.*` — unlike newsletter.ts,
+ * this must work on the `home` marketing tenant.
+ */
+import type { APIContext } from "astro";
+import { readEnv } from "@/lib/env";
+
+export const prerender = false;
+
+// Trello Success board — a card is created from the forwarded email.
+// Kept in sync with the mailto: fallback in tenants/home/public/js/storefront.js.
+const BOARD_EMAIL = "darrin84+l6gajmvvoo1x4edew5qs@boards.trello.com";
+
+// Permissive email shape — tot20 / the mail system is the real deliverability authority.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface RequestAccessFields {
+  email: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  details: string;
+}
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json; charset=utf-8" },
+  });
+}
+
+/** Read fields from either a JSON body (the fetch form) or urlencoded/multipart (no-JS). */
+async function readFields(request: Request): Promise<RequestAccessFields> {
+  const ct = request.headers.get("content-type") || "";
+  const pick = (v: unknown) => String(v ?? "").trim();
+  if (ct.includes("application/json")) {
+    const b = (await request.json().catch(() => ({}))) as Record<string, unknown>;
+    return {
+      email: pick(b.email),
+      firstName: pick(b.firstName),
+      lastName: pick(b.lastName),
+      phone: pick(b.phone),
+      details: pick(b.details),
+    };
+  }
+  const form = await request.formData();
+  return {
+    email: pick(form.get("email")),
+    firstName: pick(form.get("firstName")),
+    lastName: pick(form.get("lastName")),
+    phone: pick(form.get("phone")),
+    details: pick(form.get("details")),
+  };
+}
+
+/** Escape user text before it lands in the HTML email body. */
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function buildHtml(f: RequestAccessFields): string {
+  const rows: Array<[string, string]> = [
+    ["Name", `${f.firstName} ${f.lastName}`],
+    ["Email", f.email],
+  ];
+  if (f.phone) rows.push(["Phone", f.phone]);
+  if (f.details) rows.push(["What they sell", f.details]);
+  const body = rows
+    .map(([k, v]) => `<p style="margin:0 0 8px"><strong>${esc(k)}:</strong> ${esc(v)}</p>`)
+    .join("\n");
+  return `<div style="font-family:system-ui,sans-serif;line-height:1.5">
+<h2 style="margin:0 0 12px">Storefront early-access request</h2>
+${body}
+<hr style="margin:16px 0;border:none;border-top:1px solid #ddd">
+<p style="color:#888;font-size:12px;margin:0">Sent from the Storefront landing page (tokenoftrust.com).</p>
+</div>`;
+}
+
+/** Prefilled mailto: to the board — the fallback so the lead is never dropped. */
+function mailtoFallback(f: RequestAccessFields): string {
+  const lines = [
+    `First name: ${f.firstName}`,
+    `Last name: ${f.lastName}`,
+    `Email: ${f.email}`,
+    f.phone ? `Phone: ${f.phone}` : null,
+    f.details ? `\nDetails:\n${f.details}` : null,
+  ]
+    .filter(Boolean)
+    .join("\n");
+  const subject = `Early-access request — ${f.firstName} ${f.lastName}`;
+  return `mailto:${BOARD_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  let f: RequestAccessFields;
+  try {
+    f = await readFields(context.request);
+  } catch {
+    return json({ ok: false, error: "invalid_body" }, 400);
+  }
+
+  // Validate: email + first + last required.
+  if (!EMAIL_RE.test(f.email) || !f.firstName || !f.lastName) {
+    return json({ ok: false, error: "missing_required_fields" }, 400);
+  }
+
+  const subject = `Early-access request — ${f.firstName} ${f.lastName}`;
+
+  // Try the server-side send via tot20. Any shortfall (unconfigured creds,
+  // endpoint not live yet, non-2xx, network error) degrades to the mailto fallback.
+  const baseUrl = (await readEnv("TOT_CORE_URL"))?.replace(/\/+$/, "");
+  const apiKey = await readEnv("TOT_API_KEY");
+  const secretKey = await readEnv("TOT_SECRET_KEY");
+
+  if (baseUrl && apiKey) {
+    try {
+      const res = await fetch(`${baseUrl}/api/messages`, {
+        method: "POST",
+        headers: { "content-type": "application/json", accept: "application/json" },
+        body: JSON.stringify({
+          totApiKey: apiKey,
+          ...(secretKey ? { totSecretKey: secretKey } : {}),
+          channel: "email",
+          to: BOARD_EMAIL,
+          subject,
+          replyTo: f.email,
+          html: buildHtml(f),
+        }),
+      });
+      if (res.ok) {
+        return json({ ok: true });
+      }
+      console.warn(`[request-access] tot20 /api/messages returned ${res.status}; using mailto fallback`);
+    } catch (err) {
+      console.warn("[request-access] tot20 /api/messages send failed; using mailto fallback", {
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  } else {
+    console.log("[request-access] TOT_CORE_URL/TOT_API_KEY unset; using mailto fallback");
+  }
+
+  // Fallback: acknowledge success and hand the client a prefilled mailto so the
+  // request still reaches the board via the user's own mail client.
+  return json({ ok: true, fallback: "mailto", mailto: mailtoFallback(f) });
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  return context.redirect("/", 303);
+}

package/apps/storefront/src/pages/auth/login.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * /auth/login — "Sign in with Token of Trust" for a gated preview host.
+ *
+ * Two-step, no-JS-friendly, all on the tenant's own branded host:
+ *   step 1: enter your email  → POST /api/auth/send
+ *   step 2: enter the 6-digit code you were emailed → POST /api/auth/verify
+ *
+ * The page renders instructions + forms only; every auth decision is server-side
+ * (tot20 sends/verifies the code, the storefront mints the session). No secrets
+ * reach the browser. Inline style carries the per-request CSP nonce.
+ */
+export const prerender = false;
+
+const cspNonce = Astro.locals.cspNonce;
+const url = new URL(Astro.request.url);
+const sent = url.searchParams.get("sent") === "1";
+const email = (url.searchParams.get("email") ?? "").trim();
+const errorCode = url.searchParams.get("error");
+const next = (() => {
+  const n = url.searchParams.get("next") ?? "/";
+  return n.startsWith("/") && !n.startsWith("//") ? n : "/";
+})();
+
+const ERROR_MESSAGES: Record<string, string> = {
+  bad_email: "That email doesn't look right — please try again.",
+  unconfigured: "Sign-in isn't available right now. Please try again shortly.",
+  invalid: "That code didn't match. Check it and try again.",
+  expired: "That code has expired — request a fresh one.",
+  too_many_attempts: "Too many attempts. Request a new code to continue.",
+  verify_failed: "We couldn't verify your sign-in. Please request a fresh code and try again.",
+};
+const errorMessage = errorCode ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong — try again.") : null;
+// A stale/failed code should drop back to the email step so a new code can be requested.
+const showCodeStep = sent && errorCode !== "expired" && errorCode !== "too_many_attempts";
+// Local-dev banner (statically dropped from prod). The message depends on the mode:
+// DEV_AUTH=1 → the console bypass is active (no email; code printed to the server console);
+// DEV_AUTH=0 → the REAL path is active (a code IS emailed by the configured tot20/qa, but
+// only to an address that already holds a role). Read the toggle so the banner never lies.
+const devMode = import.meta.env.DEV;
+let devAuthOn = false;
+if (devMode) {
+  const { readEnv } = await import("@/lib/env");
+  devAuthOn = (await readEnv("DEV_AUTH")) === "1";
+}
+---
+
+<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>Sign in — Regulated Storefront by 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; display: grid; place-items: center;
+        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
+      }
+      @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; } }
+      label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .4rem; }
+      input[type=email], input[type=text] {
+        width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 9px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit;
+      }
+      @media (prefers-color-scheme: dark) {
+        input[type=email], input[type=text] { background: #14141a; border-color: #40404d; }
+      }
+      input[type=text].code { letter-spacing: .4em; font: 600 1.25rem ui-monospace, monospace; text-align: center; }
+      button {
+        width: 100%; margin-top: 1rem; padding: .75rem 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:hover { opacity: .92; }
+      .err { background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c;
+        border-radius: 9px; padding: .6rem .8rem; font-size: .88rem; margin: 0 0 1.15rem; }
+      @media (prefers-color-scheme: dark) { .err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; } }
+      .dev { background: #eef4ff; border: 1px solid #c3d4f5; color: #234; border-radius: 9px;
+        padding: .6rem .8rem; font-size: .82rem; margin: 0 0 1.15rem; }
+      .dev code { font: 600 .8em ui-monospace, monospace; }
+      @media (prefers-color-scheme: dark) { .dev { background: #1b2740; border-color: #2f4468; color: #cfe0ff; } }
+      .note { font-size: .82rem; color: #8a8a8a; margin: 1.1rem 0 0; }
+      .who { font-weight: 600; }
+      a { color: inherit; }
+      .foot { margin-top: 1.5rem; font-size: .72rem; color: #9a9a9a; text-align: center; }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
+      {devMode && (devAuthOn ? (
+        <p class="dev"><strong>Local dev — console bypass</strong> (<code>DEV_AUTH=1</code>). No email is sent;
+        your sign-in code is printed to the <strong>server console</strong>. Set <code>DEV_AUTH=0</code> to use real emails.</p>
+      ) : (
+        <p class="dev"><strong>Local dev — live email</strong> (<code>DEV_AUTH=0</code>). A code is emailed by the
+        configured tot20 (<code>TOT_CORE_URL</code>), but only to an address that already holds a role. Set
+        <code>DEV_AUTH=1</code> for offline console codes.</p>
+      ))}
+      {errorMessage && <p class="err">{errorMessage}</p>}
+
+      {showCodeStep ? (
+        <>
+          <h1>Check your email</h1>
+          <p class="sub">We sent a 6-digit code to <span class="who">{email}</span> if it has access to this preview. Enter it below.</p>
+          <form method="post" action="/api/auth/verify" autocomplete="one-time-code">
+            <input type="hidden" name="email" value={email} />
+            <input type="hidden" name="next" value={next} />
+            <label for="code">Access code</label>
+            <input class="code" id="code" name="code" type="text" inputmode="numeric"
+              pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" required autofocus />
+            <button type="submit">Verify &amp; view preview</button>
+          </form>
+          <p class="note"><a href={`/auth/login${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`}>Use a different email</a> · <a href="https://mcp.tokenoftrust.com/early-access/storefront">Don't have access? Request early access →</a></p>
+        </>
+      ) : (
+        <>
+          <h1>Sign in</h1>
+          <p class="sub"><span class="who">Token of Trust© Regulated Storefront</span> is in early access. Enter your email — if you have access, we'll send a one-time code.</p>
+          <form method="post" action="/api/auth/send">
+            <input type="hidden" name="next" value={next} />
+            <label for="email">Work email</label>
+            <input id="email" name="email" type="email" value={email}
+              autocomplete="email" placeholder="you@company.com" required autofocus />
+            <button type="submit">Email me a code</button>
+          </form>
+          <p class="note">Access is granted by role — no signup needed. Don't have access yet? <a href="https://mcp.tokenoftrust.com/early-access/storefront">Request early access →</a></p>
+        </>
+      )}
+      <p class="foot">Token of Trust© Regulated Storefront</p>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,105 @@
+---
+/**
+ * /auth/magic — GET-safe landing for the magic-link sign-in.
+ *
+ * SECURITY INVARIANT: a GET of this page renders a "Confirm sign in" card and
+ * **consumes nothing** — the one-time token is only exchanged when the human clicks
+ * Confirm, which POSTs to /api/auth/magic-exchange. Inbox "safe-link" scanners fire
+ * GET on every URL; if this page auto-exchanged on GET, a scanner would silently burn
+ * 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.
+ */
+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 errorCode = url.searchParams.get("error");
+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.",
+  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.",
+};
+// 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;
+---
+
+<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>Confirm sign in — Regulated Storefront by 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; display: grid; place-items: center;
+        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
+      }
+      @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; }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <p class="eyebrow">Token of Trust© · Regulated Storefront</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>
+        </>
+      ) : (
+        <>
+          <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>
+          <form method="post" action="/api/auth/magic-exchange">
+            <input type="hidden" name="token" value={token} />
+            <input type="hidden" name="next" value={next} />
+            <button type="submit">Confirm sign in</button>
+          </form>
+          <p class="note">This is a single-use link — confirming completes your sign-in.</p>
+        </>
+      )}
+    </main>
+  </body>
+</html>