Present password feedback directly to user

[matthewbadeau]

Checklist

🚨 Please review the guidelines for contributing to this repository. 🚨

• Make sure you are making a pull request against our main branch (left side)
• Check that that your branch is up to date with our main.
• Make sure you are requesting to pull a topic/feature/bugfix branch (right side). Don't request your main!
• Check that the tests and code linter both pass.
• If you're a new contributor, please sign our contributor license agreement.

Warnings

• This PR will change existing database contents.
• This PR introduces a breaking change to existing installations.

Summary

This presents zxcvbn's feedback directly to the user in the password input screen. The side-effect being that it will render a progress bar between 0-25%. Right now the progress bar does not render unless it's an increment of (100/4). The progress bar looks like a plain grey box until 25% and users are, understandably, not aware that the password they're inputting needs to be more complex.

I'm not sure if this is the best approach. Ideally, we should have a width of 1 as the minimum value and then increase from there but zxcvbn's scores are only 0-4, so we can't get a middle progress value.

Also, the strings aren't translated. It's presenting the string from zxcvbn directly, so I'm not sure how to override that with translatable strings.

Linked issues

Partially addresses #4483

Description of changes

• Adds feedback text inside the progress bar

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.20% (target: -1.00%)	✅ ∅

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (a35b373)	4916	4144	84.30%
Head commit (1f06bf3)	4991 (+75)	4217 (+73)	84.49% (+0.20%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#4484)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

[Floppy]

zxcvbn has some i18n stuff in it I think, I'll have a look.

[Floppy]

Sorry @matthewbadeau I completely forgot to look at this again. Having reminded myself, zxcvbn has various language packages in it, so all I should need to do is enable the ones other than english (that tbh I should have already put there). I don't think that needs to be in this PR, so if you're happy with this, it's good to go I think, and we can do the other languages separately.

[Floppy]

@matthewbadeau are you ready for this to be merged in? It's still marked as draft, but I'm happy to merge it in as-is.

[accesslint]

There are accessibility issues in these changes.

[accesslint]

This image is missing a text alternative. This is a problem for people using screen readers.

[matthewbadeau]

@Floppy Small technical difficulty as accidentally merged all commits from July 13th into this branch. I need a moment to fix it. But yes, once I've fixed that, it should be ready

[accesslint]

👏 You fixed the issue(s)! Great work.

[matthewbadeau]

@Floppy Fixed my git mistakes 😅

I'll mark this one ready

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00% (target: -1.00%)	✅ ∅

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (af81ef0)	5330	4484	84.13%
Head commit (ef47994)	5330 (+0)	4484 (+0)	84.13% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#4484)	0	0	∅ (not applicable)

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences