Better 404 page and rules disable toggle

src/web/components/httprp.html

@@ -3,6 +3,11 @@
         <h2>HTTP Proxy</h2>
         <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
     </div>
+    <style>
+        #httpProxyList .ui.toggle.checkbox input:checked ~ label::before{
+            background-color: #00ca52 !important;
+        }
+    </style>
     <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
         <table class="ui celled sortable unstackable compact table">
             <thead>
@@ -68,14 +73,23 @@
                         vdList = `<small style="opacity: 0.3; pointer-events: none; user-select: none;"><i class="check icon"></i> No Virtual Directory</small>`;
                     }
 
+                    var enableChecked = "checked";
+                    if (subd.Disabled){
+                        enableChecked = "";
+                    }
+
                     $("#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>
-                            <button class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button>
+                            <div class="ui toggle tiny fitted checkbox" style="margin-bottom: -0.5em; margin-right: 0.4em;" title="Enable / Disable Rule">
+                                <input type="checkbox" class="enableToggle" name="active" ${enableChecked} eptuuid="${subd.RootOrMatchingDomain}" onchange="handleProxyRuleToggle(this);">
+                                <label></label>
+                            </div>
+                            <button title="Edit Proxy Rule" class="ui circular mini basic icon button editBtn inlineEditActionBtn" onclick='editEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="edit icon"></i></button>
+                            <button title="Remove Proxy Rule" class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("${(subd.RootOrMatchingDomain).hexEncode()}")'><i class="trash icon"></i></button>
                         </td>
                     </tr>`);
                 });
@@ -276,8 +290,28 @@
         showSideWrapper("snippet/customHeaders.html?t=" + Date.now() + "#" + payload);
     }
 
-    function editLoadBalanceOptions(uuid){
-        alert(uuid);
+    function handleProxyRuleToggle(object){
+        let endpointUUID = $(object).attr("eptuuid");
+        let isChecked = object.checked;
+        $.ajax({
+            url: "/api/proxy/toggle",
+            data: {
+                "ep": endpointUUID,
+                "enable": isChecked
+            },
+            success: function(data){
+                if (data.error != undefined){
+                    msgbox(data.error, false);
+                }else{
+                    if (isChecked){
+                        msgbox("Proxy Rule Enabled");
+                    }else{
+                        msgbox("Proxy Rule Disabled");
+                    }
+                    
+                }
+            }
+        })
     }
     
 

src/web/notfound.html

@@ -0,0 +1,55 @@
+<html>
+    <head>
+        <!-- Zoraxy Not Found Template -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css">
+        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js"></script>
+        <title>Not Found</title>
+        <style>
+            #msg{
+                position: absolute;
+                top: calc(50% - 150px);
+                left: calc(50% - 250px);
+                width: 500px;
+                height: 300px;
+                text-align: center;
+            }
+
+            #footer{
+                position: fixed;
+                padding: 2em;
+                padding-left: 5em;
+                padding-right: 5em;
+                bottom: 0px;
+                left: 0px;
+                width: 100%;
+            }   
+
+            small{
+                word-break: break-word;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="msg">
+            <h1 style="font-size: 6em; margin-bottom: 0px;"><i class="blue small question circle icon"></i></h1>
+            <div>
+                <h3 style="margin-top: 1em;">404 - Not Found</h3>
+                <div class="ui divider"></div>
+                <p>The requested URL was not found on this server<br>
+                    </p>
+                <div class="ui divider"></div>
+                <div style="text-align: left;">
+                    <small>Request time: <span id="reqtime"></span></small><br>
+                    <small id="reqURLDisplay">Request URI: <span id="requrl"></span></small>
+                </div>
+            </div>
+        </div>
+        <script>
+            $("#reqtime").text(new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'}));
+            $("#requrl").text(window.location.href);
+        </script>
+    </body>
+</html>