Wednesday 23 January 2013

Simplest way to add a password strength indicator




Using ASP.NET AJAX Control toolkit:

<asp:TextBox ID="TextBox_Password" runat="server" Width="220px"></asp:TextBox>
<ajaxToolkit:PasswordStrength ID="PasswordStrength_Password" runat="server
   TargetControlID="TextBox_Password"
   DisplayPosition="RightSide"
 
   StrengthIndicatorType="BarIndicator"
 
   PreferredPasswordLength="8"
   MinimumNumericCharacters="1"
   MinimumSymbolCharacters="1"
   RequiresUpperAndLowerCaseCharacters="true"
 
   TextStrengthDescriptions="Very Poor;Weak;Average;Strong;Excellent"
   BarBorderCssClass="barIndicatorBorder"
   StrengthStyles="barIndicator_VeryPoor; barIndicator_Weak; barIndicator_Average; barIndicator_Strong; barIndicator_Excellent"

   CalculationWeightings="50;15;15;20" />


Styles in css:

/*Password strength bar*/
.barIndicatorBorder {
    border: solid 1px #c0c0c0;
    width: 200px;
}

.barIndicator_VeryPoor {
    background-color: red;
}

.barIndicator_Weak {
    background-color: orange;
}

.barIndicator_Average {
    background-color: lightblue;
}

.barIndicator_Strong {
    background-color: greenyellow;
}

.barIndicator_Excellent {
    background-color: green;
}


No comments:

Post a Comment