comparison core/modules/user/user.es6.js @ 4:a9cd425dd02b

Update, including to Drupal core 8.6.10

 /**
  * @file
  * User behaviors.
  */
 
-(function ($, Drupal, drupalSettings) {
+(function($, Drupal, drupalSettings) {
   /**
    * Attach handlers to evaluate the strength of any password fields and to
    * check that its confirmation is correct.
    *
    * @type {Drupal~behavior}

    *   Attaches password strength indicator and other relevant validation to
    *   password fields.
    */
   Drupal.behaviors.password = {
     attach(context, settings) {
-      const $passwordInput = $(context).find('input.js-password-field').once('password');
+      const $passwordInput = $(context)
+        .find('input.js-password-field')
+        .once('password');
 
       if ($passwordInput.length) {
         const translate = settings.password;
 
         const $passwordInputParent = $passwordInput.parent();

 
         // Add the password confirmation layer.
         $passwordInputParentWrapper
           .find('input.js-password-confirm')
           .parent()
-          .append(`<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">${translate.confirmTitle} <span></span></div>`)
+          .append(
+            `<div aria-live="polite" aria-atomic="true" class="password-confirm js-password-confirm">${
+              translate.confirmTitle
+            } <span></span></div>`,
+          )
           .addClass('confirm-parent');
 
-        const $confirmInput = $passwordInputParentWrapper.find('input.js-password-confirm');
-        const $confirmResult = $passwordInputParentWrapper.find('div.js-password-confirm');
+        const $confirmInput = $passwordInputParentWrapper.find(
+          'input.js-password-confirm',
+        );
+        const $confirmResult = $passwordInputParentWrapper.find(
+          'div.js-password-confirm',
+        );
         const $confirmChild = $confirmResult.find('span');
 
         // If the password strength indicator is enabled, add its markup.
         if (settings.password.showStrengthIndicator) {
-          const passwordMeter = `<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator js-password-strength__indicator"></div></div><div aria-live="polite" aria-atomic="true" class="password-strength__title">${translate.strengthTitle} <span class="password-strength__text js-password-strength__text"></span></div></div>`;
-          $confirmInput.parent().after('<div class="password-suggestions description"></div>');
+          const passwordMeter = `<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator js-password-strength__indicator"></div></div><div aria-live="polite" aria-atomic="true" class="password-strength__title">${
+            translate.strengthTitle
+          } <span class="password-strength__text js-password-strength__text"></span></div></div>`;
+          $confirmInput
+            .parent()
+            .after('<div class="password-suggestions description"></div>');
           $passwordInputParent.append(passwordMeter);
-          $passwordSuggestions = $passwordInputParentWrapper.find('div.password-suggestions').hide();
+          $passwordSuggestions = $passwordInputParentWrapper
+            .find('div.password-suggestions')
+            .hide();
         }
 
         // Check that password and confirmation inputs match.
-        const passwordCheckMatch = function (confirmInputVal) {
+        const passwordCheckMatch = function(confirmInputVal) {
           const success = $passwordInput.val() === confirmInputVal;
           const 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);
+          $confirmChild
+            .html(translate[`confirm${success ? 'Success' : 'Failure'}`])
+            .removeClass('ok error')
+            .addClass(confirmClass);
         };
 
         // Check the password strength.
-        const passwordCheck = function () {
+        const passwordCheck = function() {
           if (settings.password.showStrengthIndicator) {
             // Evaluate the password strength.
-            const result = Drupal.evaluatePasswordStrength($passwordInput.val(), settings.password);
+            const result = Drupal.evaluatePasswordStrength(
+              $passwordInput.val(),
+              settings.password,
+            );
 
             // Update the suggestions for how to improve the password.
             if ($passwordSuggestions.html() !== result.message) {
               $passwordSuggestions.html(result.message);
             }

             // Only show the description box if a weakness exists in the
             // password.
             $passwordSuggestions.toggle(result.strength !== 100);
 
             // Adjust the length of the strength indicator.
-            $passwordInputParent.find('.js-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.
-            $passwordInputParent.find('.js-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' });
-          }
-          else {
+          } else {
             $confirmResult.css({ visibility: 'hidden' });
           }
         };
 
         // Monitor input events.

    *   An object containing the text to display for each strength level.
    *
    * @return {object}
    *   An object containing strength, message, indicatorText and indicatorClass.
    */
-  Drupal.evaluatePasswordStrength = function (password, translate) {
+  Drupal.evaluatePasswordStrength = function(password, translate) {
     password = password.trim();
     let indicatorText;
     let indicatorClass;
     let weaknesses = 0;
     let strength = 100;

     const 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.
     const $usernameBox = $('input.username');
-    const username = ($usernameBox.length > 0) ? $usernameBox.val() : translate.username;
+    const username =
+      $usernameBox.length > 0 ? $usernameBox.val() : translate.username;
 
     // Lose 5 points for every character less than 12, plus a 30 point penalty.
     if (password.length < 12) {
       msg.push(translate.tooShort);
-      strength -= ((12 - password.length) * 5) + 30;
+      strength -= (12 - password.length) * 5 + 30;
     }
 
     // Count weaknesses.
     if (!hasLowercase) {
       msg.push(translate.addLowerCase);

     // Based on the strength, work out what text should be shown by the
     // password strength meter.
     if (strength < 60) {
       indicatorText = translate.weak;
       indicatorClass = 'is-weak';
-    }
-    else if (strength < 70) {
+    } else if (strength < 70) {
       indicatorText = translate.fair;
       indicatorClass = 'is-fair';
-    }
-    else if (strength < 80) {
+    } else if (strength < 80) {
       indicatorText = translate.good;
       indicatorClass = 'is-good';
-    }
-    else if (strength <= 100) {
+    } else if (strength <= 100) {
       indicatorText = translate.strong;
       indicatorClass = 'is-strong';
     }
 
     // Assemble the final message.
-    msg = `${translate.hasWeaknesses}<ul><li>${msg.join('</li><li>')}</li></ul>`;
+    msg = `${translate.hasWeaknesses}<ul><li>${msg.join(
+      '</li><li>',
+    )}</li></ul>`;
 
     return {
       strength,
       message: msg,
       indicatorText,
       indicatorClass,
     };
   };
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);