Skip to main content

​
Overview

ProfileForm is a collection of components designed to facilitate the creation of a custom user details page. It provides a set of components that encapsulate the business logic for handling the user details form, allowing users to easily customize the layout, styles, labels, placeholders, and button texts.
ProfileForm should be used in protected page - user should be authenticated to access it.

​
Example Usage

custom-profile-form.tsx
import { UserDetailsElements } from '@locai1/iam-react/elements';

const { ProfileForm } = UserDetailsElements;

import { useSession } from '@/hooks/use-session';

const CustomProfileTab = ({ userDetails }) => {
  const { userDetails } = useSession();

  return (
    <ProfileForm.Root userDetails={userDetails}>
      <ProfileForm.FirstNameInput
        label="First name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.LastNameInput
        label="Last name"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.PhoneNumberInput
        label="Phone Number"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <ProfileForm.ErrorMessage
        className="custom-error-class"
      />
      <ProfileForm.SubmitButton
        text="Update Profile"
        className="custom-button-class"
      />
    </ProfileForm.Root>
  );
};

​
ProfileForm.Root

The root component of profile form. Encapsulates the business logic for handling user details form.

​
Props

​
children
ReactNode
React elements to be rendered inside the form. ProfileForm elements should be rendered as children of ProfileForm.Root.
​
userDetails
UserDetails
required
User details to be pre-filled in the form.
UserDetails type
type UserDetails = {
  firstName: string;
  lastName: string;
  phoneNumber: string;
  email: string;
  isEmailVerified: boolean;
  isPhoneVerified: boolean;
  userState: string;
  displayName: string;
  metadata?: Record<string, string>;
};

​
Input Fields

ProfileForm has the following exported input fields:
  • ProfileForm.FirstNameInput - field for entering first name.
  • ProfileForm.LastNameInput - field for entering last name.
  • ProfileForm.PhoneNumberInput - field for entering phone number.
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.

​
ProfileForm.ErrorMessage

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

​
Props

​
classname
string
Custom class name for the error message.

​
ProfileForm.SubmitButton

Submit button for the form.

​
Props

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