diff --git a/core/modules/user/user.js b/core/modules/user/user.js index 45181fb..86b7901 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -1,4 +1,4 @@ -(function ($) { +(function ($, Drupal, drupalSettings) { "use strict"; @@ -8,36 +8,43 @@ */ Drupal.behaviors.password = { attach: function (context, settings) { - var translate = settings.password; - $(context).find('input.password-field').once('password', function () { - var passwordInput = $(this); - var innerWrapper = $(this).parent(); - var outerWrapper = $(this).parent().parent(); + var $passwordInput = $(context).find('input.password-field').once('password'); + + if ($passwordInput.length) { + var translate = settings.password; + + var $passwordInputParent = $passwordInput.parent(); + var $passwordInputParentWrapper = $passwordInputParent.parent(); // 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'); - var confirmChild = confirmResult.find('span'); + $passwordInputParentWrapper + .find('input.password-confirm') + .parent() + .append('
' + translate.confirmTitle + '
') + .addClass('confirm-parent'); + + var $confirmInput = $passwordInputParentWrapper.find('input.password-confirm'); + var $confirmResult = $passwordInputParentWrapper.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 + '
'; - confirmInput.parent().after('
'); - innerWrapper.append(passwordMeter); - var passwordDescription = outerWrapper.find('div.password-suggestions').hide(); + $confirmInput.parent().after('
'); + $passwordInputParent.append(passwordMeter); + var $passwordSuggestions = $passwordInputParentWrapper.find('div.password-suggestions').hide(); } // Check that password and confirmation inputs match. - var passwordCheckMatch = function (confirmInputVal) { - var success = passwordInput.val() === confirmInputVal; + var passwordCheckMatch = function (confirmInputVal, password) { + var success = password === 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); }; @@ -45,40 +52,42 @@ Drupal.behaviors.password = { 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('.indicator') - .css('width', result.strength + '%') - .css('background-color', result.indicatorColor); + $passwordInputParent.find('.indicator') + .css({ + 'width': result.strength + '%', + 'background-color': result.indicatorColor + }); // Update the strength indication text. - innerWrapper.find('.password-strength-text').html(result.indicatorText); + $passwordInputParent.find('.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(), $passwordInput.val()); + $confirmResult.css({ visibility: 'visible' }); } else { - confirmResult.css({ visibility: 'hidden' }); + $confirmResult.css({ visibility: 'hidden' }); } }; // Monitor input events. - $.each([passwordInput, confirmInput], function () { + $.each([$passwordInput, $confirmInput], function () { this.bind('input', passwordCheck); }); - }); + } } }; @@ -90,15 +99,15 @@ Drupal.behaviors.password = { Drupal.evaluatePasswordStrength = function (password, translate) { var indicatorText, indicatorColor, weaknesses = 0, strength = 100, 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 $usernameInput = $('input.username'); + var username = ($usernameInput.length > 0) ? $usernameInput.val() : translate.username; // Lose 5 points for every character less than 6, plus a 30 point penalty. if (password.length < 6) { @@ -167,7 +176,13 @@ Drupal.evaluatePasswordStrength = function (password, translate) { // Assemble the final message. msg = translate.hasWeaknesses + ''; - return { strength: strength, message: msg, indicatorText: indicatorText, indicatorColor: indicatorColor }; + + return { + strength: strength, + message: msg, + indicatorText: indicatorText, + indicatorColor: indicatorColor + }; }; @@ -177,19 +192,19 @@ Drupal.evaluatePasswordStrength = function (password, translate) { */ Drupal.behaviors.fieldUserRegistration = { attach: function (context, settings) { - var $checkbox = $('form#field-ui-field-edit-form input#edit-instance-settings-user-register-form'); + var $checkbox = $('#edit-instance-settings-user-register-form'); if ($checkbox.length) { $(context).find('input#edit-instance-required').once('user-register-form-checkbox', function () { - $(this).bind('change', function (e) { + $(this).on('change', function (e) { if ($(this).prop('checked')) { $checkbox.prop('checked', true); } }); }); - } + } }; -})(jQuery); +})(jQuery, Drupal, drupalSettings); diff --git a/core/modules/user/user.permissions.js b/core/modules/user/user.permissions.js index 15658a9..1ac70d3 100644 --- a/core/modules/user/user.permissions.js +++ b/core/modules/user/user.permissions.js @@ -8,16 +8,16 @@ Drupal.behaviors.permissions = { attach: function (context) { var self = this; - $('table#permissions').once('permissions', function () { + var $table = $('#permissions').once('permissions'); + if($table.length) { // On a site with many roles and permissions, this behavior initially has // to perform thousands of DOM manipulations to inject checkboxes and hide // them. By detaching the table from the DOM, all operations can be // performed without triggering internal layout and re-rendering processes // in the browser. - var $table = $(this); - var $ancestor, method; - if ($table.prev().length) { - $ancestor = $table.prev(); + var method; + var $ancestor = $table.prev(); + if ($ancestor.length) { method = 'after'; } else { @@ -35,20 +35,22 @@ Drupal.behaviors.permissions = { .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('.rid-anonymous, .rid-authenticated') + .addClass('real-checkbox') + .after($dummy); + + + $table.on('click.permissions', 'input[type=checkbox].rid-authenticated', self.toggle); // Initialize the authenticated user checkbox. - $table.find('input[type=checkbox].rid-authenticated') - .bind('click.permissions', self.toggle) - // .triggerHandler() cannot be used here, as it only affects the first - // element. - .each(self.toggle); + $table.find('input[type=checkbox].rid-authenticated').each(self.toggle); // Re-insert the table into the DOM. $ancestor[method]($table); - }); + } }, /**