user.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. (function ($) {
  2. /**
  3. * Attach handlers to evaluate the strength of any password fields and to check
  4. * that its confirmation is correct.
  5. */
  6. Drupal.behaviors.password = {
  7. attach: function (context, settings) {
  8. var translate = settings.password;
  9. $('input.password-field', context).once('password', function () {
  10. var passwordInput = $(this);
  11. var innerWrapper = $(this).parent();
  12. var outerWrapper = $(this).parent().parent();
  13. // Add identifying class to password element parent.
  14. innerWrapper.addClass('password-parent');
  15. // Add the password confirmation layer.
  16. $('input.password-confirm', outerWrapper).parent().prepend('<div class="password-confirm">' + translate['confirmTitle'] + ' <span></span></div>').addClass('confirm-parent');
  17. var confirmInput = $('input.password-confirm', outerWrapper);
  18. var confirmResult = $('div.password-confirm', outerWrapper);
  19. var confirmChild = $('span', confirmResult);
  20. // Add the description box.
  21. var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate['strengthTitle'] + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
  22. $(confirmInput).parent().after('<div class="password-suggestions description"></div>');
  23. $(innerWrapper).prepend(passwordMeter);
  24. var passwordDescription = $('div.password-suggestions', outerWrapper).hide();
  25. // Check the password strength.
  26. var passwordCheck = function () {
  27. // Evaluate the password strength.
  28. var result = Drupal.evaluatePasswordStrength(passwordInput.val(), settings.password);
  29. // Update the suggestions for how to improve the password.
  30. if (passwordDescription.html() != result.message) {
  31. passwordDescription.html(result.message);
  32. }
  33. // Only show the description box if there is a weakness in the password.
  34. if (result.strength == 100) {
  35. passwordDescription.hide();
  36. }
  37. else {
  38. passwordDescription.show();
  39. }
  40. // Adjust the length of the strength indicator.
  41. $(innerWrapper).find('.indicator').css('width', result.strength + '%');
  42. // Update the strength indication text.
  43. $(innerWrapper).find('.password-strength-text').html(result.indicatorText);
  44. passwordCheckMatch();
  45. };
  46. // Check that password and confirmation inputs match.
  47. var passwordCheckMatch = function () {
  48. if (confirmInput.val()) {
  49. var success = passwordInput.val() === confirmInput.val();
  50. // Show the confirm result.
  51. confirmResult.css({ visibility: 'visible' });
  52. // Remove the previous styling if any exists.
  53. if (this.confirmClass) {
  54. confirmChild.removeClass(this.confirmClass);
  55. }
  56. // Fill in the success message and set the class accordingly.
  57. var confirmClass = success ? 'ok' : 'error';
  58. confirmChild.html(translate['confirm' + (success ? 'Success' : 'Failure')]).addClass(confirmClass);
  59. this.confirmClass = confirmClass;
  60. }
  61. else {
  62. confirmResult.css({ visibility: 'hidden' });
  63. }
  64. };
  65. // Monitor keyup and blur events.
  66. // Blur must be used because a mouse paste does not trigger keyup.
  67. passwordInput.keyup(passwordCheck).focus(passwordCheck).blur(passwordCheck);
  68. confirmInput.keyup(passwordCheckMatch).blur(passwordCheckMatch);
  69. });
  70. }
  71. };
  72. /**
  73. * Evaluate the strength of a user's password.
  74. *
  75. * Returns the estimated strength and the relevant output message.
  76. */
  77. Drupal.evaluatePasswordStrength = function (password, translate) {
  78. var weaknesses = 0, strength = 100, msg = [];
  79. var hasLowercase = /[a-z]+/.test(password);
  80. var hasUppercase = /[A-Z]+/.test(password);
  81. var hasNumbers = /[0-9]+/.test(password);
  82. var hasPunctuation = /[^a-zA-Z0-9]+/.test(password);
  83. // If there is a username edit box on the page, compare password to that, otherwise
  84. // use value from the database.
  85. var usernameBox = $('input.username');
  86. var username = (usernameBox.length > 0) ? usernameBox.val() : translate.username;
  87. // Lose 5 points for every character less than 6, plus a 30 point penalty.
  88. if (password.length < 6) {
  89. msg.push(translate.tooShort);
  90. strength -= ((6 - password.length) * 5) + 30;
  91. }
  92. // Count weaknesses.
  93. if (!hasLowercase) {
  94. msg.push(translate.addLowerCase);
  95. weaknesses++;
  96. }
  97. if (!hasUppercase) {
  98. msg.push(translate.addUpperCase);
  99. weaknesses++;
  100. }
  101. if (!hasNumbers) {
  102. msg.push(translate.addNumbers);
  103. weaknesses++;
  104. }
  105. if (!hasPunctuation) {
  106. msg.push(translate.addPunctuation);
  107. weaknesses++;
  108. }
  109. // Apply penalty for each weakness (balanced against length penalty).
  110. switch (weaknesses) {
  111. case 1:
  112. strength -= 12.5;
  113. break;
  114. case 2:
  115. strength -= 25;
  116. break;
  117. case 3:
  118. strength -= 40;
  119. break;
  120. case 4:
  121. strength -= 40;
  122. break;
  123. }
  124. // Check if password is the same as the username.
  125. if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
  126. msg.push(translate.sameAsUsername);
  127. // Passwords the same as username are always very weak.
  128. strength = 5;
  129. }
  130. // Based on the strength, work out what text should be shown by the password strength meter.
  131. if (strength < 60) {
  132. indicatorText = translate.weak;
  133. } else if (strength < 70) {
  134. indicatorText = translate.fair;
  135. } else if (strength < 80) {
  136. indicatorText = translate.good;
  137. } else if (strength <= 100) {
  138. indicatorText = translate.strong;
  139. }
  140. // Assemble the final message.
  141. msg = translate.hasWeaknesses + '<ul><li>' + msg.join('</li><li>') + '</li></ul>';
  142. return { strength: strength, message: msg, indicatorText: indicatorText };
  143. };
  144. /**
  145. * Field instance settings screen: force the 'Display on registration form'
  146. * checkbox checked whenever 'Required' is checked.
  147. */
  148. Drupal.behaviors.fieldUserRegistration = {
  149. attach: function (context, settings) {
  150. var $checkbox = $('form#field-ui-field-edit-form input#edit-instance-settings-user-register-form');
  151. if ($checkbox.length) {
  152. $('input#edit-instance-required', context).once('user-register-form-checkbox', function () {
  153. $(this).bind('change', function (e) {
  154. if ($(this).attr('checked')) {
  155. $checkbox.attr('checked', true);
  156. }
  157. });
  158. });
  159. }
  160. }
  161. };
  162. })(jQuery);