passwordMeter.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /* global jqueryReady, policyPattern, zxcvbn, passwordStrengthI18n */
  2. /*eslint-disable no-unused-vars*/
  3. function jqueryReady() {
  4. var strength = passwordStrengthI18n;
  5. $.fn.zxcvbnProgressBar = function (options) {
  6. //init settings
  7. var settings = $.extend({
  8. allProgressBarClasses: 'progress-bar-danger progress-bar-warning progress-bar-success progress-bar-striped active',
  9. progressBarClass0: 'progress-bar-danger progress-bar-striped active',
  10. progressBarClass1: 'progress-bar-danger progress-bar-striped active',
  11. progressBarClass2: 'progress-bar-warning progress-bar-striped active',
  12. progressBarClass3: 'progress-bar-success',
  13. progressBarClass4: 'progress-bar-success'
  14. }, options);
  15. return this.each(function () {
  16. settings.progressBar = this;
  17. //init progress bar display
  18. UpdateProgressBar();
  19. //Update progress bar on each keypress of password input
  20. $(settings.passwordInput).keyup(function (event) {
  21. UpdateProgressBar();
  22. });
  23. });
  24. function UpdateProgressBar() {
  25. var progressBar = settings.progressBar;
  26. var password = $('#password').val();
  27. if (password) {
  28. var result = zxcvbn(password, settings.userInputs);
  29. //result.score: 0, 1, 2, 3 or 4 - if crack time is less than 10**2, 10**4, 10**6, 10**8, Infinity.
  30. var scorePercentage = (result.score + 1) * 20;
  31. $(progressBar).css('width', scorePercentage + '%');
  32. if (result.score == 0) {
  33. //weak
  34. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0);
  35. $(progressBar).html(strength[0]);
  36. }
  37. else if (result.score == 1) {
  38. //normal
  39. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass1);
  40. $(progressBar).html(strength[1]);
  41. }
  42. else if (result.score == 2) {
  43. //medium
  44. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass2);
  45. $(progressBar).html(strength[2]);
  46. }
  47. else if (result.score == 3) {
  48. //strong
  49. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass3);
  50. $(progressBar).html(strength[3]);
  51. }
  52. else if (result.score == 4) {
  53. //very strong
  54. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass4);
  55. $(progressBar).html(strength[4]);
  56. }
  57. }
  58. else {
  59. $(progressBar).css('width', '0%');
  60. $(progressBar).removeClass(settings.allProgressBarClasses).addClass(settings.progressBarClass0);
  61. $(progressBar).html('');
  62. }
  63. }
  64. };
  65. var policyPatternRegex = new RegExp(policyPattern);
  66. var password = document.getElementById('password');
  67. var confirmed = document.getElementById('confirmedPassword');
  68. password.addEventListener('input', validate);
  69. confirmed.addEventListener('input', validate);
  70. var alertSettings = {
  71. allAlertClasses: 'fa-times-circle fa-exclamation-circle fa-info-circle fa-check-circle',
  72. alertClassDanger: 'fa-times-circle',
  73. alertClassWarning: 'fa-exclamation-circle',
  74. alertClassInfo: 'fa-info-circle',
  75. alertClassSuccess: 'fa-check-circle'
  76. };
  77. function validate() {
  78. var val = password.value;
  79. var cnf = confirmed.value;
  80. $('#password-policy-violation-msg').hide();
  81. $('#password-confirm-mismatch-msg').hide();
  82. var passwordPolicyViolated = val === '' || !policyPatternRegex.test(val);
  83. var passwordMismatch = val !== '' && val !== cnf;
  84. var disableSubmit = passwordPolicyViolated || passwordMismatch;
  85. $('#submit').prop('disabled', disableSubmit);
  86. var result = zxcvbn(val);
  87. $('#strengthProgressBar').zxcvbnProgressBar({ passwordInput: '#password' });
  88. // Check strength, update the text indicator
  89. if (val !== '') {
  90. $('#password-strength-warning').text(result.feedback.warning);
  91. $('#password-strength-suggestions').text(result.feedback.suggestions);
  92. var clz = alertSettings.alertClassDanger;
  93. switch (result.score) {
  94. case 0:
  95. case 1:
  96. clz = alertSettings.alertClassDanger;
  97. break;
  98. case 2:
  99. clz = alertSettings.alertClassWarning;
  100. break;
  101. case 3:
  102. clz = alertSettings.alertClassInfo;
  103. break;
  104. case 4:
  105. case 5:
  106. default:
  107. clz = alertSettings.alertClassSuccess;
  108. break;
  109. }
  110. $('#password-strength-icon').removeClass(alertSettings.allAlertClasses).addClass(clz);
  111. } else {
  112. $('#password-strength-icon').removeClass(alertSettings.allAlertClasses);
  113. $('#password-strength-warning').text('');
  114. $('#password-strength-suggestions').text('');
  115. }
  116. // Check for mismatch
  117. if (passwordMismatch && cnf !== '') {
  118. $('#password-confirm-mismatch-msg').show();
  119. }
  120. // Check password policy
  121. if (passwordPolicyViolated) {
  122. $('#password-policy-violation-msg').show();
  123. return;
  124. }
  125. }
  126. }