diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css index 8a03bdb..5ff9704 100644 --- a/core/modules/user/css/user.module.css +++ b/core/modules/user/css/user.module.css @@ -41,9 +41,20 @@ input.password-field, .password-strength { width: 55%; } +.password-strength { + margin-top: -0.3em; +} div.password-confirm { visibility: hidden; width: 55%; + margin-top: 1.1em; +} +.password-confirm-text { + float: right; /* LTR */ + font-weight: bold; +} +[dir="rtl"] .password-confirm-text { + float: left; } 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..bce8e77 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().prepend(passwordConfirm).addClass('confirm-parent'); + var confirmResult = outerWrapper.find('div.password-confirm'); + var confirmChild = confirmResult.find('span'); + // 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,6 +66,9 @@ .addClass(result.indicatorClass); // Update the strength indication text. + if (innerWrapper.find('.password-strength-text').html() != result.indicatorText) { + Drupal.announce(Drupal.t(result.indicatorText + " password"), 'assertive'); + } innerWrapper.find('.password-strength__text').html(result.indicatorText); } 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