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

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

Link to iRule

https://github.com/nvansluis/f5.password_change_validation 

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:
‎26-Oct-2023 07:01
Updated by:
Contributors