Blog

Password Strength Control of AJAX using Bar Indicator and Text

Posted by Vijay Prativadi in Blogs | AJAX in C# on Nov 26, 2011

Today, let's see how to create a simple application with a textbox to validate its password strength. We will then add some css class to provide good look and feel of application. We will create a password Strength using Ajax Control Toolkit. We will work on both the StrengthIndicator Types: Bar and Text.

Tweet
1210
0

So, Code for Password Strength Indicator looks like this:

<Ajax:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator" TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true" RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1" MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1" MinimumNumericCharacters="1" PreferredPasswordLength="10" TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent" StrengthStyles="VeryPoor; Weak; Average; Excellent; Strong;" CalculationWeightings="25;25;15;35" BarBorderCssClass="border" HelpStatusLabelID="Label1">

</Ajax:PasswordStrength>

And Complete Source Code looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Password_Strength.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.VeryPoor
{
background-color:red;
}

.Weak
{
background-color:orange;
}

.Average
{
  background-color: #A52A2A
}
.Excellent
{
background-color:yellow;
}
.Strong
{
background-color:green;
}
.border
{
  border: medium solid #800000;
  width:500px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</Ajax:ToolkitScriptManager>
<center>
Please Enter Password: <asp:TextBox ID="TextBox1" runat="server
TextMode="Password"></asp:TextBox>
</center><br />

<Ajax:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator"
TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true
RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1"
MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1
MinimumNumericCharacters="1" PreferredPasswordLength="10"
TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent"
StrengthStyles="VeryPoor; Weak; Average; Excellent; Strong;"
CalculationWeightings="25;25;15;35" BarBorderCssClass="border
HelpStatusLabelID="Label1">

</Ajax:PasswordStrength>
</div>
<br />
<br /><br />
<br />
<div>
<Ajax:PasswordStrength ID="PasswordStrength2" runat="server
DisplayPosition="BelowLeft" StrengthIndicatorType="Text"
TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true
RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1"
MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1
MinimumNumericCharacters="1" PreferredPasswordLength="10"
TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent"
BarBorderCssClass="border">
</Ajax:PasswordStrength>
</div>
<div><br /><br />
<center>
<asp:Label ID="Label1" runat="server" Font-Bold="true" Font-Size="Medium
ForeColor="Brown"></asp:Label>
</center>
</div>

</form>
</body>
</html>