diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css
index 6d2c51e..51332d1 100644
--- a/core/modules/user/css/user.module.css
+++ b/core/modules/user/css/user.module.css
@@ -23,6 +23,7 @@
.password-strength {
width: 13em;
float: right; /* LTR */
+ margin-top: -0.3em;
}
[dir="rtl"] .password-strength {
float: left;
@@ -55,9 +56,17 @@ input.password-field {
}
div.password-confirm {
float: right; /* LTR */
+ margin-top: 1.1em;
visibility: hidden;
width: 13em;
}
+.password-confirm-text {
+ float: right; /* LTR */
+ font-weight: bold;
+}
+[dir="rtl"] .password-confirm-text {
+ float: left;
+}
[dir="rtl"] input.password-confirm,
[dir="rtl"] input.password-field {
float: right;
diff --git a/core/modules/user/user.js b/core/modules/user/user.js
index 1748a2c..6cd7b3c 100644
--- a/core/modules/user/user.js
+++ b/core/modules/user/user.js
@@ -13,32 +13,37 @@
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.
+ 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.
@@ -61,6 +66,9 @@
.css('background-color', result.indicatorColor);
// 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