APM Customization: Password Change Validation

[Niels_van_Sluis]

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.

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

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.

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.

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

How to use this snippet:

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

For example:

Tested this on version:

13.0

Link to iRule

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

[PeteWhite]

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?

[Niels_van_Sluis]

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]

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 ?