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..d37e306 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');
+
// 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