Unanswered

Password Strength Indicator/Checker

(0) Share

Report

Posted on by Community Power Pla...

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!

Categories:

Power Apps portals

I have the same question (0)

All responses (8)

Answers (2)

H V 1,510 on at

Like (0)

Report

Hi @Anonymous

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-js.html
https://www.jqueryscript.net/demo/Visual-Password-Strength-Indicator-Plugin-For-jQuery-Passtrength-js/

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

Was this reply helpful? Yes No
Verified answer

H V 1,510 on at

Like (0)

Report
Hi @Anonymous

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!

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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?

Was this reply helpful? Yes No
H V 1,510 on at

Like (0)

Report

Hi @Anonymous

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!

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Verified answer

H V 1,510 on at

Like (0)

Report
Hi @Anonymous

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!

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

That worked! Thank you!!!

Was this reply helpful? Yes No
H V 1,510 on at

Like (0)

Report

Hi @Anonymous

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

Was this reply helpful? Yes No