Locai IAM Service Docs

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

ReactNode

React elements to be rendered inside the form. ProfileForm elements should be rendered as children of ProfileForm.Root.

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

string

Label for input field. Optional, if not provided the label will not be rendered.

string

Placeholder for input field. Optional, if not provided the placeholder will not be rendered.

string

Custom class name for label.

string

Custom class name for input.

ProfileForm.ErrorMessage

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

Props

string

Custom class name for the error message.

ProfileForm.SubmitButton

Submit button for the form.

Props

string

Text to be displayed on the button.

string

Custom class name for the button.

Libraries

<ProfileForm />

Overview

Example Usage

ProfileForm.Root

Props

Input Fields

Props

ProfileForm.ErrorMessage

Props

ProfileForm.SubmitButton

Props

​Overview

​Example Usage

​ProfileForm.Root

​Props

​Input Fields

​Props

​ProfileForm.ErrorMessage

​Props

​ProfileForm.SubmitButton

​Props

Overview

Example Usage

ProfileForm.Root

Props

Input Fields

Props

ProfileForm.ErrorMessage

Props

ProfileForm.SubmitButton

Props