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