CodeShare
Have some code. Share some code.
cancel
Showing results for 
Search instead for 
Did you mean: 

Problem this snippet solves:

When an user is prompted to change the password, the user will be instructed to choose a password that matches your password policy. See the screenshots below. This updated version uses a progress bar instead of showing the requirements directly on the page. This should give some more protection against shoulder surfing.


Please note that this code snippet will only customize the look-and-feel of the APM portal. It will *not* enforce a password security policy. The password policy should be enforced on the backend authentication server (active directory).


Screenshot 1 - A password requirement progress bar is shown.


0151T000003kvv6QAA.png


Screenshot 2 - While typing the progress bar will grow towards 100% if the required character types are being used.


0151T000003kvvBQAQ.png


Screenshot 3 - If you wonder why your new password doesn't meet the requirements, you can move your mouse over the progress bar to find out why.


0151T000003kvvGQAQ.png


Screenshot 4 - When you meet the requirements, you must retype the password for validation. The progress bar will become green when both passwords match. Move your mouse over the progress bar to get more info.


0151T000003kvvQQAQ.png


Screenshot 5 - All set, let's change the password.


0151T000003kvvVQAQ.png

How to use this snippet:

Use the F5 APM Advanced Customization Editor and reference this script from Common > footer.inc


For example:



0151T000003kkZYQAY.png

Tested this on version:

13.0
Comments
PeteWhite
F5 Employee
F5 Employee

This looks great, i'm in the process of trying it out. Is there a way to configure the password policy eg how many uppercase/lowercase letters?

Thanks! Yes, should be possible by adjusting the javascript part. Something like below. The password should now contain two or more lowercase letters.

// Validate lowercase letters var letter = document.getElementById("letter"); var lowerCaseLetters = /[a-z]/g; if(field1.value.match(lowerCaseLetters).length >= 2) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); }

 

Rotem
Nimbostratus
Nimbostratus

Hi,

Anyway, this can run on a new modern customization page? (version 15.1.3.1)

if yes then footer.inc is not exists where can i use the JS ?

Version history
Last update:
‎16-Aug-2019 05:08
Updated by:
Contributors