APM Customization: Password Change Validation

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 

Updated Oct 26, 2023
Version 2.0
application delivery
BIG-IP Access Policy Manager (APM)
  • PeteWhite's avatar
    PeteWhite
    Icon for Employee rankEmployee
    Apr 27, 2021

    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's avatar
    Niels_van_Sluis
    Icon for MVP rankMVP
    Apr 28, 2021

    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's avatar
    Rotem
    Icon for Nimbostratus rankNimbostratus
    Mar 13, 2022

    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 ?