ASP.NET MVC5 - Password Meter jQuery Plugin Integration

In any product, which is being developed, user interaction plays the most vital role in developing product perception for the target user. Like any other product, Websites that focus on improving both UI/UX is becoming vital and game changing. Improving a Website interactivity can be done with two approaches i.e.

1. Traditional Approach that involves creating every aspect of UI/UX from hand by yourself i.e. from the graphics assets to jQuery base resources etc. This approach however, requires a lot of time, which is mostly not suited in a fast paced environment.
2. Plugin Integration Approach is the second approach, which involves an integration of open source or commercially free to use licensed plugins as a component into your own Website by of course tweaking the plugin, according to one's own need, which is not a simple task but, not as time consuming as the traditional approach, but still requires an intelligent effort to mold the open source plugin, according to your choice of platform and need.
   There are a lot of beautiful plugins out there, waiting to be grabbed and make your product (i.e. Website, desktop Application, mobile Application etc.) look as modern, glossy and interactive, as it possibly can be. My focus is to grab them and mold them to be used with C#.NET technology, since, it’s the technology of love for me.

Today, I will be focusing on a Password Meter jQuery based plugin, which will inform the user about the suitable strength of his/her password. What is Password Meter? Password Meter is the ability to indicate the strength of the password, which any Website requires from its registered user to have for security purposes. Password validation is a separate thing, so, do not mix it  up with Password Meter. Password Meter focuses on the complexity of a password i.e. how difficult it is to guess a password.

I will be using a beautiful & a simple jQuery base plugin, created by Mr. Dan Palmer called jQuery Complexify. You can download this plugin here. There is however, a bug in it, and I have fixed that bug.

I choose this plugin, simply because of its simplicity and the fact that it also allows the consumers to add a ban list of passwords that they do not want the users to use, while registering for their Website. I did not see this feature in any other plugin so far.

The following are some prerequisites before you proceed any further in this article-

Prerequisites

The prerequisites includes the knowledge about the following technologies-

1. ASP.NET MVC 5
2. HTML
3. JavaScript
4. Ajax
5. Bootstrap
6. JQuery
7. C# Programming

You can download the complete source code for this tutorial here or you can follow the step by step discussion, given below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Before I jump into my topic, take jQuery Complexify plugin.Let me highlight the bug, which is pertaining in jQuery Complexify plugin. When you download the .js file of jQuery Complexify plugin, open it, navigate to "function inBanlist(str)" and replace the following line of code i.e.

if (str.toLowerCase().indexOf(options.bannedPasswords[i].toLowerCase()) !== -1)

with the following line of code i.e.

if (options.bannedPasswords[i].toLowerCase().indexOf(str.toLowerCase()) !== -1)

If you do not do this change, you will not be able to use the "strict" mode of ban list, as described by the author.

Now, let’s begin.

1. Create new MVC Web project and name it "PasswordMeterJq".
   
2. Create new folder, name it "Plugins" and place the downloaded plugin files in this new folder and incorporate its related JavaScript files into the project.
   
3. Open "HomeController.cs" file and replace with the code, given below-
   

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   namespace PasswordMeterJq.Controllers
   {
     public class HomeController : Controller
     {
       public ActionResult Index()
       {
         return View();
       }
     }
   }

   In the code, given above, I have cleaned the existing file and create "Index()" method, which simply returns my view.
   
   
4. In "Model" folder, create "PasswordMeterJq.cs" file and place the code, given below-
   

   using System.Collections.Generic;
   using System.ComponentModel.DataAnnotations;
   namespace PasswordMeterJq.Models
   {
     public class PasswordViewModel
     {
       [Required]
       [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
       [DataType(DataType.Password)]
       [Display(Name = "Password")]
       public string Password { get; set; }
     }
   }

   In the code, given above, I have created a simple model for my password component.
   
   
5. Now, in "Content" folder, create a folder "files", create a file and name it "banlist.txt". You can add the passwords in this file that you do not want your user to use, while they register on your Website e.g. 123456, password etc. In the file you have created, place following sample passwords that will be banned i.e.
   
   password|1234567890
   
   Follow the above format, when you add your banned passwords.
   
   
6. Now, open the "_Layout.cshtml" in "Views" folder and replace it with the code, given below-
   

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
   </head>
   <body>
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
         </div>
       </div>
     </div>
     <div class="container body-content">
       @RenderBody()
       <hr />
       <footer>
         <center>
           <p><strong>Copyright © @DateTime.Now.Year - <a href="http://asmak9.blogspot.com/">Asma's Blog</a>.</strong> All rights reserved.</p>
         </center>
       </footer>
     </div>
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/bootstrap")
     <!-- Password Complexify -->
     @Scripts.Render("~/plugin/password-complexify")
     @Scripts.Render("~/scripts/custom-password-complexify")
     @RenderSection("scripts", required: false)
   </body>
   </html>

   In the code, given above, I have simply incorporated required JavaScript files and mold the layout, according to my choice.
   
   
7. Now, in "Views\Home" folder create "Index.cshtml" file and place the code, given below-
   

   @using PasswordMeterJq.Models
   @model PasswordViewModel
   @{
     ViewBag.Title = "ASP.NET MVC5: Jquery Password Plugin";
   }
   <h2>@ViewBag.Title.</h2>
   <div class="row">
     <div class="col-md-12">
       <section id="loginForm">
         @using (Html.BeginForm("Index", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
         {
           @Html.AntiForgeryToken()
           <h5>
             <i class="fa fa-link" aria-hidden="true"></i>
             <a href="https://danpalmer.me/jquery-complexify/">Complexify Password Meter</a>
           </h5>
           <hr />
           <div class="form-group">
             <div id="complexify">
               <div class="form-group">
                 @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
                 <div class="col-md-4">
                   @Html.PasswordFor(m => m.Password, new { id = "PassBox", @class = "form-control" })
                   @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                 </div>
                 <div class="col-md-2 col-md-pull-2" style="margin-left: 7% !important;margin-top: 0.4% !important;">
                   <div class="progress text-center">
                     <div id="complexity-bar" class="progress-bar" role="progressbar">
                       <span id="complexity" class="progress-value" style="position:absolute;right:0;left:0;color:black !important">0% </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           @*<div class="form-group">
             <div class="col-md-offset-2 col-md-10">
               <input type="submit" value="Log in" class="btn btn-default" />
             </div>
           </div>*@
         }
       </section>
     </div>
   </div>
   @section Scripts
    {
     @Scripts.Render("~/bundles/jqueryval")
   }

   In the code, given above, I have simply created a password box, attached with my model and a progress bar, which will be indicating the user about his/her password strength.
   
   
8. Under "Scripts" folder, create a file "custom-complexify.js" and place the code, given below, in it-
   

   $(document).ready(function ()
   {
     jQuery.get('Content/files/banlist.txt', function (data)
     {
       // Settings.
       var banlist = data.split('|');
       $("#complexify #PassBox").complexify(
       {
         minimumChars: 6,
         strengthScaleFactor: 0.3,
         bannedPasswords: banlist,
         banMode: 'strict'
       },
       function callback(valid, complexity)
       {
         // Progress bar.
         var progressBar = $('#complexify #complexity-bar');
         progressBar.toggleClass('progress-bar-success', valid);
         progressBar.toggleClass('progress-bar-danger', !valid);
         progressBar.css({ 'width': complexity + '%' });
         $('#complexify #complexity').text(Math.round(complexity) + '%');
       });
     });
   });

This is where the actual action is happening. In the code, given above, I am first extracting my ban list passwords from the "banlist.txt" file , followed by applying the "jQuery Complexify" plugin. I have also set the basic properties and a callback function, which will update the progress bar base on the complexity indication, I received.

Let’s look into the properties of the plugin i.e. for the following properties and pass the input password as “pass" i.e.

minimumChars: 6,
strengthScaleFactor: 0.3,
bannedPasswords: banlist,
banMode: 'strict'

It will get the indicating meter, given below-



Notice, I am using "strict" ban mode. Therefore, any subset or password itself from the ban list will return "0" indicating password is not valid.

Now, let’s change the properties and follow the input password as "pass" i.e.

banMode: 'loose'

It will get the indicating meter, given below-



Since, I am using "loose" ban mode, therefore only the password itself from the ban list will return "0", thereby indicating the password is not valid but the subset of the ban password will rather return the measure of its strength depending upon our scale factor and minimum character.

Let’s play with the scale factor property now, which changes the scale factor to following and my input password as "bbbbbb" i.e.

minimumChars: 6,
strengthScaleFactor: 1,
bannedPasswords: banlist,
banMode: 'strict'

It will return the indicator, given below-



Notice, by default, I set scale factor to be "0.3". The reason is that I want to accommodate 6 character length password into it, which will give following indication i.e.


The scale factor ranges from 0 above, higher scale factor means higher strength of the password.

Let’s change minimum character length as follows and pass the input character equal to 20 character length, given below-

minimumChars: 20,
       strengthScaleFactor: 1,
       bannedPasswords: banlist,
       banMode: 'strict'

It will give the indication, given below-



Conclusion

In this article, you learned  how to use Jquery Complexify Password Meter plugin with ASP.NET MVC5 Web Application. You will also learn advanced usage of this plugin and how you can easily mold this plugin, as per your own requirement by simply playing around with the properties. You will also be able to learn to create a progress bar indicator, which is being manipulated by the jQuery Complexify plugin.