Password Strength Indicator/Checker

[newmay]

Hi! 

I need assistance with the implementation of this Password Strenght Checker (jQuery Plugin For Password Strength Checker and Indicator - Password-Strength | Free jQuery Plugins ... ).

We created 2 Webfiles named password_strength_lightweight.js & password_strength.css within the specific Notes we attached the js. and css. file

Now the issue begins:

As stated in the guide I should include following on the webpage:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="password_strength_lightweight.js"></script>
<link rel="stylesheet" href="password_strength.css">

and 

$('#myPassword').strength_meter();

with the correct ID of the new password input field (#NewPassword)

Now we dont know what we are doing wrong, since it wont work. We are not sure where we should paste the code (which Content Snippet) we tried every possible. Plus we tried to but {raw} {endraw} around the code, still no success.

If anyone of you could try to implement this password checker and provide a step-by-step guide  or give suggestions to try to solve this issue, is much appreciated!!

Thanks!

[hardikv]

Hi @newmay 

Password Strenght Checker will only work if you have <div> element, not <input type="password"> element.

You can see below screenshot:

If you want to check then you can try using inspect by replacing input to div tag in your page. that will work fine.

I'm suggesting you to try below plugins:

1.

https://www.jqueryscript.net/form/Validate-Password-Meets-Requirements-jQuery-PassRequirements.html
https://www.jqueryscript.net/demo/Validate-Password-Meets-Requirements-jQuery-PassRequirements/

2.
https://www.jqueryscript.net/form/Visual-Password-Strength-Indicator-Plugin-For-jQuery-Passtrength-j...
https://www.jqueryscript.net/demo/Visual-Password-Strength-Indicator-Plugin-For-jQuery-Passtrength-j...

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

[hardikv · Accepted solution]

Hi @newmay 

Step1: Download plugin from below link:

https://www.jqueryscript.net/form/Validate-Password-Meets-Requirements-jQuery-PassRequirements.html

Step2: Create a Web file as suggested in screenshot.

Step3: Go to Notes Tab and Click on Plus button. Select "PassRequirements.js" file from downloaded plugin.  

Step4: Go to Content Snippet

Click on New

Name: Account/Register/PageCopy

Type: Text

Add below Script in Value textbox:

<script src="/PassRequirements.js" type="text/javascript"></script>

<script>
$(window).load(function() {

$('#PasswordTextBox').PassRequirements({
        rules: {
            containSpecialChars: {
                text: "Your input should contain at least minLength special character(s)",
                minLength: 1,
                regex: new RegExp('([^!,%,&,@,#,$,^,*,?,_,~])', 'g')
            },
            containNumbers: {
                text: "Your input should contain at least minLength number(s)",
                minLength: 2,
                regex: new RegExp('[^0-9]', 'g')
            }
        }
    });
});
</script>

 

Step5: Clear the cache

Step6: Go to https://heyportal.powerappsportals.com/Account/Login/Register

It will look like this:

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

[newmay]

Awesome! Thanks!

Yet it is on the login register page, I would need it too on the "change password" page. Which content snippet do i need to take in this case?

[hardikv]

Hi @newmay 

For external users, you have to use "Account/SetPassword/PageCopy" Content Snippet.

For Azure AD user, you have to use "Account/ChangePassword/PageCopy" Content Snippet.

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

[newmay]

Hi @hardikv thanks for helping out as always.

I did paste the code in the two content snippets posted by you in the latest answer, yet it wont work. 

Here a screenshot from the page where I want the PasswordStrengthChecker:

So basically when I am a logged in user and I navigate to Change Password Page I want that the Password Strength Checker to be displayed when I click into the marked field.

[hardikv · Accepted solution]

Hi @newmay 

You have to change the ID of password input. In both page, Registration and Change Password pages, password input has different IDs.

For Change Password, you have to user "Account/ChangePassword/PageCopy" Content Snippet and use below code. You can check ID of Password text box by inspect element.

<script src="/PassRequirements.js" type="text/javascript"></script>

<script>
$(window).load(function() {

$('#NewPassword').PassRequirements({
        rules: {
            containSpecialChars: {
                text: "Your input should contain at least minLength special character(s)",
                minLength: 1,
                regex: new RegExp('([^!,%,&,@,#,$,^,*,?,_,~])', 'g')
            },
            containNumbers: {
                text: "Your input should contain at least minLength number(s)",
                minLength: 2,
                regex: new RegExp('[^0-9]', 'g')
            }
        }
    });
});
</script>

--------------------------
If you like this post, give a Thumbs up. Where it solved your query, Mark as a Solution so it can help other people!

[newmay]

That worked! Thank you!!!

[hardikv]

Hi @newmay 

Glad to hear that your issue has been resolved. Please mark as answers so that it will be helpful to others.