TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							<!DOCTYPE html>
<html>
    <head>
        <!-- Notes: This should be open in its original path-->
        <link rel="stylesheet" href="../script/semantic/semantic.min.css">
        <script src="../script/jquery-3.6.0.min.js"></script>
        <script src="../script/semantic/semantic.min.js"></script>
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui header">
                <div class="content">
                    Custom Headers
                    <div class="sub header" id="epname"></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <p>You can define custom headers to be sent 
                together with the client request to the backend server in 
                this reverse proxy endpoint / host.</p>

            <table class="ui very basic compacted unstackable celled table">
                <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                    <th>Remove</th>
                </tr></thead>
                <tbody id="headerTable">
                <tr>
                    <td colspan="3"><i class="ui green circle check icon"></i> No Additonal Header</td>
                </tr>
                </tbody>
            </table>
            <div class="ui divider"></div>
            <h4>Edit Custom Header</h4>
            <p>Add or remove custom header(s) over this proxy target</p>
            <div class="scrolling content ui form">
                <div class="five small fields credentialEntry">
                    <div class="field" align="center">
                        <button id="toOriginButton" title="Downstream to Upstream" class="ui circular basic active button">Zoraxy <i class="angle double right blue icon" style="margin-right: 0.4em;"></i> Origin</button>
                        <button id="toClientButton" title="Upstream to Downstream" class="ui circular basic button">Client <i class="angle double left orange icon" style="margin-left: 0.4em;"></i> Zoraxy</button>
                    </div>
                    <div class="field" align="center">
                        <button id="headerModeAdd" class="ui circular basic active button"><i class="ui green circle add icon"></i> Add Header</button>
                        <button id="headerModeRemove" class="ui circular basic button"><i class="ui red circle times icon"></i> Remove Header</button>
                    </div>
                    <div class="field">
                        <label>Header Key</label>
                        <input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
                        <small>The header key is <b>NOT</b> case sensitive</small>
                    </div>
                    <div class="field">
                        <label>Header Value</label>
                        <input id="headerValue" type="text" placeholder="value1,value2,value3" autocomplete="off">
                    </div>
                    <div class="field" >
                        <button class="ui basic button" onclick="addCustomHeader();"><i class="green add icon"></i> Add Header Rewrite Rule</button>
                    </div>
                    <div class="ui divider"></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <div class="field" >
                <button class="ui basic button"  style="float: right;" onclick="closeThisWrapper();">Close</button>
            </div>
        </div>
        
        <br><br><br><br>

        <script>
            let editingEndpoint = {};
            if (window.location.hash.length > 1){
                let payloadHash = window.location.hash.substr(1);
                try{
                    payloadHash = JSON.parse(decodeURIComponent(payloadHash));
                    $("#epname").text(payloadHash.ep);
                    editingEndpoint = payloadHash;
                }catch(ex){
                    console.log("Unable to load endpoint data from hash")
                }
            }

            function closeThisWrapper(){
                parent.hideSideWrapper(true);
            }

            //Bind events to header mod mode
            $("#headerModeAdd").on("click", function(){
                $("#headerModeAdd").addClass("active");
                $("#headerModeRemove").removeClass("active");
                $("#headerValue").parent().show();
            });

            $("#headerModeRemove").on("click", function(){
                $("#headerModeAdd").removeClass("active");
                $("#headerModeRemove").addClass("active");
                $("#headerValue").parent().hide();
            });

            //Bind events to header directions option
            $("#toOriginButton").on("click", function(){
                $("#toOriginButton").addClass("active");
                $("#toClientButton").removeClass("active");
            });

            $("#toClientButton").on("click", function(){
                $("#toOriginButton").removeClass("active");
                $("#toClientButton").addClass("active");
            });

            //Return "add" or "remove" depending on mode user selected
            function getHeaderEditMode(){
                if ($("#headerModeAdd").hasClass("active")){
                    return "add";
                }

                return "remove";
            }

            //Return "toOrigin" or "toClient"
            function getHeaderDirection(){
                if ($("#toOriginButton").hasClass("active")){
                    return "toOrigin";
                }
                return "toClient";
            }

            //$("#debug").text(JSON.stringify(editingEndpoint));

            function addCustomHeader(){
                let name = $("#headerName").val().trim();
                let value = $("#headerValue").val().trim();

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

                if (getHeaderEditMode() == "add"){
                    if (value == ""){
                        $("#headerValue").parent().addClass("error");
                        return
                    }else{
                        $("#headerValue").parent().removeClass("error");
                    }
                }

                $.ajax({
                    url: "/api/proxy/header/add",
                    data: {
                        "type": getHeaderEditMode(),
                        "domain": editingEndpoint.ep,
                        "direction":getHeaderDirection(),
                        "name": name,
                        "value": value
                    },
                    success: function(data){
                        if (data.error != undefined){
                            if (parent != undefined && parent.msgbox != undefined){
                                parent.msgbox(data.error,false);
                            }else{
                                alert(data.error);
                            }
                        }else{
                            listCustomHeaders();
                            if (parent != undefined && parent.msgbox != undefined){
                                parent.msgbox("Custom header added",true);
                            }

                            //Clear the form
                            $("#headerName").val("");
                            $("#headerValue").val("");
                        }
                       
                    }
                });
            }

            function deleteCustomHeader(name){
                $.ajax({
                    url: "/api/proxy/header/remove",
                    data: {
                        //"type": editingEndpoint.ept,
                        "domain": editingEndpoint.ep,
                        "name": name,
                    },
                    success: function(data){
                        listCustomHeaders();
                        if (parent != undefined && parent.msgbox != undefined){
                            parent.msgbox("Custom header removed",true);
                        }
                    }
                });
            }

            function listCustomHeaders(){
                $("#headerTable").html(`<tr><td colspan="3"><i class="ui loading spinner icon"></i> Loading</td></tr>`);
                $.ajax({
                    url: "/api/proxy/header/list",
                    data: {
                        "type": editingEndpoint.ept,
                        "domain": editingEndpoint.ep,
                    },
                    success: function(data){
                        if (data.error != undefined){
                            alert(data.error);
                        }else{
                           
                            $("#headerTable").html("");
                            data.forEach(header => {
                                let editModeIcon = header.IsRemove?`<i class="ui red times circle icon"></i>`:`<i class="ui green add circle icon"></i>`;
                                let direction = (header.Direction==0)?`<i class="angle double right blue icon"></i>`:`<i class="angle double left orange icon"></i>`;
                                let valueField = header.Value;
                                if (header.IsRemove){
                                    valueField = "<small style='color: grey;'>(Field Removed)</small>";
                                }
                                $("#headerTable").append(`
                                <tr>
                                    <td>${direction} ${header.Key}</td>
                                    <td>${editModeIcon} ${valueField}</td>
                                    <td><button class="ui basic circular mini red icon button" onclick="deleteCustomHeader('${header.Key}');"><i class="ui trash icon"></i></button></td>
                                </tr>
                                `);
                            });

                            if (data.length == 0){
                                $("#headerTable").html(`<tr>
                                    <td colspan="3"><i class="ui green circle check icon"></i> No Additonal Header</td>
                                </tr>`);
                            }
                        }
                    },
                    
                });
            }
            listCustomHeaders();
        </script>
    </body>
</html>