Add back password strength meter

[Matthew White]

In #526, the password strength meter is removed because the package we use doesn't support Vue 3 (apertureless/vue-password-strength-meter#54). v1.4 won't ship with a password strength meter, but I think we will add one back in v1.5.

When we add it back, we'll have to decide what kind of password strength meter to use. I think we have two main options:

• Use a dictionary approach.
  • The main issue here is that zxcvbn is no longer maintained. However, there is a fork of it rewritten in TypeScript that we could look into (https://github.com/zxcvbn-ts/zxcvbn).
  • I'm not sure that there's a Vue component out there that uses this fork, but we could probably write our own without too much difficulty.
  • How does this interact with internationalization? Would we want to use dictionaries for languages other than English?
• Use a pattern-based approach.
  • Given that our only requirement for passwords/passphrases is that they are at least 10 characters long, this approach might work fine for our needs.
  • This approach is ligher-weight insomuch as it doesn't require the user to download a large dictionary.
  • One component to look into: https://github.com/miladd3/vue-simple-password-meter

[Matthew White]

Also, just had the idea: instead of rendering the password strength meter based on the strengthmeter prop of the FormGroup component, maybe it makes sense to do so based on whether the autocomplete attribute is new-password. Removing the strengthmeter prop and the before and after slots of FormGroup would be a nice simplification of that component.

[Hélène Martin]

I did some reading on password strength meters. Seems that the general consensus is that they're all nonsense. However, because Psychology™️ people come up with stronger passwords when they see a meter, no matter what it says.

[Matthew White]

Ah that's very interesting. Knowing that, I think I'd lean more strongly toward the simpler pattern-based approach.

[Hélène Martin]

Citation needed: this NDSS2014 paper analyzes password meters out in nature and shows how different they are. This 2020 paper finds the same (they make some recommendations but I don't know how practical they are); this CHI paper from 2013 found that people improved password strength when presented by meters if they thought the site was important.

[Matthew White]

As an update related to this issue, #526 won't ship with v1.4, so there will still be a password strength meter in v1.4. We'll still need to find a new password strength meter for v1.5 though.

Also, just had the idea: instead of rendering the password strength meter based on the strengthmeter prop of the FormGroup component, maybe it makes sense to do so based on whether the autocomplete attribute is new-password.

Just made this change in #539.

[Matthew White]

We ended up removing the password strength meter in a separate PR, #586. v1.5 won't ship with a password strength meter, but we want to add one back in v1.6.

[Matthew White]

Notes for the QA team:

• A password strength meter can be found on three pages:
  1. The "Edit Profile" page
  2. The "Set Password" page (after starting the password reset process)
  3. The project settings page, after clicking "Enable encryption…"
• The strength meter evaluates a password based only on its length. A password must be a minimum of 10 characters. For 10 characters, the password strength meter fills 3/5 bars and is an orange color. As the password length increases, more bars are filled, and the color becomes more green.

[Dominika Bemke]

Tested with success!

[srujner]

Tested with success!