Skip to main content

Reset Password

A complete password reset component that handles user password reset requests with email validation, account type selection, and proper error handling.

Features​

  • Email Validation: Comprehensive email format validation
  • Account Type Selection: Support for Patient and Practitioner accounts
  • Keyboard Awareness: Automatic keyboard handling with toolbar
  • Safe Area Support: Proper handling of device notches and home indicators
  • Form Validation: Yup-based validation with custom error messages
  • Error Handling: Comprehensive error handling and display
  • Theme Integration: Consistent styling with your app theme
  • Loading States: Built-in loading indicators during submission
  • TypeScript: Full type safety throughout
  • Accessibility boundary: The form forwards host input props; configure labels, hints, and any additional focus semantics in the app

Component Structure​

ResetPassword (Main Container)​

Main wrapper component that provides keyboard awareness and safe area handling.

ResetPassword.Header​

Header section containing title and description.

ResetPassword.Header.Title​

  • Default: Uses "reset-password.title" translation
  • Customizable with children

ResetPassword.Header.Description​

  • Default: Uses "reset-password.subtitle" translation
  • Customizable with children

ResetPassword.Form​

Form container with validation and submission handling.

ResetPassword.Form.Inputs​

  • Email input field with validation
  • Account type selector (Patient/Practitioner)

ResetPassword.Form.Button​

  • Submit button with loading states
  • Error display below button

ResetPassword.Form.Spacing​

  • Flexible spacing component for layout

Localization​

The component uses these translation keys:

{
  "reset-password": {
    "title": "Reset Password",
    "subtitle": "Enter your email address and we'll send you instructions to reset your password.",
    "email": "Email Address",
    "account-type": "Account Type",
    "patient": "Patient",
    "practitioner": "Practitioner",
    "reset-password": "Reset Password"
  },
  "sign-in": {
    "form": {
      "email": {
        "invalid": "Please enter a valid email address",
        "required": "Email address is required"
      }
    }
  }
}