Ajax
password strength example
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>
|
Example 2
Add
below mentioned CSS style in stylesheet.css for strength bar to show up.
CSS StyleSheet
01.BarIndicatorweak
02{
03 color:Red;
04 background-color:Red;
05}
06.BarIndicatoraverage
07{
08 color:Blue;
09 background-color:Blue;
10}
11.BarIndicatorgood
12{
13 color:Green;
14 background-color:Green;
15}
16
17.BarBorder
18{
19 border-style:solid;
20 border-width:1px;
21 padding:2px
2px 2px 2px;
22 width:200px;
23 vertical-align:middle;
24}
Now configure the passwordstrength control as shown below.
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="TextBox1" runat="server"
TextMode="Password">
</asp:TextBox>
<br />
<asp:PasswordStrength ID="PasswordStrength1"
runat="server"
TargetControlID="TextBox1"
RequiresUpperAndLowerCaseCharacters="true"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
MinimumUpperCaseCharacters="1"
PreferredPasswordLength="8"
DisplayPosition="RightSide"
StrengthIndicatorType="Text">
</asp:PasswordStrength>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"
TextMode="Password">
</asp:TextBox>
<asp:PasswordStrength ID="PasswordStrength2"
runat="server"
TargetControlID="TextBox2"
RequiresUpperAndLowerCaseCharacters="true"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
MinimumUpperCaseCharacters="1"
PreferredPasswordLength="8"
DisplayPosition="RightSide"
StrengthIndicatorType="BarIndicator"
BarBorderCssClass="BarBorder"
StrengthStyles="BarIndicatorweak;BarIndicatoraverage;BarIndicatorgood;">
</asp:PasswordStrength>
</div>
</form>
No comments:
Post a Comment