APM Modern Customization - modify Header in user-common.js and form in user-logon.js

Hi!

I try to customize the modern logon pages and as I have multiple pages so I want to modify the header section in the user-common.js and the single logon pages in the user-logon.js files.

I somehow cannot make it work, currently only the header from user-common.js gets rendered but not the user-logon.js. It seems to me that they interfere with each other the way that I try to do that.

user-common.js:

define(['require', 'exports', 'tslib', 'module', 'apmui/page/logon/View'], function (
    require,
    exports,
    tslib_1,
    module,
    View_1
) {
    'use strict';
    Object.defineProperty(exports, '__esModule', { value: true });
    requirejs.config({
        map: {
            'apmui/master/View': {
                'apmui/page/logon/View': module.id,
            },
        },
    });
    /* Replacement View component */
    var CustomLogonView = /** @class */ (function (_super) {
        tslib_1.__extends(CustomLogonView, _super);
        function CustomLogonView() {
            return (_super !== null && _super.apply(this, arguments)) || this;
        }
        CustomLogonView.prototype.componentDidMount = function () {
            _super.prototype.componentDidMount.call(this);

            var header = document.getElementsByClassName('apmui-header')[0];
            header.classList.add(
                'header',
                'sticky',
                'top-0',
                'left-0',
                'z-10',
                'w-full',
                'box-border',
                'flex',
                'items-center',
                'justify-center',
                'text-sm',
                'border-b',
                'border-b-gray-300',
                'dark:border-b-neutral-700'
            );
            header.innerHTML =
                '<div class="flex flex-col w-full max-w-7xl p-4 gap-4 justify-between"><div class="flex flex-col w-full gap-2 overflow-hidden"><div class="flex flex-row w-full gap-8 select-none"><a class="h-14 pointer-events-none flex flex-shrink-0 place-items-center gap-4 p-8 lg:pointer-events-auto lg:p-0" href="/"><img alt="" loading="lazy" width="185" height="56" decoding="async" data-nimg="1" src="images/logo.svg" style="color: transparent;"></a><span class="flex flex-col flex-grow justify-center text-primary text-3xl font-semibold">PAGE HEADER</span></div></div></div>';
        };
        return CustomLogonView;
    })(View_1.default);
    exports.default = CustomLogonView;
});

user-logon.js:

define(['require', 'exports', 'tslib', 'module', 'apmui/page/logon/View'], function (
    require,
    exports,
    tslib_1,
    module,
    View_1
) {
    'use strict';
    Object.defineProperty(exports, '__esModule', { value: true });
    requirejs.config({
        map: {
            'apmui/master/View': {
                'apmui/page/logon/View': module.id,
            },
        },
    });
    /* Replacement View component */
    var CustomLogonView = /** @class */ (function (_super) {
        tslib_1.__extends(CustomLogonView, _super);
        function CustomLogonView() {
            return (_super !== null && _super.apply(this, arguments)) || this;
        }
        CustomLogonView.prototype.componentDidMount = function () {
            _super.prototype.componentDidMount.call(this);

            var content = document.getElementsByClassName('apmui-content')[0];

            var content = document.createElement('div');
            content.style.cssText = 'max-width: 400px; width: 100%; padding-top: 20px;';
            content.innerHTML =
                "<p>Please register <a href='/register.php'>here</a> if you don't have an account yet.</p>";
        };
        return CustomLogonView;
    })(View_1.default);
    exports.default = CustomLogonView;
});

How can I then modify only the header (or footer) via the user-common.js and the logon page content via user-logon.js files? I'm thankful for any advice :) 

Greetings,
Eric