@forgecart/cli 2.202610141814.0 → 2.202610142335.0

package/templates/storefront-shadcn/src/app/account/page.tsx

@@ -0,0 +1,51 @@
+import type { Metadata } from 'next';
+
+import { AccountPanel } from '../../components/account/AccountPanel';
+import { getRequestLocale } from '../../lib/locale/request-binding';
+import { routeMetadata } from '../../lib/seo/metadata';
+
+/**
+ * `/account` — where a shopper signs in, is greeted, and signs out (#1093).
+ *
+ * A STATIC SHELL, and that is the law this file exists to keep: the server
+ * reads no session here — no cookie, no `connection()`, no session module. A
+ * storefront agent once read the session on the server path; the render threw
+ * `EmptyError: no elements in sequence`, and the 500 made the promote gate roll
+ * back the whole changeset. The session is the shopper's, on their own socket:
+ * `AccountPanel` asks it in the browser, and the server paints the skeleton it
+ * starts from. `tool/storefront-template-spec` holds this file to that.
+ *
+ * Locale-prefixable like `/register` — a shopper addresses it from a link on
+ * this storefront, never out of a mail — so `account` is absent from the
+ * grammar's unprefixed set and `/de/account` serves the German render.
+ */
+
+const PAGE_TITLE = 'Your account';
+
+/**
+ * Noindex via `NOINDEX_PATHS`, and no alternates — for the reasons `/register`'s
+ * metadata states: one shopper's own page has nothing for a search result to be
+ * about, and a page that declines indexing has no preferred address to claim.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+  const { binding, shopName, channelResolved } = await getRequestLocale();
+  return routeMetadata({
+    binding,
+    shopName,
+    channelResolved,
+    pathname: '/account',
+    pathsByLocale: {},
+    title: PAGE_TITLE,
+  });
+}
+
+export default async function AccountPage() {
+  const { binding } = await getRequestLocale();
+
+  return (
+    <div className="mx-auto max-w-xl space-y-6">
+      <h1 className="text-2xl font-bold tracking-tight">{PAGE_TITLE}</h1>
+      <AccountPanel locale={binding} />
+    </div>
+  );
+}

package/templates/storefront-shadcn/src/app/layout.tsx

@@ -149,11 +149,10 @@ export default async function RootLayout({ children }: { children: ReactNode })
                   >
                     Cart
                   </LocaleLink>
-                  {/* The only affordance for `/register` (#1471). It sits in the
-                      footer rather than the header nav on purpose: the template
-                      ships no sign-in surface yet, and an account entry in the
-                      primary nav would advertise an account AREA that does not
-                      exist. A merchant who adds sign-in moves it up. */}
+                  {/* The direct way to `/register` (#1471). The header's Account
+                      link (#1093) is the account entry — sign-in, with
+                      registration one link away — and this is the shortcut for
+                      a shopper who already knows they are new. */}
                   <LocaleLink
                     href="/register"
                     locale={binding}

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

@@ -70,39 +70,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: '/',
   },
 };
 
@@ -140,7 +152,7 @@ async function VerifyOutcome({ searchParams }: { searchParams: Promise<RouteSear
       <AccountMessage tone={copy.tone} title={copy.title}>
         {copy.body}
       </AccountMessage>
-      <LocaleLink href="/" locale={binding} className={buttonVariants()}>
+      <LocaleLink href={copy.href} locale={binding} className={buttonVariants()}>
         {copy.cta}
       </LocaleLink>
     </div>

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

@@ -21,7 +21,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();
 
@@ -65,6 +74,13 @@ export function Header({ locale, languageCodes }: HeaderProps) {
             Cart
             {mounted && itemCount > 0 && <Badge className="font-semibold">{itemCount}</Badge>}
           </LocaleLink>
+          <LocaleLink
+            href="/account"
+            locale={locale}
+            className={buttonVariants({ variant: 'ghost', size: 'sm' })}
+          >
+            Account
+          </LocaleLink>
           <LanguageSwitcher locale={locale} languageCodes={languageCodes} />
         </nav>
       </div>

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

@@ -0,0 +1,290 @@
+'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 { Button, buttonVariants } from '../ui/button';
+import { Card, CardContent } from '../ui/card';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Skeleton } from '../ui/skeleton';
+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">
+      <Card>
+        <CardContent className="space-y-2">
+          <h2 className="text-lg font-semibold">Hello, {customer.firstName}</h2>
+          <p className="text-sm text-muted-foreground">
+            You are signed in as {customer.emailAddress}.
+          </p>
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-wrap gap-3">
+        <LocaleLink href="/products" locale={locale} className={buttonVariants()}>
+          Continue shopping
+        </LocaleLink>
+        <Button type="button" variant="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-muted-foreground">
+        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 className="grid gap-2">
+        <Label 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)}
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label 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)}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4">
+        <Button type="submit" disabled={pending}>
+          {pending ? 'Signing in…' : 'Sign in'}
+        </Button>
+        <LocaleLink
+          href="/reset-password"
+          locale={locale}
+          className="text-sm underline-offset-4 hover:text-foreground hover:underline"
+        >
+          Forgot your password?
+        </LocaleLink>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        New here?{' '}
+        <LocaleLink
+          href="/register"
+          locale={locale}
+          className="font-medium text-primary underline-offset-4 hover:underline"
+        >
+          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"
+    >
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-32" />
+    </div>
+  );
+}

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

@@ -3,17 +3,13 @@
 import { useState } from 'react';
 
 import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { VerificationResend } from './VerificationResend';
 import { LocaleLink } from '../LocaleLink';
 import { Button, buttonVariants } from '../ui/button';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-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';
 
 /**
@@ -29,8 +25,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.
@@ -59,39 +55,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
@@ -118,19 +88,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}>
@@ -138,8 +95,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={buttonVariants()}>
-          Continue shopping
+        <LocaleLink href="/account" locale={locale} className={buttonVariants()}>
+          Sign in
         </LocaleLink>
       </div>
     );
@@ -147,27 +104,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" disabled={resendPending} onClick={() => void requestAnotherMail()}>
-            {resendPending ? 'Sending…' : 'Send the confirmation e-mail again'}
-          </Button>
+        <VerificationResend emailAddress={emailAddress}>
           <LocaleLink href="/" locale={locale} className={buttonVariants({ variant: 'ghost' })}>
             Continue shopping
           </LocaleLink>
-        </div>
+        </VerificationResend>
       </div>
     );
   }
@@ -252,6 +199,17 @@ export function RegisterForm({ locale }: { locale: LocaleBinding }) {
       <Button type="submit" disabled={pending}>
         {pending ? 'Creating your account…' : 'Create account'}
       </Button>
+
+      <p className="text-sm text-muted-foreground">
+        Already have an account?{' '}
+        <LocaleLink
+          href="/account"
+          locale={locale}
+          className="font-medium text-primary underline-offset-4 hover:underline"
+        >
+          Sign in
+        </LocaleLink>
+      </p>
     </form>
   );
 }

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

@@ -80,8 +80,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={buttonVariants()}>
-          Continue shopping
+        <LocaleLink href="/account" locale={locale} className={buttonVariants()}>
+          Sign in
         </LocaleLink>
       </div>
     );