Ajax PasswordStrength Control to display password strength


This article explains the uses and properties of Ajax PasswordStrength control. This control is used with password Textbox. In almost all application we create user registration form where we ask the user to enter their password, this extender can be used at that time. Using this control we can inform the user that his/her password is easily breakable or not.

Introduction



Here I am going to explain how to show password strength using Ajax PasswordStrength control. We can use this in the user registration page to check the strength of your password. While entering password in the password TextBox the Ajax password strength control updates the strength of the password dynamically.
Password strength can be indicated either by a text message or by a progress bar. Developer can configure the required strength in accordance with their requirement. The password strength indicator starts displaying when the user begins typing in the textbox and it disappear when the textbox loses focus.
Passwordstrength

How to implement Ajax password strength extender


First we will drag and drop a textbox and a PasswordStrength extender control to the web page. We will set TargetControlID of the PasswordStrength extender to the TextBox, here it is txtPassword. I have repeated the same code to show different style of the PasswordStrength extender.
passwordstrengthcontrol

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajaxpassstrength.aspx.cs" Inherits="Practice2010.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
</head>

<style type="text/css">
.Poor{background: Red;color:White;font-weight:bold;}
.Weak{background: Orange;color:White;font-weight:bold;}
.Average{background: Yellow;color:black;font-weight:bold;}
.Good{background: blue;color:White;font-weight:bold;}
.Excellent{background: Green;color:White;font-weight:bold;}
.Bar{border-style: solid;border-width: 1px;width: 180px;padding:2px;}
</style>

<body>
<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>

<br />
<asp:Label ID="lblPwdInfo" runat="server"/>
<asp:PasswordStrength ID="PasswordStrength1" TargetControlID="txtPassword"
StrengthIndicatorType="Text" PrefixText="Password Strength:" HelpStatusLabelID="lblPwdInfo"
PreferredPasswordLength="10" MinimumNumericCharacters="1" MinimumSymbolCharacters="1"
MinimumLowerCaseCharacters="1" MinimumUpperCaseCharacters="1" TextStrengthDescriptions="Very Poor;Weak;Average;Good;Excellent"
TextStrengthDescriptionStyles="Poor;Weak;Average;Good;Excellent"
runat="server" />

<br />
<br />

<asp:Label ID="lblPassword1" runat="server" Text="Password"></asp:Label><asp:TextBox ID="txtPassword1" runat="server" TextMode="Password"></asp:TextBox><br />

<br />
<asp:Label ID="lblPwdInfo1" runat="server"/>
<asp:PasswordStrength ID="PasswordStrength2" TargetControlID="txtPassword1" StrengthIndicatorType="BarIndicator" PrefixText="Password Strength:"
HelpStatusLabelID="lblPwdInfo1" PreferredPasswordLength="10" MinimumNumericCharacters="1" MinimumSymbolCharacters="1" MinimumUpperCaseCharacters="1"
MinimumLowerCaseCharacters="1"BarBorderCssClass="Bar" TextStrengthDescriptionStyles="Poor;Weak;Average;Good;Excellent" runat="server">
</asp:PasswordStrength>
</div>
</form>
</body>
</html>


Above code you can find that I have added some styles just after the head tag. This styles are used to show the password strength information to the user in colourful manner.
Passwordstrengthtext
passwordstrengthpbar

If you look at the image you would have noticed that description about the password is displaying just below the Password TextBox like "4 more characters, 1 more numbers, 1 symbol characters". This is displaying because of the property we set for HelpStatusLabelID. If you don't want to show this help status you can remove this from your code.


There are many properties you can set for the PasswordStrength extender. Few of the very important properties are,
1. PrefixText
2. PreferredPasswordLength
3. MinimumNumericCharacters
4. MinimumSymbolCharacters
5. MinimumLowerCaseCharacters
6. MinimumUpperCaseCharacters

By reading the name of the property itself help you to understand what exactly is that property.


Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: