Login Page

🧾 LoginPage Component Documentation

📍 Overview

The LoginPage is a configurable authentication module built using React, PrimeReact, Formik, Yup, and Tailwind CSS. It supports customer ID, username, password inputs, and includes dialog support for:

• Forgot Password
• Reset Password
• Project Selection

---

🚀 Usage Example

The states and the handler functions needs to be defined in the consumer app. For reference look into the Signin component in the playground project (playground/src/components/SignIn/SignIn.jsx).

import LoginPage from "@/Modules/Login/LoginPage";  // Change the path based on the name of the library

<LoginPage
  showEyeButtonOnPassword={true}
  showCustomerTextBox={true}
  showForgotPasswordButton={true}
  handleSubmit={handleSubmit}
  handleGetOtp={handleGetOtp}
  handleResetPasswordSubmit={handleResetPasswordSubmit}
  handleProceedOnProjectSelection={handleProceedOnProjectSelection}
  handleValidateOtp={handleValidateOtp}
  loginPageStates={loginPageStates}
  resetPasswordDialogStates={resetPasswordDialogStates}
  selectProjectDialogStates={selectProjectDialogStates}
  forgotPasswordDialogStates={forgotPasswordDialogStates}
/>

---

⚙️ Props

🔹 Basic Props

Prop	Type	Default	Description
title	string	"Login to your Account"	Title displayed at the top
showCustomerTextBox	bool	true	Toggles visibility of the Customer ID field
showUsernameTextBox	bool	true	Toggles visibility of the Username field
showPasswordTextBox	bool	true	Toggles visibility of the Password field
showEyeButtonOnPassword	bool	true	Enables the password visibility toggle
showForgotPasswordButton	bool	true	Toggles the “Forgot Password?” button
customerLabel	string	"CustomerId"	Custom label for customer field

🔹 Handler Functions

Handler	Description
handleSubmit	Called on login form submit with values
handleGetOtp	Called when requesting OTP (Forgot Password)
handleValidateOtp	Called to validate OTP entered by user
handleResetPasswordSubmit	Called on reset password form submission
handleProceedOnProjectSelection	Called when a project is selected in the project dialog

🔹 State Prop Groups

Each group should be defined and managed in the parent (consumer) component.

loginPageStates

Key	Type	Description
submitError	string	Error shown after submit failure
loading	bool	Submit button loading state
showProjectDialog	bool	Controls project selection dialog
setShowProjectDialog	function	Setter for project dialog visibility
showForgotPassword	bool	Controls Forgot Password dialog
setShowForgotPassword	function	Setter for Forgot Password dialog
showResetPasswordDialog	bool	Controls Reset Password dialog
setShowResetPasswordDialog	function	Setter for Reset Password dialog

forgotPasswordDialogStates

Key	Type	Description
otpSentLoading	bool	Loading state for OTP send button
setOtpSentLoading	func	Setter
otpSent	bool	Flag if OTP has been sent
setOtpSent	func	Setter
otp	string	OTP entered by user
setOtp	func	Setter
forgotPasswordUsername	string	Username used for OTP
setForgotPasswordUsername	func	Setter
otpError	string	OTP validation error
setOtpError	func	Setter
otpSentEmail	string	Masked email for OTP notification
setOtpSentEmail	func	Setter
otpValidateLoading	bool	Loading state during OTP validation

resetPasswordDialogStates

Key	Type	Description
newPassword	string	New password value
setNewPassword	func	Setter
confirmPassword	string	Confirm password value
setConfirmPassword	func	Setter
triggerToast	bool	Flag to trigger success toast
setTriggerToast	func	Setter

selectProjectDialogStates

Key	Type	Description
projects	array	List of project objects
selectedProject	object	Currently selected project
setSelectedProject	function	Setter for selected project

---

🖼️ Screens

1. Login Form with Customer ID / Username / Password
2. Forgot Password Dialog (Username input → OTP input)
3. Reset Password Dialog (New Password & Confirm Password)
4. Select Project Dialog (Dropdown or selectable list)

---

🛠️ Styling

• All components are styled using Tailwind CSS 4.x
• Make sure PrimeReact theming is supported in your consumer app by checking for the below imports in your app's global css file.

import "primereact/resources/themes/lara-light-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

---

🔍 Dependencies

• formik
• yup
• primereact
• primeicons
• tailwindcss
• react, react-dom

---

✅ Validation

Uses Yup schema built dynamically based on which fields are visible (customer, username, password).

---

📦 Reusability

• Fully controlled via props — no internal state.
• Modular dialog components.
• Easy to integrate with custom logic like APIs, notifications, etc.

**For real usage example go to the SignIn component of the Playground app (playground/src/components/SignIn/SignIn.jsx).