Strong Password Example #2

In this example we are displaying a bar to show the strength of the password password in a visual manner, so it is easier to understand.

With this example, we define the CSS styles the same as as with the first strong password example. The difference is that we now configure the strong password object upon initialization. We did however add a couple of new CSS rules to make working with the strength bar easier.

Additional CSS Styles

These styles are used to allow a single transparent image to be used to grow the strength idicator bar, and allow it to change colors. By using a transparent gif and CSS styles, we can minimize the amount of downloads, and also maintain standards compliance.

  1. .wdStrengthHint {   
  2.     font-size: 10px; position: absolute;
  3.     z-index: 25;     display: inline;
  4. }
  5. .wdStrongPassword {background-color: #090;}
  6. .wdIntermediatePassword { background-color: #ff1;}
  7. .wdWeakPassword {color: red; background-color: #900; }
  8. .wdTooWeakPassword {color: red; background-color: #999 }
  9. #strengthIndicator {
  10.     margin: 0px;
  11.     padding: 0px;
  12. }
  13. #strengthIndicatorContainer {
  14.     display: inline;
  15.     position: absolute;
  16.     border: 1px solid #000;
  17.     width: 160px;
  18.     height: 18px;
  19.     padding: 0;
  20.     margin: 0;
  21. }
  22. pre { font-family: Courier;}
  23.  
  24. .light {
  25.     font-style: normal; color: rgb(238, 238, 238);
  26. }
  27.  
  28. .darker {
  29.     font-style: normal; color: rgb(204, 204, 204)
  30. }

JavaScript Code

This code is used to initalize the Strong Password library, and to provide a mechanism for the bar to grow as someone types.

  1. function showStrength() {
  2.     var strn = sp.getPasswordStrength();    // get what the current strength of the
  3.                                             // password is - notice that we need to
  4.                                             // know the object name of the password.
  5.     var targetStrength = 45;                // what is the target strength of the password
  6.     var per = strn / targetStrength;        // percentage to target strength
  7.     if(per > 1 ) {
  8.         per = 1;
  9.     }
  10.     var newLen = parseInt(160 * per);
  11.     $('#strengthIndicator').removeClass($('#strengthIndicator').attr("class"));
  12.    
  13.     if(per > 0.55) {
  14.         $("#strengthIndicator").addClass('wdStrongPassword');
  15.     } else if(per > 0.33) {
  16.         $("#strengthIndicator").addClass('wdIntermediatePassword');
  17.     } else if(per > 0.22) {
  18.         $("#strengthIndicator").addClass('wdWeakPassword');
  19.     } else {
  20.         $("#strengthIndicator").addClass('wdTooWeakPassword');
  21.     }
  22.    
  23.     if(newLen < 1) {
  24.         newLen = 1;
  25.     }
  26.    
  27.     // set the width of the image so one can see how wide the
  28.     // strength indicator is.
  29.     $("#strengthIndicator").attr("width", newLen);
  30. }
  31.  
  32. sp = null;
  33.  
  34. // this function is attached to the windows.onload event method
  35. function init() {
  36.     // note that the text is a space, this allows the text to not
  37.     // be displayed.  Setting it to an empty string will not work
  38.     // as Strong Password will use the default in that case.
  39.     sp = new StrongPassword({allowSpecialChars: true,
  40.         scoreTextNotAcceptable: ' ',
  41.         scoreTextWeak: ' ',
  42.         scoreTextIntermediate: ' ',
  43.         scoreTextStrong: ' '
  44.         }, showStrength);
  45.        
  46.     // note that showStrength is passed as a handler to be called
  47.     // as the user types, this is how the bar is "automatically" moved.
  48. }