Skip to main content

​
Overview

SecurityForm is a collection of components designed to facilitate creation of a custom password update form. It provides a set of components that encapsulate the business logic for handling the password update form, allowing users to easily customize layout, styles, labels, placeholders, and button texts.
SecurityForm should be used in protected page - user should be authenticated to access it.
After changing the user’s password, their session will be terminated, and they will need to log in again using the new password.

​
Example Usage

custom-security-form.tsx
import { UserDetailsElements } from '@/components/elements';

const { SecurityForm } = UserDetailsElements;

export const SecurityTab = () => {
  return (
    <SecurityForm.Root>
      <SecurityForm.CurrentPasswordInput
        label="Current Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.NewPasswordInput
        label="New Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.ConfirmPasswordInput
        label="Confirm Password"
        labelClassname="custom-label-class"
        inputClassname="custom-input-class"
      />
      <SecurityForm.ErrorMessage
        className="custom-error-class"
      />
      <SecurityForm.SubmitButton
        text="Update Password"
        className="custom-button-class"
      />
    </SecurityForm.Root>
  );
};

​
SecurityForm.Root

The root component of security form. Encapsulates the business logic for handling security form.

​
Props

​
children
ReactNode
React elements to be rendered inside the form. SecurityForm elements should be rendered as children of SecurityForm.Root.

​
Input Fields

SecurityForm has the following exported input fields:
  • SecurityForm.CurrentPasswordInput - field for entering current password.
  • SecurityForm.NewPasswordInput - field for entering new password.
  • SecurityForm.ConfirmPasswordInput - field for entering new password confirmation.
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.

​
SecurityForm.ErrorMessage

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

​
Props

​
classname
string
Custom class name for the error message.

​
SecurityForm.SubmitButton

Submit button for the form.

​
Props

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