Zoraxy/web/components/rproot.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Set Proxy Root</h2>
        <p>The default routing point for all incoming traffics. For all routing not found in the proxy rules, request will be redirected to the proxy root server.</p>
        <div class="ui form">
            <div class="field">
                <label>Proxy Root</label>
                <input type="text" id="proxyRoot" onchange="checkRootRequireTLS(this.value);">
                <small>E.g. localhost:8080</small>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" id="rootReqTLS">
                    <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>
            <div class="field">
                <h4>Root Routing Options</h4>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" id="unsetRedirect">
                    <label>Enable redirect for unset subdomains <br><small>Redirect subdomain that is not found to custom domain</small></label>
                </div>
            </div>
            <div class="ui basic segment" id="unsetRedirectDomainWrapper" style="background-color: #f7f7f7; border-radius: 1em; margin-left: 2em; padding-left: 2em; display:none;">
                <div style="
                    position: absolute;
                    top:0;
                    left: 1em;
                    width: 0px;
                    height: 0px;
                    margin-top: -10px;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #f7f7f7;">

                </div>
                <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>
            <br>
            <button class="ui basic button" onclick="updateRootOptions()"><i class="blue save icon" ></i> Save Root Options</button>
        </div>
        <br>
        
    </div>
</div>
<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");
        }else{
            $("#rootReqTLS").parent().removeClass("disabled");
            $("#proxyRoot").parent().removeClass("disabled");
            initRootInfo();

            //TODO UPDATE THE SAVE FUNTION
        }
    }
    
    function initRootInfo(){
        $.get("/api/proxy/list?type=root", function(data){
            if (data == null){

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

        
    }
    initRootInfo();

    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();
    }

    //Toggle the display status of the input box for domain setting
    function updateRedirectionDomainSettingInputBox(useRedirect){
        if(useRedirect){
            $("#unsetRedirectDomainWrapper").stop().finish().slideDown("fast");
        }else{
            $("#unsetRedirectDomainWrapper").stop().finish().slideUp("fast");
        }
    }

    function checkCustomRedirectForUnsetSubd(){
        $.get("/api/proxy/root/listOptions", function(data){
            $("#unsetRedirect")[0].checked = data.EnableRedirectForUnsetRules || false;
            $("#unsetRedirectDomain").val(data.UnsetRuleRedirectTarget);
            updateRedirectionDomainSettingInputBox(data.EnableRedirectForUnsetRules);

            //Bind event to the checkbox
            $("#unsetRedirect").off("change").on("change", function(){
                let useRedirect = $("#unsetRedirect")[0].checked;
                updateRedirectionDomainSettingInputBox(useRedirect);
            });
        })
       
    }
    checkCustomRedirectForUnsetSubd();

    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");
                }

                
            }
       })
    }


    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();
                    msgbox("Proxy Root Updated")
                }
            }
        });

    }

    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>