Skip to main content

​
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

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.
UpdatePasswordForm is responsible for password updating for users who requested verification code by email in RequestCodeForm (from ForgotPasswordElements).

​
Props

​
children
ReactNode
React elements to be rendered inside the form. UpdatePasswordForm elements should be rendered as children of UpdatePasswordForm.Root.
​
onComplete
callback
required
A callback function that is called when password is successfully updated.
​
email
string
Users e-mail for resending verification code.
​
resetPasswordUrl
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.

​
VerifyForm.OtpInputs

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

​
Props

​
dir
ltr | rtl
default:"ltr"
Direction of the input fields (e.g., “ltr” or “rtl”).

​
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

​
label
string
Label for input field. Optional, if not provided the label will not be rendered.
​
placeholder
string
Placeholder for input field. Optional, if not provided the placeholder will not be rendered.
​
labelClassname
string
Custom class name for label.
​
labelClassname
string
Custom class name for input.

​
UpdatePasswordForm.ErrorMessage

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

​
Props

​
classname
string
Custom class name for the error message.

​
UpdatePasswordForm.SubmitButton

Submit button for the form.

​
Props

​
text
string
Text to be displayed on the button.
​
classname
string
Custom class name for the button.