#28Strong Password

Overview

Create the logic for a password strength checker that validates whether the user's password meets specific security rules.

Requirements

• Make the password input controlled with React state.
• Implement a button to toggle between showing and hiding the password.
• Update the list of validation rules dynamically as the user types.
• Mark each rule as passed or failed based on the password’s content.
• Each rule that is valid should apply the class text-green-500.
• Validate the following conditions:
  • Minimum of 8 characters
  • Contains at least one lowercase letter
  • Contains at least one uppercase letter
  • Contains at least one number
  • Contains at least one special character

Notes

• The list items already include data-testid attributes used by the tests.
• Keep the component accessible and provide clear visual feedback.
• You can use regular expressions to test password conditions.
• Avoid mutating state directly — update checks immutably.
• The visibility toggle button should change the input type between "password" and "text".
• Make sure the UI updates live as the user types.

Tests

1. renders all password rules
2. marks rule 0 (min length) as true for length >= 8
3. marks rule 1 (lowercase) as true when contains lowercase
4. marks rule 2 (uppercase) as true when contains uppercase
5. marks rule 3 (numbers) as true when contains digits
6. marks rule 4 (special chars) as true when contains symbols
7. resets checks when password no longer meets criteria
8. should hide password by default
9. should show password when toggle button is clicked
10. should hide password again when clicked twice