Skip to main content

​
Overview

RequestCodeForm 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 request code form, allowing users to easily customize the layout, styles, labels, placeholders, and button texts.

​
Example Usage

custom-request-code-form.tsx
import { useState } from 'react';

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

const { RequestCodeForm } = ForgotPasswordElements;

const CustomRequestCodeForm = ({ onComplete, resetPasswordUrl }) => {
  const [email, setEmail] = useState<string | undefined>();

  const handleComplete = (value: string) => {
    setEmail(value);
    console.log(`Forgot password code for email ${value} requested`);
  };

  return (
    <RequestCodeForm.Root
      onComplete={handleComplete}
      resetPasswordUrl={resetPasswordUrl}
      email={email}
    >
      <RequestCodeForm.EmailInput
        label="Email"
        placeholder="Enter your email"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <RequestCodeForm.ErrorMessage
        className="custom-error-class"
      />
      <RequestCodeForm.SubmitButton
        text="Request Code"
        className="custom-button-class"
      />
    </RequestCodeForm.Root>
  );
};

​
RequestCodeForm.Root

The root component of request code form. It encapsulates business logic for handling code requesting process.
RequestCodeForm is responsible only for requesting code. You need to implement a UpdatePasswordForm (from ForgotPasswordElements) that handles password updating process.

​
Props

​
children
ReactNode
React elements to be rendered inside the form. RequestCodeForm elements should be rendered as children of RequestCodeForm.Root.
​
onComplete
callback
required
A callback function that is called when code is successfully requested.
​
email
string
Default email value for the email input field.
​
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.

​
RequestCodeForm.EmailInput

Field for email of user’s for which a password reset code will be requested.

​
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.

​
RequestCodeForm.ErrorMessage

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

​
Props

​
classname
string
Custom class name for the error message.

​
RequestCodeForm.SubmitButton

Submit button for the form.

​
Props

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