From 666ad237675d8d2d4a4b36d5805d5ef3b562536d Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Fri, 9 Jan 2026 16:28:04 +0100 Subject: [PATCH] feat: Add SecuBox portal header to luci-app-secubox views - Added SbHeader require and wrapper pattern to all 11 view files - All views now display SecuBox portal header for consistent navigation - Maintains existing SecuNav tabs for internal navigation Views updated: - dashboard.js - alerts.js - apps.js - modules.js - modules-debug.js - modules-minimal.js - dev-status.js - settings.js - help.js - wizard.js - monitoring.js Co-Authored-By: Claude Opus 4.5 --- .../htdocs/luci-static/resources/view/secubox/alerts.js | 6 +++++- .../htdocs/luci-static/resources/view/secubox/apps.js | 6 +++++- .../luci-static/resources/view/secubox/dashboard.js | 6 +++++- .../luci-static/resources/view/secubox/dev-status.js | 8 +++++++- .../htdocs/luci-static/resources/view/secubox/help.js | 8 +++++++- .../luci-static/resources/view/secubox/modules-debug.js | 8 +++++++- .../luci-static/resources/view/secubox/modules-minimal.js | 8 +++++++- .../htdocs/luci-static/resources/view/secubox/modules.js | 6 +++++- .../luci-static/resources/view/secubox/monitoring.js | 6 +++++- .../htdocs/luci-static/resources/view/secubox/settings.js | 6 +++++- .../htdocs/luci-static/resources/view/secubox/wizard.js | 7 ++++++- 11 files changed, 64 insertions(+), 11 deletions(-) diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/alerts.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/alerts.js index e7b8ab8a..92aacdc2 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/alerts.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/alerts.js @@ -5,6 +5,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; 'require poll'; // Load theme resources @@ -74,7 +75,10 @@ return view.extend({ }); }, 30); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function() { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/apps.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/apps.js index cb03f123..8cbd38b6 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/apps.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/apps.js @@ -6,6 +6,7 @@ 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; 'require secubox-theme/cascade as Cascade'; +'require secubox-portal/header as SbHeader'; 'require poll'; // Load global theme CSS @@ -113,7 +114,10 @@ return view.extend({ }); }, 10); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function(apps) { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js index 03f87f49..d8f025e6 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dashboard.js @@ -6,6 +6,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources once document.head.appendChild(E('link', { @@ -70,7 +71,10 @@ return view.extend({ }); }, 30); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function() { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dev-status.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dev-status.js index a0834e5c..ed935e32 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dev-status.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/dev-status.js @@ -6,6 +6,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -548,13 +549,18 @@ return view.extend({ `) ]); - return E('div', { 'class': 'secubox-dev-status-page' }, [ + var container = E('div', { 'class': 'secubox-dev-status-page' }, [ E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/core/variables.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }), SecuNav.renderTabs('dev-status'), this.renderHeader(), main ]); + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function() { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/help.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/help.js index ee045b2a..9e483e07 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/help.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/help.js @@ -5,6 +5,7 @@ 'require secubox/help as Help'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -43,7 +44,7 @@ return view.extend({ var data = status || {}; var helpPages = Help.getAllHelpPages(); - return E('div', { 'class': 'secubox-help-page' }, [ + var container = E('div', { 'class': 'secubox-help-page' }, [ E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/core/variables.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }), SecuNav.renderTabs('help'), @@ -52,6 +53,11 @@ return view.extend({ this.renderSupportSection(), this.renderFooter() ]); + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function(status) { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-debug.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-debug.js index 8112e94b..0dff190b 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-debug.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-debug.js @@ -4,6 +4,7 @@ 'require secubox-theme/theme as Theme'; 'require secubox/api as API'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -49,13 +50,18 @@ return view.extend({ var running = modules.filter(function(m) { return m.running; }).length; var installed = modules.filter(function(m) { return m.installed; }).length; - return E('div', { 'class': 'secubox-modules-debug' }, [ + var container = E('div', { 'class': 'secubox-modules-debug' }, [ E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/secubox.css') }), SecuNav.renderTabs('modules'), this.renderHeader(modules.length, running, installed), modules.length ? this.renderModuleGrid(modules) : this.renderEmptyState() ]); + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function(total, running, installed) { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-minimal.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-minimal.js index 36506588..a4f6ffad 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-minimal.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules-minimal.js @@ -3,6 +3,7 @@ 'require secubox-theme/theme as Theme'; 'require secubox/api as API'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -34,7 +35,7 @@ return view.extend({ render: function() { var status = this.statusData || {}; - return E('div', { 'class': 'secubox-modules-minimal' }, [ + var container = E('div', { 'class': 'secubox-modules-minimal' }, [ E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/common.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox/secubox.css') }), SecuNav.renderTabs('modules'), @@ -61,6 +62,11 @@ return view.extend({ ]) ]) ]); + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeaderChip: function(icon, label, value) { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules.js index a99c14c9..f1ec16e4 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/modules.js @@ -6,6 +6,7 @@ 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; 'require secubox-theme/cascade as Cascade'; +'require secubox-portal/header as SbHeader'; 'require poll'; // Load global theme CSS @@ -106,7 +107,10 @@ return view.extend({ }); }, 30); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function(modules) { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/monitoring.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/monitoring.js index b8ba48d7..e20cadc5 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/monitoring.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/monitoring.js @@ -6,6 +6,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -99,7 +100,10 @@ return view.extend({ this.hideLegacyTabMenu(); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function() { diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/settings.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/settings.js index 94a91f81..3c626d4c 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/settings.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/settings.js @@ -6,6 +6,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -444,7 +445,10 @@ return view.extend({ } }); - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, this)); }, diff --git a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/wizard.js b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/wizard.js index b1d9db17..b6df16ec 100644 --- a/luci-app-secubox/htdocs/luci-static/resources/view/secubox/wizard.js +++ b/luci-app-secubox/htdocs/luci-static/resources/view/secubox/wizard.js @@ -4,6 +4,7 @@ 'require secubox/api as API'; 'require secubox-theme/theme as Theme'; 'require secubox/nav as SecuNav'; +'require secubox-portal/header as SbHeader'; // Load theme resources document.head.appendChild(E('link', { @@ -61,7 +62,11 @@ return view.extend({ this.renderProfilesCard(), this.renderAppsCard() ]); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderHeader: function() {