ASP.NET - Password Strength Indicator using jQuery and XML
page 6 of 8
by Bryian Tan
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 47165/ 117

Display Different Colors in the Progress Bar

I have received several suggestions from the reader to have different colors in the progress bar meter. I tried to implement this with the least possible change to the existing code. The current implementation does not have a complex algorithm to assign different weights to the characters. Here's how I implemented it, please refer to listing 5 for full details.

 

1.    The colors is based on the password length

2.    If the password length between 0 and 33 percent, display red color

3.    If the password length between 33 and 67 percent, display blue color

4.    If above 67 percent, display the color specified in the PasswordPolicy.xml file

 

I also added useMultipleColors attribute to the PasswordPolixy.xml to give users the option to enable or disable the multiple colors.

Listing 5

    //use multiple colors
    if (password_settings.useMultipleColors === "1") {
      //first 33% is red
      if (parseInt(strengthPercent) >= 0 && 
            parseInt(strengthPercent) <= (barWidth * .33)) {
            backColor = "red";
      }
      //33% to 66% is blue
      else if (parseInt(strengthPercent) >= (barWidth * .33) && 
            parseInt(strengthPercent) <= (barWidth * .67)) {
            backColor = "blue";
      }
      else {
        backColor = password_settings.barColor;
      }
    }
 

View Entire Article

User Comments

Title: sdfsdf   
Name: sdfd
Date: 2012-08-31 10:21:04 AM
Comment:
sdfsfs
Title: sgwg   
Name: asdf
Date: 2012-08-30 11:06:21 PM
Comment:
asfsadffsadfasdfasf
Title: asdf   
Name: asdf
Date: 2012-08-30 11:05:30 PM
Comment:
asdfsf
Title: jashova   
Name: Esa
Date: 2011-02-14 6:27:36 AM
Comment:
Good post
Title: Download and demo links   
Name: Bryian Tan
Date: 2011-02-01 7:37:32 PM
Comment:
Hello,

I forgot to include the correct link to the download and demo in the original post. Here is the link.

Watch this script in action
http://download.ysatech.com/ASP-NET-jQuery-Password-Strength
Download Sample
http://download.ysatech.com/ASP-NET-jQuery-Password-Strength/Password_Strength_Indicator.zip






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-10-27 4:32:22 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search