diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css index 0b6afcf..676c3e8 100644 --- a/core/modules/user/css/user.module.css +++ b/core/modules/user/css/user.module.css @@ -2,10 +2,6 @@ * @file * Module styling for user module. */ -.password-strength__title, -.password-strength__text { - display: inline; -} .password-strength__meter { height: 0.75em; margin-top: 0.5em; @@ -19,3 +15,12 @@ .password-confirm-match { visibility: hidden; } +.password-strength { + width: 55%; + margin-top: -0.3em; +} +div.password-confirm { + visibility: hidden; + width: 55%; + height: 0; +} \ No newline at end of file diff --git a/core/modules/user/user.js b/core/modules/user/user.js index ded4c0a..0f40a41 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -13,33 +13,37 @@ var passwordInput = $(this); var innerWrapper = $(this).parent(); var outerWrapper = $(this).parent().parent(); + var confirmInput = outerWrapper.find('input.password-confirm'); var passwordDescription; // 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-match'); - 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); 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')]) - .removeClass('ok error').addClass(confirmClass); + 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. @@ -63,16 +67,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 e11cbfa..7c17427 100644 --- a/core/modules/user/user.libraries.yml +++ b/core/modules/user/user.libraries.yml @@ -11,6 +11,7 @@ drupal.user: - core/jquery - core/drupal - core/jquery.once + - core/drupal.announce drupal.user.admin: version: VERSION