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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!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>Name</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>Add Custom Header</h4>
            <p>Add custom header(s) into this proxy target</p>
            <div class="scrolling content ui form">
                <div class="three small fields credentialEntry">
                    <div class="field">
                        <input id="headerName" type="text" placeholder="X-Custom-Header" autocomplete="off">
                    </div>
                    <div class="field">
                        <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</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);
            }

            //$("#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 (value == ""){
                    $("#headerValue").parent().addClass("error");
                    return
                }else{
                    $("#headerValue").parent().removeClass("error");
                }

                $.ajax({
                    url: "/api/proxy/header/add",
                    data: {
                        "type": editingEndpoint.ept,
                        "domain": editingEndpoint.ep,
                        "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 => {
                                $("#headerTable").append(`
                                <tr>
                                    <td>${header.Key}</td>
                                    <td>${header.Value}</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>