Zoraxy/web/components/httprp.html

<div class="standardContainer">
    <div class="ui basic segment">
        <h2>HTTP Proxy</h2>
        <p>Proxy HTTP server with HTTP or HTTPS for multiple hosts. If you are only proxying for one host / domain, use Default Site instead.</p>
    </div>
    <div style="width: 100%; overflow-x: auto; margin-bottom: 1em; min-width: 400px;">
        <table class="ui celled sortable unstackable basic compact table">
            <thead>
                <tr>
                    <th>Host</th>
                    <th>Destination</th>
                    <th>Virtual Directory</th>
                    <th>Basic Auth</th>
                    <th class="no-sort" style="min-width: 7.2em;">Actions</th>
                </tr>
            </thead>
            <tbody id="httpProxyList">
            
            </tbody>
        </table>
    </div>
    <button class="ui icon right floated basic button" onclick="listProxyEndpoints();"><i class="green refresh icon"></i> Refresh</button>
    <br><br>
</div>

<script>
    function listProxyEndpoints(){
        $.get("/api/proxy/list?type=host", function(data){
            $("#httpProxyList").html(``);
            if (data.error !== undefined){
                    $("#httpProxyList").append(`<tr>
                    <td data-label="" colspan="3"><i class="remove icon"></i> ${data.error}</td>
                </tr>`);
            }else if (data.length == 0){
                $("#httpProxyList").append(`<tr>
                    <td data-label="" colspan="3"><i class="green check circle icon"></i> No HTTP Proxy Record</td>
                </tr>`);
            }else{
                data.forEach(subd => {
                    let tlsIcon = "";
                    let subdData = encodeURIComponent(JSON.stringify(subd));
                    if (subd.RequireTLS){
                        tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
                        if (subd.SkipCertValidations){
                            tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
                        }
                    }

                    let inboundTlsIcon = "";
                    if ($("#tls").checkbox("is checked")){
                        inboundTlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
                        if (subd.BypassGlobalTLS){
                            inboundTlsIcon = `<i class="grey lock icon" title="TLS Bypass Enabled"></i>`;
                        }
                    }else{
                        inboundTlsIcon = `<i class="yellow lock open icon" title="Plain Text Mode"></i>`;
                    }
                    

                    $("#httpProxyList").append(`<tr eptuuid="${subd.RootOrMatchingDomain}" payload="${subdData}" class="subdEntry">
                        <td data-label="" editable="true" datatype="inbound"><a href="//${subd.RootOrMatchingDomain}" target="_blank">${subd.RootOrMatchingDomain}</a> ${inboundTlsIcon}</td>
                        <td data-label="" editable="true" datatype="domain">${subd.Domain} ${tlsIcon}</td>
                        <td data-label="" editable="true" datatype="vdir">WIP</td>
                        <td data-label="" editable="true" datatype="basicauth">${subd.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 inlineEditActionBtn" onclick='editEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="edit icon"></i></button>
                            <button class="ui circular mini red basic icon button inlineEditActionBtn" onclick='deleteEndpoint("subd","${subd.RootOrMatchingDomain}")'><i class="trash icon"></i></button>
                        </td>
                    </tr>`);
                });
            }
        });
    }   

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