AEM CQ 56 - Extend UserAdmin, add new User Properties

Goal

Extend UserAdmin console and add new user properties. Here we add a new property Second Email, stored in CRX as secondEmail

For Touch UI, check this post

From the Product

Extension

In CRX

Solution - 1

1) Create a cq:ClientLibraryFolder /apps/myclientlib and add property categories cq.security of type String

2) Create /apps/myclientlib/js.txt of type nt:file and add the following

                  UserProperties.js

3) Create /apps/myclientlib/UserProperties.js of type nt:file and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.UserAdmin = {
    addSecondEmail: function(propPanel){
        var userForm = propPanel.userForm;
        var emailComp = userForm.find('name', 'email');

        var secondEmailComp = {
            "xtype":"textfield",
            "fieldLabel": "Second Email",
            "anchor":"100%",
            "name":"secondEmail"
        };

        userForm.insert(userForm.items.indexOf(emailComp[0]) + 1, secondEmailComp);
        userForm.doLayout();
    }
};

(function(){
    if(window.location.pathname == "/useradmin"){
        var fields = CQ.security.data.AuthRecord.FIELDS;
        fields.push({"name": "secondEmail"});

        var UA_INTERVAL = setInterval(function(){
            var userAdmin = CQ.Ext.getCmp("cq-useradmin");

            if(userAdmin && userAdmin.userProperties){
                clearInterval(UA_INTERVAL);
                MyClientLib.UserAdmin.addSecondEmail(userAdmin.userProperties);
            }
        }, 250);
    }
})();

Solution - 2

Not preferred; Login to CRXDE Lite (http://localhost:4502/crx/de), Overlay file /libs/cq/security/widgets/source/widgets/security/UserProperties.js by creating /apps/cq/security/widgets/source/widgets/security/UserProperties.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.UserAdmin = {
    addSecondEmail: function(propPanel){
        var userForm = propPanel.userForm;
        var emailComp = userForm.find('name', 'email');

        var secondEmailComp = {
            "xtype":"textfield",
            "fieldLabel": "Second Email",
            "anchor":"100%",
            "name":"secondEmail"
        };

        userForm.insert(userForm.items.indexOf(emailComp[0]) + 1, secondEmailComp);
        userForm.doLayout();
    }
};

CQ.shared.HTTP.get("/libs/cq/security/widgets/source/widgets/security/UserProperties.js");

(function(){
    if(window.location.pathname == "/useradmin"){
        var fields = CQ.security.data.AuthRecord.FIELDS;
        fields.push({"name": "secondEmail"});

        var UA_INTERVAL = setInterval(function(){
            var userAdmin = CQ.Ext.getCmp("cq-useradmin");

            if(userAdmin && userAdmin.userProperties){
                clearInterval(UA_INTERVAL);
                MyClientLib.UserAdmin.addSecondEmail(userAdmin.userProperties);
            }
        }, 250);
    }
})();