@shoppexio/storefront-react 0.0.0 → 0.1.1

package/eject/account/login.tsx

@@ -0,0 +1,253 @@
+/**
+ * Sign-in, in the page the buyer is already standing on.
+ *
+ * Two steps and no password: ask for a code, type it back, and the same panel
+ * becomes the account. There is no redirect and no second surface to keep in
+ * sync.
+ *
+ * Two things this component must never do, on any theme:
+ * - touch a session token. `verifyOtp` resolves with nothing secret — the
+ *   Shoppex worker reads the response and sets an HttpOnly cookie the bundle
+ *   cannot see. Storefront code that stored a token would be holding a
+ *   credential the platform deliberately kept out of its reach.
+ * - send a shop. The worker derives the tenant from the host the buyer is on.
+ *   A shop chosen in the page would put a tenant boundary behind a text field
+ *   on an unauthenticated route.
+ *
+ * Every refusal is printed in the server's own sentence. The code's lifetime,
+ * the attempt limit and the lockout rule are all decided server-side, so a
+ * storefront that paraphrases them is telling the buyer something that may
+ * already be false.
+ */
+
+import { useState } from 'react';
+import type { AccountSignInPrefill } from './account-signin-link';
+import { callCustomerApi } from './customer-account';
+import { t } from './i18n';
+import { MailIcon } from './icons';
+import { AccountCard, AccountFieldError, AccountNotice, BusySpinner } from './shared';
+
+/** Long enough for any code the producer mints, short enough to reject a paste of a page. */
+const OTP_MAX_LENGTH = 32;
+
+type Step =
+  | { name: 'email' }
+  | { name: 'code'; email: string };
+
+/** The template's field skin — the same one the checkout and contact forms wear. */
+const FIELD =
+  'sx-account-field sxa:w-full sxa:border sxa:bg-[color-mix(in_oklab,_var(--sx-bg)_40%,_transparent)] sxa:px-3 sxa:py-2.5 sxa:text-small sxa:shadow-card sxa:placeholder:text-muted sxa:focus-visible:border-accent sxa:focus-visible:ring-[3px] sxa:focus-visible:ring-[color-mix(in_oklab,_var(--sx-accent)_50%,_transparent)] sxa:focus-visible:outline-none sxa:disabled:opacity-50';
+
+const LABEL = 'sx-account-label sxa:block sxa:text-small sxa:font-medium sxa:text-muted';
+
+const ERROR_ID = 'account-login-error';
+
+/**
+ * A prefill puts the buyer on the code step with both fields already filled —
+ * and stops there. It never submits: the code stays unspent until the buyer
+ * presses the button, which is the only reason the link is allowed to carry
+ * one at all.
+ */
+export function AccountLogin({
+  onSignedIn,
+  prefill = null,
+}: {
+  onSignedIn: () => void;
+  prefill?: AccountSignInPrefill | null;
+}) {
+  const [step, setStep] = useState<Step>(
+    prefill ? { name: 'code', email: prefill.email } : { name: 'email' },
+  );
+  const [email, setEmail] = useState(prefill?.email ?? '');
+  const [otp, setOtp] = useState(prefill?.code ?? '');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const sendCode = async (address: string, resend = false) => {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    const result = await callCustomerApi((sdk) => sdk.requestOtp(address));
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('login.sendFailed'));
+      return;
+    }
+
+    setStep({ name: 'code', email: address });
+    // Only a resend is worth announcing. The step's own intro already names the
+    // address the first code went to, so repeating it under the field is noise.
+    if (resend) setNotice(t('login.resent', { email: address }));
+  };
+
+  const submitEmail = () => {
+    const address = email.trim();
+    // The cheapest check that catches a real mistake — a missing local part or
+    // a missing domain. Anything stricter would refuse an address the server
+    // would have accepted, and the server is the one that has to deliver to it.
+    const at = address.indexOf('@');
+    if (at < 1 || at === address.length - 1) {
+      setError(t('login.invalidEmail'));
+      return;
+    }
+    void sendCode(address);
+  };
+
+  const submitCode = async (address: string) => {
+    const code = otp.trim();
+    if (!code) {
+      setError(t('login.missingCode'));
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    const result = await callCustomerApi((sdk) => sdk.verifyOtp(address, code));
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('login.verifyFailed'));
+      return;
+    }
+
+    // The session cookie rode back on that response. Nothing is kept here.
+    onSignedIn();
+  };
+
+  return (
+    <AccountCard className="sxa:mx-auto sxa:w-full sxa:max-w-md sxa:px-6 sxa:py-8 sxa:sm:px-8">
+      <div className="sxa:flex sxa:h-10 sxa:w-10 sxa:items-center sxa:justify-center sxa:rounded-card sxa:bg-[color-mix(in_oklab,_var(--sx-accent)_10%,_transparent)]">
+        <MailIcon className="sxa:h-5 sxa:w-5 sxa:text-accent" />
+      </div>
+      <h2 className="sxa:font-heading sxa:mt-5 sxa:text-h3 sxa:font-semibold">
+        {step.name === 'email' ? t('login.titleEmail') : t('login.titleCode')}
+      </h2>
+      <p className="sxa:mt-2 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+        {step.name === 'email'
+          ? t('login.introEmail')
+          : t('login.introCode', { email: step.email })}
+      </p>
+
+      {step.name === 'email' ? (
+        <form
+          noValidate
+          className="sxa:mt-6 sxa:space-y-1.5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            submitEmail();
+          }}
+        >
+          <label htmlFor="account-email" className={LABEL}>
+            {t('login.emailLabel')}
+          </label>
+          <input
+            id="account-email"
+            name="email"
+            type="email"
+            required
+            autoComplete="email"
+            value={email}
+            disabled={busy}
+            aria-invalid={error !== null}
+            aria-describedby={error ? ERROR_ID : undefined}
+            className={`${FIELD} sxa:h-10 sxa:rounded-input ${error ? 'sxa:border-error' : ''}`}
+            onChange={(event) => {
+              setEmail(event.target.value);
+              setError(null);
+            }}
+          />
+          {error ? (
+            <div id={ERROR_ID}>
+              <AccountFieldError message={error} />
+            </div>
+          ) : null}
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-5 sxa:inline-flex sxa:h-11 sxa:w-full sxa:items-center sxa:justify-center sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {busy ? <BusySpinner className="sxa:mr-2" /> : null}
+            {busy ? t('login.sending') : t('login.send')}
+          </button>
+        </form>
+      ) : (
+        <form
+          noValidate
+          className="sxa:mt-6 sxa:space-y-1.5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submitCode(step.email);
+          }}
+        >
+          <label htmlFor="account-otp" className={LABEL}>
+            {t('login.codeLabel')}
+          </label>
+          <input
+            id="account-otp"
+            name="otp"
+            type="text"
+            required
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            maxLength={OTP_MAX_LENGTH}
+            value={otp}
+            disabled={busy}
+            aria-invalid={error !== null}
+            aria-describedby={error ? ERROR_ID : undefined}
+            className={`${FIELD} sxa:font-mono sxa:tracking-[0.3em] sxa:tabular-nums sxa:h-10 sxa:rounded-input ${error ? 'sxa:border-error' : ''}`}
+            onChange={(event) => {
+              setOtp(event.target.value);
+              setError(null);
+            }}
+          />
+          {notice ? <AccountNotice message={notice} /> : null}
+          {error ? (
+            <div id={ERROR_ID}>
+              <AccountFieldError message={error} />
+            </div>
+          ) : null}
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-5 sxa:inline-flex sxa:h-11 sxa:w-full sxa:items-center sxa:justify-center sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {busy ? <BusySpinner className="sxa:mr-2" /> : null}
+            {busy ? t('login.submitting') : t('login.submit')}
+          </button>
+          <div className="sxa:mt-4 sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
+            <button
+              type="button"
+              disabled={busy}
+              className="sxa:text-small sxa:text-muted sxa:transition-opacity sxa:hover:opacity-80 sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => {
+                setStep({ name: 'email' });
+                setOtp('');
+                setError(null);
+                setNotice(null);
+              }}
+            >
+              {t('login.changeEmail')}
+            </button>
+            <button
+              type="button"
+              disabled={busy}
+              className="sxa:text-small sxa:font-semibold sxa:text-accent sxa:transition-opacity sxa:hover:opacity-80 sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+              onClick={() => {
+                // The old code is dead the moment a new one is minted; leaving
+                // it in the field invites the buyer to submit it anyway.
+                setOtp('');
+                void sendCode(step.email, true);
+              }}
+            >
+              {t('login.resend')}
+            </button>
+          </div>
+        </form>
+      )}
+    </AccountCard>
+  );
+}