user.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Drupal) {
  8. Drupal.behaviors.password = {
  9. attach: function attach(context, settings) {
  10. var $passwordInput = $(context).find('input.js-password-field').once('password');
  11. if ($passwordInput.length) {
  12. var translate = settings.password;
  13. var $passwordInputParent = $passwordInput.parent();
  14. var $passwordWidget = $passwordInput.closest('.js-form-type-password-confirm');
  15. var $passwordConfirmInput = $passwordWidget.find('input.js-password-confirm');
  16. var $passwordInputHelp = $(Drupal.theme.passwordInputHelp(translate.strengthTitle));
  17. var $passwordConfirmHelp = $(Drupal.theme.passwordConfirmHelp(translate.confirmTitle));
  18. var $passwordInputStrengthBar = $passwordInputHelp.find('.js-password-strength-bar');
  19. var $passwordInputStrengthMessageWrapper = $passwordInputHelp.find('.js-password-strength-text');
  20. var $passwordConfirmMatch = $passwordConfirmHelp.find('.js-password-match-text');
  21. var $passwordSuggestionsTips = $(Drupal.theme.passwordSuggestionsTips('', '')).hide();
  22. if (settings.password.showStrengthIndicator) {
  23. $passwordConfirmInput.after($passwordConfirmHelp).parent().after($passwordSuggestionsTips);
  24. $passwordInputParent.append($passwordInputHelp);
  25. }
  26. var passwordCheckMatch = function passwordCheckMatch(confirmInputVal) {
  27. if (confirmInputVal) {
  28. var success = $passwordInput.val() === confirmInputVal;
  29. var confirmClass = success ? 'ok' : 'error';
  30. var confirmMatchMessage = success ? translate.confirmSuccess : translate.confirmFailure;
  31. if (!$passwordConfirmMatch.hasClass(confirmClass) || !$passwordConfirmMatch.html() === confirmMatchMessage) {
  32. $passwordConfirmMatch.html(confirmMatchMessage).removeClass('ok error').addClass(confirmClass);
  33. }
  34. }
  35. };
  36. var passwordCheck = function passwordCheck() {
  37. if (settings.password.showStrengthIndicator) {
  38. var result = Drupal.evaluatePasswordStrength($passwordInput.val(), settings.password);
  39. var $newSuggestions = $(Drupal.theme.passwordSuggestionsTips(translate.hasWeaknesses, result.tips));
  40. if ($newSuggestions.html() !== $passwordSuggestionsTips.html()) {
  41. $passwordSuggestionsTips.replaceWith($newSuggestions);
  42. $passwordSuggestionsTips = $newSuggestions;
  43. $passwordSuggestionsTips.toggle(result.strength !== 100);
  44. }
  45. $passwordInputStrengthBar.css('width', result.strength + '%').removeClass('is-weak is-fair is-good is-strong').addClass(result.indicatorClass);
  46. if (!$passwordInputStrengthMessageWrapper.hasClass(result.indicatorClass) || !$passwordInputStrengthMessageWrapper.html() === result.indicatorText) {
  47. $passwordInputStrengthMessageWrapper.html(result.indicatorText).removeClass('is-weak is-fair is-good is-strong').addClass(result.indicatorClass);
  48. }
  49. }
  50. $passwordWidget.removeClass('is-initial').removeClass('is-password-empty is-password-filled').removeClass('is-confirm-empty is-confirm-filled');
  51. $passwordWidget.addClass($passwordInput.val() ? 'is-password-filled' : 'is-password-empty');
  52. passwordCheckMatch($passwordConfirmInput.val());
  53. $passwordWidget.addClass($passwordConfirmInput.val() ? 'is-confirm-filled' : 'is-confirm-empty');
  54. };
  55. $passwordWidget.addClass($passwordInput.val() ? 'is-password-filled' : 'is-password-empty').addClass($passwordConfirmInput.val() ? 'is-confirm-filled' : 'is-confirm-empty');
  56. $passwordInput.on('input', passwordCheck);
  57. $passwordConfirmInput.on('input', passwordCheck);
  58. }
  59. }
  60. };
  61. Drupal.evaluatePasswordStrength = function (password, translate) {
  62. password = password.trim();
  63. var indicatorText = void 0;
  64. var indicatorClass = void 0;
  65. var weaknesses = 0;
  66. var strength = 100;
  67. var tips = [];
  68. var hasLowercase = /[a-z]/.test(password);
  69. var hasUppercase = /[A-Z]/.test(password);
  70. var hasNumbers = /[0-9]/.test(password);
  71. var hasPunctuation = /[^a-zA-Z0-9]/.test(password);
  72. var $usernameBox = $('input.username');
  73. var username = $usernameBox.length > 0 ? $usernameBox.val() : translate.username;
  74. if (password.length < 12) {
  75. tips.push(translate.tooShort);
  76. strength -= (12 - password.length) * 5 + 30;
  77. }
  78. if (!hasLowercase) {
  79. tips.push(translate.addLowerCase);
  80. weaknesses += 1;
  81. }
  82. if (!hasUppercase) {
  83. tips.push(translate.addUpperCase);
  84. weaknesses += 1;
  85. }
  86. if (!hasNumbers) {
  87. tips.push(translate.addNumbers);
  88. weaknesses += 1;
  89. }
  90. if (!hasPunctuation) {
  91. tips.push(translate.addPunctuation);
  92. weaknesses += 1;
  93. }
  94. switch (weaknesses) {
  95. case 1:
  96. strength -= 12.5;
  97. break;
  98. case 2:
  99. strength -= 25;
  100. break;
  101. case 3:
  102. strength -= 40;
  103. break;
  104. case 4:
  105. strength -= 40;
  106. break;
  107. default:
  108. break;
  109. }
  110. if (password !== '' && password.toLowerCase() === username.toLowerCase()) {
  111. tips.push(translate.sameAsUsername);
  112. strength = 5;
  113. }
  114. if (strength < 60) {
  115. indicatorText = translate.weak;
  116. indicatorClass = 'is-weak';
  117. } else if (strength < 70) {
  118. indicatorText = translate.fair;
  119. indicatorClass = 'is-fair';
  120. } else if (strength < 80) {
  121. indicatorText = translate.good;
  122. indicatorClass = 'is-good';
  123. } else if (strength <= 100) {
  124. indicatorText = translate.strong;
  125. indicatorClass = 'is-strong';
  126. }
  127. return {
  128. strength: strength,
  129. tips: tips,
  130. indicatorText: indicatorText,
  131. indicatorClass: indicatorClass
  132. };
  133. };
  134. Drupal.theme.passwordInputHelp = function (message) {
  135. return '<div class="password-strength">\n <div class="password-strength__track">\n <div class="password-strength__bar js-password-strength-bar"></div>\n </div>\n <div aria-live="polite" aria-atomic="true" class="password-strength__title">\n ' + message + ' <span class="password-strength__text js-password-strength-text"></span>\n </div>\n </div>';
  136. };
  137. Drupal.theme.passwordConfirmHelp = function (message) {
  138. return '<div aria-live="polite" aria-atomic="true" class="password-match-message">' + message + ' <span class="password-match-message__text js-password-match-text"></span></div>';
  139. };
  140. Drupal.theme.passwordSuggestionsTips = function (title, tips) {
  141. return '<div class="password-suggestions">' + (tips.length ? title + '<ul class="password-suggestions__tips"><li class="password-suggestions__tip">' + tips.join('</li><li class="password-suggestions__tip">') + '</li></ul>' : '') + '</div>';
  142. };
  143. })(jQuery, Drupal);