Zoraxy/web/components/rproot.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Default Site</h2>
        <p>Default routing options for inbound traffic (previously called Proxy Root)</p>
        <div class="ui form">
            <div class="grouped fields">
                <label>What to show when Zoraxy is hit with an unknown Host?</label>
                <div class="field">
                    <div class="ui radio defaultsite checkbox">
                        <input type="radio" name="defaultsiteOption" checked="checked" value="webserver">
                        <label>Internal Static Web Server<br>
                            <small>Check this if you prefer a more Apache / Nginx like experience</small>
                        </label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio defaultsite checkbox">
                        <input type="radio" name="defaultsiteOption" value="proxy">
                        <label>Reverse Proxy Target<br>
                            <small>Proxy the request to a target IP / domain</small>
                        </label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio defaultsite checkbox">
                        <input type="radio" name="defaultsiteOption" value="redirect">
                        <label>Redirect<br>
                            <small>Redirect the user to a new location</small>
                        </label>
                    </div>
                </div>
                <div class="field">
                    <div class="ui radio defaultsite checkbox">
                        <input type="radio" name="defaultsiteOption" value="notfound">
                        <label>Show 404 NOT FOUND<br>
                            <small>Respond to request with a 404 page</small>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Reverse Proxy as Default Site Options -->
        <div id="defaultSiteProxyOptions" class="ui basic segment advanceoptions defaultSiteOptionDetails" style="display:none; ">
            <div class="ui form">
                <div class="field">
                        <label>Reverse Proxy Target</label>
                        <input type="text" id="proxyRoot" onchange="checkRootRequireTLS(this.value);">
                        <small>e.g. localhost:8080 / 192.168.0.100:80 / example.com</small>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="rootReqTLS">
                        <label>Reverse proxy target require TLS connection <br><small>Check this if your proxy target URL require connection with https://</small></label>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Redirect as default site Options-->
        <div id="defaultSiteRedirectOptions" class="ui basic segment advanceoptions defaultSiteOptionDetails" style="display:none;"">
            <div class="ui form">
                <div class="field">
                    <label>Redirect target domain</label>
                    <div class="ui input">
                        <input id="unsetRedirectDomain" type="text" placeholder="http://example.com">
                    </div>
                    <small>Unset subdomain will be redirected to the link above. Remember to include the protocol (e.g. http:// or https://)<br>
                    Leave empty for redirecting to upper level domain (e.g. notfound.example.com <i class="right arrow icon"></i> example.com)</small>
                </div>
            </div>
        </div>

        <button class="ui basic button" onclick="setProxyRoot()"><i class="green save icon" ></i> Save Options</button>
    </div>
</div>
<script>
    let currentDefaultSiteOption = "webserver";
    $("#advanceRootSettings").accordion();

    //Handle toggle events of option radio boxes
    function updateAvaibleDefaultSiteOptions(){
        let selectedDefaultSite = $('input[name="defaultsiteOption"]:checked').val();

        $(".defaultSiteOptionDetails").hide();
        if (selectedDefaultSite == "webserver"){
            //Use build in web server as target
            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");

        }else if (selectedDefaultSite == "proxy"){
            $("#defaultSiteProxyOptions").show();
            $("#rootReqTLS").parent().removeClass("disabled");
            $("#proxyRoot").parent().removeClass("disabled");
            initRootInfo();
        }else if (selectedDefaultSite == "redirect"){
            $("#defaultSiteRedirectOptions").show();
        }else if (selectedDefaultSite == "notfound"){

        }else{
            //Unknown option
            return;
        }

        currentDefaultSiteOption = selectedDefaultSite;
    }

    //Bind events to the radio boxes
    function bindDefaultSiteRadioCheckboxEvents(){
        $('input[type=radio][name=defaultsiteOption]').change(function() {
            updateAvaibleDefaultSiteOptions();
        });
    }
    

    
    function initRootInfo(callback=undefined){
        $.get("/api/proxy/list?type=root", function(data){
            if (data == null){

            }else{
                $("#proxyRoot").val(data.Domain);
                checkRootRequireTLS(data.Domain);
            }

            if (callback != undefined){
                callback();
            }
        });
    }
    initRootInfo(function(){
        updateWebServerLinkSettings(function(){
            bindDefaultSiteRadioCheckboxEvents();
        });
    });

    //Update the current web server port settings
    function updateWebServerLinkSettings(callback=undefined){
        isUsingStaticWebServerAsRoot(function(isUsingWebServ){
            if (isUsingWebServ){
                //Select the 
            }else{
                
            }

            if (callback != undefined){
                callback(isUsingWebServ);
            }
        })
    }

    function isUsingStaticWebServerAsRoot(callback){
        let currentProxyRoot = $("#proxyRoot").val().trim();
        $.get("/api/webserv/status", function(webservStatus){
            if (currentProxyRoot == "127.0.0.1:" + webservStatus.ListeningPort || currentProxyRoot == "localhost:" + webservStatus.ListeningPort){
                return callback(true);
            }
            return callback(false);
        });
        
    }
    
    function updateRootSettingStates(){
        $.get("/api/cert/tls", function(data){
            if (data == true){
                $("#disableRootTLS").parent().removeClass('disabled').attr("title", "");
            }else{
                $("#disableRootTLS").parent().addClass('disabled').attr("title", "TLS listener is not enabled");
            }
        });
    }

    //Bind event to tab switch
    tabSwitchEventBind["setroot"] = function(){
        //On switch over to this page, update root info
        updateRootSettingStates();
    }

    //Check if the given domain will redirect to https
    function checkRootRequireTLS(targetDomain){
        //Trim off the http or https from the origin
        if (targetDomain.startsWith("http://")){
            targetDomain = targetDomain.substring(7);
            $("#proxyRoot").val(targetDomain);
        }else if (targetDomain.startsWith("https://")){
            targetDomain = targetDomain.substring(8);
            $("#proxyRoot").val(targetDomain);
        }
       $.ajax({
            url: "/api/proxy/tlscheck",
            data: {url: targetDomain},
            success: function(data){
                if (data.error != undefined){

                }else if (data == "https"){
                    $("#rootReqTLS").parent().checkbox("set checked");
                }else if (data == "http"){
                    $("#rootReqTLS").parent().checkbox("set unchecked");
                }

                
            }
       })
    }

    //Set the new proxy root option
    function setProxyRoot(){
        var newpr = $("#proxyRoot").val();
        if (newpr.trim() == ""){
            $("#proxyRoot").parent().addClass('error');
            return
        }else{
            $("#proxyRoot").parent().removeClass('error');
        }

        var rootReqTls = $("#rootReqTLS")[0].checked;

        //Create the endpoint by calling add
        $.ajax({
            url: "/api/proxy/add",
            data: {"type": "root", tls: rootReqTls, ep: newpr},
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false, 5000);
                }else{
                    //OK
                    initRootInfo(function(){
                        //Check if WebServ is enabled
                        isUsingStaticWebServerAsRoot(function(isUsingWebServ){
                            if (isUsingWebServ){
                                //Force enable static web server
                                //See webserv.html for details
                                setWebServerRunningState(true);
                            }
                            
                            setTimeout(function(){
                                 //Update the checkbox
                                updateWebServerLinkSettings();
                                msgbox("Proxy Root Updated");
                            }, 1000);
                            
                        })
                    });
                    
                }
            }
        });

    }

    function updateRootOptions(){
        $.ajax({
            type: "POST",
            url: "/api/proxy/root/updateOptions",
            data: {
                unsetRedirect: $("#unsetRedirect")[0].checked,
                unsetRedirectTarget: $("#unsetRedirectDomain").val().trim(),
            },
            success: function(data) {
               if (data.error != undefined){
                    msgbox(data.error, false);
               }else{
                    msgbox("Root Routing Options updated");
               }
            },
            error: function(error) {
                console.log("Error:", error);
            }
        });
    }
</script>