Added new custom header structure

+ Moved custom header rewrite to dpcore
+ Restructure dpcore header rewrite sequence
+ Added advance custom header settings (zoraxy to upstream and zoraxy to downstream mode)
+ Added header remove feature
+ Removed password requirement for SMTP #80
+ Completed stream proxy module (TCP and UDP)
+ Optimized UX for reminding user to click Apply after port change
+ Added version number to footer #160

src/web/components/status.html

@@ -68,12 +68,13 @@
 <div class="standardContainer">
     <div class="ui divider"></div>
     <h4>Global Settings</h4>
-    <p>Inbound Port (Port to be proxied)</p>
+    <p>Inbound Port (Reverse Proxy Listening Port)</p>
     <div class="ui action fluid notloopbackOnly input">
+        <small id="applyButtonReminder">Click "Apply" button to confirm listening port changes</small>
         <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
-        <button class="ui basic notloopbackOnly button" onclick="handlePortChange();"><i class="ui green checkmark icon"></i> Apply</button>
+        <button class="ui green notloopbackOnly button" style="background: linear-gradient(60deg, #27e7ff, #00ca52);" onclick="handlePortChange();"><i class="ui checkmark icon"></i> Apply</button>
     </div>
-    <br>
+    <br><br>
     <div id="tls" class="ui toggle notloopbackOnly checkbox">
         <input type="checkbox">
         <label>Use TLS to serve proxy request</label>
@@ -160,6 +161,7 @@
 </div>
 <script>
     let loopbackProxiedInterface = false;
+    let currentListeningPort = 80;
     $(".advanceSettings").accordion();
 
     //Initial the start stop button if this is reverse proxied
@@ -176,6 +178,8 @@
     //Get the latest server status from proxy server
     function initRPStaste(){
         $.get("/api/proxy/status", function(data){
+            $("#incomingPort").off("change");
+
             if (data.Running == true){
                 $("#startbtn").addClass("disabled");
                 if (!loopbackProxiedInterface){
@@ -194,6 +198,15 @@
                 $("#serverstatus").removeClass("green");
             }
             $("#incomingPort").val(data.Option.Port);
+            currentListeningPort = data.Option.Port;
+            $("#incomingPort").on("change", function(){
+                let newPortValue = $("#incomingPort").val().trim();
+                if (currentListeningPort != newPortValue){
+                    $("#applyButtonReminder").show();
+                }else{
+                    $("#applyButtonReminder").hide();
+                }
+            });
             
         });
         
@@ -353,8 +366,11 @@
                 msgbox(data.error, false, 5000);
                 return;
             }
-            msgbox("Setting Updated");
+            msgbox("Listening Port Updated");
             initRPStaste();
+
+            //Hide the reminder text
+            $("#applyButtonReminder").hide();
         });
     }
 

src/web/components/streamprox.html

@@ -112,7 +112,6 @@
                     }
                     clearStreamProxyAddEditForm();
                     initProxyConfigList();
-                    $("#addproxyConfig").slideUp("fast");
                 },
                 error: function() {
                     msgbox('An error occurred while processing the request', false);
@@ -123,6 +122,7 @@
         function clearStreamProxyAddEditForm(){
             $('#streamProxyForm input, #streamProxyForm select').val('');
             $('#streamProxyForm select').dropdown('clear');
+            $("#streamProxyForm input[name=timeout]").val(10);
         }
 
         function cancelStreamProxyEdit(event=undefined) {
@@ -268,8 +268,6 @@
                     }
                 });
                 editingStreamProxyConfigUUID = configUUID;
-                $("#addproxyConfig").slideDown("fast");
-
             }else{
                 msgbox("Unable to load target config", false);
             }

src/web/components/utils.html

@@ -217,6 +217,7 @@
         $("#zoraxyinfo .uuid").text(data.NodeUUID);
         $("#zoraxyinfo .development").text(data.Development?"Development":"Release");
         $("#zoraxyinfo .version").text(data.Version);
+        $(".zrversion").text("v." + data.Version); //index footer
         $("#zoraxyinfo .boottime").text(timeConverter(data.BootTime) + ` ( ${secondsToDhms(parseInt(Date.now()/1000) - data.BootTime)} ago)`);
         $("#zoraxyinfo .zt").html(data.ZerotierConnected?`<i class="ui green check icon"></i> Connected`:`<i class="ui red times icon"></i> Link Error`);
         $("#zoraxyinfo .sshlb").html(data.EnableSshLoopback?`<i class="ui yellow exclamation triangle icon"></i> Enabled`:`Disabled`);
@@ -341,15 +342,6 @@
             form.find('input[name="username"]').parent().removeClass('error');
         }
 
-        // validate password
-        const password = form.find('input[name="password"]').val().trim();
-        if (password === '') {
-            form.find('input[name="password"]').parent().addClass('error');
-            isValid = false;
-        } else {
-            form.find('input[name="password"]').parent().removeClass('error');
-        }
-
         // validate sender address
         const senderAddr = form.find('input[name="senderAddr"]').val().trim();
         if (!emailRegex.test(senderAddr)) {

src/web/index.html

@@ -154,7 +154,7 @@
         <br><br>
         <div class="ui divider"></div>
         <div class="ui container" style="color: grey; font-size: 90%">
-            <p>CopyRight Zoraxy Project and its authors © 2021 - <span class="year"></span></p>
+            <p><a href="https://zoraxy.arozos.com" target="_blank">Zoraxy</a> <span class="zrversion"></span> © 2021 - <span class="year"></span> tobychui. Licensed under AGPL</p>
         </div>
         
         <div id="messageBox" class="ui green floating big compact message">

src/web/main.css

@@ -509,6 +509,16 @@ body{
     }
   }
 
+  /* Remind message for user forgetting to click Apply button*/
+  #applyButtonReminder{
+    position: absolute; 
+    bottom:-1.6em; 
+    left: 0; 
+    font-weight: bolder; 
+    color: #faac26; 
+    display:none;
+  }
+
 /*
   HTTP Proxy & Virtual Directory
 */

src/web/snippet/customHeaders.html

@@ -23,7 +23,7 @@
             <table class="ui very basic compacted unstackable celled table">
                 <thead>
                 <tr>
-                    <th>Name</th>
+                    <th>Key</th>
                     <th>Value</th>
                     <th>Remove</th>
                 </tr></thead>
@@ -34,18 +34,29 @@
                 </tbody>
             </table>
             <div class="ui divider"></div>
-            <h4>Add Custom Header</h4>
-            <p>Add custom header(s) into this proxy target</p>
+            <h4>Edit Custom Header</h4>
+            <p>Add or remove custom header(s) over this proxy target</p>
             <div class="scrolling content ui form">
-                <div class="three small fields credentialEntry">
-                    <div class="field">
-                        <input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
+                <div class="five small fields credentialEntry">
+                    <div class="field" align="center">
+                        <button id="toOriginButton" title="Downstream to Upstream" class="ui circular basic active button">Zoraxy <i class="angle double right blue icon" style="margin-right: 0.4em;"></i> Origin</button>
+                        <button id="toClientButton" title="Upstream to Downstream" class="ui circular basic button">Client <i class="angle double left orange icon" style="margin-left: 0.4em;"></i> Zoraxy</button>
+                    </div>
+                    <div class="field" align="center">
+                        <button id="headerModeAdd" class="ui circular basic active button"><i class="ui green circle add icon"></i> Add Header</button>
+                        <button id="headerModeRemove" class="ui circular basic button"><i class="ui red circle times icon"></i> Remove Header</button>
                     </div>
                     <div class="field">
+                        <label>Header Key</label>
+                        <input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
+                        <small>The header key is <b>NOT</b> case sensitive</small>
+                    </div>
+                    <div class="field">
+                        <label>Header Value</label>
                         <input id="headerValue" type="text" placeholder="value1,value2,value3" autocomplete="off">
                     </div>
                     <div class="field" >
-                        <button class="ui basic button" onclick="addCustomHeader();"><i class="green add icon"></i> Add Header</button>
+                        <button class="ui basic button" onclick="addCustomHeader();"><i class="green add icon"></i> Add Header Rewrite Rule</button>
                     </div>
                     <div class="ui divider"></div>
                 </div>
@@ -75,6 +86,47 @@
                 parent.hideSideWrapper(true);
             }
 
+            //Bind events to header mod mode
+            $("#headerModeAdd").on("click", function(){
+                $("#headerModeAdd").addClass("active");
+                $("#headerModeRemove").removeClass("active");
+                $("#headerValue").parent().show();
+            });
+
+            $("#headerModeRemove").on("click", function(){
+                $("#headerModeAdd").removeClass("active");
+                $("#headerModeRemove").addClass("active");
+                $("#headerValue").parent().hide();
+            });
+
+            //Bind events to header directions option
+            $("#toOriginButton").on("click", function(){
+                $("#toOriginButton").addClass("active");
+                $("#toClientButton").removeClass("active");
+            });
+
+            $("#toClientButton").on("click", function(){
+                $("#toOriginButton").removeClass("active");
+                $("#toClientButton").addClass("active");
+            });
+
+            //Return "add" or "remove" depending on mode user selected
+            function getHeaderEditMode(){
+                if ($("#headerModeAdd").hasClass("active")){
+                    return "add";
+                }
+
+                return "remove";
+            }
+
+            //Return "toOrigin" or "toClient"
+            function getHeaderDirection(){
+                if ($("#toOriginButton").hasClass("active")){
+                    return "toOrigin";
+                }
+                return "toClient";
+            }
+
             //$("#debug").text(JSON.stringify(editingEndpoint));
 
             function addCustomHeader(){
@@ -88,18 +140,21 @@
                     $("#headerName").parent().removeClass("error");
                 }
 
-                if (value == ""){
-                    $("#headerValue").parent().addClass("error");
-                    return
-                }else{
-                    $("#headerValue").parent().removeClass("error");
+                if (getHeaderEditMode() == "add"){
+                    if (value == ""){
+                        $("#headerValue").parent().addClass("error");
+                        return
+                    }else{
+                        $("#headerValue").parent().removeClass("error");
+                    }
                 }
 
                 $.ajax({
                     url: "/api/proxy/header/add",
                     data: {
-                        "type": editingEndpoint.ept,
+                        "type": getHeaderEditMode(),
                         "domain": editingEndpoint.ep,
+                        "direction":getHeaderDirection(),
                         "name": name,
                         "value": value
                     },
@@ -129,7 +184,7 @@
                 $.ajax({
                     url: "/api/proxy/header/remove",
                     data: {
-                        "type": editingEndpoint.ept,
+                        //"type": editingEndpoint.ept,
                         "domain": editingEndpoint.ep,
                         "name": name,
                     },
@@ -157,10 +212,16 @@
                            
                             $("#headerTable").html("");
                             data.forEach(header => {
+                                let editModeIcon = header.IsRemove?`<i class="ui red times circle icon"></i>`:`<i class="ui green add circle icon"></i>`;
+                                let direction = (header.Direction==0)?`<i class="angle double right blue icon"></i>`:`<i class="angle double left orange icon"></i>`;
+                                let valueField = header.Value;
+                                if (header.IsRemove){
+                                    valueField = "<small style='color: grey;'>(Field Removed)</small>";
+                                }
                                 $("#headerTable").append(`
                                 <tr>
-                                    <td>${header.Key}</td>
-                                    <td>${header.Value}</td>
+                                    <td>${direction} ${header.Key}</td>
+                                    <td>${editModeIcon} ${valueField}</td>
                                     <td><button class="ui basic circular mini red icon button" onclick="deleteCustomHeader('${header.Key}');"><i class="ui trash icon"></i></button></td>
                                 </tr>
                                 `);