Zoraxy/web/components/rules.html

<h3><i class="ui exchange icon"></i> New Proxy Endpoint</h3>
<p>You can create a proxy endpoing by subdomain or virtual directories</p>
<div class="ui form">
    <div class="field">
        <label>Proxy Type</label>
        <div class="ui selection dropdown">
            <input type="hidden" id="ptype" value="subd">
            <i class="dropdown icon"></i>
            <div class="default text">Proxy Type</div>
            <div class="menu">
                <div class="item" data-value="subd">Sub-domain</div>
                <div class="item" data-value="vdir">Virtual Directory</div>
            </div>
        </div>
    </div>
    <div class="field">
        <label>Subdomain Matching Keyword / Virtual Directory Name</label>
        <input type="text" id="rootname" placeholder="s1.mydomain.com">
        <div class="ui message">
            Example of subdomain matching keyword:<br>
            <code>s1.arozos.com</code> <br>(Any access starting with s1.arozos.com will be proxy to the IP address below)<br>
            Example of virtual directory name: <br>
            <code>/s1/home</code> <br>(Any access to {this_server}/s1/ will be proxy to the IP address below)
        </div>
    </div>
    <div class="field">
        <label>IP Address or Domain Name with port</label>
        <input type="text" id="proxyDomain">
        <small>E.g. 192.168.0.101:8000 or example.com</small>
    </div>
    <div class="field">
        <div class="ui checkbox">
            <input type="checkbox" id="reqTls">
            <label>Proxy Target require TLS Connection <br><small>(i.e. Your proxy target starts with https://)</small></label>
        </div>
    </div>
    <button class="ui teal button" onclick="newProxyEndpoint();">Create Proxy Endpoint</button>
</div>
<div class="ui green message" id="proxyaddSucc" style="display:none">
    <i class="ui checkmark icon"></i> Proxy Endpoint Added
</div>

<script>
    //New Proxy Endpoint
    function newProxyEndpoint(){
        var type = $("#ptype").val();
        var rootname = $("#rootname").val();
        var proxyDomain = $("#proxyDomain").val();
        var useTLS = $("#reqTls")[0].checked;

        if (rootname.trim() == ""){
            $("#rootname").parent().addClass("error");
            return
        }else{
            $("#rootname").parent().removeClass("error");
        }

        if (proxyDomain.trim() == ""){
            $("#proxyDomain").parent().addClass("error");
            return
        }else{
            $("#proxyDomain").parent().removeClass("error");
        }

        //Create the endpoint by calling add
        $.ajax({
            url: "/api/proxy/add",
            data: {type: type, rootname: rootname, tls: useTLS, ep: proxyDomain},
            success: function(data){
                if (data.error != undefined){
                    alert(data.error);
                }else{
                    //OK
                    listVdirs();
                    listSubd();
                    $("#proxyaddSucc").stop().slideDown('fast').delay(3000).slideUp('fast');

                    //Clear old data
                    $("#rootname").val("");
                    $("#proxyDomain").val("");
                }
            }
        });
        
    }
</script>