zoraxy/src/web/components/webserv.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Static Web Server</h2>
        <p>A simple static web server that serve html css and js files</p>
    </div>
    <div class="ui divider"></div>
    <div class="ui basic segment webservRunningStateWrapper">
        <h4 class="ui header" id="webservRunningState">
            <i class="green circle icon"></i>
            <div class="content">
                <span class="webserv_status">Running</span>
                <div class="sub header">Listen port :<span class="webserv_port">8081</span></div>
            </div>
        </h4>
    </div>
    
    <h3>Web Server Settings</h3>
    <div class="ui form">
        <div class="inline field">
            <div class="ui toggle checkbox webservRootDisabled">
                <input id="webserv_enable" type="checkbox" class="hidden">
                <label>Enable Static Web Server</label>
            </div>
        </div>
        <div class="inline field">
            <div class="ui toggle checkbox">
                <input id="webserv_enableDirList" type="checkbox" class="hidden">
                <label>Enable Directory Listing</label>
                <small>If this folder do not contains any index files, list the directory of this folder.</small>
            </div>
        </div>
        <div class="field">
            <label>Document Root Folder</label>
            <input id="webserv_docRoot" type="text" readonly="true">
            <small>
                The web server root folder can only be changed via startup flags of zoraxy for security reasons. 
                See the -webserv flag for more details.
            </small>
        </div>
        <div class="field webservRootDisabled">
            <label>Port Number</label>
            <input id="webserv_listenPort" type="number" step="1" min="0" max="65535" value="8081" onchange="updateWebServLinkExample(this.value);">
            <small>Use <code>http://127.0.0.1:<span class="webserv_port">8081</span></code> in proxy rules to access the web server</small>
        </div>
    </div>
    <small><i class="ui blue save icon"></i> Changes are saved automatically</small>
    <br>
    <div class="ui message">
        <div class="ui accordion webservhelp">
            <div class="title">
                <i class="dropdown icon"></i>
                How to access the static web server?
            </div>
            <div class="content">
                There are three ways to access the static web server. <br>
                <div class="ui ordered list">
                    <div class="item">
                        If you are using Zoraxy as your gateway reverse proxy server, 
                        you can add a new subdomain proxy rule that points to 
                        <a>http://127.0.0.1:<span class="webserv_port">8081</span></a>
                    </div>
                    <div class="item">
                        If you are using Zoraxy under another reverse proxy server, 
                        add <a>http://127.0.0.1:<span class="webserv_port">8081</span></a> to the config of your upper layer reverse proxy server's config file. 
                    </div>
                    <div class="item">
                        Directly access the web server via <a>http://{zoraxy_host_ip}:<span class="webserv_port">8081</span></a> (Not recommended)
                    </div>
                    <br>
                </div>
                
            </div>
        </div>
    </div>
    
    <div class="ui divider"></div>
    <div class="ui basic segment">
        <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>
    <small>If you do not want to enable web access to your web directory, you can disable this feature with <code>-webfm=false</code> startup paramter</small>
   
    

    <script>
        $(".webservhelp").accordion();
        $(".ui.checkbox").checkbox();

        function setWebServerRunningState(running){
            if (running){
                $("#webserv_enable").parent().checkbox("set checked");
                $("#webservRunningState").find("i").attr("class", "white circle check icon");
                $("#webservRunningState").find(".webserv_status").text("Running");
                $(".webservRunningStateWrapper").addClass("enabled")
            }else{
                $("#webserv_enable").parent().checkbox("set unchecked");
                $("#webservRunningState").find("i").attr("class", "white circle times icon");
                $("#webservRunningState").find(".webserv_status").text("Stopped");
                $(".webservRunningStateWrapper").removeClass("enabled")
            }
        }

        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){
                    $("#webserv_enableDirList").parent().checkbox("set checked");
                }else{
                    $("#webserv_enableDirList").parent().checkbox("set unchecked");
                }

                $("#webserv_docRoot").val(data.WebRoot + "/html/");

                if (!data.EnableWebDirManager){
                    $("#webdirManDisabledNotice").show();
                    $("#webserv_dirManager").remove();
                }

                $("#webserv_listenPort").val(data.ListeningPort);
                updateWebServLinkExample(data.ListeningPort);

                //Bind checkbox events
                $("#webserv_enable").off("change").on("change", function(){
                    let enable = $(this)[0].checked;
                    if (enable){
                        $.get("/api/webserv/start", function(data){
                            if (data.error != undefined){
                                msgbox(data.error, false);
                            }else{
                                msgbox("Static web server started");
                                setWebServerRunningState(true);
                            }
                        });
                    }else{
                        $.get("/api/webserv/stop", function(data){
                            if (data.error != undefined){
                                msgbox(data.error, false);
                            }else{
                                msgbox("Static web server stopped");
                                setWebServerRunningState(false);
                            }
                        });
                    }
                });

                $("#webserv_enableDirList").off("change").on("change", function(){
                    let enable = $(this)[0].checked;
                    $.ajax({
                        url: "/api/webserv/setDirList",
                        method: "POST",
                        data: {"enable": enable},
                        success: function(data){
                            if (data.error != undefined){
                                msgbox(data.error, false);
                            }else{
                                msgbox("Directory listing setting updated");
                            }
                        }
                    })
                });
                $("#webserv_listenPort").off("change").on("change", function(){
                    let newPort = $(this).val();

                    //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{
                                //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");
                                }
                            }
                        })
                    }
                });
            })
        }
        updateWebServState();

        function updateWebServLinkExample(newport){
            $(".webserv_port").text(newport);
        }
    </script>
</div>