From 3eacc6c4e758dcb86956240fe674cfcce926b44f Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Fri, 9 Jan 2026 15:39:13 +0100 Subject: [PATCH] feat: Add SecuBox portal header to all Network Modes views Add unified SecuBox header navigation to all 12 Network Modes views for consistent portal integration when accessed from SecuBox Portal: - overview.js, router.js, accesspoint.js, doublenat.js - multiwan.js, relay.js, sniffer.js, travel.js - vpnrelay.js, dmz.js, wizard.js, settings.js Pattern: Wrap view content with secubox-page-wrapper and prepend SbHeader.render() to hide LuCI sidebar when in portal context. Co-Authored-By: Claude Opus 4.5 --- .../resources/view/network-modes/accesspoint.js | 7 ++++++- .../luci-static/resources/view/network-modes/dmz.js | 7 ++++++- .../resources/view/network-modes/doublenat.js | 7 ++++++- .../resources/view/network-modes/multiwan.js | 7 ++++++- .../resources/view/network-modes/overview.js | 10 ++++++++-- .../luci-static/resources/view/network-modes/relay.js | 7 ++++++- .../luci-static/resources/view/network-modes/router.js | 8 +++++++- .../resources/view/network-modes/settings.js | 8 +++++++- .../resources/view/network-modes/sniffer.js | 7 ++++++- .../luci-static/resources/view/network-modes/travel.js | 7 ++++++- .../resources/view/network-modes/vpnrelay.js | 7 ++++++- .../luci-static/resources/view/network-modes/wizard.js | 6 +++++- 12 files changed, 75 insertions(+), 13 deletions(-) diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js index 443b0698..35939255 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/accesspoint.js @@ -5,6 +5,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -148,7 +149,11 @@ return view.extend({ }); this.bindAccessPointActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, bindAccessPointActions: function(container) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/dmz.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/dmz.js index 2368477e..65f20595 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/dmz.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/dmz.js @@ -5,6 +5,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var lang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -158,7 +159,11 @@ return view.extend({ }); this.bindActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, bindActions: function(container) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js index 6cd058d1..621ffb9e 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/doublenat.js @@ -4,6 +4,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -56,7 +57,11 @@ return view.extend({ }); this.bindActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderWanSection: function(wan) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js index 353e82c9..60558b93 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/multiwan.js @@ -4,6 +4,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -63,7 +64,11 @@ return view.extend({ }); this.bindActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderLinkStatus: function(links, candidates) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js index b6edce4b..ea340629 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/overview.js @@ -6,6 +6,7 @@ 'require network-modes.helpers as helpers'; 'require secubox/help as Help'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; // Initialize global theme respecting LuCI preferences var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || @@ -61,6 +62,10 @@ return view.extend({ var modesData = (data.modes || {}).modes || []; var currentMode = status.current_mode || 'router'; + // Main wrapper with SecuBox header + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + // Build a full mode map using backend data + fallbacks var baseOrder = ['router', 'doublenat', 'multiwan', 'vpnrelay', 'bridge', 'accesspoint', 'relay', 'travel', 'sniffer']; var modeInfos = {}; @@ -361,8 +366,9 @@ return view.extend({ // Include CSS var cssLink = E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }); document.head.appendChild(cssLink); - - return view; + + wrapper.appendChild(view); + return wrapper; }, renderHeader: function(status, currentModeInfo) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js index 0631de43..23e8d3b0 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/relay.js @@ -5,6 +5,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -181,7 +182,11 @@ return view.extend({ }); this.bindRelayActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, bindRelayActions: function(container) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js index 2659da9d..f2261acb 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/router.js @@ -5,6 +5,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -47,6 +48,10 @@ return view.extend({ var frontendConfig = config.https_frontend || {}; var vhosts = config.virtual_hosts || []; + // Main wrapper with SecuBox header + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + var heroActions = [ E('button', { 'class': 'nm-btn nm-btn-primary', 'type': 'button', 'data-action': 'router-save' }, ['💾 ', _('Save & Apply')]), E('button', { 'class': 'nm-btn', 'type': 'button', 'data-action': 'router-config' }, ['📝 ', _('Preview Config')]), @@ -261,7 +266,8 @@ return view.extend({ }); this.bindRouterActions(container); - return container; + wrapper.appendChild(container); + return wrapper; }, bindRouterActions: function(container) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js index 37ae9f4f..584455d3 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/settings.js @@ -5,6 +5,7 @@ 'require uci'; 'require network-modes/api as api'; 'require network-modes.helpers as helpers'; +'require secubox-portal/header as SbHeader'; return view.extend({ load: function() { @@ -255,13 +256,18 @@ return view.extend({ }; return m.render().then(function(formEl) { - return E('div', { 'class': 'network-modes-dashboard nm-settings' }, [ + var container = E('div', { 'class': 'network-modes-dashboard nm-settings' }, [ E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/common.css') }), E('link', { 'rel': 'stylesheet', 'href': L.resource('network-modes/dashboard.css') }), helpers.createNavigationTabs('settings'), formEl ]); + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }); } }); diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js index aebb32fa..8fb75519 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/sniffer.js @@ -5,6 +5,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -114,7 +115,11 @@ return view.extend({ }); this.bindSnifferActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, bindSnifferActions: function(container) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js index 805f3374..1330b6bb 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/travel.js @@ -6,6 +6,7 @@ 'require network-modes.helpers as helpers'; 'require secubox/help as Help'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -136,7 +137,11 @@ return view.extend({ ]); this.bindTravelActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderSelectField: function(label, id, options, selected) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js index 1b0cdf40..8d58e4cc 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/vpnrelay.js @@ -4,6 +4,7 @@ 'require network-modes.api as api'; 'require network-modes.helpers as helpers'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var nmLang = (typeof L !== 'undefined' && L.env && L.env.lang) || (document.documentElement && document.documentElement.getAttribute('lang')) || @@ -55,7 +56,11 @@ return view.extend({ }); this.bindActions(container); - return container; + + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderVpnSection: function(vpn, cfg) { diff --git a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js index f2bbb2e3..07d7e54e 100644 --- a/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js +++ b/package/secubox/luci-app-network-modes/htdocs/luci-static/resources/view/network-modes/wizard.js @@ -7,6 +7,7 @@ 'require network-modes.helpers as helpers'; 'require network-modes/api as API'; 'require secubox-theme/theme as Theme'; +'require secubox-portal/header as SbHeader'; var callGetAvailableModes = rpc.declare({ object: 'luci.network-modes', @@ -113,7 +114,10 @@ return view.extend({ this.startRollbackPoll(); } - return container; + var wrapper = E('div', { 'class': 'secubox-page-wrapper' }); + wrapper.appendChild(SbHeader.render()); + wrapper.appendChild(container); + return wrapper; }, renderStatusBadges: function(status, currentMode) {