AuthForm

Implemented

Self-contained auth card form for the three auth modes (sign-in / sign-up / forgot). Field set switches per mode — fullName only on sign-up, password hidden on forgot; labels and copy switch per locale (FR default, EN via locale prop, SeatMapLegend inline-i18n precedent). onSubmit receives { email, password?, fullName? } after native validation; secondaryAction renders the footer link. Password-manager autoComplete hints on every field.

Categoryorganisms

Sourcecomponents/organisms/authform/AuthForm.tsx

AI HintUse for storefront auth pages (sign-in, sign-up, forgot-password link request). The organism owns zero network calls — wire onSubmit to the caller's auth action. Mode-switch UI (e.g. tabs between the three modes) is composed by the parent, as the docs demo does.

Formulaire d'authentification en carte (connexion, inscription, mot de passe oublié) avec courriel + mot de passe. FR-CA : « Connexion · Accedez a votre compte ePassLive · Adresse courriel · Mot de passe · Mot de passe oublie ? · Pas encore de compte ? · Se connecter ».

AuthForm

Organism - Auth family (Family 1)

Formulaire HTML standard (<form> avec onSubmit). Le parent gere la logique de connexion / inscription via onSubmit. Les champs sont autoComplete-ready (email, current-password, new-password).

This component supports light and dark mode.

Props

Prop

Type

Default

Description

mode*

'sign-in' | 'sign-up' | 'forgot'

—

Mode du formulaire.

email

string

—

Courriel pre-rempli.

onSubmit

(payload: { email: string; password?: string; fullName?: string }) => void

—

Callback de soumission.

secondaryAction

{ label; href }

—

Lien secondaire (inscription, etc.).

locale

'fr' | 'en'

—

Locale des libellés (défaut fr).

className

string

—

Classes additionnelles sur la carte.

Props

Preview

AuthForm

Prop

Type

Required

Default

Description

mode

AuthMode

Required

—

'sign-in' | 'sign-up' | 'forgot' — field set, copy and submit label switch per mode.

email

string

Optional

—

Default email pre-filled (controlled by parent).

onSubmit

(payload: { email: string; password?: string; fullName?: string }) => void

Optional

—

Called on form submission with the validated field values after native validation passes.

secondaryAction

{ label: string; href: string }

Optional

—

Optional secondary action link rendered in the card footer.

locale

"fr" | "en"

Optional

'fr'

Locale used for formatting and translated strings.

className

string

Optional

—

Additional classes merged onto the card wrapper.

Quick use:<AuthForm />

Accessibility

ARIA roleform

Usage

Import

tsxSnippet

import { AuthForm } from "@epasslive/design-system"

Example 1

tsxSnippet

<AuthForm mode="sign-in" secondaryAction={{ label: "Créer un compte", href: "/sign-up" }} onSubmit={handleSignIn} />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources