lib: Improve password fields

[skobyda]

• Adds show/hide feature
• Adds a minimum to a progress bar
• Changes width of a progress bar
• Shows message indicating the strength of the password

Fixes #19199

Screencast.from.2023-08-22.14-30-21.webm

[skobyda]

Currently we these 4 levels of messages for passwords "Weak password" < "Good password" < "Strong password" < "Excellent password".
I'm not sure about the wording of the "Good password". It has score more than 33 but less than 66 (and is shown in yellow color). It's a password which is neither good nor bad.
Maybe it should be "acceptable password"?
WDYT @garrett

[martinpitt]

needsdesign → moving to draft

[garrett]

The contrast between the text and its background is not high enough. The color of the text should be the darker gold.

You can see this in PF demos:

https://www.patternfly.org/components/helper-text/html-demos/#helper-text-on-a-form

Here, you can see how PF uses brighter versions for icons, progress bars, etc. and the darker related color for text:

https://www.patternfly.org/components/alert/html/#alert-examples

Colors are specified here:

https://www.patternfly.org/design-foundations/colors/#primary-colors

• icon: --pf-v5-global--warning-color--100
• text: --pf-v5-global--warning-color--200

This isn't just a problem with the warning colors either, but it's most noticeable with it, as it has the least contrast. The other colors need to use the text variants too.

[garrett]

There's a strange intermediate step where the strength meter is shown in a blue state without text, right at the beginning of typing:

[garrett]

I'm not sure about the wording of the "Good password". It has score more than 33 but less than 66 (and is shown in yellow color). It's a password which is neither good nor bad.
Maybe it should be "acceptable password"?

Yes. 👍

[skobyda]

Updated: Changed to the text color, got rid of the blue progress bar without any text and from now on using "Acceptable" instead of "Good" password:

[garrett]

It's a lot better. Thanks!

However, the meter (progress bar) doesn't update based on the strength.

Screencast.from.2023-09-20.09-59-43.webm

[skobyda]

Fixed the issue @garrett

Screencast.from.2023-10-17.15-06-03.webm

[garrett]

This was waiting on the password meter fix. Thanks! Approved.

(But please move that line of CSS.)

[garrett]

Suggested change

	.ct-password-strength-meter {
	grid-gap: var(--pf-v5-global--spacer--xs);
	.pf-v5-c-progress__description, .pf-v5-c-progress__status {
	display: none;
	}
	inline-size: var(--pf-v5-global--spacer--2xl);
	}
	.ct-password-strength-meter {
	grid-gap: var(--pf-v5-global--spacer--xs);
	inline-size: var(--pf-v5-global--spacer--2xl);
	.pf-v5-c-progress__description, .pf-v5-c-progress__status {
	display: none;
	}
	}

Parent CSS should be grouped together at the top. (This doesn't change anything, but it's better when it's not scattered.)

[skobyda]

Ready for code-review

[martinpitt]

Thanks! The code changes look good, but the committed pixel changes look like they revert #19520. I'll rebase this PR, fix the above two little issues, and re-do the pixel updates.

[martinpitt]

That looks much saner -- most tests are okay, just the accounts tests have the updated pixels for the reveal buttons. I'll push these.

[martinpitt]

Thanks!

[cockpituous]

This added line is not executed by any test. Details