1) In nopCommerce code, the register page is in this location:
RootFolder\Views\Customer\ Register.cshtml <-- Open this file
2) Locate this in your code:
<div class="form-fields">
<div class="inputs">
@Html.LabelFor(model => model.Password, new { }, ":")
@Html.EditorFor(model => model.Password)
@Html.RequiredHint()
@Html.ValidationMessageFor(model => model.Password)
</div>
<div class="inputs">
@Html.LabelFor(model => model.ConfirmPassword, new { }, ":")
@Html.EditorFor(model => model.ConfirmPassword)
@Html.RequiredHint()
@Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>
@if (Model.DisplayCaptcha)
{
<div class="captcha-box">
@Html.Raw(Html.GenerateCaptcha())
</div>
}
</div>
3) In this case, we need to add javascript, jquery and css in order to target our password field. So, in order to do that we will add this in our "Register.cshtml" page:
<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>
Note: Here the JQuery $('#Password') will reference the password input field.
4) We also need to add respective JQuery like this:
<!-- Example jQuery -->
<!-- Strength.js -->
Note: "strength.js" is the file where it is defined what is a weak, medium and strong password. You can change it according to your requirements if you want.
5) Now, we will add our CSS styling to it like this:
<style type='text/css'>
.strength_meter, .strength_meter * {
display: inline;
}
</style>
