@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

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

@@ -0,0 +1,295 @@
+'use client';
+
+import React, { useState } from 'react';
+import NextLink from 'next/link';
+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 { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * Extracts a readable message out of the next-auth error string. pz brands
+ * serialise an AuthError[] into `error`, but a plain string is also possible,
+ * so both shapes are handled.
+ */
+const readAuthError = (error?: string | null): string => {
+  if (!error) return '';
+
+  try {
+    const parsed = JSON.parse(error);
+
+    if (!Array.isArray(parsed)) return String(error);
+
+    const messages: string[] = [];
+
+    parsed.forEach((entry) => {
+      const data = (entry as { data?: unknown })?.data;
+
+      if (Array.isArray(data)) {
+        data.forEach((item) => {
+          if (typeof item === 'string') {
+            messages.push(item);
+          } else if (item && typeof item === 'object') {
+            const value = (item as { value?: unknown }).value;
+            if (typeof value === 'string') messages.push(value);
+          }
+        });
+      } else if (typeof data === 'string') {
+        messages.push(data);
+      }
+    });
+
+    return messages.join(' ') || String(error);
+  } catch {
+    return String(error);
+  }
+};
+
+/**
+ * Functional auth block: login or register form driven by props.mode.
+ *
+ * Submits through next-auth `signIn(providerId, { formType, ... })`, which is
+ * how pz storefronts authenticate — the brand's own /api/auth route decides
+ * which commerce endpoint is called. Both the provider id and the formType
+ * values are editor properties because they differ per brand: the core
+ * provider maps formType onto the `user` url keys ('login' | 'register'),
+ * while brands with a custom [...nextauth] route (superstep) use the url path
+ * segment ('login' | 'registration').
+ * Properties: mode, submitLabel, busyLabel, providerId, loginFormType,
+ * registerFormType, callbackUrl, emailLabel, passwordLabel, firstNameLabel,
+ * lastNameLabel, the matching *Placeholder keys, showLabels, errorLabel,
+ * showForgotPassword, forgotPasswordLabel, forgotPasswordUrl.
+ * Parts: form, field, label, input, error, submit, link.
+ */
+const AuthFormBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const rawMode = prop('mode', 'login');
+  const mode = rawMode === 'register' ? 'register' : 'login';
+  const providerId = prop('providerId', 'default');
+  const callbackUrl = prop('callbackUrl', '/');
+  const submitLabel = prop(
+    'submitLabel',
+    mode === 'register' ? 'Create account' : 'Log in'
+  );
+  // Empty on purpose: an unset busy label keeps the submit caption stable while
+  // the request is in flight, which is what every published block does today.
+  const busyLabel = prop('busyLabel', '');
+  const errorLabel = prop('errorLabel', 'Authentication failed.');
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+  const showForgotPassword = readToggle(
+    block.properties?.showForgotPassword,
+    currentBreakpoint,
+    false
+  );
+  const forgotPasswordLabel = prop('forgotPasswordLabel', 'Forgot password?');
+  const forgotPasswordUrl = prop('forgotPasswordUrl', '/auth/forgot-password');
+  const formType =
+    mode === 'register'
+      ? prop('registerFormType', 'registration')
+      : prop('loginFormType', 'login');
+
+  const router = useRouter();
+  const { locale, defaultLocaleValue } = useLocalization();
+
+  const [values, setValues] = useState({
+    email: '',
+    password: '',
+    first_name: '',
+    last_name: ''
+  });
+  const [error, setError] = useState('');
+  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 submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError('');
+
+    if (isDesigner) return;
+
+    const payload: Record<string, string> = {
+      formType,
+      // The core credentials provider looks the locale up in Settings and
+      // throws when it is missing, so an explicit value is always sent.
+      locale: locale || defaultLocaleValue || '',
+      email: values.email,
+      password: values.password
+    };
+
+    if (mode === 'register') {
+      payload.first_name = values.first_name;
+      payload.last_name = values.last_name;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await signIn(providerId, {
+        redirect: false,
+        callbackUrl,
+        ...payload
+      });
+
+      if (!response || response.error) {
+        setError(readAuthError(response?.error) || errorLabel);
+
+        return;
+      }
+
+      router.refresh();
+      router.push(callbackUrl);
+    } catch {
+      setError(errorLabel);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    border: '1px solid var(--auth-form-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    padding: '10px 12px',
+    outline: 'none'
+  };
+
+  const field = (
+    key: keyof typeof values,
+    label: string,
+    type: string,
+    autoComplete: string,
+    placeholder: string
+  ) => (
+    <label
+      data-auth-form-field={key}
+      {...partAttrs('field')}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+    >
+      {/* Hiding the caption must not cost the input its accessible name, so the
+          label text moves onto aria-label instead of disappearing. */}
+      {showLabels && <span {...partAttrs('label')}>{label}</span>}
+      <input
+        type={type}
+        name={key}
+        value={values[key]}
+        onChange={setField(key)}
+        autoComplete={autoComplete}
+        placeholder={placeholder || undefined}
+        aria-label={showLabels ? undefined : label}
+        required
+        {...partAttrs('input')}
+        style={inputStyle}
+      />
+    </label>
+  );
+
+  return (
+    <form
+      data-auth-form=""
+      data-auth-form-mode={mode}
+      {...partAttrs('form')}
+      onSubmit={submit}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--auth-form-gap, 12px)'
+      }}
+    >
+      {mode === 'register' && (
+        <>
+          {field(
+            'first_name',
+            prop('firstNameLabel', 'First name'),
+            'text',
+            'given-name',
+            prop('firstNamePlaceholder', '')
+          )}
+          {field(
+            'last_name',
+            prop('lastNameLabel', 'Last name'),
+            'text',
+            'family-name',
+            prop('lastNamePlaceholder', '')
+          )}
+        </>
+      )}
+
+      {field(
+        'email',
+        prop('emailLabel', 'E-mail'),
+        'email',
+        'email',
+        prop('emailPlaceholder', '')
+      )}
+      {field(
+        'password',
+        prop('passwordLabel', 'Password'),
+        'password',
+        mode === 'register' ? 'new-password' : 'current-password',
+        prop('passwordPlaceholder', '')
+      )}
+
+      {showForgotPassword && forgotPasswordLabel && (
+        <NextLink
+          data-auth-form-link="reset-password"
+          {...partAttrs('link')}
+          href={isDesigner ? '#' : forgotPasswordUrl}
+          onClick={(event) => {
+            if (isDesigner) event.preventDefault();
+          }}
+          style={{ color: 'inherit' }}
+        >
+          {forgotPasswordLabel}
+        </NextLink>
+      )}
+
+      {error && (
+        <div data-auth-form-error="" {...partAttrs('error')} role="alert">
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        data-auth-form-submit=""
+        {...partAttrs('submit', {
+          loading: isSubmitting,
+          disabled: isSubmitting
+        })}
+        disabled={isSubmitting}
+        style={{
+          padding: '12px 20px',
+          background: 'var(--auth-form-cta-bg, #111827)',
+          color: 'var(--auth-form-cta-color, #ffffff)',
+          border: 'none',
+          cursor: 'pointer'
+        }}
+      >
+        {isSubmitting && busyLabel ? busyLabel : submitLabel}
+      </button>
+    </form>
+  );
+};
+
+export default AuthFormBlock;