@forgecart/cli 2.202608300703.0 → 2.202609190800.0

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

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+
+/**
+ * The one block every account-link state renders through (#1472).
+ *
+ * `/verify` and `/reset-password` are pages whose whole content IS an outcome:
+ * a shopper arrives holding a one-shot token and leaves knowing what happened
+ * to it. Routing all of those through one component is what keeps the
+ * vocabulary consistent — the same shape says "verified" and "this link has
+ * expired" — and keeps each page a table of copy rather than a pile of markup
+ * variants.
+ *
+ * Semantic daisyUI tokens only (`alert-success`, `alert-warning`, …), per the
+ * theme contract in `globals.css`: a brand lives in that block alone, so no
+ * component here names a color.
+ *
+ * No `'use client'` and no hooks, so it renders on the server for the verify
+ * page and rides into the bundle when a client form renders it.
+ */
+
+export type AccountMessageTone = 'success' | 'info' | 'warning' | 'error';
+
+/**
+ * The class AND the live-region role per tone.
+ *
+ * `alert` is for something that has gone wrong and interrupts; `status` is a
+ * polite announcement. A success message that arrives with the first paint is
+ * not an interruption, and announcing it as one is how a screen reader ends up
+ * shouting "Your e-mail is verified".
+ */
+const TONES: Readonly<Record<AccountMessageTone, { className: string; role: 'alert' | 'status' }>> =
+  {
+    success: { className: 'alert-success', role: 'status' },
+    info: { className: 'alert-info', role: 'status' },
+    warning: { className: 'alert-warning', role: 'alert' },
+    error: { className: 'alert-error', role: 'alert' },
+  };
+
+export function AccountMessage({
+  tone,
+  title,
+  children,
+}: {
+  tone: AccountMessageTone;
+  /** The outcome in one line — what happened, not what to do about it. */
+  title: string;
+  /** What the shopper can do next. */
+  children: ReactNode;
+}): ReactNode {
+  const { className, role } = TONES[tone];
+  return (
+    <div role={role} className={`alert ${className} items-start`}>
+      <div className="space-y-1">
+        <p className="font-semibold">{title}</p>
+        <p className="text-sm opacity-90">{children}</p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,283 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+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 type { LocaleBinding } from '../../lib/locale/localized-path';
+
+/**
+ * Create an account (#1471).
+ *
+ * Registering NEVER signs a shopper in. The shop API mints the account
+ * unverified and mails a confirmation link, so the screen after a successful
+ * submit is a prompt pointing at an inbox — not a redirect into an account
+ * area, and never a `login` call: a storefront that made one was refused
+ * NOT_VERIFIED 287 ms later (prod, 2026-09-06), which is the defect this page
+ * exists to stop rendering as a failure.
+ *
+ * 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.
+ *
+ * Which screen an outcome produces is decided in
+ * `lib/account/register-state.ts`; this component renders it.
+ */
+
+/**
+ * The two states where the account EXISTS and the shopper's next move is their
+ * inbox. They differ only in whose account it is, which is the one thing the
+ * copy has to get right — the resend affordance is the same either way.
+ */
+const PROMPTS: Readonly<
+  Record<
+    'verify-your-email' | 'already-registered',
+    { tone: AccountMessageTone; title: string; body: string }
+  >
+> = {
+  'verify-your-email': {
+    tone: 'info',
+    title: 'Check your e-mail',
+    body: 'Your account is ready. Open the link we just sent to confirm this address — you can sign in once it is confirmed.',
+  },
+  'already-registered': {
+    tone: 'warning',
+    title: 'That address already has an account',
+    body: 'If it is yours and you never confirmed it, have the confirmation mail sent again. If you did confirm it, sign in with that address instead.',
+  },
+};
+
+/**
+ * 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
+   * disabled for the whole round trip, and `pending` refuses a re-entrant call
+   * as well — a keyboard Enter can fire while a click is already in flight,
+   * before `disabled` has painted. The SECOND half is the shop API's
+   * session-scoped idempotency, which covers everything a client cannot: a
+   * second tab, a refresh-and-resubmit, a client running no JavaScript at all.
+   * Neither half is sufficient alone, which is why both exist.
+   */
+  async function submit(): Promise<void> {
+    if (pending) return;
+    setPending(true);
+    const outcome = await registerCustomerAccount({
+      firstName,
+      lastName,
+      emailAddress,
+      password,
+    });
+    setPending(false);
+    // The password only ever lived in this component's state; drop it as soon
+    // as the answer is in, whatever the answer was.
+    setPassword('');
+    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}>
+        <AccountMessage tone="success" title="Your account is ready">
+          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>
+      </div>
+    );
+  }
+
+  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>
+          <LocaleLink href="/" locale={locale} className="btn btn-ghost">
+            Continue shopping
+          </LocaleLink>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="space-y-4"
+      data-fc-account-mode="register"
+      data-fc-account-state={state}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submit();
+      }}
+    >
+      <p className="text-sm text-base-content/60">
+        Keep your details for next time. We will send a link to confirm your address — the account
+        works once you have opened it.
+      </p>
+
+      {state === 'failed' && (
+        <AccountMessage tone="error" title="We could not create your account">
+          Something went wrong on our side and no account has been created. Please try again in a
+          few minutes.
+        </AccountMessage>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div>
+          <label
+            className="mb-1 block text-sm font-medium text-base-content/70"
+            htmlFor="register-first-name"
+          >
+            First name
+          </label>
+          <input
+            id="register-first-name"
+            type="text"
+            required
+            autoComplete="given-name"
+            value={firstName}
+            onChange={(event) => setFirstName(event.target.value)}
+            className="input w-full"
+          />
+        </div>
+
+        <div>
+          <label
+            className="mb-1 block text-sm font-medium text-base-content/70"
+            htmlFor="register-last-name"
+          >
+            Last name
+          </label>
+          <input
+            id="register-last-name"
+            type="text"
+            required
+            autoComplete="family-name"
+            value={lastName}
+            onChange={(event) => setLastName(event.target.value)}
+            className="input w-full"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="register-email"
+        >
+          E-mail address
+        </label>
+        <input
+          id="register-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="register-password"
+        >
+          Password
+        </label>
+        <input
+          id="register-password"
+          type="password"
+          required
+          autoComplete="new-password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          className="input w-full"
+        />
+        {/* No confirmation field, and no password rule of our own: whether a
+            password is acceptable belongs to the shop API. The reset form
+            carries a confirmation because a typo there SPENDS a one-shot
+            token; here a shopper who mistypes simply submits again, so a
+            second field would buy them nothing but typing. */}
+      </div>
+
+      <button type="submit" className="btn btn-primary" disabled={pending}>
+        {pending ? 'Creating your account…' : 'Create account'}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage } from './AccountMessage';
+import { LocaleLink } from '../LocaleLink';
+import { submitPasswordResetRequest } from '../../lib/account-actions';
+import type { PasswordResetRequestState } from '../../lib/account/reset-password-state';
+import type { LocaleBinding } from '../../lib/locale/localized-path';
+
+/**
+ * Ask for a password-reset link (#1472).
+ *
+ * The answer is the SAME whether or not an account exists for the address —
+ * that is the whole design of this form. A page that distinguished the two
+ * would be an account-enumeration oracle: type an address, read the screen,
+ * learn whether that person shops here. The shop API is built the same way
+ * (it reports a match to nobody but the mailbox), and
+ * `lib/account/reset-password-state.ts` is where the two successful answers
+ * are collapsed into one.
+ *
+ * `failed` is NOT that case: it means the request never reached the API, which
+ * says nothing about any account and would otherwise be a sent-mail promise we
+ * know to be false.
+ */
+export function RequestPasswordResetForm({ locale }: { locale: LocaleBinding }) {
+  const [emailAddress, setEmailAddress] = useState('');
+  const [state, setState] = useState<PasswordResetRequestState>('form');
+  const [pending, setPending] = useState(false);
+
+  async function submit(): Promise<void> {
+    setPending(true);
+    const next = await submitPasswordResetRequest(emailAddress);
+    setPending(false);
+    setState(next);
+  }
+
+  if (state === 'sent') {
+    return (
+      <div className="space-y-6" data-fc-account-mode="request" data-fc-account-state={state}>
+        <AccountMessage tone="info" title="Check your e-mail">
+          If an account exists for that address, we have sent it a link to choose a new password.
+          The link works once, and only the newest one works.
+        </AccountMessage>
+        <LocaleLink href="/" locale={locale} className="btn btn-primary">
+          Continue shopping
+        </LocaleLink>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="space-y-4"
+      data-fc-account-mode="request"
+      data-fc-account-state={state}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submit();
+      }}
+    >
+      <p className="text-sm text-base-content/60">
+        Enter the e-mail address you shop with and we will send you a link to choose a new password.
+      </p>
+
+      {state === 'failed' && (
+        <AccountMessage tone="error" title="We could not send that e-mail">
+          Something went wrong on our side and nothing has been sent yet. Please try again in a few
+          minutes.
+        </AccountMessage>
+      )}
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="reset-email"
+        >
+          E-mail address
+        </label>
+        <input
+          id="reset-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={emailAddress}
+          onChange={(event) => setEmailAddress(event.target.value)}
+          className="input w-full"
+        />
+      </div>
+
+      <button type="submit" className="btn btn-primary" disabled={pending}>
+        {pending ? 'Sending…' : 'Send reset link'}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { LocaleLink } from '../LocaleLink';
+import { submitPasswordReset } from '../../lib/account-actions';
+import {
+  checkNewPassword,
+  type NewPasswordProblem,
+  type ResetPasswordState,
+} from '../../lib/account/reset-password-state';
+import type { LocaleBinding } from '../../lib/locale/localized-path';
+
+/**
+ * Set a new password from the token in a reset mail (#1472).
+ *
+ * The token is spent by the SUBMIT, not by the render — see the page. The
+ * confirmation field never leaves the browser: it exists so a shopper catches
+ * a typo before spending their one-shot token, and the shop API remains the
+ * only authority on whether a password is acceptable (it answers
+ * `PASSWORD_VALIDATION_FAILED`, which arrives as `password-rejected`).
+ *
+ * The submit goes through a Server Action rather than the shopper's own
+ * websocket, because a password reset is not a session operation — see
+ * `lib/account-actions.ts`. The action returns the STATE; this component only
+ * renders it.
+ */
+
+/** The two refusals that keep the form up, with the copy for each. */
+const FORM_ALERTS: Readonly<
+  Record<'password-rejected' | 'failed', { tone: AccountMessageTone; title: string; body: string }>
+> = {
+  'password-rejected': {
+    tone: 'warning',
+    title: 'Choose a different password',
+    body: 'That password does not meet this store’s requirements. A longer one, mixing letters, numbers and symbols, will be accepted.',
+  },
+  failed: {
+    tone: 'error',
+    title: 'We could not change your password',
+    body: 'Something went wrong on our side. Please try again in a few minutes — and if this link has stopped working by then, request a new one.',
+  },
+};
+
+/** Why the form will not submit yet. Never a reason the server gave. */
+const PROBLEM_MESSAGES: Readonly<Record<NewPasswordProblem, string>> = {
+  empty: 'Enter a new password.',
+  mismatch: 'The two passwords do not match.',
+};
+
+export function ResetPasswordForm({ token, locale }: { token: string; locale: LocaleBinding }) {
+  const [password, setPassword] = useState('');
+  const [confirmation, setConfirmation] = useState('');
+  const [problem, setProblem] = useState<NewPasswordProblem | null>(null);
+  const [state, setState] = useState<ResetPasswordState>('form');
+  const [pending, setPending] = useState(false);
+
+  async function submit(): Promise<void> {
+    const found = checkNewPassword(password, confirmation);
+    setProblem(found);
+    if (found !== null) return;
+
+    setPending(true);
+    const next = await submitPasswordReset({ token, password });
+    setPending(false);
+    // The password only ever lived in this component's state; drop it as soon
+    // as the answer is in, whatever the answer was.
+    setPassword('');
+    setConfirmation('');
+    setState(next);
+  }
+
+  if (state === 'done') {
+    return (
+      <div className="space-y-6" data-fc-account-mode="reset" data-fc-account-state={state}>
+        <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>
+      </div>
+    );
+  }
+
+  if (state === 'link-invalid') {
+    return (
+      <div className="space-y-6" data-fc-account-mode="reset" data-fc-account-state={state}>
+        <AccountMessage tone="warning" title="This reset link is no longer valid">
+          It has either been used already or it has expired. Ask for a new one and open the newest
+          e-mail — links from earlier requests stop working as soon as a newer one is sent.
+        </AccountMessage>
+        {/* Same route, no token: the request-a-link mode of this page. */}
+        <LocaleLink href="/reset-password" locale={locale} className="btn btn-primary">
+          Request a new link
+        </LocaleLink>
+      </div>
+    );
+  }
+
+  const alert = state === 'form' ? null : FORM_ALERTS[state];
+
+  return (
+    <form
+      className="space-y-4"
+      data-fc-account-mode="reset"
+      data-fc-account-state={state}
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submit();
+      }}
+    >
+      {alert && (
+        <AccountMessage tone={alert.tone} title={alert.title}>
+          {alert.body}
+        </AccountMessage>
+      )}
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="new-password"
+        >
+          New password
+        </label>
+        <input
+          id="new-password"
+          type="password"
+          required
+          autoComplete="new-password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          aria-invalid={problem !== null}
+          aria-describedby={problem === null ? undefined : 'new-password-problem'}
+          className={`input w-full ${problem === null ? '' : 'input-error'}`}
+        />
+      </div>
+
+      <div>
+        <label
+          className="mb-1 block text-sm font-medium text-base-content/70"
+          htmlFor="confirm-password"
+        >
+          Repeat new password
+        </label>
+        <input
+          id="confirm-password"
+          type="password"
+          required
+          autoComplete="new-password"
+          value={confirmation}
+          onChange={(event) => setConfirmation(event.target.value)}
+          aria-invalid={problem === 'mismatch'}
+          className={`input w-full ${problem === 'mismatch' ? 'input-error' : ''}`}
+        />
+        {problem !== null && (
+          <p id="new-password-problem" className="mt-1 text-sm text-error">
+            {PROBLEM_MESSAGES[problem]}
+          </p>
+        )}
+      </div>
+
+      <button type="submit" className="btn btn-primary" disabled={pending}>
+        {pending ? 'Saving…' : 'Set new password'}
+      </button>
+    </form>
+  );
+}

package/templates/storefront/src/components/checkout/CheckoutGate.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import Link from 'next/link';
+import type { LocaleBinding } from '../../lib/locale/localized-path';
+import { LocaleLink } from '../LocaleLink';
 
 import { useCart } from '../../lib/cart-context';
 import type { Country } from '../../lib/forgecart';
@@ -15,7 +16,14 @@ import { CheckoutFlow } from './CheckoutFlow';
  * already in ArrangingPayment re-enters at the payment step) keeps working
  * because the hydrated active order carries its real state.
  */
-export function CheckoutGate({ countries }: { countries: Country[] }) {
+export function CheckoutGate({
+  countries,
+  locale,
+}: {
+  countries: Country[];
+  /** Threaded from the server page — a client component cannot read it. */
+  locale: LocaleBinding;
+}) {
   const { cart, hydrated } = useCart();
 
   if (!hydrated) {
@@ -34,9 +42,9 @@ export function CheckoutGate({ countries }: { countries: Country[] }) {
         <p className="text-base-content/60">
           Your cart is empty — add something before checking out.
         </p>
-        <Link href="/products" className="btn btn-primary">
+        <LocaleLink href="/products" locale={locale} className="btn btn-primary">
           Browse products
-        </Link>
+        </LocaleLink>
       </div>
     );
   }