Adding Password Strength Meter in nopCommerce

Today we will learn how to add password strength meter in nopcommerce.

Open “Register” file: RootFolder (or Nop.Web) \Views\Customer\ Register.cshtml

In order to add password strength meter, we will add javascript, jquery and css to target the password field.

<!-- Example jQuery -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/jquery.min.js"></script>

<!-- Strength.js -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/strength.js"></script>


<script type='text/javascript'>
    $(function () {
        // This applies the Strength checking plug-in to your particular element
        $('#Password').strength({ strengthButtonText: "" });
        // Fixup your Required indicator (inserts it explicitly after your password element)
        $('.required-indicator').insertAfter($("#Password"));
    });
</script>


<style type='text/css'>
    .strength_meter, .strength_meter * {
        display: inline;
    }
</style>

 

The code in your Register.cshtml page should look like this:

@model RegisterModel
@using Nop.Web.Models.Customer;
@{
   Layout = "~/Views/Shared/_ColumnsTwo.cshtml";

   //title
   Html.AddTitleParts(T("PageTitle.Register").Text);
}
@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
   <script type="text/javascript">
       $(function () {
           $("#@Html.FieldIdFor(model => model.CountryId)").change(function () {
            var selectedItem = $(this).val();
            var ddlStates = $("#@Html.FieldIdFor(model => model.StateProvinceId)");
               var statesProgress = $("#states-loading-progress");
               statesProgress.show();
               $.ajax({
                   cache: false,
                   type: "GET",
                   url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                   data: { "countryId": selectedItem, "addSelectStateItem": "true" },
                   success: function (data) {
                       ddlStates.html('');
                       $.each(data, function (id, option) {
                           ddlStates.append($('<option></option>').val(option.id).html(option.name));
                       });
                       statesProgress.hide();
                   },
                   error: function (xhr, ajaxOptions, thrownError) {
                       alert('Failed to retrieve states.');
                       statesProgress.hide();
                   }
               });
           });
    });
   </script>
}

<!-- Example jQuery -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/jquery.min.js"></script>

<!-- Strength.js -->
<script type="text/javascript" src="http://www.StrivingProgrammers.com/ScriptFiles_Extras/js/strength.js"></script>


<script type='text/javascript'>
    $(function () {
        // This applies the Strength checking plug-in to your particular element
        $('#Password').strength({ strengthButtonText: "" });
        // Fixup your Required indicator (inserts it explicitly after your password element)
        $('.required-indicator').insertAfter($("#Password"));
    });
</script>


<style type='text/css'>
    .strength_meter, .strength_meter * {
        display: inline;
    }
</style>
@using (Html.BeginForm())

(Source of original JQuery file(s): http://git.aaronlumsden.com/)

Now you should see a password strength meter on your register page (in password field) like this:

passwordregisterpage

Note: This solution works for nopCommerce 3.30 & 3.40

Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *