diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css index 8a03bdb..42d9b31 100644 --- a/core/modules/user/css/user.module.css +++ b/core/modules/user/css/user.module.css @@ -20,10 +20,6 @@ /** * Password strength indicator. */ -.password-strength__title, -.password-strength__text { - display: inline; -} .password-strength__meter { background-color: #ebeae4; height: 0.75em; @@ -41,9 +37,13 @@ input.password-field, .password-strength { width: 55%; } +.password-strength { + margin-top: -0.3em; +} div.password-confirm { visibility: hidden; width: 55%; + height: 0; } div.form-item div.password-suggestions { padding: 0.2em 0.5em; diff --git a/core/modules/user/user.js b/core/modules/user/user.js index 554284b..1a92160 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -13,32 +13,36 @@ var passwordInput = $(this); var innerWrapper = $(this).parent(); var outerWrapper = $(this).parent().parent(); + var confirmInput = outerWrapper.find('input.password-confirm'); // Add identifying class to password element parent. innerWrapper.addClass('password-parent'); - // Add the password confirmation layer. - outerWrapper.find('input.password-confirm').parent().append('
' + translate.confirmTitle + '
').addClass('confirm-parent'); - var confirmInput = outerWrapper.find('input.password-confirm'); - var confirmResult = outerWrapper.find('div.password-confirm'); - var confirmChild = confirmResult.find('span'); - // If the password strength indicator is enabled, add its markup. if (settings.password.showStrengthIndicator) { - var passwordMeter = '
' + translate.strengthTitle + '
'; + var passwordMeter = '
' + translate.strengthTitle + '
'; confirmInput.parent().after('
'); innerWrapper.append(passwordMeter); var passwordDescription = outerWrapper.find('div.password-suggestions').hide(); } + // Add the password confirmation layer. + var passwordConfirm = '
' + translate.confirmTitle + '
'; + outerWrapper.find('input.password-confirm').parent().append(passwordConfirm).addClass('confirm-parent'); + var confirmResult = outerWrapper.find('div.password-confirm'); + var confirmChild = confirmResult.find('span.password-confirm__text'); + // Check that password and confirmation inputs match. var passwordCheckMatch = function (confirmInputVal) { var success = passwordInput.val() === confirmInputVal; var confirmClass = success ? 'ok' : 'error'; // Fill in the success message and set the class accordingly. - confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]) + if (confirmChild.html() != translate['confirm' + (success ? 'Success' : 'Failure')]) { + confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]) .removeClass('ok error').addClass(confirmClass); + Drupal.announce(Drupal.t(success ? 'Passwords match' : 'Passwords do not match'), 'assertive'); + } }; // Check the password strength. @@ -62,16 +66,19 @@ .addClass(result.indicatorClass); // Update the strength indication text. - innerWrapper.find('.password-strength__text').html(result.indicatorText); + if (innerWrapper.find('.password-strength__text').html() != result.indicatorText) { + innerWrapper.find('.password-strength__text').html(result.indicatorText); + Drupal.announce(Drupal.t(result.indicatorText + " password"), 'assertive'); + } } // Check the value in the confirm input and show results. if (confirmInput.val()) { passwordCheckMatch(confirmInput.val()); - confirmResult.css({ visibility: 'visible' }); + confirmResult.css({ visibility: 'visible', height: 'auto' }); } else { - confirmResult.css({ visibility: 'hidden' }); + confirmResult.css({ visibility: 'hidden', height: 0 }); } }; diff --git a/core/modules/user/user.libraries.yml b/core/modules/user/user.libraries.yml index c32a171..3b63aa9 100644 --- a/core/modules/user/user.libraries.yml +++ b/core/modules/user/user.libraries.yml @@ -9,6 +9,7 @@ drupal.user: - core/jquery - core/drupal - core/jquery.once + - core/drupal.announce drupal.user.permissions: version: VERSION