Why a password strength meter is important?
- To have a strong password that protects our personal information that we share everyday online
- To have a strong password that protects our sensitive information like credit card info, social security, bank account, PIN #s etc
How to create a strong password?
- A strong password should be at least 8 characters long
- A strong password should have special characters
- A strong password should have letters and numbers
- A strong password should have lowercase letters and uppercase letters
- Make a practice of changing your password once in at least 2 months.
- Try to be creative with passwords like instead of using "star", try to use "*" sign or something like "snowflake"
- Avoid using correct spellings. For example: instead of word "effort", you should use "ef4t"
Now, it is time to dive into the code :)
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:
Note: Here the JQuery $('#Password') will reference the password input field.
4) We also need to add respective JQuery like this:
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:
6) That's all - You can download t he complete source code for the page Register.cshtml: DOWNLOAD HERE
Here is the result:
P.S. This code is tested and works on nopCommerce 3.30 & 3.40 version
NOTE: In nopCommerce, you can define the minimum length for the password by going:
Administration > Configuration > Settings > All settings
Find: "customersettings.passwordminlength" and change the "Value"
Hope it helps...
(Source of JQuery file(s): http://git.aaronlumsden.com/)