How To Apply Strong Password Validation In Model-Driven App Forms! [Solution Sunday #8]

We all want strong passwords, but let's face it, we all need a hand sometimes in getting them right.

In this iteration of Solution Sunday, I will show you in 4 Easy Steps how you can apply some JavaScript to your forms, and strengthen the passwords being entered in your system.

I've aimed to make this script as customisable as possible, so you can add and remove conditions as you need to fit your requirements.

What this code will achieve:

This snippet, will ensure users can never enter weak passwords into your system again by validating 5 different conditions, all of which can be added to or removed within the code itself:

1. Minimum password length must be 8 characters.
2. Password must include at least 1 uppercase letter.
3. Password must include at least 1 lowercase letter.
4. Password must contain at least 1 number.
5. Password must contain at least 1 special character.

The code can be added to your Model-Driven App Form of choice and will require you to have a 'Password' field created in the respective table.

Requirements

• An existing 'Password' column in your table - with the data type of string.
• A Form with the 'Password' column included on it.

Step 1 - Save the code on your machine and make adjustments

The first step is to save the code below on your machine as a '.js' file.

To do this, open up Visual Studio Code and create a new file.

Give this file any name you wish, but ensure it ends with '.js' to be recognised as a JavaScript file.

Below is the code that makes this whole solution tick. Please copy and paste this directly into Visual Studio Code.

function validatePassword(executionContext) {
    var formContext = executionContext.getFormContext();
    var passwordField = formContext.getAttribute("hrashid_password");
    var password = passwordField.getValue();
    
    // Clear any existing notification
    formContext.getControl("hrashid_password").clearNotification("password_error");

    // If the password field is empty, no validation is needed
    if (!password) {
        return;
    }
    
    // Define password criteria
    var minLength = 8; // Minimum Length is customised here
    var hasUpperCase = /[A-Z]/;
    var hasLowerCase = /[a-z]/;
    var hasNumbers = /[0-9]/;
    var hasSpecialCharacters = /[!@#$%^&*(),.?":{}|<>]/;

    // Check password criteria
    var errorMessage = "";

    if (password.length < minLength) {
        errorMessage = "Password must be at least " + minLength + " characters long.";
    } else if (!hasUpperCase.test(password)) {
        errorMessage = "Password must contain at least one uppercase letter.";
    } else if (!hasLowerCase.test(password)) {
        errorMessage = "Password must contain at least one lowercase letter.";
    } else if (!hasNumbers.test(password)) {
        errorMessage = "Password must contain at least one number.";
    } else if (!hasSpecialCharacters.test(password)) {
        errorMessage = "Password must contain at least one special character.";
    }

    // Set notification or clear it
    if (errorMessage) {
        formContext.getControl("hrashid_password").setNotification(errorMessage, "password_error");
    }
}        

Adjusting the code to your needs

• Ensure you change the column name 'hrashid_password' in the code to match your unique password column name.

• Please see the comment in the code that says '// Define password criteria'. It is from this point you can modify or remove the criteria that will check your passwords. Ensure if you do remove one of these criteria points, you also reflect this and remove the condition related to that criteria in the 'if' statements.
• For example, if you don't want your password to require a lower case character, you first remove the variable 'hasLowerCase', and then remove the 'if' statement relating to that variable, in this case: 'else if (!hasLowerCase.test(password)) {errorMessage = "Password must contain at least one lowercase letter."; }'

• The variable 'minLength' can be changed to the number of your choice (it is currently set as 8).

Step 2 - Add the code to your Solution and Form

Once you've adjusted the code to fit your requirements, you'll need to bring the code into your Solution and add it in your Power Apps Form of choice.

Please complete Steps 2 & 3 in the article above, and feel free to come back here to configure the JS Library to the Event.

Step 3 - Configure the JavaScript to the Event of your Password Column

Once you've added the code to your Solution and Form, you should now be able to access it.

1. Select the Password Column in your form.
2. Select 'Events' in your right navigation.
3. Select the 'On Change' property.
4. Select '+ Event Handler'.
5. Select the Password Validation Library you added in Step 2.
6. Write 'validatePassword' in the 'Function' box.
7. Ensure you tick the 'Pass Execution context as first parameter' box.
8. Do the same for the 'OnLoad' Event of the Form by selecting the outside of the form and repeating these steps.

After completing the steps above, you can Save and publish your form and move onto the final step.

Step 4 - Test your Solution!

Now you're ready to test your Solution