From 74363f6007e9b5af098ad3567d6b64457cc5fc33 Mon Sep 17 00:00:00 2001 From: Alex Pott Date: Tue, 19 May 2015 14:12:05 +0100 Subject: [PATCH] Issue #1751434 by droplet, oxyc, pguillard, lauriii, nod_: Selectors clean-up: user module --- .../Core/Render/Element/PasswordConfirm.php | 4 +- .../user/src/Form/UserPermissionsForm.php | 4 +- core/modules/user/user.js | 91 +++++++++++-------- core/modules/user/user.permissions.js | 16 ++-- 4 files changed, 65 insertions(+), 50 deletions(-) diff --git a/core/lib/Drupal/Core/Render/Element/PasswordConfirm.php b/core/lib/Drupal/Core/Render/Element/PasswordConfirm.php index 9bc32b7dfab..f7f6240d92e 100644 --- a/core/lib/Drupal/Core/Render/Element/PasswordConfirm.php +++ b/core/lib/Drupal/Core/Render/Element/PasswordConfirm.php @@ -52,14 +52,14 @@ class PasswordConfirm extends FormElement { '#title' => t('Password'), '#value' => empty($element['#value']) ? NULL : $element['#value']['pass1'], '#required' => $element['#required'], - '#attributes' => array('class' => array('password-field')), + '#attributes' => array('class' => array('password-field', 'js-password-field')), ); $element['pass2'] = array( '#type' => 'password', '#title' => t('Confirm password'), '#value' => empty($element['#value']) ? NULL : $element['#value']['pass2'], '#required' => $element['#required'], - '#attributes' => array('class' => array('password-confirm')), + '#attributes' => array('class' => array('password-confirm', 'js-password-confirm')), ); $element['#element_validate'] = array(array(get_called_class(), 'validatePasswordConfirm')); $element['#tree'] = TRUE; diff --git a/core/modules/user/src/Form/UserPermissionsForm.php b/core/modules/user/src/Form/UserPermissionsForm.php index a782f37282d..9bbb6b57e53 100644 --- a/core/modules/user/src/Form/UserPermissionsForm.php +++ b/core/modules/user/src/Form/UserPermissionsForm.php @@ -107,7 +107,7 @@ class UserPermissionsForm extends FormBase { '#type' => 'table', '#header' => array($this->t('Permission')), '#id' => 'permissions', - '#attributes' => ['class' => ['permissions']], + '#attributes' => ['class' => ['permissions', 'js-permissions']], '#sticky' => TRUE, ); foreach ($role_names as $name) { @@ -163,7 +163,7 @@ class UserPermissionsForm extends FormBase { ), '#type' => 'checkbox', '#default_value' => in_array($perm, $role_permissions[$rid]) ? 1 : 0, - '#attributes' => array('class' => array('rid-' . $rid)), + '#attributes' => array('class' => array('rid-' . $rid, 'js-rid-' . $rid)), '#parents' => array($rid, $perm), ); // Show a column of disabled but checked checkboxes. diff --git a/core/modules/user/user.js b/core/modules/user/user.js index 98d1d0e0542..615689c21d6 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -1,4 +1,4 @@ -(function ($) { +(function ($, Drupal, drupalSettings) { "use strict"; @@ -8,37 +8,44 @@ */ Drupal.behaviors.password = { attach: function (context, settings) { - var translate = settings.password; - $(context).find('input.password-field').once('password').each(function () { - var passwordInput = $(this); - var innerWrapper = $(this).parent(); - var outerWrapper = $(this).parent().parent(); - var passwordDescription; + var $passwordInput = $(context).find('input.js-password-field').once('password'); + + if ($passwordInput.length) { + var translate = settings.password; + + var $passwordInputParent = $passwordInput.parent(); + var $passwordInputParentWrapper = $passwordInputParent.parent(); + var $passwordSuggestions; // Add identifying class to password element parent. - innerWrapper.addClass('password-parent'); + $passwordInputParent.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'); + $passwordInputParentWrapper + .find('input.js-password-confirm') + .parent() + .append('
' + translate.confirmTitle + '
') + .addClass('confirm-parent'); + + var $confirmInput = $passwordInputParentWrapper.find('input.js-password-confirm'); + var $confirmResult = $passwordInputParentWrapper.find('div.js-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 + '
'; - confirmInput.parent().after('
'); - innerWrapper.append(passwordMeter); - passwordDescription = outerWrapper.find('div.password-suggestions').hide(); + var passwordMeter = '
' + translate.strengthTitle + '
'; + $confirmInput.parent().after('
'); + $passwordInputParent.append(passwordMeter); + $passwordSuggestions = $passwordInputParentWrapper.find('div.password-suggestions').hide(); } // Check that password and confirmation inputs match. var passwordCheckMatch = function (confirmInputVal) { - var success = passwordInput.val() === 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')]) + $confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]) .removeClass('ok error').addClass(confirmClass); }; @@ -46,40 +53,40 @@ var passwordCheck = function () { if (settings.password.showStrengthIndicator) { // Evaluate the password strength. - var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password); + var result = Drupal.evaluatePasswordStrength($passwordInput.val(), settings.password); // Update the suggestions for how to improve the password. - if (passwordDescription.html() !== result.message) { - passwordDescription.html(result.message); + if ($passwordSuggestions.html() !== result.message) { + $passwordSuggestions.html(result.message); } // Only show the description box if a weakness exists in the password. - passwordDescription.toggle(result.strength !== 100); + $passwordSuggestions.toggle(result.strength !== 100); // Adjust the length of the strength indicator. - innerWrapper.find('.password-strength__indicator') + $passwordInputParent.find('.js-password-strength__indicator') .css('width', result.strength + '%') .removeClass('is-weak is-fair is-good is-strong') .addClass(result.indicatorClass); // Update the strength indication text. - innerWrapper.find('.password-strength__text').html(result.indicatorText); + $passwordInputParent.find('.js-password-strength__text').html(result.indicatorText); } // Check the value in the confirm input and show results. - if (confirmInput.val()) { - passwordCheckMatch(confirmInput.val()); - confirmResult.css({visibility: 'visible'}); + if ($confirmInput.val()) { + passwordCheckMatch($confirmInput.val()); + $confirmResult.css({visibility: 'visible'}); } else { - confirmResult.css({visibility: 'hidden'}); + $confirmResult.css({visibility: 'hidden'}); } }; // Monitor input events. - passwordInput.on('input', passwordCheck); - confirmInput.on('input', passwordCheck); - }); + $passwordInput.on('input', passwordCheck); + $confirmInput.on('input', passwordCheck); + } } }; @@ -95,15 +102,15 @@ var strength = 100; var msg = []; - var hasLowercase = /[a-z]+/.test(password); - var hasUppercase = /[A-Z]+/.test(password); - var hasNumbers = /[0-9]+/.test(password); - var hasPunctuation = /[^a-zA-Z0-9]+/.test(password); + var hasLowercase = /[a-z]/.test(password); + var hasUppercase = /[A-Z]/.test(password); + var hasNumbers = /[0-9]/.test(password); + var hasPunctuation = /[^a-zA-Z0-9]/.test(password); // If there is a username edit box on the page, compare password to that, otherwise // use value from the database. - var usernameBox = $('input.username'); - var username = (usernameBox.length > 0) ? usernameBox.val() : translate.username; + var $usernameBox = $('input.username'); + var username = ($usernameBox.length > 0) ? $usernameBox.val() : translate.username; // Lose 5 points for every character less than 6, plus a 30 point penalty. if (password.length < 6) { @@ -175,8 +182,14 @@ // Assemble the final message. msg = translate.hasWeaknesses + ''; - return {strength: strength, message: msg, indicatorText: indicatorText, indicatorClass: indicatorClass}; + + return { + strength: strength, + message: msg, + indicatorText: indicatorText, + indicatorClass: indicatorClass + }; }; -})(jQuery); +})(jQuery, Drupal, drupalSettings); diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.js index 6c28f070e4a..6e473fa3174 100644 --- a/core/modules/user/user.permissions.js +++ b/core/modules/user/user.permissions.js @@ -32,16 +32,18 @@ // submitted form. If we'd automatically check existing checkboxes, the // permission table would be polluted with redundant entries. This // is deliberate, but desirable when we automatically check them. - var $dummy = $('') + var $dummy = $('') .attr('title', Drupal.t("This permission is inherited from the authenticated user role.")) .hide(); - $table.find('input[type=checkbox]').not('.rid-anonymous, .rid-authenticated').addClass('real-checkbox').each(function () { - $dummy.clone().insertAfter(this); - }); + $table + .find('input[type="checkbox"]') + .not('.js-rid-anonymous, .js-rid-authenticated') + .addClass('real-checkbox js-real-checkbox') + .after($dummy); // Initialize the authenticated user checkbox. - $table.find('input[type=checkbox].rid-authenticated') + $table.find('input[type=checkbox].js-rid-authenticated') .on('click.permissions', self.toggle) // .triggerHandler() cannot be used here, as it only affects the first // element. @@ -64,10 +66,10 @@ // jQuery performs too many layout calculations for .hide() and .show(), // leading to a major page rendering lag on sites with many roles and // permissions. Therefore, we toggle visibility directly. - $row.find('.real-checkbox').each(function () { + $row.find('.js-real-checkbox').each(function () { this.style.display = (authCheckbox.checked ? 'none' : ''); }); - $row.find('.dummy-checkbox').each(function () { + $row.find('.js-dummy-checkbox').each(function () { this.style.display = (authCheckbox.checked ? '' : 'none'); }); }