Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add password strength meter #523

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

Add password strength meter #523

wants to merge 10 commits into from

Conversation

veeara282
Copy link
Contributor

@veeara282 veeara282 commented Aug 18, 2020

Closes #247

Add a password strength meter to the "New password" fields in ChangePasswordModal and ResetPasswordModal using a PasswordStrengthModalInput, which composes ModalInput. This component will always display validation text, even when the password is valid.

Password strength indicator colors:

  • Weak/invalid: #f05452 (tangerine)
  • Okay: #43c4d9 (aqua)
  • Good: #388ec5
  • Great: #2c58b1 (bluejay)

TODO:

  • Allow {Reset,Change}PasswordModal to read the validation result (true/false) of the PasswordStrengthModalInput
  • Color shouldn't be red when the password is valid

@veeara282
Copy link
Contributor Author

We should also consider adding some default and personalized strings to the user_inputs argument.

The optional user_inputs argument is an array of strings that zxcvbn will treat as an extra dictionary. This can be whatever list of strings you like, but is meant for user inputs from other fields of the form, like name and email. That way a password that includes a user's personal information can be heavily penalized. This list is also good for site-specific vocabulary — Acme Brick Co. might want to include ['acme', 'brick', 'acmebrick', etc].

Vary the color of the validation message depending on the score.
- Weak/invalid: `#f05452` (tangerine)
- Okay: `#43c4d9` (aqua)
- Good: `#388ec5`
- Great: `#2c58b1` (bluejay)
@veeara282 veeara282 marked this pull request as ready for review August 28, 2020 00:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add password strength meter
2 participants