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