cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
newmay
Helper V
Helper V

Password Strength Indicator/Checker

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

newmay_0-1632745745204.png

 

 

 

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!

2 ACCEPTED SOLUTIONS

Accepted Solutions
hardikv
Super User
Super User

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.

 

hardikv_0-1632751181857.png

 

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

hardikv_1-1632751424940.png

 

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>

 

 

 

hardikv_2-1632751747443.png

 

Step5: Clear the cache

 

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

 

It will look like this:

PasswordChecker.png

 

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

 

View solution in original post

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!

View solution in original post

8 REPLIES 8
hardikv
Super User
Super User

Hi @newmay 

 

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

 

You can see below screenshot:

hardikv_0-1632749708891.png

 

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
Super User
Super User

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.

 

hardikv_0-1632751181857.png

 

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

hardikv_1-1632751424940.png

 

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>

 

 

 

hardikv_2-1632751747443.png

 

Step5: Clear the cache

 

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

 

It will look like this:

PasswordChecker.png

 

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

 

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?

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!

 

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:

newmay_0-1632913690500.png

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.

 

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!

That worked! Thank you!!!

Hi @newmay 

 

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

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

Users online (2,025)