Login and Registration Forms

/**
 * Form state machine states.
 * Using a union type ensures we can only be in one state at a time.
 */
type AuthFormState = 'idle' | 'loading' | 'success' | 'error';

/**
 * Settings passed from Liquid via JSON script tag.
 * These configure the initial behavior of the auth forms.
 */
interface AuthSettings {
  returnUrl: string;           // Where to redirect after login
  defaultView: 'login' | 'register';  // Which form to show first
  showTabs: boolean;           // Whether to show login/register tabs
  formErrors: string[];        // Server-side errors from previous submission
}

import { useState } from 'react';
import { AuthTabs } from './AuthTabs';
import { LoginForm } from './LoginForm';
import { RegistrationForm } from './RegistrationForm';
import { RecoverPasswordForm } from './RecoverPasswordForm';
import styles from './CustomerAuth.module.css';

type AuthView = 'login' | 'register' | 'recover';

interface CustomerAuthProps {
  settings: AuthSettings;
}

/**
 * CustomerAuth manages which authentication form is visible.
 * It handles switching between login, register, and password recovery views.
 */
export function CustomerAuth({ settings }: CustomerAuthProps) {
  // Track which view is active. Initialize from settings.
  const [view, setView] = useState<AuthView>(settings.defaultView);

  return (
    <div className={styles.container}>
      {/* Only show tabs when not in password recovery mode */}
      {settings.showTabs && view !== 'recover' && (
        <AuthTabs
          activeTab={view as 'login' | 'register'}
          onTabChange={(tab) => setView(tab)}
        />
      )}

      {/* Render the appropriate form based on current view */}
      <div className={styles.formContainer}>
        {view === 'login' && (
          <LoginForm
            returnUrl={settings.returnUrl}
            formErrors={settings.formErrors}
            onRecoverClick={() => setView('recover')}
          />
        )}

        {view === 'register' && (
          <RegistrationForm
            returnUrl={settings.returnUrl}
            formErrors={settings.formErrors}
          />
        )}

        {view === 'recover' && (
          <RecoverPasswordForm
            onBackToLogin={() => setView('login')}
          />
        )}
      </div>
    </div>
  );
}

import styles from './AuthTabs.module.css';

interface AuthTabsProps {
  activeTab: 'login' | 'register';
  onTabChange: (tab: 'login' | 'register') => void;
}

/**
 * AuthTabs provides accessible toggle between login and registration.
 * Uses proper ARIA roles so screen readers announce it as a tab interface.
 */
export function AuthTabs({ activeTab, onTabChange }: AuthTabsProps) {
  return (
    <div className={styles.tabs} role="tablist">
      <button
        role="tab"
        aria-selected={activeTab === 'login'}
        className={`${styles.tab} ${activeTab === 'login' ? styles.active : ''}`}
        onClick={() => onTabChange('login')}
      >
        Sign In
      </button>
      <button
        role="tab"
        aria-selected={activeTab === 'register'}
        className={`${styles.tab} ${activeTab === 'register' ? styles.active : ''}`}
        onClick={() => onTabChange('register')}
      >
        Create Account
      </button>
    </div>
  );
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.tab {
  flex: 1;
  padding: 1rem;
  border: none;
  background: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* Align with container border */
}

.tab:hover {
  color: var(--color-text);
}

.tab.active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

import { useState, useCallback } from 'react';
import { FormInput } from './FormInput';
import styles from './AuthForm.module.css';

interface LoginFormProps {
  returnUrl: string;
  formErrors: string[];        // Errors from previous server response
  onRecoverClick: () => void;  // Callback to switch to password recovery
}

type FormState = 'idle' | 'loading' | 'error';

export function LoginForm({ returnUrl, formErrors, onRecoverClick }: LoginFormProps) {
  // Form field state
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // UI state - initialize to 'error' if server returned errors
  const [formState, setFormState] = useState<FormState>(
    formErrors.length > 0 ? 'error' : 'idle'
  );
  const [errors, setErrors] = useState<string[]>(formErrors);

  /**
   * Client-side validation runs before form submission.
   * Returns true if valid, false if errors were found.
   */
  const validateForm = (): boolean => {
    const newErrors: string[] = [];

    // Email validation
    if (!email.trim()) {
      newErrors.push('Email is required.');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      newErrors.push('Please enter a valid email address.');
    }

    // Password validation (just checking it exists for login)
    if (!password) {
      newErrors.push('Password is required.');
    }

    if (newErrors.length > 0) {
      setErrors(newErrors);
      setFormState('error');
      return false;
    }

    return true;
  };

  /**
   * Form submission handler.
   * If validation passes, we let the form submit normally to Shopify.
   * If validation fails, we prevent submission and show errors.
   */
  const handleSubmit = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      if (!validateForm()) {
        e.preventDefault(); // Stop form submission
        return;
      }
      // Validation passed - show loading state
      // The form will submit to Shopify and the page will redirect
      setFormState('loading');
    },
    [email, password]
  );

  /**
   * Clear errors when user starts typing.
   * This provides immediate feedback that their input is being accepted.
   */
  const handleInputChange = (setter: (value: string) => void) => {
    return (e: React.ChangeEvent<HTMLInputElement>) => {
      setter(e.target.value);
      if (formState === 'error') {
        setFormState('idle');
        setErrors([]);
      }
    };
  };

  return (
    <form
      className={styles.form}
      method="post"
      action="/account/login"
      onSubmit={handleSubmit}
      noValidate  // Disable browser validation, we handle it ourselves
    >
      <h2 className={styles.heading}>Sign In</h2>

      {/* Error message box */}
      {formState === 'error' && errors.length > 0 && (
        <div className={styles.errorBox} role="alert">
          <ErrorIcon />
          <ul className={styles.errorList}>
            {errors.map((error, index) => (
              <li key={index}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      {/* Hidden field tells Shopify where to redirect after login */}
      <input type="hidden" name="return_url" value={returnUrl} />

      {/* Email field - name must be "customer[email]" for Shopify */}
      <FormInput
        id="customer-email"
        name="customer[email]"
        type="email"
        label="Email"
        value={email}
        onChange={handleInputChange(setEmail)}
        autoComplete="email"
        required
        disabled={formState === 'loading'}
      />

      {/* Password field - name must be "customer[password]" for Shopify */}
      <FormInput
        id="customer-password"
        name="customer[password]"
        type="password"
        label="Password"
        value={password}
        onChange={handleInputChange(setPassword)}
        autoComplete="current-password"
        required
        disabled={formState === 'loading'}
      />

      {/* Submit button with loading state */}
      <button
        type="submit"
        className={styles.submitButton}
        disabled={formState === 'loading'}
      >
        {formState === 'loading' ? (
          <>
            <LoadingSpinner />
            Signing in...
          </>
        ) : (
          'Sign In'
        )}
      </button>

      {/* Password recovery link */}
      <button
        type="button"
        className={styles.linkButton}
        onClick={onRecoverClick}
      >
        Forgot your password?
      </button>
    </form>
  );
}

import { useState } from 'react';
import styles from './FormInput.module.css';

interface FormInputProps {
  id: string;
  name: string;
  type: 'text' | 'email' | 'password';
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  autoComplete?: string;
  required?: boolean;
  disabled?: boolean;
  hint?: string;
}

/**
 * FormInput provides a labeled input with optional password toggle.
 * Handles accessibility attributes automatically.
 */
export function FormInput({
  id,
  name,
  type,
  label,
  value,
  onChange,
  autoComplete,
  required,
  disabled,
  hint,
}: FormInputProps) {
  // For password fields, track whether to show plain text
  const [showPassword, setShowPassword] = useState(false);
  const inputType = type === 'password' && showPassword ? 'text' : type;

  return (
    <div className={styles.field}>
      <label htmlFor={id} className={styles.label}>
        {label}
        {required && <span className={styles.required}>*</span>}
      </label>

      <div className={styles.inputWrapper}>
        <input
          id={id}
          name={name}
          type={inputType}
          value={value}
          onChange={onChange}
          autoComplete={autoComplete}
          required={required}
          disabled={disabled}
          className={styles.input}
          aria-describedby={hint ? `${id}-hint` : undefined}
        />

        {/* Password visibility toggle */}
        {type === 'password' && (
          <button
            type="button"
            className={styles.togglePassword}
            onClick={() => setShowPassword(!showPassword)}
            aria-label={showPassword ? 'Hide password' : 'Show password'}
          >
            {showPassword ? <EyeOffIcon /> : <EyeIcon />}
          </button>
        )}
      </div>

      {hint && (
        <p id={`${id}-hint`} className={styles.hint}>{hint}</p>
      )}
    </div>
  );
}

export function RegistrationForm({ returnUrl, formErrors }: RegistrationFormProps) {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
  // ... state management same as LoginForm

  const validateForm = (): boolean => {
    const newErrors: string[] = [];

    if (!firstName.trim()) newErrors.push('First name is required.');
    if (!lastName.trim()) newErrors.push('Last name is required.');

    if (!email.trim()) {
      newErrors.push('Email is required.');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      newErrors.push('Please enter a valid email address.');
    }

    // Shopify requires minimum 5 characters for passwords
    if (!password) {
      newErrors.push('Password is required.');
    } else if (password.length < 5) {
      newErrors.push('Password must be at least 5 characters.');
    }

    // ... error handling same as LoginForm
  };

  return (
    <form method="post" action="/account" onSubmit={handleSubmit} noValidate>
      <h2>Create Account</h2>

      {/* Name fields side by side on desktop */}
      <div className={styles.fieldRow}>
        <FormInput
          name="customer[first_name]"
          label="First Name"
          // ... other props
        />
        <FormInput
          name="customer[last_name]"
          label="Last Name"
          // ... other props
        />
      </div>

      <FormInput name="customer[email]" type="email" label="Email" />
      <FormInput
        name="customer[password]"
        type="password"
        label="Password"
        hint="Must be at least 5 characters"
      />

      {/* Marketing opt-in checkbox */}
      <label className={styles.checkbox}>
        <input
          type="checkbox"
          name="customer[accepts_marketing]"
          checked={acceptsMarketing}
          onChange={(e) => setAcceptsMarketing(e.target.checked)}
        />
        <span>Sign up for emails about new products and offers</span>
      </label>

      <button type="submit">Create Account</button>
    </form>
  );
}

export function RecoverPasswordForm({ onBackToLogin }: Props) {
  const [email, setEmail] = useState('');
  const [formState, setFormState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault(); // Always prevent default for this form

    if (!validateEmail()) return;

    setFormState('loading');

    try {
      const formData = new FormData();
      formData.append('form_type', 'recover_customer_password');
      formData.append('utf8', '✓');
      formData.append('email', email);

      await fetch('/account/recover', {
        method: 'POST',
        body: formData,
      });

      // Shopify always returns success (even for non-existent emails)
      // This is a security feature to prevent email enumeration
      setFormState('success');
    } catch (error) {
      setFormState('error');
    }
  };

  // Show success message instead of form after submission
  if (formState === 'success') {
    return (
      <div className={styles.successBox}>
        <SuccessIcon />
        <h2>Check your email</h2>
        <p>
          If an account exists for {email}, you'll receive
          a password reset link shortly.
        </p>
        <button onClick={onBackToLogin}>Return to sign in</button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Reset Password</h2>
      <p>Enter your email and we'll send you a reset link.</p>
      <FormInput name="email" type="email" label="Email" />
      <button type="submit">Send Reset Link</button>
      <button type="button" onClick={onBackToLogin}>Back to sign in</button>
    </form>
  );
}

import { createRoot } from 'react-dom/client';
import { CustomerAuth } from '@/components/customer/CustomerAuth';

export function mountCustomerAuth() {
  const root = document.getElementById('auth-root');
  const settingsScript = document.getElementById('auth-settings');

  if (!root || !settingsScript) return;

  try {
    const settings = JSON.parse(settingsScript.textContent || '{}');
    createRoot(root).render(<CustomerAuth settings={settings} />);
  } catch (error) {
    console.error('Failed to mount customer auth:', error);
  }
}

// Mount when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountCustomerAuth);
} else {
  mountCustomerAuth();
}