More intelligent password strength

[hughns]

There is a basic password policy in place, which can set a minimum password length, require uppercase, lowercase and/or numeric symbols.

This is very basic and lacks direct feedback to the user.
We should instead use a real password strength estimation like zxcvbn and enforce it.
This would also need live feedback to the user whether their password is strong enough or not.

Open questions:

• Is the "interactive feedback as you type" important? If so, this would need design input
• Should this be only a suggestion or enforced? Should we have a default?
• If the minimum strength is configurable, it would be of an opaque number: zxcvbn gives a score out of 4
• Should we keep in parallel the current policy knobs?

Relevant design screens:

• Password entry on account creation
• New password when recovering the account

[sandhose]

There is some password strength enforcement via the OPA policy + config (require uppercase/lowercase/number + min length), although we might be better off using something more intelligent like zxcvbn? This one would definitely require interactive feedback on the frontend, else you'd get cryptic error messages like "your password is not strong enough" without knowing exactly what "strong enough" means

[americanrefugee]

Here is the final component in Figma, and here is a reference in the designs.

[reivilibre]

After #2972, here's what will be left:

• converting the other password screens to use the React frontend so they can give the client-side feedback
  • recovery
  • registration
• factoring out the 'double new password with feedback' as a component?

[matrixbot]

For your information, this issue has been copied over to the Element fork of matrix-authentication-service: element-hq/matrix-authentication-service#172