@forgecart/cli 2.202610141814.0 → 2.202610142335.0

package/templates/storefront/src/app/verify/page.tsx

@@ -68,39 +68,51 @@ export async function generateMetadata(): Promise<Metadata> {
  * first thing a rebrand rewrites, while the state set is the contract.
  */
 
-/** What each outcome tells the shopper, and where it sends them next. */
+/**
+ * What each outcome tells the shopper, and where it sends them next. A verified
+ * account's next step is signing in (#1093), so that state links the account
+ * page; every other state sends the shopper back to the store.
+ */
 const VERIFY_COPY: Readonly<
-  Record<VerifyState, { tone: AccountMessageTone; title: string; body: string; cta: string }>
+  Record<
+    VerifyState,
+    { tone: AccountMessageTone; title: string; body: string; cta: string; href: string }
+  >
 > = {
   verified: {
     tone: 'success',
     title: 'Your e-mail address is verified',
     body: 'Your account is ready — you can sign in with the address you registered.',
-    cta: 'Start shopping',
+    cta: 'Sign in',
+    href: '/account',
   },
   'no-token': {
     tone: 'warning',
     title: 'This link is missing its verification token',
     body: 'Open the link straight from the e-mail we sent you. It carries a one-time token this page needs, and copying only part of the address leaves it behind.',
     cta: 'Go to the store',
+    href: '/',
   },
   'link-invalid': {
     tone: 'warning',
     title: 'This verification link is no longer valid',
     body: 'It has either been used already or it has expired. If your account is still unverified, request a new verification e-mail and open the newest link.',
     cta: 'Go to the store',
+    href: '/',
   },
   'wrong-store': {
     tone: 'warning',
     title: 'This link belongs to a different store',
     body: 'The account it verifies does not shop here. Open the link from the e-mail that store sent you — every store sends its own.',
     cta: 'Go to the store',
+    href: '/',
   },
   failed: {
     tone: 'error',
     title: 'We could not verify your e-mail address',
     body: 'Something went wrong on our side. Please open the link again in a few minutes — and if it has stopped working by then, request a new verification e-mail.',
     cta: 'Go to the store',
+    href: '/',
   },
 };
 
@@ -138,7 +150,7 @@ async function VerifyOutcome({ searchParams }: { searchParams: Promise<RouteSear
       <AccountMessage tone={copy.tone} title={copy.title}>
         {copy.body}
       </AccountMessage>
-      <LocaleLink href="/" locale={binding} className="btn btn-primary">
+      <LocaleLink href={copy.href} locale={binding} className="btn btn-primary">
         {copy.cta}
       </LocaleLink>
     </div>

package/templates/storefront/src/components/Header.tsx

@@ -19,7 +19,16 @@ export interface HeaderProps {
   languageCodes: readonly string[];
 }
 
-/** Top navigation: Home / Products / Cart, with a live cart item count. */
+/**
+ * Top navigation: Home / Products / Cart / Account, with a live cart item count.
+ *
+ * Every link names a route this template SHIPS (#1093): a link to a page the
+ * scaffold does not carry is a 404 for the shopper and a false lead for the
+ * agent extending the store, and `tool/storefront-template-spec` holds this
+ * file to it. The Account link is static — it never renders who is signed in —
+ * so nothing here depends on the session and no promote can trip a hydration
+ * mismatch on it; the account page itself says who is signed in.
+ */
 export function Header({ locale, languageCodes }: HeaderProps) {
   const { itemCount } = useCart();
 
@@ -57,6 +66,9 @@ export function Header({ locale, languageCodes }: HeaderProps) {
               <span className="badge badge-primary badge-sm font-semibold">{itemCount}</span>
             )}
           </LocaleLink>
+          <LocaleLink href="/account" locale={locale} className="btn btn-ghost btn-sm">
+            Account
+          </LocaleLink>
           <LanguageSwitcher locale={locale} languageCodes={languageCodes} />
         </nav>
       </div>

package/templates/storefront/src/components/account/AccountPanel.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import type { NativeAuthInput } from '@forgecart/sdk/shop';
+import { useEffect, useState } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { VerificationResend } from './VerificationResend';
+import { LocaleLink } from '../LocaleLink';
+import { findSignedInCustomer, loginCustomer, logoutCustomer } from '../../lib/account-session';
+import {
+  LOADING_VIEW,
+  greetingView,
+  offersVerificationResend,
+  signInRefusedView,
+  signInView,
+  signedOutView,
+  type AccountRefusal,
+  type AccountStep,
+  type AccountView,
+  type SignedInCustomer,
+} from '../../lib/account/account-state';
+import { useCart } from '../../lib/cart-context';
+import { shopperMessage } from '../../lib/error-messages';
+import type { LocaleBinding } from '../../lib/locale/localized-path';
+
+/**
+ * The account page's client island (#1093): the sign-in form, the greeting, and
+ * the way out.
+ *
+ * Everything here runs on the shopper's OWN socket, never on the server: the
+ * page around it is a static shell, because a session read on the server path
+ * threw `EmptyError: no elements in sequence` and 500'd the render. Signing in
+ * and out goes through `lib/account-session.ts`, whose helpers own the socket's
+ * rotation — a panel cannot get it wrong, because it never touches the socket.
+ *
+ * The island waits for the cart provider's `hydrated` before it asks anything.
+ * The provider is what arms the session singleton, and a parent's effects run
+ * AFTER its children's: an island that asked on its own mount would find no
+ * socket. Until then it renders the skeleton the server painted, so a returning
+ * customer lands on their greeting without a flash of the sign-in form first.
+ *
+ * Which view an answer IS is decided in `lib/account/account-state.ts`, and
+ * every refusal renders through `shopperMessage` — this component renders.
+ */
+
+/** How each call's refusal is introduced; the body is `shopperMessage`'s copy. */
+const REFUSAL_HEADINGS: Readonly<Record<AccountStep, { tone: AccountMessageTone; title: string }>> =
+  {
+    greeting: { tone: 'error', title: 'We could not check your account' },
+    'sign-in': { tone: 'error', title: 'We could not sign you in' },
+    'sign-out': { tone: 'warning', title: 'You are signed out on this device' },
+  };
+
+/** The message a refusal renders as, or nothing when the form has nothing to report. */
+function refusalNotice(
+  refusal: AccountRefusal | null,
+): { tone: AccountMessageTone; title: string; body: string } | null {
+  if (refusal === null) return null;
+  return { ...REFUSAL_HEADINGS[refusal.step], body: shopperMessage(refusal) };
+}
+
+export function AccountPanel({ locale }: { locale: LocaleBinding }) {
+  const { hydrated, refresh } = useCart();
+  const [view, setView] = useState<AccountView>(LOADING_VIEW);
+  const [refusedAddress, setRefusedAddress] = useState('');
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    if (!hydrated) return;
+    let cancelled = false;
+    void (async () => {
+      const outcome = await findSignedInCustomer();
+      if (!cancelled) setView(greetingView(outcome));
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [hydrated]);
+
+  /**
+   * `pending` refuses a re-entrant call: a keyboard Enter can fire while a click
+   * is already in flight, before `disabled` has painted. A sign-in that lands
+   * re-reads the cart, because the session it belongs to is now the shopper's.
+   * An accepted sign-in whose greeting fails is signed out again before the
+   * refusal renders: the tab never stays signed in behind a failed sign-in.
+   */
+  async function signIn(credentials: NativeAuthInput): Promise<void> {
+    if (pending) return;
+    setPending(true);
+    const outcome = await loginCustomer(credentials);
+    if (outcome.kind === 'error') {
+      setRefusedAddress(credentials.emailAddress);
+      setView(signInRefusedView(outcome.code));
+      setPending(false);
+      return;
+    }
+    const next = signInView(await findSignedInCustomer());
+    if (next.state !== 'signed-in') await logoutCustomer();
+    refresh();
+    setView(next);
+    setPending(false);
+  }
+
+  /** Same guard. The cart is re-read: this tab no longer carries the session it belonged to. */
+  async function signOut(): Promise<void> {
+    if (pending) return;
+    setPending(true);
+    const outcome = await logoutCustomer();
+    refresh();
+    setView(signedOutView(outcome));
+    setPending(false);
+  }
+
+  if (view.state === 'loading') return <AccountSkeleton />;
+
+  if (view.state === 'signed-in') {
+    return (
+      <Greeting
+        customer={view.customer}
+        locale={locale}
+        pending={pending}
+        onSignOut={() => void signOut()}
+      />
+    );
+  }
+
+  return (
+    <SignInForm
+      locale={locale}
+      refusal={view.refusal}
+      resendTo={offersVerificationResend(view) ? refusedAddress : null}
+      pending={pending}
+      onSignIn={signIn}
+    />
+  );
+}
+
+function Greeting({
+  customer,
+  locale,
+  pending,
+  onSignOut,
+}: {
+  customer: SignedInCustomer;
+  locale: LocaleBinding;
+  pending: boolean;
+  onSignOut: () => void;
+}) {
+  return (
+    <div className="space-y-6" data-fc-account-mode="account" data-fc-account-state="signed-in">
+      <div className="card border border-base-300 bg-base-100">
+        <div className="card-body">
+          <h2 className="card-title">Hello, {customer.firstName}</h2>
+          <p className="text-sm text-base-content/70">
+            You are signed in as {customer.emailAddress}.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <LocaleLink href="/products" locale={locale} className="btn btn-primary">
+          Continue shopping
+        </LocaleLink>
+        <button type="button" className="btn btn-ghost" disabled={pending} onClick={onSignOut}>
+          {pending ? 'Signing out…' : 'Sign out'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function SignInForm({
+  locale,
+  refusal,
+  resendTo,
+  pending,
+  onSignIn,
+}: {
+  locale: LocaleBinding;
+  /** The refusal that put the form here, if any. */
+  refusal: AccountRefusal | null;
+  /** The address to offer the confirmation mail to, when the refusal calls for one. */
+  resendTo: string | null;
+  pending: boolean;
+  onSignIn: (credentials: NativeAuthInput) => Promise<void>;
+}) {
+  const [emailAddress, setEmailAddress] = useState('');
+  const [password, setPassword] = useState('');
+
+  async function submit(): Promise<void> {
+    await onSignIn({ emailAddress, password });
+    // The password only ever lived in this component's state; drop it as soon
+    // as the answer is in, whatever the answer was.
+    setPassword('');
+  }
+
+  const notice = refusalNotice(refusal);
+  return (
+    <form
+      className="space-y-4"
+      data-fc-account-mode="account"
+      data-fc-account-state="signed-out"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submit();
+      }}
+    >
+      <p className="text-sm text-base-content/60">
+        Sign in with the e-mail address and password you registered with.
+      </p>
+
+      {notice && (
+        <AccountMessage tone={notice.tone} title={notice.title}>
+          {notice.body}
+        </AccountMessage>
+      )}
+
+      {resendTo !== null && <VerificationResend key={resendTo} emailAddress={resendTo} />}
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="sign-in-email"
+        >
+          E-mail address
+        </label>
+        <input
+          id="sign-in-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={emailAddress}
+          onChange={(event) => setEmailAddress(event.target.value)}
+          className="input w-full"
+        />
+      </div>
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="sign-in-password"
+        >
+          Password
+        </label>
+        <input
+          id="sign-in-password"
+          type="password"
+          required
+          autoComplete="current-password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          className="input w-full"
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <button type="submit" className="btn btn-primary" disabled={pending}>
+          {pending ? 'Signing in…' : 'Sign in'}
+        </button>
+        <LocaleLink href="/reset-password" locale={locale} className="link link-hover text-sm">
+          Forgot your password?
+        </LocaleLink>
+      </div>
+
+      <p className="text-sm text-base-content/60">
+        New here?{' '}
+        <LocaleLink href="/register" locale={locale} className="link link-hover">
+          Create an account
+        </LocaleLink>
+      </p>
+    </form>
+  );
+}
+
+function AccountSkeleton() {
+  return (
+    <div
+      className="space-y-4"
+      aria-busy="true"
+      aria-label="Loading your account"
+      data-fc-account-mode="account"
+      data-fc-account-state="loading"
+    >
+      <div className="skeleton h-10 w-full"></div>
+      <div className="skeleton h-10 w-full"></div>
+      <div className="skeleton h-10 w-32"></div>
+    </div>
+  );
+}

package/templates/storefront/src/components/account/RegisterForm.tsx

@@ -3,14 +3,10 @@
 import { useState } from 'react';
 
 import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { VerificationResend } from './VerificationResend';
 import { LocaleLink } from '../LocaleLink';
-import { submitVerificationRequest } from '../../lib/account-actions';
 import { registerCustomerAccount } from '../../lib/account-session';
-import {
-  registerState,
-  type RegisterState,
-  type VerificationResendState,
-} from '../../lib/account/register-state';
+import { registerState, type RegisterState } from '../../lib/account/register-state';
 import type { LocaleBinding } from '../../lib/locale/localized-path';
 
 /**
@@ -26,8 +22,8 @@ import type { LocaleBinding } from '../../lib/locale/localized-path';
  * The submit runs on the shopper's OWN websocket rather than through a Server
  * Action, because the API's protection against a double-clicked submit is
  * scoped to their session — `lib/account-session.ts` carries the full
- * argument. The RESEND below is a Server Action, because it needs nothing but
- * an address.
+ * argument. The RESEND (`VerificationResend`) is a Server Action, because it
+ * needs nothing but an address.
  *
  * Which screen an outcome produces is decided in
  * `lib/account/register-state.ts`; this component renders it.
@@ -56,39 +52,13 @@ const PROMPTS: Readonly<
   },
 };
 
-/**
- * What a SUBMITTED resend says. `idle` has no entry because it is the
- * pre-submit state and renders nothing.
- *
- * `sent` is worded so it is true for every address a shopper can type — one
- * with a pending account, one with none, and one the platform's throttle
- * silently swallowed. That is the same neutrality the reset-request form
- * carries, and `verificationResendState` is where it is decided.
- */
-const RESEND_MESSAGES: Readonly<
-  Record<'sent' | 'failed', { tone: AccountMessageTone; title: string; body: string }>
-> = {
-  sent: {
-    tone: 'success',
-    title: 'On its way',
-    body: 'If that address is waiting to be confirmed, a link is on its way to it. A mail we sent a moment ago still works, so it is worth checking for that one too.',
-  },
-  failed: {
-    tone: 'error',
-    title: 'We could not send that e-mail',
-    body: 'Something went wrong on our side and nothing has been sent. Please try again in a few minutes.',
-  },
-};
-
 export function RegisterForm({ locale }: { locale: LocaleBinding }) {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [emailAddress, setEmailAddress] = useState('');
   const [password, setPassword] = useState('');
   const [state, setState] = useState<RegisterState>('form');
-  const [resend, setResend] = useState<VerificationResendState>('idle');
   const [pending, setPending] = useState(false);
-  const [resendPending, setResendPending] = useState(false);
 
   /**
    * The guard is the FIRST half of #1471's double-submit fix: the button is
@@ -115,19 +85,6 @@ export function RegisterForm({ locale }: { locale: LocaleBinding }) {
     setState(registerState(outcome));
   }
 
-  /**
-   * Same guard, and it matters more here: this button triggers a MAIL, so a
-   * re-entrant click is a mail a shopper did not ask for. The platform throttles
-   * it too — silently, which is why a refused resend still renders as sent.
-   */
-  async function requestAnotherMail(): Promise<void> {
-    if (resendPending) return;
-    setResendPending(true);
-    const next = await submitVerificationRequest(emailAddress);
-    setResendPending(false);
-    setResend(next);
-  }
-
   if (state === 'signed-in-already') {
     return (
       <div className="space-y-6" data-fc-account-mode="register" data-fc-account-state={state}>
@@ -135,8 +92,8 @@ export function RegisterForm({ locale }: { locale: LocaleBinding }) {
           This address is already confirmed, so there is nothing left to do here — you can sign in
           with it whenever you like.
         </AccountMessage>
-        <LocaleLink href="/" locale={locale} className="btn btn-primary">
-          Continue shopping
+        <LocaleLink href="/account" locale={locale} className="btn btn-primary">
+          Sign in
         </LocaleLink>
       </div>
     );
@@ -144,32 +101,17 @@ export function RegisterForm({ locale }: { locale: LocaleBinding }) {
 
   if (state === 'verify-your-email' || state === 'already-registered') {
     const prompt = PROMPTS[state];
-    const resendMessage = resend === 'idle' ? null : RESEND_MESSAGES[resend];
     return (
       <div className="space-y-6" data-fc-account-mode="register" data-fc-account-state={state}>
         <AccountMessage tone={prompt.tone} title={prompt.title}>
           {prompt.body}
         </AccountMessage>
 
-        {resendMessage && (
-          <AccountMessage tone={resendMessage.tone} title={resendMessage.title}>
-            {resendMessage.body}
-          </AccountMessage>
-        )}
-
-        <div className="flex flex-wrap gap-3">
-          <button
-            type="button"
-            className="btn btn-primary"
-            disabled={resendPending}
-            onClick={() => void requestAnotherMail()}
-          >
-            {resendPending ? 'Sending…' : 'Send the confirmation e-mail again'}
-          </button>
+        <VerificationResend emailAddress={emailAddress}>
           <LocaleLink href="/" locale={locale} className="btn btn-ghost">
             Continue shopping
           </LocaleLink>
-        </div>
+        </VerificationResend>
       </div>
     );
   }
@@ -278,6 +220,13 @@ export function RegisterForm({ locale }: { locale: LocaleBinding }) {
       <button type="submit" className="btn btn-primary" disabled={pending}>
         {pending ? 'Creating your account…' : 'Create account'}
       </button>
+
+      <p className="text-sm text-base-content/60">
+        Already have an account?{' '}
+        <LocaleLink href="/account" locale={locale} className="link link-hover">
+          Sign in
+        </LocaleLink>
+      </p>
     </form>
   );
 }

package/templates/storefront/src/components/account/ResetPasswordForm.tsx

@@ -77,8 +77,8 @@ export function ResetPasswordForm({ token, locale }: { token: string; locale: Lo
         <AccountMessage tone="success" title="Your password has been changed">
           You can sign in with your new password from now on.
         </AccountMessage>
-        <LocaleLink href="/" locale={locale} className="btn btn-primary">
-          Continue shopping
+        <LocaleLink href="/account" locale={locale} className="btn btn-primary">
+          Sign in
         </LocaleLink>
       </div>
     );

package/templates/storefront/src/components/account/VerificationResend.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { submitVerificationRequest } from '../../lib/account-actions';
+import type { VerificationResendState } from '../../lib/account/register-state';
+
+/**
+ * Send the confirmation e-mail again (#1471, #1093) — the one key an UNCONFIRMED
+ * account's owner has. Rendered wherever such an account stops a shopper: the
+ * register prompt, for the address they just registered, and the sign-in form,
+ * after the API refused a sign-in NOT_VERIFIED. Without it that shopper has
+ * nowhere to go: the mail they lost is the only way to confirm the account.
+ *
+ * A Server Action rather than the shopper's socket: the resend needs nothing but
+ * an address, so it runs on the anonymous channel singleton like the reset
+ * request (`lib/account-actions.ts`).
+ *
+ * Renders the resend's answer, then a row holding the button and whatever the
+ * caller passes as `children` — its own next step beside it.
+ */
+
+/**
+ * What a SUBMITTED resend says. `idle` has no entry because it is the
+ * pre-submit state and renders nothing.
+ *
+ * `sent` is worded so it is true for every address a shopper can type — one
+ * with a pending account, one with none, and one the platform's throttle
+ * silently swallowed. That is the same neutrality the reset-request form
+ * carries, and `verificationResendState` is where it is decided.
+ */
+const RESEND_MESSAGES: Readonly<
+  Record<'sent' | 'failed', { tone: AccountMessageTone; title: string; body: string }>
+> = {
+  sent: {
+    tone: 'success',
+    title: 'On its way',
+    body: 'If that address is waiting to be confirmed, a link is on its way to it. A mail we sent a moment ago still works, so it is worth checking for that one too.',
+  },
+  failed: {
+    tone: 'error',
+    title: 'We could not send that e-mail',
+    body: 'Something went wrong on our side and nothing has been sent. Please try again in a few minutes.',
+  },
+};
+
+export function VerificationResend({
+  emailAddress,
+  children,
+}: {
+  /** The address the confirmation mail goes to. */
+  emailAddress: string;
+  /** The caller's own next step, rendered beside the button. */
+  children?: ReactNode;
+}) {
+  const [resend, setResend] = useState<VerificationResendState>('idle');
+  const [pending, setPending] = useState(false);
+
+  /**
+   * This button triggers a MAIL, so a re-entrant click is a mail a shopper did
+   * not ask for: `pending` refuses one even before `disabled` has painted. The
+   * platform throttles it too — silently, which is why a refused resend still
+   * renders as sent.
+   */
+  async function requestAnotherMail(): Promise<void> {
+    if (pending) return;
+    setPending(true);
+    const next = await submitVerificationRequest(emailAddress);
+    setPending(false);
+    setResend(next);
+  }
+
+  const message = resend === 'idle' ? null : RESEND_MESSAGES[resend];
+  return (
+    <>
+      {message && (
+        <AccountMessage tone={message.tone} title={message.title}>
+          {message.body}
+        </AccountMessage>
+      )}
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="button"
+          className="btn btn-primary"
+          disabled={pending}
+          onClick={() => void requestAnotherMail()}
+        >
+          {pending ? 'Sending…' : 'Send the confirmation e-mail again'}
+        </button>
+        {children}
+      </div>
+    </>
+  );
+}