Password strength is a key factor in account security for weeb applications. As developers we all have a basic understanding of what a secure password is but the averge consumer of internet applications doesn’t so adding a visual indicator when your user selectes a password is a great feature.
There are many, many plugins that we could select from to implement this feature I’ve selected this one which makes things very easy.
http://plugins.jquery.com/project/password_strength
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.password_strength.js" type="text/javascript">
</script>
<style type="text/css">
.password_strength {
}
.password_strength_1 {
background-color: #fcb6b1;
}
.password_strength_2 {
background-color: #fccab1;
}
.password_strength_3 {
background-color: #fcfbb1;
}
.password_strength_4 {
background-color: #dafcb1;
}
.password_strength_5 {
background-color: #bcfcb1;
}
</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>Password Strength</h2>
<table style="border-spacing: 0px; border-style: none">
<tbody>
<tr>
<td style="text-align: right"><label>User Name:</label></td>
<td>
<asp:TextBox ID="username" runat="server" Width="200px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right"><label>Password:</label></td>
<td>
<asp:TextBox ID="password" class=password runat="server"
ClientIDMode="Static" TextMode="Password" Width="200px">
</asp:TextBox>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('form').attr('autocomplete', 'off');
$('#password').password_strength();
</script>
</asp:Content>
In the code above I’ve used in-line CSS and script for the sake of learning simplicity.
The CSS is used by the plugin to set the color that corresponds with the “level” of the password as entered.
The script block starting on line 50 turns autocomplete off for the form (we’re working with a password after all) and applies the password strength functionality to the ASP.NET textbox controll names “password:.
As with all the ASP.NET jQuery work that we’ve been doing, we must set the Client Id Mode to “static” so tha tthe ASP.NET runtime does not modify the client ID of the emitted HTML text box.
You can download a working sample [ HERE]
