Added web directory manager

+ Added web directory manager
+ Added dummy service expose proxy page
+ Moved ACME and renew to a new section in TLS management page

src/web/components/cert.html

@@ -77,7 +77,6 @@
         </tbody>
         </table>
         <button class="ui basic button" onclick="initManagedDomainCertificateList();"><i class="green refresh icon"></i> Refresh List</button>
-        <button class="ui basic button" onclick="openACMEManager();"><i class="yellow refresh icon"></i> Auto Renew (ACME) Settings</button>
     </div>
     <div class="ui message">
         <h4><i class="info circle icon"></i> Sub-domain Certificates</h4>
@@ -85,11 +84,36 @@
         depending on your certificates coverage, you might need to setup them one by one (i.e. having two seperate certificate for <code>a.example.com</code> and <code>b.example.com</code>).<br>
         If you have a wildcard certificate that covers <code>*.example.com</code>, you can just enter <code>example.com</code> as server name in the form below to add a certificate.
     </div>
+    <div class="ui divider"></div>
+    <h4>Certificate Authority (CA) and Auto Renew (ACME)</h4>
+    <p>Management features regarding CA and ACME</p>
+    <p>The default CA to use when create a new subdomain proxy endpoint with TLS certificate</p>
+    <div class="ui fluid form">
+        <div class="field">
+            <div class="ui selection dropdown" id="defaultCA">
+                <input type="hidden" name="defaultCA">
+                <i class="dropdown icon"></i>
+                <div class="default text">Let's Encrypt</div>
+                <div class="menu">
+                  <div class="item" data-value="Let's Encrypt">Let's Encrypt</div>
+                  <div class="item" data-value="Buypass">Buypass</div>
+                  <div class="item" data-value="ZeroSSL">ZeroSSL</div>
+                </div>
+            </div>
+        </div>
+        <button class="ui basic icon button" onclick="saveDefaultCA();"><i class="ui blue save icon"></i> Save Settings</button>
+    </div><br>
+    
+    <h5>Certificate Renew / Generation (ACME) Settings</h5>
+    <p>This tool provide you a graphical interface to setup auto certificate renew on your (sub)domains. You can also manually generate a certificate if one of your domain do not have certificate.</p>
+    <button class="ui basic button" onclick="openACMEManager();"><i class="yellow external icon"></i> Open ACME Tool</button>
 </div>
 <script>
     var uploadPendingPublicKey = undefined;
     var uploadPendingPrivateKey = undefined;
 
+    $("#defaultCA").dropdown();
+
     //Delete the certificate by its domain
     function deleteCertificate(domain){
         if (confirm("Confirm delete certificate for " + domain + " ?")){
@@ -110,6 +134,11 @@
         
     }
 
+    function saveDefaultCA(){
+        //TODO: Add an endpoint to handle default CA set and load
+        alert("WIP");
+    }
+
     //List the stored certificates
     function initManagedDomainCertificateList(){
         $.get("/api/cert/list?date=true", function(data){

src/web/components/rproot.html

@@ -14,6 +14,13 @@
                     <label>Root require TLS connection <br><small>Check this if your proxy root URL starts with https://</small></label>
                 </div>
             </div>
+            <div class="ui horizontal divider">OR</div>
+            <div class="field">
+                <div class="ui checkbox">
+                    <input type="checkbox" id="useStaticWebServer" onchange="handleUseStaticWebServerAsRoot()">
+                    <label>Use Static Web Server as Root <br><small>Check this if you prefer a more Apache Web Server like experience</small></label>
+                </div>
+            </div>
             <br>
             <button class="ui basic button" onclick="setProxyRoot()"><i class="teal home icon" ></i> Update Proxy Root</button>
             <div class="ui divider"></div>
@@ -58,6 +65,30 @@
 <script>
     $("#advanceRootSettings").accordion();
 
+    function handleUseStaticWebServerAsRoot(){
+        let useStaticWebServer = $("#useStaticWebServer")[0].checked;
+        if (useStaticWebServer){
+            let staticWebServerURL = "127.0.0.1:" + $("#webserv_listenPort").val();
+            $("#proxyRoot").val(staticWebServerURL);
+            $("#proxyRoot").parent().addClass("disabled");
+            $("#rootReqTLS").parent().checkbox("set unchecked");
+            $("#rootReqTLS").parent().addClass("disabled");
+
+            //Check if web server is enabled. If not, ask if the user want to enable it
+            if (!$("#webserv_enable").parent().checkbox("is checked")){
+                confirmBox("Enable static web server now?", function(choice){
+                    if (choice == true){
+                        $("#webserv_enable").parent().checkbox("set checked");
+                    }
+                });
+            }
+        }else{
+            $("#rootReqTLS").parent().removeClass("disabled");
+            $("#proxyRoot").parent().removeClass("disabled");
+            initRootInfo();
+        }
+    }
+    
     function initRootInfo(){
         $.get("/api/proxy/list?type=root", function(data){
             if (data == null){
@@ -67,7 +98,6 @@
                 checkRootRequireTLS(data.Domain);
             }
         });
-
         
     }
     initRootInfo();

src/web/components/rules.html

@@ -188,6 +188,8 @@
                                 msgbox("Requesting certificate via Let's Encrypt...");
                                 console.log("Trying to get a new certificate via ACME");
                                 obtainCertificate(rootname);
+                            }else{
+                                msgbox("Proxy Endpoint Added");
                             }
                         });
                     }else{
@@ -467,7 +469,7 @@
     });
 
    // Obtain certificate from API, only support one domain
-    function obtainCertificate(domains) {
+    function obtainCertificate(domains, usingCa = "Let's Encrypt") {
         let filename = "";
         let email = acmeEmail;
         if (acmeEmail == ""){
@@ -494,7 +496,7 @@
                 domains: domains,
                 filename: filename,
                 email: email,
-                ca: "Let's Encrypt",
+                ca: usingCa,
             },
             success: function(response) {
                 if (response.error) {

src/web/components/webserv.html

@@ -78,6 +78,16 @@
         <h2>Web Directory Manager</h2>
         <p>Manage your files inside your web directory</p>
     </div>
+    <div class="ui basic segment" style="display:none;" id="webdirManDisabledNotice">
+        <h4 class="ui header">
+            <i class="ui red times icon"></i> 
+            <div class="content">
+                Web Directory Manager Disabled
+                <div class="sub header">Web Directory Manager has been disabled by the system administrator</div>
+            </div>
+            
+        </h4>
+    </div>
     <iframe id="webserv_dirManager" src="tools/fs.html" style="width: 100%; height: 800px; border: 0px; overflow-y: hidden;">
 
     </iframe>
@@ -100,8 +110,14 @@
                 $("#webservRunningState").find(".webserv_status").text("Stopped");
             }
         }
+
         function updateWebServState(){
             $.get("/api/webserv/status", function(data){
+                //Clear all event listeners
+                $("#webserv_enableDirList").off("change");
+                $("#webserv_enable").off("change");
+                $("#webserv_listenPort").off("change");
+
                 setWebServerRunningState(data.Running);
 
                 if (data.EnableDirectoryListing){
@@ -113,6 +129,7 @@
                 $("#webserv_docRoot").val(data.WebRoot + "/html/");
 
                 if (!data.EnableWebDirManager){
+                    $("#webdirManDisabledNotice").show();
                     $("#webserv_dirManager").remove();
                 }
 
@@ -141,8 +158,8 @@
                             }
                         });
                     }
-                   
                 });
+
                 $("#webserv_enableDirList").off("change").on("change", function(){
                     let enable = $(this)[0].checked;
                     $.ajax({
@@ -160,18 +177,46 @@
                 });
                 $("#webserv_listenPort").off("change").on("change", function(){
                     let newPort = $(this).val();
-                    $.ajax({
-                        url: "/api/webserv/setPort",
-                        method: "POST",
-                        data: {"port": newPort},
-                        success: function(data){
-                            if (data.error != undefined){
-                                msgbox(data.error, false);
+
+                    //Check if the new value is same as listening port
+                    let rpListeningPort = $("#incomingPort").val();
+                    if (rpListeningPort == newPort){
+                        confirmBox("This setting might cause port conflict. Continue Anyway?", function(choice){
+                            if (choice == true){
+                                //Continue anyway
+                                $.ajax({
+                                    url: "/api/webserv/setPort",
+                                    method: "POST",
+                                    data: {"port": newPort},
+                                    success: function(data){
+                                        if (data.error != undefined){
+                                            msgbox(data.error, false);
+                                        }else{
+                                            msgbox("Listening port updated");
+                                        }
+                                        updateWebServState();
+                                    }
+                                });
                             }else{
-                                msgbox("Listening port updated");
+                                //Cancel. Restore to previous value
+                                updateWebServState();
+                                msgbox("Setting restored");
                             }
-                        }
-                    })
+                        });
+                    }else{
+                        $.ajax({
+                            url: "/api/webserv/setPort",
+                            method: "POST",
+                            data: {"port": newPort},
+                            success: function(data){
+                                if (data.error != undefined){
+                                    msgbox(data.error, false);
+                                }else{
+                                    msgbox("Listening port updated");
+                                }
+                            }
+                        })
+                    }
                 });
             })
         }

src/web/components/zgrok.html

@@ -0,0 +1,10 @@
+<div class="standardContainer">
+    <div class="ui basic segment">
+        <h2>Service Expose Proxy</h2>
+        <p>Expose your local test-site on the internet with single command</p>
+    </div>
+    <div class="ui message">
+        <h4>Work In Progress</h4>
+        We are looking for someone to help with implementing this feature in Zoraxy. <br>If you know how to write Golang and want to contribute, feel free to create a pull request to this feature!
+    </div>
+</div>