Zoraxy/web/components/vdir.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Virtual Directory</h2>
        <p>A virtual directory is a consolidated view of multiple directories that provides a unified entry point for users to access disparate sources.</p>
    </div>
    <div id="currentVirtualDirectoryAttachingHost" class="ui basic segment">
        Select a host / routing rule to start editing Virtual Directory
    </div>  
    <div class="ui stackable grid">
        <div class="six wide column">
            <h4>Select a Target Host / Site</h4>
            <p>Attach Virtual Directory routing rule to root proxy router</p>
            <div class="ui checkbox">
                <input type="checkbox" id="useRootProxyRouterForVdir" onchange="handleVdirAttachTargetChange(this);">
                <label>Use Root Proxy Router<br>
                <small>Only applicable when Default Site is set to "Reverse Proxy" mode</small></label>
            </div>
            <div class="ui horizontal divider">OR</div>
            <p>Create Virtual Directory routing in existing host / routing rule entries</p>
            <div class="ui fluid search selection dropdown">
                <input type="hidden" id="vdirBaseRoutingRule" name="vdirBaseRoutingRule" onchange="handleVdirAttachTargetChange();">
                <i class="dropdown icon"></i>
                <div class="default text">Select a host to edit</div>
                <div class="menu" id="hostDomainList">
                    
                </div>
            </div>
        </div>
        <div class="ten wide column">
            <h4>Edit Virtual Directory Routing Rules</h4>
            <p>The following are the list of Virtual Directories currently handled by the host router above</p>
            <div style="width: 100%; overflow-x: auto; margin-bottom: 1em;">
                <table class="ui celled sortable basic unstackable compact table">
                    <thead>
                        <tr>
                            <th>Virtual Directory</th>
                            <th>Destination</th>
                            <th class="no-sort" style="min-width: 7.2em;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="vdirList">
                        <tr>
                            <td data-label="" colspan="3">No Selected Host</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="ui icon right floated basic button" onclick="listVdirs();"><i class="green refresh icon"></i> Refresh</button>
            <br><br>
            <div class="ui divider"></div>
            <div id="newVDSection" class="disabled section">
                <h4>New Virtual Directory Rule</h4>
                <form class="ui form">
                    <div class="field">
                        <label>Matching Path Prefix</label>
                        <input type="text" id="virtualDirectoryPath" placeholder="/mysite/">
                        <small>Path that follows your select host / domain, e.g. <code>/mysite/</code> as path prefix will forward all request that matches <code>mydomain.com/mysite/*</code></small>
                    </div>
                    <div class="field">
                        <label>Target IP Address or Domain Name with port</label>
                        <input type="text" id="virtualDirectoryDomain" onchange="updateVDTargetTLSState();">
                        <small>E.g. 192.168.0.101:8000 or example.com</small>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="vdReqTls">
                            <label>Proxy Target require TLS Connection <br><small>(i.e. Your proxy target starts with https://)</small></label>
                        </div>
                    </div>

                    <!-- Advance configs -->
                    <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
                        <div id="advanceProxyRules" class="ui fluid accordion">
                            <div class="title">
                            <i class="dropdown icon"></i>
                            Advance Settings
                            </div>
                            <div class="content">
                                <p></p>
                                <div class="field">
                                    <div class="ui checkbox">
                                        <input type="checkbox" id="vdSkipTLSValidation">
                                        <label>Ignore TLS/SSL Verification Error<br><small>For targets that is using self-signed, expired certificate (Not Recommended)</small></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="ui basic button" onclick="addVdirToHost(); event.preventDefault();"><i class="green add icon"></i> Create Virtual Directory</button>
                </form>
            </div>
        </div>
    </div>
    <br><br>
</div>
<script>
    //Virtual directories functions

    //Initialize the list of hosts that can be used to attach vdirs config
    function initVdirList(){
        //Load the hosts into the dropdown
        $("#hostDomainList").html("");
        $.get("/api/proxy/list?type=host", function(data){
            if (data.error != undefined){
                msgbox(data.error, false);
            }else{
                if (data.length == 0){
                    //No hosts found
                }else{
                    data.forEach(proxyEndpoint => {
                        let domain = proxyEndpoint.RootOrMatchingDomain;
                        $("#hostDomainList").append(`<div class="item" data-value="${domain}">${domain}</div>`);
                    });

                    //Update the dropdown events
                    $("#vdirBaseRoutingRule").parent().dropdown();
                }
            }
        });
    }

    function handleVdirAttachTargetChange(targetCheckbox=undefined){
        if (targetCheckbox != undefined && targetCheckbox.checked){
            $("#vdirBaseRoutingRule").parent().addClass("disabled");

            //Load the vdir list for root
            loadVdirList("root");
            $("#newVDSection").removeClass("disabled");
        }else{
            $("#vdirBaseRoutingRule").parent().removeClass("disabled");
            let selectedEndpointRule = $("#vdirBaseRoutingRule").val();
            if (selectedEndpointRule != ""){
                loadVdirList(selectedEndpointRule);
                $("#newVDSection").removeClass("disabled");
            }else{
                $("#newVDSection").addClass("disabled");
            }
        }
    }

    function loadVdirList(endpoint){
        $("#currentVirtualDirectoryAttachingHost").html(`Editing Host: ${endpoint}`);
        let reqURL = "/api/proxy/vdir/list?type=host&ep=" + endpoint;
        if (endpoint == "root"){
            //Load root endpoint vdir list
            reqURL = "/api/proxy/vdir/list?type=root";
        }
        
        $.get(reqURL, function(data){
            if (data.error != undefined){
                msgbox(data.error, false);
            }else{
                $("#vdirList").html("");
                if (data.length == 0){
                    //No virtual directory for this host
                    $("#vdirList").append(`<tr>
                        <td data-label="" colspan="3"><i class="green check circle icon"></i> No Virtual Directory Routing Rule</td>
                    </tr>`);
                }else{
                    //List the vdirs
                    console.log(data);
                    data.forEach(vdir => {
                        $("#vdirList").append(`<tr>
                            <td data-label="" editable="false">${vdir.MatchingPath}</td>
                            <td data-label="" editable="true" datatype="domain">${vdir.Domain}</td>
                            <td class="center aligned" editable="true" datatype="action" data-label="">
                                <button class="ui circular mini basic icon button editBtn" onclick='editEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
                                <button class="ui circular mini red basic icon button"  onclick='deleteEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
                            </td>
                        </tr>`);
                    })
                }
            }
        });
    }

    function updateVDTargetTLSState(){
        var targetDomain = $("#virtualDirectoryDomain").val().trim();
        if (targetDomain != ""){
            $.ajax({
                url: "/api/proxy/tlscheck",
                data: {url: targetDomain},
                success: function(data){
                    if (data.error != undefined){

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

    function reloadVdirList(){
        if ($("#useRootProxyRouterForVdir")[0].checked){
            loadVdirList("root");
            return;
        }
        let endpoint = $("#vdirBaseRoutingRule").val().trim();
        if (endpoint != ""){
            loadVdirList(endpoint);
        }
    }

    //Create a virtual directory routing rule and attach to this endpoint
    function addVdirToHost(){
        var matchingPath = $("#virtualDirectoryPath").val().trim();
        var targetDomain = $("#virtualDirectoryDomain").val().trim();
        var reqTLS = $("#vdReqTls")[0].checked;
        var skipTLSValidation = $("#vdSkipTLSValidation")[0].checked;

        //Validate the input data
        if (matchingPath == ""){
            $("#virtualDirectoryPath").parent().addClass('error');
            return;
        }else{
            $("#virtualDirectoryPath").parent().removeClass('error');
        }

        if (targetDomain == ""){
            $("#virtualDirectoryDomain").parent().addClass('error');
            return;
        }else{
            $("#virtualDirectoryDomain").parent().removeClass('error');
        }

        //Check if we are editing host
        let epType = "host";
        let endpoint = "root";
        if ($("#useRootProxyRouterForVdir")[0].checked){
            //Editing root virtual directory
            epType = "root";
        }else{
            //Editing hosts virtual directory
            endpoint = $("#vdirBaseRoutingRule").val().trim();
        }

        //Create a virtual directory endpoint
        $.ajax({
            url: "/api/proxy/vdir/add",
            method: "POST",
            data: {
                "type": epType,
                "endpoint": endpoint,
                "path": matchingPath,
                "domain":targetDomain,
                "reqTLS":reqTLS,
                "skipValid":skipTLSValidation,
            },
            success: function(data){
                if (data.error != undefined){
                    msgbox(data.error, false);
                }else{
                    msgbox("New Virtual Directory rule added");
                    reloadVdirList();
                    resetVdirForm();
                }
            }, 
            error: function(){
                msgbox("Add Virtual Directory failed due to unknown reasons", false);
            }
        })
        
    }

    //Reset the vdir form
    function resetVdirForm(){
        $("#virtualDirectoryPath").val("");
        $("#virtualDirectoryDomain").val("");
        $("#vdReqTls").parent().checkbox("set unchecked");
        $("#vdSkipTLSValidation").parent().checkbox("set unchecked");
    }

    /*
    function listVdirs(){
        $.get("/api/proxy/list?type=vdir", function(data){
            $("#vdirList").html(``);
            if (data.error !== undefined){
                $("#vdirList").append(`<tr>
                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
                </tr>`);
            }else if (data.length == 0){
                $("#vdirList").append(`<tr>
                    <td data-label="" colspan="3"><i class="checkmark icon"></i> No Virtual Directory Record</td>
                </tr>`);
            }else{
                data.forEach(vdir => {
                    let tlsIcon = "";
                    let vdirData = encodeURIComponent(JSON.stringify(vdir));
                    if (vdir.RequireTLS){
                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
                        if (vdir.SkipCertValidations){
                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
                        }
                    }

                    let tlsVerificationField = "";
                    if (vdir.RequireTLS){
                        tlsVerificationField = !vdir.SkipCertValidations?`<i class="ui green check icon"></i>`:`<i class="ui yellow exclamation circle icon" title="TLS/SSL Verification will be skipped on this host"></i>`
                    }else{
                        tlsVerificationField = "N/A"
                    }

                    $("#vdirList").append(`<tr eptuuid="${vdir.RootOrMatchingDomain}" payload="${vdirData}" class="vdirEntry">
                        <td data-label="" editable="false">${vdir.RootOrMatchingDomain}</td>
                        <td data-label="" editable="true" datatype="domain">${vdir.Domain} ${tlsIcon}</td>
                        <td data-label="" editable="true" datatype="basicauth">${vdir.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" onclick='editEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
                            <button class="ui circular mini red basic icon button"  onclick='deleteEndpoint("vdir","${vdir.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
                        </td>
                    </tr>`);
                });
            }
        });
    }
    */

    //Bind on tab switch events
    tabSwitchEventBind["vdir"] = function(){
        initVdirList();
    }
</script>