ChangePassword

The ChangePassword component provides a modal popup for users to set a new password, typically used during first-time login. It includes fields to enter and confirm the new password, validation to check password match, and buttons to confirm or close the modal.

Props

Prop	Type	Description
header	string	Header text displayed at the top of the modal.
description	string	Description text explaining the purpose of the password change prompt.
confirmContent	string	Text displayed on the confirm button.
handleConfirm	(newPassword: string) => void	Function called when passwords match, passing the new password.
handleClose	() => void	Function called to close the modal without making changes.
popup	boolean	Controls the visibility of the modal.

Dependencies

• framer-motion: Used to animate the modal’s appearance and exit, providing a smooth transition effect.

• react-hot-toast: Displays a notification when the passwords do not match.

Usage Example

The ChangePassword component is typically displayed as a popup on first login, controlled by the popup prop:

<ChangePassword
  header="Welcome! Please set a new password."
  description="To complete your registration, please enter a new password."
  confirmContent="Set Password"
  handleConfirm={(newPassword) => handlePasswordUpdate(newPassword)}
  handleClose={() => setShowChangePassword(false)}
  popup={showChangePassword}
/>

Additional Notes

• Password Validation:

  • The handleChangePassword function checks that password and confirmPassword match before calling handleConfirm.

  • If the passwords do not match, an error notification is shown using toast.error.

• Animation:

  • The component uses motion.div from framer-motion to animate the modal’s appearance and disappearance, creating a smooth user experience.

• Accessibility:

  • The overlay and modal structure with z-50 and centered positioning ensures focus on the modal, minimizing distractions.

---

This documentation covers all main aspects of the ChangePassword component.