AEM 61 - Touch UI Add Simple Password Policy


Extend User Properties form of Touch UI to enforce a simple password policy. The validation checks if user has entered atleast one number in password, while creating a new user or changing the password for existing user

For Classic UI, check this post

For product password validation provider, check this post

Demo | Package Install

New User

Change Password


1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-enforce-password-policy

2) Create clientlib (type cq:ClientLibraryFolder/apps/touchui-enforce-password-policy/clientlib and set a property categories of String type to granite.securityCUI

3) Create file ( type nt:file ) /apps/touchui-enforce-password-policy/clientlib/js.txt, add the following


4) Create file ( type nt:file ) /apps/touchui-enforce-password-policy/clientlib/policy.js, add the following code

(function ($, $document) {
    //id added in /libs/granite/security/content/userEditor/items/page/items/contentWrapper/items/contentContainer/items/content/items/content/items/photoSettings/items/col1/items/accountSettings/items/changePassword
    var ADMIN_PASSWORD_DIV = "#admin_password",
        FIELD_CHANGE_PASSWORD = ".change-user-password", // change password form
        FIELD_NEW_USER_PASSWORD = ".user-password-fields", //new user form
        BUTTON_OK = ".user-admin-change-password",  // change password form
        BUTTON_SAVE = ".user-admin-save-user", //new user form
        RE_TYPE_PASSWORD_FIELD = "[name='rep:re-password']";

    var $policyText = $("<div/>").css('padding-bottom', '10px')
                                .css('font-style', 'italic')
                                .css('text-align', 'center')
                                .html('New Password must contain a number');




    //change password form
    $document.on("keyup", FIELD_CHANGE_PASSWORD, function(){

    //new user form
    $document.on("keyup.user-admin change.user-admin selected.user-admin", ".save-button-enabler", function(){
        keyHandler( $(FIELD_NEW_USER_PASSWORD).find("[type=password]"));

    function keyHandler($fields){
        if(!$fields || $fields.length != 2){

        var one = $($fields[0]).val(), two = $($fields[1]).val();

        if(isValidPassword(one) && isValidPassword(two) && (one == two)){

        $(BUTTON_OK).attr("disabled", "disabled"); // change password form
        $(BUTTON_SAVE).attr("disabled", "disabled"); //new user form

    function focusHandler(event){

        var val = $(event.currentTarget).val();


        var message = "Password must contain a number";


    function clearErrors(){
        $(BUTTON_OK).removeAttr("disabled");   // change password form
        $(BUTTON_SAVE).removeAttr("disabled");  //new user form

    function isValidPassword(text){
            return true;

        //check for number in text
        return /\d/.test(text);

    function showErrorAlert(message, title){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                text: "OK",
                warning: true

        title = title || "Error";

        fui.prompt(title, message, "notice", options);

        $(BUTTON_OK).attr("disabled", "disabled"); // change password form
        $(BUTTON_SAVE).attr("disabled", "disabled"); //new user form
})(jQuery, jQuery(document));

No comments:

Post a Comment