[FEATURE] 🗺️ ⚙️ Settings Pages > Password Settings > implement a password Strength validator

[luqmonac56]

figma link-
https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=10-17158&t=ybfmYNMB6xh8HxXT-1

Description

Develop a Password Strength Validator for the Settings Pages > Password Settings section. This component will evaluate the strength of user-entered passwords and provide real-time feedback. The Password Strength Validator should be user-friendly, informative, and help users create strong passwords. It should include the following features:

Acceptance Criteria

The Password Strength Validator component is implemented according to the design.
The component should evaluate password strength based on criteria as designed
Provide real-time feedback to the user as they type their password.
Display password strength visually, using indicators as in the design.
Ensure accessibility standards are met

Requirements

The component should receive the following props:

password: The user-entered password.
minLength: Minimum length requirement for the password.
onStrengthChange: A callback function that is triggered when the password strength changes.

Testing

Ensure the component evaluates password strength accurately based on the defined criteria.
Check that the component provides real-time feedback as the user types their password.
Test the component for responsiveness and accessibility.
Verify that the onStrengthChange callback is triggered with the correct strength value.

Tasks

• Develop the Password Strength Validator component based on the provided requirements.
• Implement handling for password strength evaluation based on length, character types, and other criteria.
• Ensure real-time feedback and visual indicators for password strength.
• Test the component for responsiveness and compatibility across different devices.