Password Strength Control of AJAX using Bar Indicator and Text

Vijay Prativadi
13y
42.4k
0
3
25
Blog

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>

Output of this program:

For Weak Password:

weak password.png

For Strong Password:

Strong Pasword.jpg