ForgotPasswordDialog

Overview of ForgotPasswordDialog

ForgotPasswordDialog is a modal component that handles the OTP verification step for resetting a user’s password. It includes input for username and OTP, and integrates loading and validation states.

Props

Prop	Type	Description
visible	boolean	Controls the visibility of the dialog.
onClose	function	Callback function to hide the dialog.
onOtpValidated	function	Called after successful OTP validation.
handleGetOtp	function	Triggered when requesting OTP.
handleValidateOtp	function	Triggered to validate the entered OTP.
otpSentLoading	boolean	Indicates if OTP sending is in progress.
setOtpSentLoading	function	State setter for otpSentLoading.
otpSent	boolean	Whether OTP has been sent successfully.
setOtpSent	function	State setter for otpSent.
otp	string	The OTP value.
setOtp	function	State setter for otp.
forgotPasswordUsername	string	Username input for password reset.
setForgotPasswordUsername	function	State setter for forgotPasswordUsername.
otpError	string	Error message related to OTP validation.
setOtpError	function	State setter for otpError.
otpSentEmail	string	Email address where OTP is sent.
setOtpSentEmail	function	State setter for otpSentEmail.
otpValidateLoading	boolean	Indicates if OTP validation is in progress.

Behavior

• Shows input for username and OTP.
• OTP field and proceed button appear only after OTP is sent.
• Triggers the next step on successful OTP validation.

Example Usage

<ForgotPasswordDialog
  visible={showForgotPassword}
  onClose={() => setShowForgotPassword(false)}
  onOtpValidated={handleOtpValidated}
  handleGetOtp={handleGetOtp}
  handleValidateOtp={handleValidateOtp}
  otpSentLoading={otpSentLoading}
  setOtpSentLoading={setOtpSentLoading}
  otpSent={otpSent}
  setOtpSent={setOtpSent}
  otp={otp}
  setOtp={setOtp}
  forgotPasswordUsername={forgotPasswordUsername}
  setForgotPasswordUsername={setForgotPasswordUsername}
  otpError={otpError}
  setOtpError={setOtpError}
  otpSentEmail={otpSentEmail}
  setOtpSentEmail={setOtpSentEmail}
  otpValidateLoading={otpValidateLoading}
/>