Issue #1751434 by droplet, oxyc, pguillard, lauriii, nod_: Selectors clean-up: user module

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;

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.

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;
+      var $passwordInput = $(context).find('input.js-password-field').once('password');
-      $(context).find('input.password-field').once('password').each(function () {
+
-        var passwordInput = $(this);
+      if ($passwordInput.length) {
-        var innerWrapper = $(this).parent();
+        var translate = settings.password;
-        var outerWrapper = $(this).parent().parent();
+
-        var passwordDescription;
+        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('<div class="password-confirm-match">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
+        $passwordInputParentWrapper
-        var confirmInput = outerWrapper.find('input.password-confirm');
+          .find('input.js-password-confirm')
-        var confirmResult = outerWrapper.find('div.password-confirm-match');
+          .parent()
-        var confirmChild = confirmResult.find('span');
+          .append('<div class="password-confirm js-password-confirm">' + translate.confirmTitle + ' <span></span></div>')
+          .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 = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator"></div></div><div class="password-strength__title">' + translate.strengthTitle + ' </div><div class="password-strength__text" aria-live="assertive"></div></div>';
+          var passwordMeter = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator js-password-strength__indicator"></div></div><div class="password-strength__title">' + translate.strengthTitle + ' </div><div class="password-strength__text js-password-strength__text" aria-live="assertive"></div></div>';
-          confirmInput.parent().after('<div class="password-suggestions description"></div>');
+          $confirmInput.parent().after('<div class="password-suggestions description"></div>');
-          innerWrapper.append(passwordMeter);
+          $passwordInputParent.append(passwordMeter);
-          passwordDescription = outerWrapper.find('div.password-suggestions').hide();
+          $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) {
+            if ($passwordSuggestions.html() !== result.message) {
-              passwordDescription.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()) {
+          if ($confirmInput.val()) {
-            passwordCheckMatch(confirmInput.val());
+            passwordCheckMatch($confirmInput.val());
-            confirmResult.css({visibility: 'visible'});
+            $confirmResult.css({visibility: 'visible'});
           }
           else {
-            confirmResult.css({visibility: 'hidden'});
+            $confirmResult.css({visibility: 'hidden'});
           }
         };
 
         // Monitor input events.
-        passwordInput.on('input', passwordCheck);
+        $passwordInput.on('input', passwordCheck);
-        confirmInput.on('input', passwordCheck);
+        $confirmInput.on('input', passwordCheck);
-      });
+      }
     }
   };
 
@@ -95,15 +102,15 @@
     var strength = 100;
     var msg = [];
 
-    var hasLowercase = /[a-z]+/.test(password);
+    var hasLowercase = /[a-z]/.test(password);
-    var hasUppercase = /[A-Z]+/.test(password);
+    var hasUppercase = /[A-Z]/.test(password);
-    var hasNumbers = /[0-9]+/.test(password);
+    var hasNumbers = /[0-9]/.test(password);
-    var hasPunctuation = /[^a-zA-Z0-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 $usernameBox = $('input.username');
-    var username = (usernameBox.length > 0) ? usernameBox.val() : translate.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 + '<ul><li>' + msg.join('</li><li>') + '</li></ul>';
-    return {strength: strength, message: msg, indicatorText: indicatorText, indicatorClass: indicatorClass};
+
+    return {
+      strength: strength,
+      message: msg,
+      indicatorText: indicatorText,
+      indicatorClass: indicatorClass
+    };
 
   };
 
-})(jQuery);
+})(jQuery, Drupal, drupalSettings);

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 = $('<input type="checkbox" class="dummy-checkbox" disabled="disabled" checked="checked" />')
+        var $dummy = $('<input type="checkbox" class="dummy-checkbox js-dummy-checkbox" disabled="disabled" checked="checked" />')
           .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 () {
+        $table
-          $dummy.clone().insertAfter(this);
+          .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');
       });
     }