Task #2: Password Strength Checker

[edumorlom]

Where to Start

1. Modify the following file: nuMom/src/Components/SignUpPassword.jsx.
2. You can modify and create any other files you may need.
3. Download the list of poor passwords.

Requisites

1. As the user is typing a password, have a Text component that changes style and value.
2. There are three strengths: Poor, Medium, High.
3. The labels should have the following styles {Poor: "nuMom-pink", Medium: "nuMom-blue", High: "#298000"}.
4. Import nuMom colors from nuMom/src/Components/AppStyles.js.
5. If the password is poor, the user cannot navigate to the next screen.
6. If the password is medium, the user get's a pop-up asking them to Edit password or Continure.

Poor (at least one is met) -- User should NOT be allowed to continue:

1. len(password) <= 4
2. Password is included in this list.
3. You can download the file to the app and import it.

Medium (all must be met) -- User can continue with registration:

1. len(password) >= 5
2. Includes 3 out of 4 types: lowercase letter, number, symbol, capital letter.
3. Password is NOT included in this list.
4. You can download the file to the app and import it.

High (all must be met) -- User can continue with registration:

1. len(password) >= 5
2. Includes all 4 types: lowercase letter, number, symbol, capital letter.
3. Password is NOT included in this list.
4. You can download the file to the app and import it.

Examples

password -> poor because it is included this list.

Password123 -> medium because it does not contain a symbol.

passWord123! -> strong because it meets the strength requirements.

P1n! -> poor because it's too short.

ajfudkl1 -> poor because it only includes two types: letter, number.

ajfudkl1! -> medium because it contains three types: letter, number, symbol.

Tips

1. Create a checkPasswordStrength(password) function that returns a number from 0 to 2 for each strength.
2. Create a passwordStrength state using useState() to keep track of the strength of the password as the user types.
3. Whenever the user types a new character, check the strength using the checkPasswordStrengthfunction.
4. Add a component below the password input that changes style and text based on the value of passwordStrength.