From 809e1fa8153046869609837da14b75b599c0463a Mon Sep 17 00:00:00 2001 From: Toby Chui Date: Tue, 10 Jun 2025 22:04:04 +0800 Subject: [PATCH] Flattened HTTP proxy rule edit menu --- src/web/components/httprp.html | 238 ++++++++++++++++---------- src/web/index.html | 12 +- src/web/snippet/accessRuleEditor.html | 1 - src/web/snippet/aliasEditor.html | 7 +- src/web/snippet/customHeaders.html | 5 + src/web/snippet/hostAccessEditor.html | 44 +++-- src/web/snippet/upstreams.html | 11 -- 7 files changed, 194 insertions(+), 124 deletions(-) diff --git a/src/web/components/httprp.html b/src/web/components/httprp.html index 890d8cf..e7b4f4f 100644 --- a/src/web/components/httprp.html +++ b/src/web/components/httprp.html @@ -46,7 +46,7 @@ left: 50%; transform: translate(-50%, -50%); width: 68vw; - height: 70vh; + height: 75vh; background-color: var(--theme_bg_primary); padding: 1.4em; border-radius: .6em; @@ -204,12 +204,18 @@ Virtual Directory + + Alias + TLS / SSL Headers + + Access Rules + Security @@ -238,9 +244,6 @@ -
- - @@ -292,63 +295,80 @@ + +
+ +
+ +
+
+

Work In Progress

+
+ +
+
+ +
+ +
-
- - -
-
- - +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
-
-
- - -
-
-
-
- - -
-
-
-
- - -
+
+ + +
+ +
+ + +

+
+ +
-
- - -
- -
- - -

-
- - -
-
- -
- SSL -
@@ -882,8 +902,7 @@ "ratenum" :rateLimit, "tags": tags, }); - alert("save function wip, see console.log"); - return; + $.cjax({ url: "/api/proxy/edit", method: "POST", @@ -940,21 +959,6 @@ showEditorSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload); } - function editAccessRule(uuid){ - let payload = encodeURIComponent(JSON.stringify({ - ept: "host", - ep: uuid - })); - showEditorSideWrapper("snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload); - } - - function editAliasHostnames(uuid){ - let payload = encodeURIComponent(JSON.stringify({ - ept: "host", - ep: uuid - })); - showEditorSideWrapper("snippet/aliasEditor.html?t=" + Date.now() + "#" + payload); - } function quickEditVdir(uuid){ openTabById("vdir"); @@ -1113,9 +1117,8 @@ function getTagsArrayFromEndpoint(endpoint){ - let targetProxyRuleEle = $(".subdEntry[eptuuid='" + endpoint + "'] td[data-label='tags']"); - let tags = $(targetProxyRuleEle).attr("payload"); - return JSON.parse(decodeURIComponent(tags)); + let subd = getEditingHttpProxyCachedSubd(); + return tags = subd.Tags || []; } /* Modal Events */ @@ -1138,10 +1141,18 @@ if (hostname == ""){ return null; } - return decodeURIComponent(hostname); } + function getEditingHttpProxyCachedSubd(){ + let hostname = getEditingHttpProxyHostname(); + if (hostname == null){ + return null; + } + let subd = httpProxyList.find(subd => subd.RootOrMatchingDomain === hostname); + return subd; + } + //Initialize the http proxy rule editor function initHttpProxyRuleEditorModal(rulepayload){ let subd = JSON.parse(JSON.stringify(rulepayload)); @@ -1200,7 +1211,7 @@ }); editor.find(".downstream_alias_hostname").html(aliasHTML); - + //TODO: Move this to SSL TLS section let enableQuickRequestButton = true; let domains = [subd.RootOrMatchingDomain]; //Domain for getting certificate if needed for (var i = 0; i < subd.MatchingDomainAlias.length; i++){ @@ -1229,13 +1240,6 @@ editor.find(".getCertificateBtn").addClass("disabled"); } - //Bind events for action buttons - editor.find(".editAliasHostnameBtn").off("click").on("click", function(){ - editAliasHostnames(uuid); - }); - editor.find(".editAccessRuleBtn").off("click").on("click", function(){ - editAccessRule(uuid); - }); editor.find(".getCertificateBtn").off("click").on("click", function(){ requestCertificateForExistingHost(uuid, certificateDomains, this); }); @@ -1244,7 +1248,19 @@ editor.find(".upstream_list").html(renderUpstreamList(subd)); editor.find(".editUpstreamButton").off("click").on("click", function(){ editUpstreams(uuid); - }) + }); + + editor.find(".EnableUptimeMonitor").off("change"); + editor.find(".EnableUptimeMonitor").prop("checked", !subd.DisableUptimeMonitor); + editor.find(".EnableUptimeMonitor").on("change", function() { + saveProxyInlineEdit(uuid); + }); + + editor.find(".UseStickySession").off("change"); + editor.find(".UseStickySession").prop("checked", subd.UseStickySession); + editor.find(".UseStickySession").on("change", function() { + saveProxyInlineEdit(uuid); + }); /* ------------ Vdirs ------------ */ editor.find(".vdir_list").html(renderVirtualDirectoryList(subd)); @@ -1252,7 +1268,17 @@ quickEditVdir(uuid); }); - /* Headers */ + /* ------------ Alias ------------ */ + (() => { + let payload = encodeURIComponent(JSON.stringify({ + ept: "host", + ep: uuid + })); + let frameURL = "snippet/aliasEditor.html?t=" + Date.now() + "#" + payload; + editor.find(".rpconfig_content[rpcfg='alias'] .wrapper_frame").attr('src', frameURL); + })(); + + /* ------------ Headers ------------ */ (() => { let payload = encodeURIComponent(JSON.stringify({ ept: "host", @@ -1262,6 +1288,16 @@ editor.find(".rpconfig_content[rpcfg='headers'] .wrapper_frame").attr('src', frameURL); })(); + /* ------------ Access Rule ------------ */ + (()=>{ + let payload = encodeURIComponent(JSON.stringify({ + ept: "host", + ep: uuid + })); + let frameURL = "snippet/hostAccessEditor.html?t=" + Date.now() + "#" + payload; + editor.find(".rpconfig_content[rpcfg='accessrule'] .wrapper_frame").attr('src', frameURL); + })(); + /* ------------ Security ------------ */ let authMethodContent = ""; @@ -1293,14 +1329,34 @@ editor.find(".RateLimit").parent().addClass("disabled"); } + function rateLimitChangeEvent(){ + let rateLimitValue = $(this).val(); + if (rateLimitValue < 0 || isNaN(rateLimitValue)) { + msgbox("Rate limit must be >= 0", false); + $(this).val(subd.RateLimit); // Reset to previous valid value + return; + } + saveProxyInlineEdit(uuid); + } + editor.find(".RequireRateLimit").off("change").on("change", function() { if ($(this).is(":checked")) { editor.find(".RateLimit").parent().removeClass("disabled"); } else { editor.find(".RateLimit").parent().addClass("disabled"); } + + if (subd.RateLimit === 0) { + subd.RateLimit = 100; // Set default rate limit to 100 if uninitialized + $(this).val(subd.RateLimit); + editor.find(".RateLimit").off("change"); // Temporarily disable the change event handler + editor.find(".RateLimit").val(100); // Set the value to 100 + editor.find(".RateLimit").on("change", rateLimitChangeEvent); // Re-enable the change event handler + } + saveProxyInlineEdit(uuid); }); editor.find(".RateLimit").attr("value", subd.RateLimit); + editor.find(".RateLimit").off("change").on("change", rateLimitChangeEvent); /* ------------ TLS ------------ */ @@ -1317,11 +1373,9 @@ console.log(subd); } - function updateVdirInProxyEditor(){ - // When page switch from Vdir and back to this page - // there is a chance where the user has modified the Vdir - // we need to get the latest setting from server side and - // render it again + // Pull the latest proxy config from server side again and populate the editor + // with latest settings + function resyncProxyEditorConfig(){ let currentEditingHostname = getEditingHttpProxyHostname(); $.get("/api/proxy/list?type=host", function(data){ data.sort((a,b) => (a.RootOrMatchingDomain > b.RootOrMatchingDomain) ? 1 : ((b.RootOrMatchingDomain > a.RootOrMatchingDomain) ? -1 : 0)); @@ -1341,13 +1395,14 @@ let cfgPageId = $(this).attr("cfgpage"); $("#httprpEditModal .rpconfig_content").hide(); $(`#httprpEditModal .rpconfig_content[rpcfg='${cfgPageId}']`).show(); + $("#httprpEditModal .wrapper_frame").contents().scrollTop(0); hideEditorSideWrapper(); //Always close the side wrapper on tab change }); $("#httprpEditModal .editor_back_button").on("click", function(event) { // Prevent click event from propagating to the modal background event.stopPropagation(); - hideEditorSideWrapper(); + hideEditorSideWrapperViaBtn(); }); function showEditorSideWrapper(url){ @@ -1355,9 +1410,13 @@ $("#httprpEditModal .editor_side_wrapper").fadeIn("fast"); } + function hideEditorSideWrapperViaBtn(){ + hideEditorSideWrapper(); + resyncProxyEditorConfig(); + } + function hideEditorSideWrapper(){ $("#httprpEditModal .editor_side_wrapper").fadeOut("fast"); - $("#httprpEditModal .editor_side_wrapper .wrapper_frame").attr('src', "snippet/placeholder.html"); } @@ -1381,7 +1440,10 @@ tabSwitchEventBind["httprp"] = function(){ //Check if the proxy editor is opened if ($("#httprpEditModalWrapper").is(":visible")) { - //Update the information in the modal + // When page switch from Vdir and back to this page + // there is a chance where the user has modified the Vdir + // we need to get the latest setting from server side and + // render it again updateVdirInProxyEditor(); } else { listProxyEndpoints(); diff --git a/src/web/index.html b/src/web/index.html index ac3480a..27cd438 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -342,9 +342,9 @@ $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(false); } - if (editorSideWrapper.is(":visible")){ - editorSideWrapper[0].contentWindow.setDarkTheme(false); - } + $(editorSideWrapper).each(function(){ + $(this)[0].contentWindow.setDarkTheme(false); + }) if ($("#pluginContextLoader").is(":visible")){ $("#pluginContextLoader")[0].contentWindow.setDarkTheme(false); @@ -355,9 +355,9 @@ if ($(".sideWrapper").is(":visible")){ $(".sideWrapper iframe")[0].contentWindow.setDarkTheme(true); } - if (editorSideWrapper.is(":visible")){ - editorSideWrapper[0].contentWindow.setDarkTheme(true); - } + $(editorSideWrapper).each(function(){ + $(this)[0].contentWindow.setDarkTheme(true); + }) if ($("#pluginContextLoader").is(":visible")){ $("#pluginContextLoader")[0].contentWindow.setDarkTheme(true); } diff --git a/src/web/snippet/accessRuleEditor.html b/src/web/snippet/accessRuleEditor.html index aa92626..ae18548 100644 --- a/src/web/snippet/accessRuleEditor.html +++ b/src/web/snippet/accessRuleEditor.html @@ -264,7 +264,6 @@ } } - document.getElementById('accessRuleSelector').addEventListener('change', handleSelectEditingAccessRule); document.getElementById('accessRuleForm').addEventListener('submit', handleCreateNewAccessRule); diff --git a/src/web/snippet/aliasEditor.html b/src/web/snippet/aliasEditor.html index 76a504e..ec8b092 100644 --- a/src/web/snippet/aliasEditor.html +++ b/src/web/snippet/aliasEditor.html @@ -14,13 +14,14 @@
+

Enter alias hostname or wildcard matching keywords for

@@ -50,10 +51,6 @@
-
-
- -




diff --git a/src/web/snippet/customHeaders.html b/src/web/snippet/customHeaders.html index 4944da9..fe2af1e 100644 --- a/src/web/snippet/customHeaders.html +++ b/src/web/snippet/customHeaders.html @@ -27,6 +27,11 @@ body.darkTheme #permissionPolicyEditor .experimental{ background-color: rgb(41, 41, 41); } + + .advanceoptions{ + background: var(--theme_advance) !important; + border-radius: 0.4em !important; + } diff --git a/src/web/snippet/hostAccessEditor.html b/src/web/snippet/hostAccessEditor.html index 329e848..6413b30 100644 --- a/src/web/snippet/hostAccessEditor.html +++ b/src/web/snippet/hostAccessEditor.html @@ -35,7 +35,7 @@ #accessRuleList{ padding: 0.6em; - border: 1px solid rgb(228, 228, 228); + /* border: 1px solid rgb(228, 228, 228); */ border-radius: 0.4em !important; max-height: calc(100vh - 15em); min-height: 300px; @@ -65,15 +65,6 @@
-
-
-
- Host Access Settings -
-
-
-
-

Select an access rule to apply blacklist / whitelist filtering

@@ -87,9 +78,7 @@

- - - +


@@ -176,6 +165,35 @@ let accessRuleID = $(accessRuleObject).attr("ruleid"); $(".accessRule").removeClass('active'); $(accessRuleObject).addClass('active'); + + //Updates 2025-06-10: Added auto save on change feature + applyChange(); + } + + + function applyChange(){ + let newAccessRuleID = $(".accessRule.active").attr("ruleid"); + let targetEndpoint = editingEndpoint.ep; + $.cjax({ + url: "/api/access/attach", + method: "POST", + data: { + id: newAccessRuleID, + host: targetEndpoint + }, + success: function(data){ + if (data.error != undefined){ + parent.msgbox(data.error, false); + }else{ + parent.msgbox("Access Rule Updated"); + + //Modify the parent list if exists + if (parent != undefined && parent.updateAccessRuleNameUnderHost){ + parent.updateAccessRuleNameUnderHost(targetEndpoint, newAccessRuleID); + } + } + } + }); } function applyChangeAndClose(){ diff --git a/src/web/snippet/upstreams.html b/src/web/snippet/upstreams.html index 285d084..779d763 100644 --- a/src/web/snippet/upstreams.html +++ b/src/web/snippet/upstreams.html @@ -75,13 +75,6 @@
-
-
- Upstreams / Load Balance -
-
-
-
Upstreams Add Upstream @@ -159,10 +152,6 @@

-
-
- -