@forgecart/cli 2.202610052310.0 → 2.202610060357.0

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

@@ -0,0 +1,257 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+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 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={buttonVariants()}>
+          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" disabled={resendPending} onClick={() => void requestAnotherMail()}>
+            {resendPending ? 'Sending…' : 'Send the confirmation e-mail again'}
+          </Button>
+          <LocaleLink href="/" locale={locale} className={buttonVariants({ variant: '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-muted-foreground">
+        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 className="grid gap-2">
+          <Label 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)}
+          />
+        </div>
+
+        <div className="grid gap-2">
+          <Label 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)}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="register-email">E-mail address</Label>
+        <Input
+          id="register-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={emailAddress}
+          onChange={(event) => setEmailAddress(event.target.value)}
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="register-password">Password</Label>
+        <Input
+          id="register-password"
+          type="password"
+          required
+          autoComplete="new-password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        />
+        {/* 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" disabled={pending}>
+        {pending ? 'Creating your account…' : 'Create account'}
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage } from './AccountMessage';
+import { LocaleLink } from '../LocaleLink';
+import { Button, buttonVariants } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+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={buttonVariants()}>
+          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-muted-foreground">
+        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 className="grid gap-2">
+        <Label htmlFor="reset-email">E-mail address</Label>
+        <Input
+          id="reset-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={emailAddress}
+          onChange={(event) => setEmailAddress(event.target.value)}
+        />
+      </div>
+
+      <Button type="submit" disabled={pending}>
+        {pending ? 'Sending…' : 'Send reset link'}
+      </Button>
+    </form>
+  );
+}

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

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AccountMessage, type AccountMessageTone } from './AccountMessage';
+import { LocaleLink } from '../LocaleLink';
+import { Button, buttonVariants } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+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={buttonVariants()}>
+          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={buttonVariants()}>
+          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>
+      )}
+
+      {/* An invalid field is marked by `aria-invalid` alone: the Input paints its
+          destructive border from that attribute, so what a screen reader
+          announces and what the shopper sees are one decision. */}
+      <div className="grid gap-2">
+        <Label 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'}
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label 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'}
+        />
+        {problem !== null && (
+          <p id="new-password-problem" className="text-sm text-destructive">
+            {PROBLEM_MESSAGES[problem]}
+          </p>
+        )}
+      </div>
+
+      <Button type="submit" disabled={pending}>
+        {pending ? 'Saving…' : 'Set new password'}
+      </Button>
+    </form>
+  );
+}