Problem/Motivation

Seems like there were some changes made to the password confirmation messages and the current selector is obsolete and the green/red colors don't get applied anymore. The message now has a -message suffix, while the input stays with the .password-confirm class.

Proposed resolution

Change the selector from .password-confirm to .password-confirm-message so that the confirmation colors work.

CommentFileSizeAuthor
#11 password-confirm-selector-3110825-11.patch2.61 KBpivica
#11 interdiff-3110825-7-11.txt511 bytespivica
#7 password-confirm-selector-3110825-7.patch2.11 KBpivica
#7 interdiff-3110825-4-7.txt687 bytespivica
#6 Password confirm message visible by default.png196.32 KBsasanikolic
#4 password-confirm-selector-3110825-4.patch2.1 KBpivica
#4 interdiff-3110825-2-4.txt1.56 KBpivica
#4 Selection_033.png70.49 KBpivica
#4 Selection_032.png59.19 KBpivica
#4 Selection_031.png58.91 KBpivica
#4 Selection_025.png65.39 KBpivica
#4 Selection_024.png74.24 KBpivica
#4 Selection_023.png38.2 KBpivica
#4 Selection_029.png102.44 KBpivica
#2 3110825-password-confirm-selector.patch995 bytessasanikolic
Password confirm structure.png121.11 KBsasanikolic
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sasanikolic created an issue. See original summary.

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented
Component: User interface » BS Bootstrap
Status: Active » Needs review
FileSize
3110825-password-confirm-selector.patch995 bytes

Here is the patch that changes the selector from .password-confirm (now just input field), to .password-confirm-message (now the actual message wrapper).

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented
Title: Password confirm structure changes » Password confirmation message structure changes
pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
FileSize
Selection_029.png102.44 KB
Selection_023.png38.2 KB
Selection_024.png74.24 KB
Selection_025.png65.39 KB
Selection_031.png58.91 KB
Selection_032.png59.19 KB
Selection_033.png70.49 KB
interdiff-3110825-2-4.txt1.56 KB
password-confirm-selector-3110825-4.patch2.1 KB

Checked this a bit and found multiple additional problems, some new and some old:

Also tested a bit how Claro is managing this:

initial weak no good yes

Based on all this i've created a new patch, here is visuall diff before and after and with shadow enabled for info message:

before after after with shadow
pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented

And i don't like how Claro is hiding 'Confirm password' on initial load - it will just trigger repaint and bottom form jumping. IMHO it is a required field and no need to hide it and show it later.

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented
Status: Needs review » Needs work
FileSize
Password confirm message visible by default.png196.32 KB 
+++ b/themes/bs_bootstrap/sass/components/partials/_forms.scss
@@ -238,10 +238,12 @@ details {
+      // Same thing, password-strength meter element does not look good if its

It's or better it is, no its.

Agree, the confirm password should be visible by default, if not for other, but for performance reasons and prevent page-jumping.

The patch above provides great improvements. I noticed one more issue that we could include here. By default, the default confirm message seems to be displayed without yes/no, then when the user starts typing the password it gets hidden by js and gets displayed again when the "Confirm password" input gets filled. I think it should be hidden by default.

See the screenshot attached.

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
Status: Needs work » Needs review
FileSize
interdiff-3110825-4-7.txt687 bytes
password-confirm-selector-3110825-7.patch2.11 KB

> It's or better it is, no its.

Fixed.

> By default, the default confirm message seems to be displayed without yes/no, then when the user starts typing...

As discussed, this is more a core issue, let's create a follow-up for this one for core.

sasanikolic’s picture

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented
Status: Needs review » Reviewed & tested by the community

Okey, as discussed... looks good to me now. Let's make sure to remember to create a core discussion then. :)

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented

> Let's make sure to remember to create a core discussion then. :)

Feel free to remember it and create it then ;)

pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
Issue tags: +next-release
pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
FileSize
interdiff-3110825-7-11.txt511 bytes
password-confirm-selector-3110825-11.patch2.61 KB

We forgot to add `$spacer-x` and `$spacer-y` SASS vars, new patch is fixing this.

  • pivica committed 440f6ed on 8.x-1.x authored by sasanikolic 
    Issue #3110825 by pivica, sasanikolic: Password confirmation message...
pivica’s picture

pivica CreditAttribution: pivica at MD Systems GmbH commented
Status: Reviewed & tested by the community » Fixed
Issue tags: -next-release

Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.