|
@@ -0,0 +1,170 @@
|
|
|
+<!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">
|
|
|
+ User Defined / 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>
|
|
|
+ <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")
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //$("#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>
|