feat(slice-2): Landing + Sign-in screens, entry routing, API client (§5.1/5.2/6.5)

Two-step email + one-time-code sign-in behind both doors; pure entry-routing rule unit- tested with Vitest (§6.8); storefront routing reaches a SLICE-2 signed-in placeholder with sign-out (PUC-9). check.sh now runs the frontend unit tests. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-10 10:38:38 -07:00
parent cfd2b4ecc7
commit b3ffb2d4b6
11 changed files with 750 additions and 13 deletions
@@ -0,0 +1,27 @@
+// Landing (SD-0001 §5.1) — a Visitor learns what ecomm is and picks a door. Honest voice,
+// no trial/pricing/fee (corpus 14.01.0011). Both doors open the same sign-in flow (§5.2);
+// they differ only in framing.
+interface Props {
+  onGetStarted: () => void;
+  onLogIn: () => void;
+}
+
+export default function Landing({ onGetStarted, onLogIn }: Props) {
+  return (
+    <main>
+      <header>
+        <strong>ecomm</strong>
+        <button type="button" onClick={onLogIn}>
+          Log in
+        </button>
+      </header>
+      <section>
+        <h1>Honest commerce. Your storefront is yours.</h1>
+        <p>Sell online on a platform that treats you straight — no dark patterns, no lock-in.</p>
+        <button type="button" onClick={onGetStarted}>
+          Create your storefront
+        </button>
+      </section>
+    </main>
+  );
+}
@@ -0,0 +1,111 @@
+// Sign in (SD-0001 §5.2) — the single email + one-time-code flow behind both doors. Step 1
+// requests a code; step 2 verifies it. Honest copy states which door framing applies and,
+// after verify, whether the account was created or resumed (PUC-3). storefront routing is
+// handled by App on success.
+import { useState } from "react";
+import { requestCode, verifyCode, type VerifyResult } from "../api";
+
+type Door = "signup" | "login";
+
+interface Props {
+  door: Door;
+  onAuthed: (result: VerifyResult) => void;
+  onBack: () => void;
+}
+
+export default function SignIn({ door, onAuthed, onBack }: Props) {
+  const [step, setStep] = useState<"email" | "code">("email");
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const heading = door === "signup" ? "Create your storefront" : "Log in";
+
+  async function submitEmail(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    const err = await requestCode(email);
+    setBusy(false);
+    if (err) {
+      setError(err.message);
+      return;
+    }
+    setStep("code");
+  }
+
+  async function submitCode(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    const res = await verifyCode(email, code);
+    setBusy(false);
+    if (!res.ok) {
+      setError(res.error.message);
+      return;
+    }
+    onAuthed(res.result);
+  }
+
+  if (step === "email") {
+    return (
+      <main>
+        <header>
+          <strong>ecomm</strong>
+          <button type="button" onClick={onBack}>
+            Back
+          </button>
+        </header>
+        <form onSubmit={submitEmail}>
+          <h1>{heading}</h1>
+          <label>
+            Email
+            <input
+              type="email"
+              value={email}
+              autoFocus
+              required
+              onChange={(ev) => setEmail(ev.target.value)}
+            />
+          </label>
+          <p>We'll email you a one-time code. That's all we need.</p>
+          {error && <p role="alert">{error}</p>}
+          <button type="submit" disabled={busy}>
+            {busy ? "Sending…" : "Send code"}
+          </button>
+        </form>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <header>
+        <strong>ecomm</strong>
+        <button type="button" onClick={() => setStep("email")}>
+          Wrong address?
+        </button>
+      </header>
+      <form onSubmit={submitCode}>
+        <h1>Enter your code</h1>
+        <p>We sent a code to {email}.</p>
+        <label>
+          Code
+          <input
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={code}
+            autoFocus
+            required
+            onChange={(ev) => setCode(ev.target.value)}
+          />
+        </label>
+        {error && <p role="alert">{error}</p>}
+        <button type="submit" disabled={busy}>
+          {busy ? "Checking…" : "Continue"}
+        </button>
+      </form>
+    </main>
+  );
+}
@@ -0,0 +1,34 @@
+// SLICE-2 placeholder for the signed-in surfaces (create-storefront, admin) that land in
+// SLICE-3. It honestly states what's next and makes PUC-9 sign-out reachable now. No
+// fabricated capability (INV-9).
+import { logout } from "../api";
+
+interface Props {
+  email: string;
+  created: boolean;
+  onSignedOut: () => void;
+}
+
+export default function SignedIn({ email, created, onSignedOut }: Props) {
+  async function signOut() {
+    await logout();
+    onSignedOut();
+  }
+
+  return (
+    <main>
+      <header>
+        <strong>ecomm</strong>
+        <span>{email}</span>
+        <button type="button" onClick={signOut}>
+          Sign out
+        </button>
+      </header>
+      <section>
+        <h1>{created ? "Welcome to ecomm" : "Welcome back"}</h1>
+        <p>You're signed in as {email}.</p>
+        <p>Creating your storefront arrives in the next slice. Nothing else is needed yet.</p>
+      </section>
+    </main>
+  );
+}