Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Ajax password strength example | Password Strength indicator in Ajax

Mar 22, 2011
Introduction:

Here I will explain how to use Ajax password strength control to display the password strength during registration of user using asp.net.

Description:

I have one registration page that allows users to register in website at that time I need to display password length, number of minimum characters required and number of minimum numbers and special characters required and at the same time I need to display the password strength like poor, average, good etc. To achieve my requirement I used Ajax Password strength control to display password strength. Here we can display password strength in two styles
1.      1) Text
2.      2) BarIndicator
Now I can explain how to show the basic password strength using Text indicatortype with Ajax passwordStrength control.

First add AjaxControlToolkit reference to your application and design your aspx page like this
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Password Strength Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManger1" runat="server"></asp:ScriptManager>
<div>
<table>
<tr>
<td>
Enter Password:
</td>
<td>
<asp:TextBox runat="server" ID="txtPassword" TextMode="Password"/>
</td>
</tr>
</table> 
<ajax:PasswordStrength ID="pwdStrength" StrengthIndicatorType="Text" PrefixText="Strength:" runat="server" TargetControlID="txtPassword"/>
</div>
</form>
</body>
</html>
After that run your application and type password in textbox that should be like this


I have displayed password strength by using default functionality of password strength control we can customize the display style of password strength and display help text for password and we can change the text to display password strength and we can do lot more with this control. Here I will explain all the available properties for this control.

TargetControlID – we need to give ID of the textbox for which we need to display password strength. 

DisplayPosition – This property is used to adjust the Positioning of the strength indicator relative to the target control

StrengthIndicatorType – This property is used to select Strength indicator type (Text or BarIndicator)

PreferredPasswordLength - This property is used to select preferred length of the password

PrefixText - This property is used prefix text to display password range text (ex: Strength: Average) when StrengthIndicatorType=Text

TextCssClass – This property is used to apply CSS class to the text display when StrengthIndicatorType=Text

MinimumNumericCharacters –This property is used to specify number of minimum numeric characters required.

MinimumSymbolCharacters - This property is used to specify number of minimum symbol characters (ex: $ ^ *) required.

RequiresUpperAndLowerCaseCharacters - This property is used to specify whether mixed case characters are required

MinimumLowerCaseCharacters - This property effects only if RequiresUpperAndLowerCaseCharacters property is true. Specifies the minimum number of lowercase characters required when requiring mixed case characters as part of your password strength considerations.

MinimumUpperCaseCharacters - This property effects only if RequiresUpperAndLowerCaseCharacters property is true. Specifies the minimum number of uppercase characters required when requiring mixed case characters as part of your password strength considerations.

TextStrengthDescriptions - This property is used to specify List of semi-colon separated descriptions used (poor; Weak; Average; Good) when StrengthIndicatorType=Text (Minimum of 2, maximum of 10; order is weakest to strongest)

CalculationWeightings - This property is used to define List of semi-colon separated numeric values used to determine the weighting of a strength characteristic. It must be total of 100. The default weighting values are defined just like this as 50;15;15;20.

BarBorderCssClass - This CSS class applied to the bar indicator's border when StrengthIndicatorType=BarIndicator

BarIndicatorCssClass - CSS class applied to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator

StrengthStyles - This property is used to define List of semi-colon separated CSS classes that are used depending on the password's strength. This property will cause the style to change based on the password strength and also to the number of styles specified in this property. For example, if 2 styles are defined like StrengthStyles="style1;style2" then style1 is applied when the password strength is less than 50%, and style2 is applied when password strength is >= 50%. This property can have up to 10 styles.

HelpStatusLabelID – This Property is used to assign label ID to display help text

HelpHandleCssClass – This Property is used to assign CSSClass for help text.

HelpHandlePosition - This Property is used to define Positioning of the help handle element relative to the target control.

Now I will explain how to use all the properties in our code to display the password strength.

Here I will explain both Text and Bar indicator types in one example. 

First add AjaxControlToolkit reference to your application and design your aspx page like this
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Password Strength Example</title>
<style type="text/css">
.VeryPoorStrength
{
background: Red;
color:White;
font-weight:bold;
}
.WeakStrength
{
background: Gray;
color:White;
font-weight:bold;
}
.AverageStrength
{
background: orange;
color:black;
font-weight:bold;
}
.GoodStrength

{
background: blue;
color:White;
font-weight:bold;
}
.ExcellentStrength

{
background: Green;
color:White;
font-weight:bold;
}
.BarBorder
{
border-style: solid;
border-width: 1px;
width: 180px;
padding:2px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManger1" runat="server"></asp:ScriptManager>
<div>
<table>
<tr>
<td>
Enter Password:
</td>
<td>
<asp:TextBox runat="server" ID="txtPassword" TextMode="Password"/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Label ID="lblhelp" runat="server"/>
</td>
</tr>
<tr>
<td>
Enter Password:
</td>
<td>
<asp:TextBox runat="server" ID="txtpwd1" TextMode="Password"/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Label ID="lblhelp1" runat="server"/>
</td>
</tr>
</table> 
<ajax:PasswordStrength ID="pwdStrength" TargetControlID="txtPassword" StrengthIndicatorType="Text" PrefixText="Strength:" HelpStatusLabelID="lblhelp" PreferredPasswordLength="8"
MinimumNumericCharacters="1" MinimumSymbolCharacters="1" TextStrengthDescriptions="Very Poor;Weak;Average;Good;Excellent" TextStrengthDescriptionStyles="VeryPoorStrength;WeakStrength;
AverageStrength;GoodStrength;ExcellentStrength" runat="server" />
<ajax:PasswordStrength ID="PasswordStrength1" TargetControlID="txtpwd1" StrengthIndicatorType="BarIndicator" PrefixText="Strength:" HelpStatusLabelID="lblhelp1" PreferredPasswordLength="8"
MinimumNumericCharacters="1" MinimumSymbolCharacters="1" BarBorderCssClass="BarBorder" TextStrengthDescriptionStyles="VeryPoorStrength;WeakStrength;
AverageStrength;GoodStrength;ExcellentStrength" runat="server" />
</div>
</form>
</body>
</html>
Demo
Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

13 comments :

ANIL KUMAR REDDY said...

excellent suresh

Unknown said...

thank u sir.......it will be helpful in my project......

C.D.Malavi said...

Thank You sir... This is very helpful ...

Anonymous said...

kevvv

Unknown said...

Thank you very much. Can someone tell me how to get the strength from the pwdStrength and use it to do something in code?

Amreen said...

I am not getting the desired output help me.

Anonymous said...

Thanq Suresh.. Helped me a lot:-)

Unknown said...

nice job dear...

Anonymous said...

doesn't work inside createuserwizard control (even as a template) :(

Anonymous said...

I didn't Get desire output..
evenif i downloaded the code and try it i didn't get..
pls help

Unknown said...

tq Suresh,its working but how to validate it from change password button

Harshal said...

Can you tell me which property has been replaced with Strength?

Chirag said...

super codeing

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.