Custom header support

+ Added custom header + Removed unused files
2025-08-10 23:27:50 +02:00 · 2024-02-17 20:28:19 +08:00
parent 216b53f224
commit 33c7c5fa00
30 changed files with 488 additions and 9436 deletions
--- a/src/web/components/httprp.html
+++ b/src/web/components/httprp.html
@@ -9,7 +9,7 @@
                <tr>
                    <th>Host</th>
                    <th>Destination</th>
-                    <!-- <th>Virtual Directory</th> -->
+                    <th>Virtual Directory</th>
                    <th>Basic Auth</th>
                    <th class="no-sort" style="min-width:100px;">Actions</th>
                </tr>
@@ -30,11 +30,11 @@
            $("#httpProxyList").html(``);
            if (data.error !== undefined){
                    $("#httpProxyList").append(`<tr>
-                    <td data-label="" colspan="4"><i class="remove icon"></i> ${data.error}</td>
+                    <td data-label="" colspan="5"><i class="remove icon"></i> ${data.error}</td>
                </tr>`);
            }else if (data.length == 0){
                $("#httpProxyList").append(`<tr>
-                    <td data-label="" colspan="4"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
+                    <td data-label="" colspan="5"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
                </tr>`);
            }else{
                data.forEach(subd => {
@@ -65,12 +65,13 @@
                    vdList += `</div>`;

                    if (subd.VirtualDirectories.length == 0){
-                        vdList = `<i class="ui green circle check icon"></i> No Virtual Directory Rule`;
+                        vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;"><i class="check icon"></i> No Virtual Directory</small>`;
                    }

                    $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
                        <td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
                        <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
+                        <td data-label="" editable="true" datatype="vdir">${vdList}</td>
                        <td data-label="" editable="true" datatype="basicauth">${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
                        <td class="center aligned" editable="true" datatype="action" data-label="">
                            <button class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
@@ -140,6 +141,12 @@
                    </div>
                `;
                column.empty().append(input);
+            }else if (datatype == "vdir"){
+                //Append a quick access button for vdir page
+                column.append(`<button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="quickEditVdir('${uuid}');">
+                    <i class="ui yellow folder icon"></i> Edit Virtual Directories
+                </button>`);
+
            }else if (datatype == "basicauth"){
                let requireBasicAuth = payload.RequireBasicAuth;
                let checkstate = "";
@@ -150,7 +157,20 @@
                    <input type="checkbox" class="RequireBasicAuth" ${checkstate}>
                    <label>Require Basic Auth</label>
                    </div>
-                    <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');">Edit Credentials</button>`);
+                    <button class="ui basic tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editBasicAuthCredentials('${uuid}');"><i class="ui blue user circle icon"></i> Edit Credentials</button>
+                    <div class="ui basic advance segment" style="padding: 0.4em !important; border-radius: 0.4em;">
+                        <div class="ui endpointAdvanceConfig accordion" style="padding-right: 0.6em;">
+                            <div class="title">
+                                <i class="dropdown icon"></i>
+                                Advance Configs
+                            </div>
+                            <div class="content">
+                                <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editCustomHeaders('${uuid}');"><i class="heading icon"></i> Custom Headers</button>
+                                <!-- <button class="ui basic compact tiny button" style="margin-left: 0.4em; margin-top: 0.4em;" onclick="editLoadBalanceOptions('${uuid}');"><i class="blue server icon"></i> Load Balance</button> -->
+                            </div>
+                        </div>
+                    <div>
+                `);

            }else if (datatype == 'action'){
                column.empty().append(`
@@ -173,6 +193,7 @@
            }
        });

+        $(".endpointAdvanceConfig").accordion();
        $("#httpProxyList").find(".editBtn").addClass("disabled");
    }

@@ -220,6 +241,7 @@
        })
    }
    
+    /* button events */
    function editBasicAuthCredentials(uuid){
        let payload = encodeURIComponent(JSON.stringify({
            ept: "host",
@@ -227,6 +249,23 @@
        }));
        showSideWrapper("snippet/basicAuthEditor.html?t=" + Date.now() + "#" + payload);
    }
+
+    function quickEditVdir(uuid){
+        openTabById("vdir");
+        $("#vdirBaseRoutingRule").parent().dropdown("set selected", uuid);
+    }
+
+    function editCustomHeaders(uuid){
+        let payload = encodeURIComponent(JSON.stringify({
+            ept: "host",
+            ep: uuid
+        }));
+        showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload);
+    }
+
+    function editLoadBalanceOptions(uuid){
+        alert(uuid);
+    }
    

    //Bind on tab switch events
--- a/src/web/components/status.html
+++ b/src/web/components/status.html
@@ -593,7 +593,7 @@
                {
                    type: 'line',
                    responsive: true,
-                    resizeDelay: 100,
+                    resizeDelay: 300,
                    options: {
                        animation: false,
                        maintainAspectRatio: false,
--- a/src/web/components/subd.html
+++ b/src/web/components/subd.html
@@ -1,79 +0,0 @@
-<div class="standardContainer">
-    <div class="ui basic segment">
-        <h2>HTTP Proxy</h2>
-        <p>Proxy HTTP server with HTTP or HTTPS. Sometime subdomain contain a prefix to the main domain name, separated by a dot. <br>For example, in the domain "blog.example.com," "blog" is the subdomain.</p>
-    </div>
-    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
-        <table class="ui celled sortable unstackable compact table">
-            <thead>
-                <tr>
-                    <th>Host</th>
-                    <th>Destination</th>
-                    <th>Virtual Directory</th>
-                    <th>Basic Auth</th>
-                    <th class="no-sort" style="min-width: 7.2em;">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="subdList">
-            
-            </tbody>
-        </table>
-    </div>
-    <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
-    <br><br>
-</div>
-
-<script>
-    function listProxyEndpoints(){
-        $.get("/api/proxy/list?type=host", function(data){
-            $("#subdList").html(``);
-            if (data.error !== undefined){
-                    $("#subdList").append(`<tr>
-                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
-                </tr>`);
-            }else if (data.length == 0){
-                $("#subdList").append(`<tr>
-                    <td data-label="" colspan="3"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
-                </tr>`);
-            }else{
-                data.forEach(subd => {
-                    let tlsIcon = "";
-                    let subdData = encodeURIComponent(JSON.stringify(subd));
-                    if (subd.RequireTLS){
-                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                        if (subd.SkipCertValidations){
-                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
-                        }
-                    }
-
-                    let inboundTlsIcon = "";
-                    if ($("#tls").checkbox("is checked")){
-                        inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
-                        if (subd.BypassGlobalTLS){
-                            inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
-                        }
-                    }else{
-                        inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
-                    }
-                    
-
-                    $("#subdList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
-                        <td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
-                        <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
-                        <td data-label="" editable="true" datatype="vdir">WIP</td>
-                        <td data-label="" editable="true" datatype="basicauth">${subd.RequireBasicAuth?`<i class="ui green check icon"></i>`:`<i class="ui grey remove icon"></i>`}</td>
-                        <td class="center aligned" editable="true" datatype="action" data-label="">
-                            <button class="ui circular mini basic icon button editBtn" onclick='editEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
-                            <button class="ui circular mini red basic icon button" onclick='deleteEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
-                        </td>
-                    </tr>`);
-                });
-            }
-        });
-    }   
-
-    //Bind on tab switch events
-    tabSwitchEventBind["subd"] = function(){
-        listProxyEndpoints();
-    }
-</script>
--- a/src/web/components/uptime.html
+++ b/src/web/components/uptime.html
@@ -177,7 +177,7 @@
        $("#utmrender").append(`<div class="ui basic segment statusbar">
            <div class="domain">
                <div style="position: absolute; top: 0; right: 0.4em;">
-                    <p class="onlineStatus" style="display: inline-block; font-size: 1.3em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
+                    <p class="onlineStatus" style="display: inline-block; font-size: 1.2em; padding-right: 0.5em; padding-left: 0.3em; ${onlineStatusCss}">${currentOnlineStatus}</p>
                </div>
                <div>
                    <h3 class="ui header" style="margin-bottom: 0.2em;">${name}</h3>
--- a/src/web/components/vdir.html
+++ b/src/web/components/vdir.html
@@ -207,6 +207,7 @@
    }

    function reloadVdirList(){
+        $("#vdirList").find(".editBtn").removeClass("disabled");
        if ($("#useRootProxyRouterForVdir")[0].checked){
            loadVdirList("root");
            return;
@@ -314,7 +315,8 @@
    }

    function editVdir(matchingPath, ept){
-        let targetDOM = $(".vdirEntry[vdirid='" + matchingPath.hexEncode() + "']") 
+        let targetDOM = $(".vdirEntry[vdirid='" + matchingPath.hexEncode() + "']");
+        $("#vdirList").find(".editBtn").addClass("disabled");
        let payload = $(targetDOM).attr("payload").hexDecode();
        payload = JSON.parse(payload);
        console.log(payload);