> ## Documentation Index
> Fetch the complete documentation index at: https://iam-docs.razi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# <UpdatePasswordForm />

## Overview

**UpdatePasswordForm** is a collection of components designed to facilitate the creation of a custom forgot password flow.
It provides a set of components that encapsulate the business logic for handling the update password form, allowing
users to easily customize the layout, styles, labels, placeholders, and button texts.

## Example Usage

```typescript custom-update-password-form.tsx
import { useTranslation } from 'react-i18next';

import { ForgotPasswordElements } from '@locai1/iam-react/elements';

const { UpdatePasswordForm } = ForgotPasswordElements;

const CustomUpdatePasswordForm = ({ email }: {
  email: string,
}) => {
  const { i18n } = useTranslation();

  const handleComplete = () => {
    console.log('Password updated successfully');
  };

  const resetPasswordUrl = `${window.location.origin}/forgot-password?code={{code}}`;

  return (
    <UpdatePasswordForm.Root
      onComplete={handleComplete}
      email={email}
      resetPasswordUrl={resetPasswordUrl}
    >
      <UpdatePasswordForm.OtpInputs
        dir={i18n.dir()}
      />
      <UpdatePasswordForm.DidntReceiveCodeSection
        text="Didn't receive? Resend"
      />
      <UpdatePasswordForm.PasswordInput
        label="Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <UpdatePasswordForm.ConfirmPasswordInput
        label="Confirm Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <UpdatePasswordForm.ErrorMessage
        className="custom-error-class"
      />
      <UpdatePasswordForm.SubmitButton
        text="Update Password"
        className="custom-button-class"
      />
    </UpdatePasswordForm.Root>
  );
};
```

### UpdatePasswordForm.Root

The root component of password update form. It encapsulates business logic for password update, entering and resending
verification code processes.

<Note>
  **UpdatePasswordForm** is responsible for password updating for users who requested verification code by email in
  **RequestCodeForm** (from **ForgotPasswordElements**).
</Note>

#### Props

<ResponseField name="children" type="ReactNode">
  React elements to be rendered inside the form. **UpdatePasswordForm** elements should be rendered as children of **UpdatePasswordForm.Root**.
</ResponseField>

<ResponseField name="onComplete" type="callback" required>
  A callback function that is called when password is successfully updated.
</ResponseField>

<ResponseField name="email" type="string">
  Users e-mail for resending verification code.
</ResponseField>

<ResponseField name="resetPasswordUrl" type="string" required>
  Reset password url used to redirect user to reset password page from email.
  It should contain a placeholder for the reset password code.
</ResponseField>

### VerifyForm.OtpInputs

Displays input fields for the entering one-time password (OTP).

#### Props

<ResponseField name="dir" type="ltr | rtl" default="ltr">
  Direction of the input fields (e.g., "ltr" or "rtl").
</ResponseField>

### Input Fields

UpdatePasswordForm has the following exported input fields:

* UpdatePasswordForm.PasswordInput - field for entering password.
* UpdatePasswordForm.ConfirmPasswordInput - field for entering password.

All these fields have similar props listed below:

#### Props

<ResponseField name="label" type="string">
  Label for input field. Optional, if not provided the label will not be rendered.
</ResponseField>

<ResponseField name="placeholder" type="string">
  Placeholder for input field. Optional, if not provided the placeholder will not be rendered.
</ResponseField>

<ResponseField name="labelClassname" type="string">
  Custom class name for label.
</ResponseField>

<ResponseField name="labelClassname" type="string">
  Custom class name for input.
</ResponseField>

### UpdatePasswordForm.ErrorMessage

Displays an error message if there is an error in the form submission.

#### Props

<ResponseField name="classname" type="string">
  Custom class name for the error message.
</ResponseField>

### UpdatePasswordForm.SubmitButton

Submit button for the form.

#### Props

<ResponseField name="text" type="string">
  Text to be displayed on the button.
</ResponseField>

<ResponseField name="classname" type="string">
  Custom class name for the button.
</ResponseField>