Per 9929 show password strength #494
Conversation
This pr displays the strength of the password when the user registers a new account.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #494 +/- ##
==========================================
+ Coverage 42.71% 43.15% +0.44%
==========================================
Files 359 362 +3
Lines 10974 11067 +93
Branches 1793 1806 +13
==========================================
+ Hits 4687 4776 +89
Misses 6128 6128
- Partials 159 163 +4 ☔ View full report in Codecov by Sentry. |
| waiting || | ||
| signupForm.invalid || | ||
| !agreedTerms || | ||
| passwordStrengthMessage !== 'Strong' |
There was a problem hiding this comment.
I'm not sure if we want to block people from signing up just based on password strength. The intention is to show an indicator so that people can see their password strength and make their own decision on if they want to pick a stronger password.
| color: red; | ||
| } | ||
|
|
||
| .strength-weak { | ||
| color: orange; | ||
| } | ||
|
|
||
| .strength-medium { | ||
| color: blue; | ||
| } | ||
|
|
||
| .strength-strong { | ||
| color: green; |
There was a problem hiding this comment.
This is not an request for changes immediately but we probably want some design/accessibility review here for color choices that match Permanent's theme and also have proper contrast against the background.
| const confirmPasswordControl = new UntypedFormControl('', [ | ||
| Validators.required, | ||
| matchControlValidator(this.signupForm.controls['password']), | ||
| ]); | ||
| this.signupForm.addControl('confirm', confirmPasswordControl); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.signupForm.controls['password'].valueChanges.subscribe((password) => { |
There was a problem hiding this comment.
Does this subscription get automatically cleaned up? It might, and I'd love confirmation that it does, but I feel like subscriptions have occasionally caused errors in the application once the things they refer to have been destroyed.
| passwordStrengthMessage: string = ''; | ||
| passwordStrengthClass: string = ''; |
There was a problem hiding this comment.
In theory we can make this typing even more specific with a type union. That way we know that Message can only ever be "Strong", "Weak", etc.
In this case it might be a bit redundant but it's nice to keep that in mind, especially when testing for string equality like we do in this component.
|
@meisekimiu thanks! I will do the changes! @k8lyn6 can you please suggest some color values for the messages? |
|
@crisnicandrei we can look at it tomorrow during our accessibility review. cc @yeslikesolo |
|
@meisekimiu for sure! |
|
@meisekimiu let me know if my use of the feature flag was correct, as i have not used it before |
| this.passwordSubscription = this.signupForm.controls[ | ||
| 'password' | ||
| ].valueChanges.subscribe((password) => { | ||
| if (this.featureFlagService.isEnabled('passwordStrngth')) { |
There was a problem hiding this comment.
| if (this.featureFlagService.isEnabled('passwordStrngth')) { | |
| if (this.featureFlagService.isEnabled('password-strength')) { |
There's a typo in this flag name. We might also want to use "kebab-case" for feature flags. I think it might be the most accessible to people on the experience team, though we don't have a defined standard yet so it might be fine to leave it like this.
As a small note, I like naming a component's instance of the FeatureFlagService just feature so that the code can read nicely: this.feature.isEnabled('feature-name'), but it doesn't really matter what it's named and it's easy to refactor later.
This pull request displays the strength of a user's password when registering a new account.
Steps to test: