ASP.NET MVC5: Password Meter Jquery Plugin Integration

In any product that is being developed, User interaction plays the most vital role in developing product perception for the target user.
Like any other product, websites 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 the UI/UX from hand by yourself i.e. from graphics assets to Jquery base resources etc. This approach however, require a lot to time consumption that is mostly not suited in fast paced environment. 2) Plugin Integration Approach is the second approach that involves 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 require 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 to a Password Meter Jquery base plugin which will inform user about the suitable strength of his/her password. What is Password Meter you ask? Well password meter is the ability to indicate strength of the password that any website require from its registered user to have for security purposes. Password validation is a separate thing, so, do not mix it with password meter. Password meter focus on 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 original plugin from here. There is however, a bug in it, I have fixed that bug. I detail on it here as I proceed further in this tutorial

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 users to use while registering to their website. I did not see this feature in any other plugin so far.

Following are some prerequisites before you proceed further in this tutorial:

1) Knowledge of ASP.NET MVC5.  
2) Knowledge of HTML.
3) Knowledge of JavaScript.
4) Knowledge of Ajax.
5) Knowledge of Bootstrap.
6) Knowledge of Jquery.
7) Knowledge of C# Programming.

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

Download Now!

Before I jump into my take on Jquery Complexify plugin, let me highlight the bug that is pertaining in the Jquery Complexify plugin. When you download the .js file of the Jquery Complexify plugin. Open it and 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 then you will not be able to use the "strict" mode of ban list as describe 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 into this new folder and incorporate its related JavaScript files into the project.  
3) Open "HomeController.cs" file and replace following code in it i.e.

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 above code, I have simple cleaned the existing file and create "Index()" method that simply returns my view.  

4) In "Model" folder, create "PasswordMeterJq.cs" file and place following code in it i.e.

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 above code, I have create a simple model for my password component.  

5) Now in "Content" folder create a folder "files" and then 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 to your website e.g. 123456, password etc. In the file that 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 following code i.e.

<!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 &copy; @DateTime.Now.Year - <a href="http://asmak9.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 above code, I have simply incorporate required JavaScript files and mold the layout according to my choice.

7) Now, in "Views\Home" folder create "Index.cshtml" file and place following code in it i.e.

 @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 above code, I have simply created a password box attached with my model and a progress bar that will be indicating user about his/her password strength.

8) Under "Scripts" folder create a file "custom-complexify.js" and place following code in it i.e.

 $(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 above code, I am first extracting my ban list passwords from the "banlist.txt" file then I am 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 receive.

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

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

It will get following indicating meter i.e.

Notice here that since, 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 as follow with input password as "pass" i.e.

banMode: 'loose'

It will get following indicating meter i.e.

Now, since, I am using "loose" ban mode, therefore only password itself from the ban list will return "0" indicating password is not valid. But, 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 scale factor property now i.e. change scale factor to following and my input password as "bbbbbb" i.e.

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

It will return following indicator i.e.
 

Notice that 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 follow and pass input character equal to 20 character length i.e.

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

It will give following indication i.e.

That's about.

Enjoy!! coding.