@akinon/pz-theme 2.0.83-rc.0 → 2.0.84-beta.0

package/src/blocks/register-form-block.tsx

@@ -1,11 +1,37 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { readToggle } from './product-block-utils';
+import { closeAllModals } from '../overlays/overlay-bus';
+import {
+  AuthFieldErrors,
+  AuthFieldErrorsProvider,
+  clearAuthFieldError,
+  collectAuthFieldErrors
+} from '../auth/auth-field-errors';
+import {
+  AuthFormErrorProvider,
+  containsAuthErrorBlock
+} from '../auth/form-error-context';
+import {
+  AUTH_CONSENT_NAMES,
+  AuthConsentHostProvider
+} from './auth-consent-block';
+import { renderComposedChildren } from './render-composed-children';
+import {
+  clearFormSubmitState,
+  publishFormSubmitState
+} from '../auth/form-submit-bus';
+import {
+  AuthFlowIdContext,
+  resolveAuthStepTarget,
+  setAuthStep,
+  setPendingOtp
+} from '../auth/auth-flow-bus';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
@@ -31,9 +57,10 @@ const readAuthError = (
       const data = (entry as { data?: unknown })?.data;
 
       // The OTP branch carries no message: superstep answers a valid
-      // registration with an `otp` error and expects the storefront to open an
-      // SMS-verification modal. This block has no modal, so the shopper is at
-      // least told what happened instead of seeing a silent failure.
+      // registration with an `otp` error and expects the storefront to run an
+      // SMS-verification step. When no `otpStepTarget` is set the challenge
+      // lands here, so the shopper is at least told what happened instead of
+      // seeing a silent failure.
       if (type === 'otp') {
         messages.push(otpMessage);
         return;
@@ -59,6 +86,65 @@ const readAuthError = (
   }
 };
 
+/**
+ * Names a composed field must not take, because the form and next-auth already
+ * mean something by them.
+ *
+ * A Custom field carries whatever key the brand's backend expects, which is the
+ * point of it — but the sign-up body is not only the shopper's answers: it also
+ * says which commerce endpoint to call (`formType`), which language to resolve
+ * (`locale`), and how next-auth should behave (`redirect`, `callbackUrl`,
+ * `csrfToken`, `json`). A field named after one of those would replace it, and
+ * `redirect` in particular is not a broken field but a broken FORM: any string
+ * is truthy, so next-auth navigates away instead of handing back the response
+ * this block reads its errors from.
+ */
+const RESERVED_SUBMIT_KEYS = new Set([
+  'formType',
+  'locale',
+  'code',
+  'redirect',
+  'callbackUrl',
+  'csrfToken',
+  'json'
+]);
+
+/**
+ * Whether commerce answered a valid registration with an SMS-verification
+ * challenge. Detected separately from the message extraction because the
+ * challenge is a HANDOFF, not a failure: the pending payload moves to the
+ * auth bus and an `otp-form` block finishes the sign-up.
+ */
+const hasOtpChallenge = (error: string | null | undefined): boolean => {
+  if (!error) return false;
+
+  try {
+    const parsed = JSON.parse(error);
+
+    return (
+      Array.isArray(parsed) &&
+      parsed.some((entry) => (entry as { type?: unknown })?.type === 'otp')
+    );
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Where the serialised AuthError[] actually lives depends on the next-auth
+ * major. v4 puts it into `error` itself; v5 keeps `error` at the generic
+ * "CredentialsSignin" enum name and moves the serialised array onto `code` —
+ * which is also what the brands' own views read. Preferring `code` is what
+ * lets both the message extraction and the OTP-challenge detection work on
+ * v5 storefronts.
+ */
+const signInErrorDetail = (
+  response:
+    | { error?: string | null; code?: string | null }
+    | null
+    | undefined
+): string | null | undefined => response?.code || response?.error;
+
 /**
  * The commerce registration endpoint is reached through next-auth's credentials
  * provider, exactly like the brand's own register view: the provider id is
@@ -70,19 +156,28 @@ const FORM_TYPE = 'registration';
 /**
  * Functional auth block: full registration form (name, surname, e-mail,
  * password, optional phone, consents) submitted through the v1 register path.
- * Behaviour is fixed (commerce sign-up); the editor owns the labels, the phone
- * field and the consent wording.
+ *
+ * Composable, the same way the Auth Form is: with children the form draws THEM
+ * — an `auth-field` per input, an `auth-consent` per tick, the CTA a Button,
+ * the message a Form Error block — and reads the values back out of `FormData`
+ * on submit. Left empty it renders the fixed rows exactly as before, so a
+ * published composition is untouched. Either way the behaviour is the same
+ * commerce sign-up: what composes is the layout, not the journey.
  * Properties: submitLabel, busyLabel, showPhone, showLabels, firstNameLabel,
  * lastNameLabel, emailLabel, passwordLabel, phoneLabel, the matching
  * *Placeholder keys, consentText, marketingConsentText, showMarketingConsent,
- * consentRequiredLabel, errorLabel, otpLabel.
+ * consentRequiredLabel, errorLabel, otpLabel, otpStepTarget,
+ * closeModalsOnSuccess.
  * Parts: form, field, label, input, consent, checkbox, consent-text, error,
  * submit.
  */
 const RegisterFormBlock = ({
   block,
+  placeholderId,
+  sectionId,
   currentBreakpoint = 'desktop',
-  isDesigner = false
+  isDesigner = false,
+  selectedBlockId
 }: BlockRendererProps) => {
   const prop = (key: string, fallback: string) =>
     String(
@@ -93,7 +188,11 @@ const RegisterFormBlock = ({
   // Empty on purpose: without a busy label the submit caption stays put while
   // the request runs, which is what published blocks render today.
   const busyLabel = prop('busyLabel', '');
-  const showPhone = readToggle(block.properties?.showPhone, currentBreakpoint, true);
+  const showPhone = readToggle(
+    block.properties?.showPhone,
+    currentBreakpoint,
+    true
+  );
   const showLabels = readToggle(
     block.properties?.showLabels,
     currentBreakpoint,
@@ -112,6 +211,13 @@ const RegisterFormBlock = ({
     'marketingConsentText',
     'I would like to receive campaign and marketing messages.'
   );
+  /**
+   * The copy for a field left empty or filled in wrongly — the brand's own
+   * sentence in place of the browser's bubble. See `auth-field-errors.tsx` for
+   * why the form validates instead of letting the browser do it.
+   */
+  const requiredMessage = prop('requiredMessage', 'This field is required.');
+  const invalidMessage = prop('invalidMessage', 'Please check this field.');
   const consentRequiredLabel = prop(
     'consentRequiredLabel',
     'Please accept the membership agreement to continue.'
@@ -121,9 +227,44 @@ const RegisterFormBlock = ({
     'otpLabel',
     'A verification code was sent. Please confirm it to finish.'
   );
+  // Where the SMS-verification challenge sends the shopper: a step key (or
+  // `flow:step`) whose step holds an `otp-form` block. Empty keeps the old
+  // behaviour — the otpLabel message — so published compositions are
+  // untouched.
+  const otpStepTarget = prop('otpStepTarget', '');
+  // Off by default: a register form on a plain page must not start closing
+  // modals it does not live in. Compositions inside a drawer turn it on.
+  const closeModalsOnSuccess = readToggle(
+    block.properties?.closeModalsOnSuccess,
+    currentBreakpoint,
+    false
+  );
+  /**
+   * Detached submit — same contract as auth-form-block: `formHtmlId` names
+   * the <form> so an external Button (native `form` attribute) can submit it
+   * from a pinned bottom bar; `showSubmit` off hides the built-in button.
+   */
+  const formHtmlId = prop('formHtmlId', '').trim();
+  const showSubmit = readToggle(
+    block.properties?.showSubmit,
+    currentBreakpoint,
+    true
+  );
 
   const router = useRouter();
   const { locale, defaultLocaleValue } = useLocalization();
+  const contextFlowId = useContext(AuthFlowIdContext);
+
+  /**
+   * The children a composition authored. Hidden ones are dropped for a shopper
+   * and kept in the canvas, so an author can dress a row they have switched
+   * off — the same rule every composed block here follows.
+   */
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+  const isComposed = childBlocks.length > 0;
+  const errorIsAuthored = containsAuthErrorBlock(childBlocks);
 
   const [values, setValues] = useState({
     first_name: '',
@@ -135,23 +276,75 @@ const RegisterFormBlock = ({
   const [legalConsent, setLegalConsent] = useState(false);
   const [marketingConsent, setMarketingConsent] = useState(false);
   const [error, setError] = useState('');
+  // Per FIELD, as opposed to `error`, which is what the backend answered about
+  // the attempt as a whole.
+  const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const setField =
-    (key: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      const nextValue = event.target.value;
-      setValues((current) => ({ ...current, [key]: nextValue }));
-    };
+  const setField = (key: keyof typeof values) => (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const nextValue = event.target.value;
+    setValues((current) => ({ ...current, [key]: nextValue }));
+  };
+
+  /**
+   * A message describes what a field WAS: it goes the moment that field is
+   * edited. Both events, because a keystroke raises `input` while autofill and
+   * a checkbox raise `change`.
+   */
+  /**
+   * A detached CTA (a Button carrying this form's id) is outside this subtree
+   * and cannot see `isSubmitting` — so the form publishes it. See
+   * `auth/form-submit-bus.ts`.
+   */
+  React.useEffect(() => {
+    if (!formHtmlId) return undefined;
+
+    publishFormSubmitState(formHtmlId, isSubmitting);
+
+    return () => clearFormSubmitState(formHtmlId);
+  }, [formHtmlId, isSubmitting]);
+
+  const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
+    const target = event.target as { name?: string } | null;
+
+    setFieldErrors((current) =>
+      clearAuthFieldError(current, target?.name || '')
+    );
+  };
 
-  const submit = async (event: React.FormEvent) => {
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError('');
 
     // Submitting inside the designer would create a real commerce account.
     if (isDesigner) return;
 
-    if (!legalConsent) {
-      setError(consentRequiredLabel);
+    // Held onto because `currentTarget` is only the form for as long as the
+    // handler is on the stack, and the consent question below is asked of the
+    // markup rather than of state.
+    const formElement = event.currentTarget;
+
+    // The form carries `noValidate`, so this is what stops an empty submit —
+    // and unlike the browser's bubble it says which field, in the brand's
+    // words, under the field, until the field is fixed.
+    const { errors: nextFieldErrors, firstInvalid } = collectAuthFieldErrors(
+      event.currentTarget,
+      { required: requiredMessage, invalid: invalidMessage }
+    );
+
+    // The consent tick has a sentence of its own, and it is a better one than
+    // "this field is required" for a legal opt-in.
+    const withConsentCopy = nextFieldErrors.is_allowed
+      ? { ...nextFieldErrors, is_allowed: consentRequiredLabel }
+      : nextFieldErrors;
+
+    setFieldErrors(withConsentCopy);
+
+    if (firstInvalid) {
+      firstInvalid.focus();
+
       return;
     }
 
@@ -159,45 +352,173 @@ const RegisterFormBlock = ({
       formType: FORM_TYPE,
       // The credentials provider looks the locale up in Settings and throws
       // when it is missing, so an explicit value is always sent.
-      locale: locale || defaultLocaleValue || '',
-      first_name: values.first_name,
-      last_name: values.last_name,
-      email: values.email,
-      password: values.password,
-      // Commerce requires both consent flags; one checkbox gates them because
-      // both are mandatory to register at all.
-      is_allowed: true,
-      confirm: true,
-      email_allowed: marketingConsent,
-      sms_allowed: marketingConsent,
-      call_allowed: marketingConsent,
-      whatsapp_allowed: marketingConsent
+      locale: locale || defaultLocaleValue || ''
     };
 
-    if (showPhone) {
-      // Commerce expects bare digits; the mask characters brands render around
-      // the phone input would fail its length validation.
+    /**
+     * Who answered the two consent questions: the composition's own
+     * `auth-consent` blocks, or this block's fixed rows.
+     *
+     * A checkbox that is not ticked is simply absent from `FormData` — that is
+     * the browser's own answer to "did they agree", so it is read rather than
+     * mirrored into state. The names come from the consent block so a
+     * composition and a fixed form post the same body.
+     */
+    let agreedToTerms = legalConsent;
+    let agreedToMarketing = marketingConsent;
+
+    if (isComposed) {
+      const entries = new FormData(event.currentTarget);
+
+      entries.forEach((entryValue, key) => {
+        if (typeof entryValue !== 'string') return;
+
+        // A field the author named after part of the protocol would not be an
+        // extra answer, it would be a different request: `formType` decides
+        // which commerce endpoint is called and `redirect` decides whether
+        // next-auth returns a response at all. The brand's own field is
+        // dropped rather than allowed to redirect the sign-up.
+        if (RESERVED_SUBMIT_KEYS.has(key)) return;
+
+        // An answer the shopper did not give is an answer the body should not
+        // carry: a gender left on its empty option and an untouched date input
+        // both post `''`, which is neither a choice nor a date. The fixed rows
+        // never sent these keys, and the block already deletes `permissions`
+        // rather than send a falsy one.
+        if (entryValue === '') return;
+
+        // First one wins per name, which is the rule `collectAuthFieldErrors`
+        // already applies to the same duplicates — a field the author copied,
+        // or a breakpoint twin, left empty. Taking the LAST meant the empty
+        // twin erased what the shopper actually typed.
+        if (key in payload) return;
+
+        payload[key] = entryValue;
+      });
+
+      agreedToTerms = entries.get(AUTH_CONSENT_NAMES.legal) !== null;
+      agreedToMarketing = entries.get(AUTH_CONSENT_NAMES.marketing) !== null;
+
+      // The ticks are re-expressed as the flags below, so the raw checkbox
+      // entries must not also travel — `is_allowed: 'on'` is not what commerce
+      // reads, and `permissions` has to be absent rather than falsy.
+      delete payload[AUTH_CONSENT_NAMES.legal];
+      delete payload[AUTH_CONSENT_NAMES.marketing];
+    } else {
+      payload.first_name = values.first_name;
+      payload.last_name = values.last_name;
+      payload.email = values.email;
+      payload.password = values.password;
+    }
+
+    /**
+     * Whether the agreement is a question this composition actually asks, and
+     * whether it insists on a yes.
+     *
+     * The refusal used to be unconditional, which made two authored states
+     * impossible rather than optional: a Consent Row with Required turned off
+     * still could not be left unticked (the editor's toggle says "turn it off
+     * for an optional tick", and the block's own docstring promises a brand in
+     * a market where the agreement is not mandatory can say so), and a
+     * composition with no consent row at all could never submit — the shopper
+     * was told to accept an agreement that was nowhere on screen.
+     *
+     * No row means the brand is not asking, which is what the fixed rows do
+     * for a childless form, so the flag goes out the way it always has.
+     */
+    const legalControl = isComposed
+      ? (formElement.querySelector(
+          `input[name="${AUTH_CONSENT_NAMES.legal}"]`
+        ) as HTMLInputElement | null)
+      : null;
+    const legalIsMandatory = isComposed
+      ? Boolean(legalControl?.required)
+      : true;
+
+    if (legalIsMandatory && !agreedToTerms) {
+      setError(consentRequiredLabel);
+      return;
+    }
+
+    // Commerce requires both consent flags; one tick gates them because both
+    // are mandatory to register at all — unless the composition made the tick
+    // optional, and then the shopper's actual answer is what travels rather
+    // than a yes nobody gave.
+    payload.is_allowed = legalControl ? agreedToTerms : true;
+    payload.confirm = payload.is_allowed;
+    payload.email_allowed = agreedToMarketing;
+    payload.sms_allowed = agreedToMarketing;
+    payload.call_allowed = agreedToMarketing;
+    payload.whatsapp_allowed = agreedToMarketing;
+
+    // Commerce expects bare digits; the mask characters brands render around
+    // the phone input would fail its length validation.
+    if (isComposed) {
+      if (typeof payload.phone === 'string') {
+        payload.phone = payload.phone.replace(/[^\d]/g, '');
+      }
+    } else if (showPhone) {
       payload.phone = values.phone.replace(/[^\d]/g, '');
     }
 
     // `permissions` is only meaningful when opted in — the brand deletes the
     // key entirely rather than sending a falsy value.
-    if (marketingConsent) payload.permissions = 'on';
+    if (agreedToMarketing) payload.permissions = 'on';
 
     setIsSubmitting(true);
 
     try {
       const response = await signIn(PROVIDER_ID, {
+        // After the payload, not before it: these decide whether next-auth
+        // hands back a response or navigates away, and a body key must never
+        // be able to answer that question. `RESERVED_SUBMIT_KEYS` already
+        // keeps them out of the payload; this is the belt to that braces.
+        ...payload,
         redirect: false,
-        callbackUrl: '/',
-        ...payload
+        callbackUrl: '/'
       });
 
       if (!response || response.error) {
-        setError(readAuthError(response?.error, otpLabel) || errorLabel);
+        const errorDetail = signInErrorDetail(response);
+
+        if (hasOtpChallenge(errorDetail)) {
+          // Resolved BEFORE the handoff is parked, so the record can say which
+          // journey it belongs to.
+          const resolvedStep = resolveAuthStepTarget(
+            otpStepTarget,
+            contextFlowId
+          );
+
+          // Commerce accepted the sign-up and wants an SMS code. The full
+          // payload is parked on the auth bus so an `otp-form` block — in the
+          // targeted step, or anywhere on the page — can re-submit it with
+          // the code and finish what this form started.
+          //
+          // Scoped, because the payload holds a password and the page has one
+          // slot: without it a header's phone-login drawer, opened later,
+          // would find this record, open on its code screen and re-post
+          // someone else's registration. `stepKey` is what lets navigating the
+          // flow elsewhere abandon a journey nobody came back to.
+          setPendingOtp({
+            kind: 'register',
+            phone: typeof payload.phone === 'string' ? payload.phone : '',
+            providerId: PROVIDER_ID,
+            payload,
+            scope: resolvedStep ? resolvedStep.flowId : contextFlowId,
+            stepKey: resolvedStep?.stepKey
+          });
+
+          if (resolvedStep) {
+            setAuthStep(resolvedStep.flowId, resolvedStep.stepKey);
+            return;
+          }
+        }
+
+        setError(readAuthError(errorDetail, otpLabel) || errorLabel);
         return;
       }
 
+      if (closeModalsOnSuccess) closeAllModals();
       router.refresh();
       router.push(response.url || '/');
     } catch {
@@ -239,10 +560,29 @@ const RegisterFormBlock = ({
         autoComplete={autoComplete}
         placeholder={placeholder || undefined}
         aria-label={showLabels ? undefined : label}
+        aria-invalid={fieldErrors[key] ? true : undefined}
         required
         {...partAttrs('input')}
-        style={inputStyle}
+        style={{
+          ...inputStyle,
+          ...(fieldErrors[key]
+            ? { borderColor: 'var(--register-form-border-invalid, #dc2626)' }
+            : null)
+        }}
       />
+      {fieldErrors[key] && (
+        <span
+          data-register-form-field-error={key}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color: 'var(--register-form-error-color, #dc2626)',
+            fontSize: '0.875em'
+          }}
+        >
+          {fieldErrors[key]}
+        </span>
+      )}
     </label>
   );
 
@@ -253,29 +593,154 @@ const RegisterFormBlock = ({
     name: string,
     required: boolean
   ) => (
-    <label
-      data-register-form-consent={name}
-      {...partAttrs('consent')}
-      style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
-    >
-      <input
-        type="checkbox"
-        name={name}
-        checked={checked}
-        onChange={(event) => onChange(event.target.checked)}
-        required={required}
-        {...partAttrs('checkbox', { checked })}
-        style={{ marginTop: '3px' }}
-      />
-      <span {...partAttrs('consent-text')}>{label}</span>
-    </label>
+    <>
+      <label
+        data-register-form-consent={name}
+        {...partAttrs('consent')}
+        style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
+      >
+        <input
+          type="checkbox"
+          name={name}
+          checked={checked}
+          onChange={(event) => onChange(event.target.checked)}
+          aria-invalid={fieldErrors[name] ? true : undefined}
+          required={required}
+          {...partAttrs('checkbox', { checked })}
+          style={{ marginTop: '3px' }}
+        />
+        <span {...partAttrs('consent-text')}>{label}</span>
+      </label>
+      {/* Outside the label rather than inside it: the row is a checkbox beside
+          its text, and a message wedged in there would sit between them. */}
+      {fieldErrors[name] && (
+        <span
+          data-register-form-field-error={name}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color: 'var(--register-form-error-color, #dc2626)',
+            fontSize: '0.875em'
+          }}
+        >
+          {fieldErrors[name]}
+        </span>
+      )}
+    </>
   );
 
+  /**
+   * The children, with the six editor callbacks each one needs to be movable,
+   * duplicable, hideable, deletable and renamable on the canvas.
+   *
+   * Through the package's own `renderComposedChildren` rather than a private
+   * copy of it. The copies each posted their messages to `'*'`, which
+   * `editor-bridge.ts` exists to prevent — it addresses the editor's real
+   * origin, so an editor command never reaches whatever other page happens to
+   * be embedding the storefront — and every copy was a place a new message
+   * field had to be remembered.
+   */
+  const renderChildren = () =>
+    renderComposedChildren({
+      blocks: childBlocks,
+      placeholderId,
+      sectionId,
+      isDesigner,
+      selectedBlockId,
+      currentBreakpoint
+    });
+
+  if (isComposed) {
+    /**
+     * The composed form: the children carry the inputs (`auth-field`), the
+     * ticks (`auth-consent`) and whatever chrome the design wants around them,
+     * and submit reads the lot back out of `FormData`. The built-in button
+     * stays available under its toggle so a fresh composition works before the
+     * designer has wired their own CTA.
+     */
+    return (
+      <AuthFormErrorProvider value={error}>
+        {/* This form is the one that ANSWERS the two known ticks — turning
+            them into the flags commerce names individually — so its children
+            are where a membership or marketing row actually works. */}
+        <AuthConsentHostProvider value>
+          <AuthFieldErrorsProvider value={fieldErrors}>
+            <form
+              id={formHtmlId || undefined}
+              data-register-form=""
+              data-register-form-composed=""
+              // Fills its block wrapper; see the note in auth-step-block.tsx.
+              className="w-full"
+              {...partAttrs('form')}
+              onSubmit={submit}
+              // Our own message under the field instead of the browser's bubble
+              // over it; the constraints it reads stay on the controls.
+              noValidate
+              onInput={handleInput}
+              onChange={handleInput}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--register-form-gap, 12px)'
+              }}
+            >
+              {renderChildren()}
+
+              {/* The fallback for a composition that has not placed a Form Error
+                block; see `auth/form-error-context.tsx` for why placing one is
+                better than this. */}
+              {error && !errorIsAuthored && (
+                <div
+                  data-register-form-error=""
+                  {...partAttrs('error')}
+                  role="alert"
+                >
+                  {error}
+                </div>
+              )}
+
+              {showSubmit && (
+                <button
+                  type="submit"
+                  data-register-form-submit=""
+                  {...partAttrs('submit', {
+                    loading: isSubmitting,
+                    disabled: isSubmitting
+                  })}
+                  disabled={isSubmitting}
+                  aria-busy={isSubmitting}
+                  style={{
+                    padding: '12px 20px',
+                    background: 'var(--register-form-cta-bg, #111827)',
+                    color: 'var(--register-form-cta-color, #ffffff)',
+                    border: 'none',
+                    cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                    opacity: isSubmitting ? 0.7 : 1
+                  }}
+                >
+                  {isSubmitting && busyLabel ? busyLabel : submitLabel}
+                </button>
+              )}
+            </form>
+          </AuthFieldErrorsProvider>
+        </AuthConsentHostProvider>
+      </AuthFormErrorProvider>
+    );
+  }
+
   return (
     <form
+      id={formHtmlId || undefined}
       data-register-form=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
       {...partAttrs('form')}
       onSubmit={submit}
+      // Our own message under the field instead of the browser's bubble over
+      // it; the constraints it reads stay on the controls.
+      noValidate
+      onInput={handleInput}
+      onChange={handleInput}
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -335,26 +800,28 @@ const RegisterFormBlock = ({
         </div>
       )}
 
-      <button
-        type="submit"
-        data-register-form-submit=""
-        {...partAttrs('submit', {
-          loading: isSubmitting,
-          disabled: isSubmitting
-        })}
-        disabled={isSubmitting}
-        aria-busy={isSubmitting}
-        style={{
-          padding: '12px 20px',
-          background: 'var(--register-form-cta-bg, #111827)',
-          color: 'var(--register-form-cta-color, #ffffff)',
-          border: 'none',
-          cursor: isSubmitting ? 'not-allowed' : 'pointer',
-          opacity: isSubmitting ? 0.7 : 1
-        }}
-      >
-        {isSubmitting && busyLabel ? busyLabel : submitLabel}
-      </button>
+      {showSubmit && (
+        <button
+          type="submit"
+          data-register-form-submit=""
+          {...partAttrs('submit', {
+            loading: isSubmitting,
+            disabled: isSubmitting
+          })}
+          disabled={isSubmitting}
+          aria-busy={isSubmitting}
+          style={{
+            padding: '12px 20px',
+            background: 'var(--register-form-cta-bg, #111827)',
+            color: 'var(--register-form-cta-color, #ffffff)',
+            border: 'none',
+            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+            opacity: isSubmitting ? 0.7 : 1
+          }}
+        >
+          {isSubmitting && busyLabel ? busyLabel : submitLabel}
+        </button>
+      )}
     </form>
   );
 };