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;
}
}
