tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/auth/AuthModal.tsx

@@ -0,0 +1,231 @@
+import { useT } from '../ui/I18nProvider'
+import React, { useCallback, useEffect, useRef, type FC, type MouseEvent } from 'react'
+
+import { hooks, type AuthFlowView, type TfProfile } from 'tf-checkout-shared'
+
+import { cx } from '../ui/cx'
+import { ForgotPasswordForm } from './ForgotPasswordForm'
+import { LoginForm } from './LoginForm'
+import { RegisterForm } from './RegisterForm'
+
+const DEFAULT_LOGO = 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
+
+export interface AuthModalProps {
+  open: boolean
+  onClose: () => void
+  initialView?: AuthFlowView
+  initialEmail?: string
+  /** Optional context shown above the active form. */
+  message?: string
+  allowRegistration?: boolean
+  allowPasswordReset?: boolean
+  requireRegistrationAddress?: boolean
+  /** Extra backend fields for specialized registrations such as delegations. */
+  registrationFields?: Record<string, string>
+  logoUrl?: string
+  onAuthenticated?: (profile: TfProfile) => void
+  className?: string
+}
+
+/** Accessible web presentation over `hooks.useAuthFlow()`. Render it inside
+ * `<CheckoutProvider>` so it inherits the checkout theme tokens. */
+export const AuthModal: FC<AuthModalProps> = ({
+  open,
+  onClose,
+  initialView = 'login',
+  initialEmail,
+  message,
+  allowRegistration = true,
+  allowPasswordReset = true,
+  requireRegistrationAddress = true,
+  registrationFields,
+  logoUrl = DEFAULT_LOGO,
+  onAuthenticated,
+  className,
+}) => {
+  const t = useT()
+  const closeAfterAuth = useCallback(
+    (profile: TfProfile) => {
+      onAuthenticated?.(profile)
+      onClose()
+    },
+    [onAuthenticated, onClose]
+  )
+  const auth = hooks.useAuthFlow({
+    initialView: initialView === 'register' && !allowRegistration ? 'login' : initialView,
+    initialEmail,
+    requireRegistrationAddress,
+    registrationFields,
+    onAuthenticated: closeAfterAuth,
+  })
+  const dialogRef = useRef<HTMLDivElement | null>(null)
+  const previouslyFocused = useRef<HTMLElement | null>(null)
+  const submittingRef = useRef(auth.isSubmitting)
+  submittingRef.current = auth.isSubmitting
+
+  useEffect(() => {
+    if (!open) return
+    previouslyFocused.current = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const focusable = () =>
+      Array.from(
+        dialogRef.current?.querySelectorAll<HTMLElement>(
+          'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+        ) ?? []
+      ).filter((element) => element.offsetParent !== null)
+    const initialFocus =
+      dialogRef.current?.querySelector<HTMLElement>(
+        'input:not([disabled]), select:not([disabled]), textarea:not([disabled])'
+      ) ??
+      focusable()[0] ??
+      dialogRef.current
+    initialFocus?.focus()
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !submittingRef.current) onClose()
+      if (event.key !== 'Tab') return
+      const elements = focusable()
+      if (elements.length === 0) {
+        event.preventDefault()
+        dialogRef.current?.focus()
+        return
+      }
+      const first = elements[0]
+      const last = elements[elements.length - 1]
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = previousOverflow
+      previouslyFocused.current?.focus()
+    }
+  }, [onClose, open])
+
+  if (!open) return null
+
+  const closeFromBackdrop = (event: MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget && !auth.isSubmitting) onClose()
+  }
+  const isPasswordReset = auth.view === 'forgot-password'
+  const title = isPasswordReset ? 'Password reset' : 'Ticket Fairy account'
+
+  return (
+    <div className={cx('tf-checkout-auth', className)} onMouseDown={closeFromBackdrop}>
+      <div
+        ref={dialogRef}
+        className="tf-checkout-auth__dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label={isPasswordReset ? undefined : title}
+        aria-labelledby={isPasswordReset ? 'tf-checkout-auth-title' : undefined}
+        tabIndex={-1}
+      >
+        <button
+          type="button"
+          className="tf-checkout-auth__close"
+          aria-label={t('common.close')}
+          disabled={auth.isSubmitting}
+          onClick={onClose}
+        >
+          ×
+        </button>
+        {allowRegistration && !isPasswordReset && (
+          <div
+            className="tf-checkout-auth__tabs"
+            role="tablist"
+            aria-label={t('auth.title')}
+          >
+            <button
+              type="button"
+              role="tab"
+              aria-selected={auth.view === 'login'}
+              className={cx(
+                'tf-checkout-auth__tab',
+                auth.view === 'login' && 'tf-checkout-auth__tab--active'
+              )}
+              onClick={() => auth.showLogin(auth.suggestedEmail)}
+            >
+              Login
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={auth.view === 'register'}
+              className={cx(
+                'tf-checkout-auth__tab',
+                auth.view === 'register' && 'tf-checkout-auth__tab--active'
+              )}
+              onClick={() => auth.showRegister(auth.suggestedEmail)}
+            >
+              Sign Up
+            </button>
+          </div>
+        )}
+
+        {logoUrl && (
+          <div className="tf-checkout-auth__logo-wrap">
+            <img
+              className="tf-checkout-auth__logo"
+              src={logoUrl}
+              alt="The Ticket Fairy"
+            />
+          </div>
+        )}
+
+        {isPasswordReset && (
+          <h2 id="tf-checkout-auth-title" className="tf-checkout-auth__title">
+            {title}
+          </h2>
+        )}
+
+        {message && !isPasswordReset && (
+          <p className="tf-checkout-auth__message">{message}</p>
+        )}
+
+        {auth.view === 'login' && (
+          <LoginForm
+            initialEmail={auth.suggestedEmail}
+            errors={auth.fieldErrors}
+            error={auth.error}
+            loading={auth.isSubmitting}
+            allowPasswordReset={allowPasswordReset}
+            onSubmit={auth.submitLogin}
+            onForgotPassword={auth.showForgotPassword}
+            onFieldChange={auth.clearFieldError}
+          />
+        )}
+        {auth.view === 'register' && allowRegistration && (
+          <RegisterForm
+            initialEmail={auth.suggestedEmail}
+            errors={auth.fieldErrors}
+            error={auth.error}
+            loading={auth.isSubmitting}
+            requireAddress={requireRegistrationAddress}
+            onSubmit={auth.submitRegistration}
+            onFieldChange={auth.clearFieldError}
+          />
+        )}
+        {auth.view === 'forgot-password' && (
+          <ForgotPasswordForm
+            initialEmail={auth.suggestedEmail}
+            errors={auth.fieldErrors}
+            error={auth.error}
+            successMessage={auth.successMessage}
+            loading={auth.isSubmitting}
+            onSubmit={auth.submitPasswordReset}
+            onBackToLogin={auth.showLogin}
+            onFieldChange={() => auth.clearFieldError('email')}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/auth/ForgotPasswordForm.tsx

@@ -0,0 +1,93 @@
+import { useT } from '../ui/I18nProvider'
+import React, { useEffect, useState, type FC, type FormEvent } from 'react'
+
+import type { AuthFieldErrors } from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Field, Input } from '../ui/Field'
+
+export interface ForgotPasswordFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  successMessage?: string
+  loading?: boolean
+  onSubmit: (email: string) => void | Promise<unknown>
+  onBackToLogin: (email: string) => void
+  onFieldChange?: () => void
+}
+
+/** Password-recovery presentation over the shared auth-flow controller. */
+export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  successMessage,
+  loading = false,
+  onSubmit,
+  onBackToLogin,
+  onFieldChange,
+}) => {
+  const t = useT()
+  const [email, setEmail] = useState(initialEmail)
+
+  useEffect(() => {
+    if (initialEmail && !email) setEmail(initialEmail)
+  }, [email, initialEmail])
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    void onSubmit(email)
+  }
+
+  if (successMessage) {
+    return (
+      <div className="tf-checkout-auth__form">
+        <div className="tf-checkout-auth__success" role="status">
+          {successMessage}
+        </div>
+        <Button type="button" block onClick={() => onBackToLogin(email)}>
+          Back to log in
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <form className="tf-checkout-auth__form" onSubmit={submit} noValidate>
+      <p className="tf-checkout-auth__intro">
+        Enter your email and we’ll send you instructions to reset your password.
+      </p>
+      {error && (
+        <div className="tf-checkout-auth__alert" role="alert">
+          {error}
+        </div>
+      )}
+      <Field label={t('auth.email')} error={errors.email}>
+        <Input
+          type="email"
+          name="email"
+          autoComplete="email"
+          autoFocus
+          required
+          value={email}
+          invalid={Boolean(errors.email)}
+          onChange={(event) => {
+            setEmail(event.target.value)
+            onFieldChange?.()
+          }}
+        />
+      </Field>
+      <Button type="submit" block loading={loading}>
+        Send reset instructions
+      </Button>
+      <button
+        type="button"
+        className="tf-checkout-auth__text-button tf-checkout-auth__back"
+        onClick={() => onBackToLogin(email)}
+      >
+        Back to log in
+      </button>
+    </form>
+  )
+}

package/src/auth/LoginForm.tsx

@@ -0,0 +1,104 @@
+import { useT } from '../ui/I18nProvider'
+import React, { useEffect, useState, type FC, type FormEvent } from 'react'
+
+import type { AuthFieldErrors, AuthLoginInput } from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Field, Input } from '../ui/Field'
+import { PasswordInput } from './PasswordInput'
+
+export interface LoginFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  loading?: boolean
+  allowPasswordReset?: boolean
+  onSubmit: (input: AuthLoginInput) => void | Promise<unknown>
+  onForgotPassword?: (email: string) => void
+  onFieldChange?: (field: keyof AuthLoginInput) => void
+}
+
+/** Pure web form: it renders fields and delegates all auth work to its caller. */
+export const LoginForm: FC<LoginFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  loading = false,
+  allowPasswordReset = true,
+  onSubmit,
+  onForgotPassword,
+  onFieldChange,
+}) => {
+  const t = useT()
+  const [email, setEmail] = useState(initialEmail)
+  const [password, setPassword] = useState('')
+
+  useEffect(() => {
+    if (initialEmail && !email) setEmail(initialEmail)
+  }, [email, initialEmail])
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault()
+    void onSubmit({ email, password })
+  }
+
+  return (
+    <form className="tf-checkout-auth__form" onSubmit={submit} noValidate>
+      {error && (
+        <div className="tf-checkout-auth__alert" role="alert">
+          {error}
+        </div>
+      )}
+      <Field
+        className="tf-checkout-auth__input-field"
+        label={t('auth.email')}
+        error={errors.email}
+      >
+        <Input
+          type="email"
+          name="email"
+          placeholder={t('auth.emailPlaceholder')}
+          autoComplete="email"
+          autoFocus
+          required
+          value={email}
+          invalid={Boolean(errors.email)}
+          onChange={(event) => {
+            setEmail(event.target.value)
+            onFieldChange?.('email')
+          }}
+        />
+      </Field>
+      <Field
+        className="tf-checkout-auth__input-field"
+        label={t('auth.password')}
+        error={errors.password}
+      >
+        <PasswordInput
+          name="password"
+          placeholder={t('auth.passwordPlaceholder')}
+          autoComplete="current-password"
+          required
+          value={password}
+          invalid={Boolean(errors.password)}
+          onChange={(event) => {
+            setPassword(event.target.value)
+            onFieldChange?.('password')
+          }}
+        />
+      </Field>
+      <Button type="submit" block loading={loading}>
+        Login
+      </Button>
+      {allowPasswordReset && onForgotPassword && (
+        <button
+          type="button"
+          className="tf-checkout-auth__text-button tf-checkout-auth__forgot"
+          onClick={() => onForgotPassword(email)}
+        >
+          Forgot password?
+        </button>
+      )}
+    </form>
+  )
+}

package/src/auth/PasswordInput.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, useState } from 'react'
+
+import { Input, type InputProps } from '../ui/Field'
+
+/** Password control with the same reveal affordance as the legacy checkout. */
+export const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    const [visible, setVisible] = useState(false)
+
+    return (
+      <span className="tf-checkout-auth__password">
+        <Input
+          {...props}
+          ref={ref}
+          className={className}
+          type={visible ? 'text' : 'password'}
+        />
+        <button
+          type="button"
+          className="tf-checkout-auth__password-toggle"
+          aria-label={visible ? 'Hide password' : 'Show password'}
+          aria-pressed={visible}
+          onClick={() => setVisible((current) => !current)}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24">
+            <path d="M12 5c5.3 0 9.3 4.8 10.5 6.4a1 1 0 0 1 0 1.2C21.3 14.2 17.3 19 12 19S2.7 14.2 1.5 12.6a1 1 0 0 1 0-1.2C2.7 9.8 6.7 5 12 5Zm0 2c-3.8 0-7 3.2-8.4 5 1.4 1.8 4.6 5 8.4 5s7-3.2 8.4-5C19 10.2 15.8 7 12 7Zm0 2.1a2.9 2.9 0 1 1 0 5.8 2.9 2.9 0 0 1 0-5.8Z" />
+          </svg>
+        </button>
+      </span>
+    )
+  }
+)
+PasswordInput.displayName = 'PasswordInput'