How to add Password Strength Meter to your registration page

In this article we'll show you how to add password strength meter to ASPRunnerPro/PHPRunner registration page. This meter is a handy way to show users how weak or strong their password is. This code requires ASPRunnerPro 7.x or PHPRunner 6.x in order to work properly. Download article code.

For this purpose we are going to use jQuery password strength plugin developed by Olivier Oechsle. Make sure to check plugin page if you are interested in internal workings or fancy to improve it.

See live demo

Password strength meter

 

 

 

 

 

 

 

 

Step 1. Add CSS to Register page

The following CSS code needs to be added in Visual Editor to Register page right before </HEAD> tag. Make sure you switch to HTML mode before pasting the code.

  1. <!--
  2. input[type='password'] {
  3. width: 180px;
  4. }
  5.  
  6. .passwordStrengthBar {
  7. background: white;
  8. border: 1px solid #777777;
  9. margin: 1px;
  10. width: 180px;
  11. }
  12.  
  13. .passwordStrengthBar div {
  14. height: 5px;
  15. width: 0;
  16. }
  17.  
  18. .passwordStrengthBar div.strong {
  19. background-color: #32cd32;
  20. }
  21.  
  22. .passwordStrengthBar div.medium {
  23. background-color: yellow;
  24. }
  25.  
  26. .passwordStrengthBar div.weak {
  27. background-color: orange;
  28. }
  29.  
  30. .passwordStrengthBar div.useless {
  31. background-color: red;
  32. }
  33. -->

Step 2. Add Javascript code to Register page: Javascript OnLoad event

  1. /* Intelligent Web NameSpace */
  2. var IW = IW || {};
  3.  
  4. /**
  5.  * Password validator logic
  6.  */
  7. (function(IW) {
  8.  
  9. var secondsInADay = 86400;
  10.  
  11. function PasswordValidator() {
  12. }
  13.  
  14. /**
  15.   * How long a password can be expected to last
  16.   */
  17. PasswordValidator.prototype.passwordLifeTimeInDays = 365;
  18.  
  19. /**
  20.   * An estimate of how many attempts could be made per second to guess a password
  21.   */
  22. PasswordValidator.prototype.passwordAttemptsPerSecond = 500;
  23.  
  24. /**
  25.   * An array of regular expressions to match against the password. Each is associated
  26.   * with the number of unique characters that each expression can match.
  27.   * @param password
  28.   */
  29. PasswordValidator.prototype.expressions = [
  30. {
  31. regex : /[A-Z]+/,
  32. uniqueChars : 26
  33. },
  34. {
  35. regex : /[a-z]+/,
  36. uniqueChars : 26
  37. },
  38. {
  39. regex : /[0-9]+/,
  40. uniqueChars : 10
  41. },
  42. {
  43. regex : /[!\?.;,\\@$£#*()%~<>{}\[\]]+/,
  44. uniqueChars : 17
  45. }
  46. ];
  47.  
  48. /**
  49.   * Checks the supplied password
  50.   * @param {String} password
  51.   * @return The predicted lifetime of the password, as a percentage of the defined password lifetime.
  52.   */
  53. PasswordValidator.prototype.checkPassword = function(password) {
  54.  
  55. var
  56. expressions = this.expressions,
  57. i,
  58. l = expressions.length,
  59. expression,
  60. possibilitiesPerLetterInPassword = 0;
  61.  
  62. for (i = 0; i < l; i++) {
  63.  
  64. expression = expressions[i];
  65.  
  66. if (expression.regex.exec(password)) {
  67. possibilitiesPerLetterInPassword += expression.uniqueChars;
  68. }
  69.  
  70. }
  71.  
  72. var
  73. totalCombinations = Math.pow(possibilitiesPerLetterInPassword, password.length),
  74. // how long, on average, it would take to crack this (@ 200 attempts per second)
  75. crackTime = ((totalCombinations / this.passwordAttemptsPerSecond) / 2) / secondsInADay,
  76. // how close is the time to the projected time?
  77. percentage = crackTime / this.passwordLifeTimeInDays;
  78.  
  79. return Math.min(Math.max(password.length * 5, percentage * 100), 100);
  80.  
  81. };
  82.  
  83. IW.PasswordValidator = new PasswordValidator();
  84.  
  85. })(IW);
  86.  
  87. /**
  88.  * jQuery plugin which allows you to add password validation to any
  89.  * form element.
  90.  */
  91. (function(IW, jQuery) {
  92.  
  93. function updatePassword() {
  94.  
  95. var
  96. percentage = IW.PasswordValidator.checkPassword(this.val()),
  97. progressBar = this.parent().find(".passwordStrengthBar div");
  98.  
  99. progressBar
  100. .removeClass("strong medium weak useless")
  101. .stop()
  102. .animate({"width": percentage + "%"});
  103.  
  104. if (percentage > 90) {
  105. progressBar.addClass("strong");
  106. } else if (percentage > 50) {
  107. progressBar.addClass("medium")
  108. } else if (percentage > 10) {
  109. progressBar.addClass("weak");
  110. } else {
  111. progressBar.addClass("useless");
  112. }
  113. }
  114.  
  115. jQuery.fn.passwordValidate = function() {
  116.  
  117. this
  118. .bind('keyup', jQuery.proxy(updatePassword, this))
  119. .after("
  120. <div class="passwordStrengthBar"></div>
  121.  
  122. ");
  123.  
  124. updatePassword.apply(this);
  125.  
  126. return this; // for chaining
  127.  
  128. }
  129.  
  130. })(IW, jQuery);
  131.  
  132. $("span[class='runner-nowrap']").each(function() {
  133. var $this = $(this);
  134. var t = $this.html();
  135. $this.html(t.replace(' ',''));
  136. });
  137. $("input[type='password']").next().remove();
  138. jQuery("input[id='value_Password_1']").passwordValidate();

This code assumes that your password field name is Password. Your password field name is different make sure to amend the last line of Javascript code. I.e. if password field name is pass here is how your code should look:

  1. jQuery("input[id='value_pass_1']").passwordValidate();

Additional considerations:

  • You may want to add the same code to Change password page.
  • If you decide to modify the plugin consider adding wording 'weak', 'strong' etc to the meter. You can also make sure password is not equals to username

1 comment to How to add Password Strength Meter to your registration page

  • Ben

    I don’t have a registration page but instead I have entered the code in the mentioned locations for the Change Password page. I have changed the correct password field name, but I can’t get it to work. I have also tried with adding but also with no effect.
    Have I forgotten anything?

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>