mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-06-06 07:37:21 +02:00
2aa35cbe6d
+ Added support for multiple upstreams + Added load balancer + Added upstream abstraction in endpoint + Added load balancer structure + Added breaking change auto-updater + Added uptime monitor proxy type definitions + Added upstream editor UI + Fixed charset bug in many snippets HTML files
188 lines
7.7 KiB
HTML
188 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Notes: This should be open in its original path-->
|
|
<meta charset="utf-8">
|
|
<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>
|
|
<style>
|
|
.accessRule{
|
|
cursor: pointer;
|
|
border-radius: 0.4em !important;
|
|
border: 1px solid rgb(233, 233, 233) !important;
|
|
}
|
|
|
|
.accessRule:hover{
|
|
background-color: rgb(241, 241, 241) !important;
|
|
}
|
|
|
|
.accessRule.active{
|
|
background-color: rgb(241, 241, 241) !important;
|
|
}
|
|
|
|
.accessRule .selected{
|
|
position: absolute;
|
|
top: 1em;
|
|
right: 0.6em;
|
|
}
|
|
|
|
.accessRule:not(.active) .selected{
|
|
display:none;
|
|
}
|
|
|
|
#accessRuleList{
|
|
padding: 0.6em;
|
|
border: 1px solid rgb(228, 228, 228);
|
|
border-radius: 0.4em !important;
|
|
max-height: calc(100vh - 15em);
|
|
min-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<br>
|
|
<div class="ui container">
|
|
<div class="ui header">
|
|
<div class="content">
|
|
Host Access Settings
|
|
<div class="sub header" id="epname"></div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<p>Select an access rule to apply blacklist / whitelist filtering</p>
|
|
<div id="accessRuleList">
|
|
<div class="ui segment accessRule">
|
|
<div class="ui header">
|
|
<i class="filter icon"></i>
|
|
<div class="content">
|
|
Account Settings
|
|
<div class="sub header">Manage your preferences</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<button class="ui basic button" onclick="applyChangeAndClose()"><i class="ui green check icon"></i> Apply Change</button>
|
|
|
|
<button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
|
|
<br><br><br>
|
|
|
|
</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")
|
|
}
|
|
}
|
|
|
|
function initAccessRuleList(callback = undefined){
|
|
$("#accessRuleList").html("<small>Loading</small>");
|
|
$.get("/api/access/list", function(data){
|
|
if (data.error == undefined){
|
|
$("#accessRuleList").html("");
|
|
data.forEach(function(rule){
|
|
let icon = `<i class="ui grey filter icon"></i>`;
|
|
if (rule.ID == "default"){
|
|
icon = `<i class="ui yellow star icon"></i>`;
|
|
}else if (rule.BlacklistEnabled && !rule.WhitelistEnabled){
|
|
//This is a blacklist filter
|
|
icon = `<i class="ui red filter icon"></i>`;
|
|
}else if (rule.WhitelistEnabled && !rule.BlacklistEnabled){
|
|
//This is a whitelist filter
|
|
icon = `<i class="ui green filter icon"></i>`;
|
|
}else if (rule.WhitelistEnabled && rule.BlacklistEnabled){
|
|
//Whitelist and blacklist filter
|
|
icon = `<i class="ui yellow filter icon"></i>`;
|
|
}
|
|
|
|
$("#accessRuleList").append(`<div class="ui basic segment accessRule" ruleid="${rule.ID}" onclick="selectThisRule(this);">
|
|
<h5 class="ui header">
|
|
${icon}
|
|
<div class="content">
|
|
${rule.Name}
|
|
<div class="sub header">${rule.ID}</div>
|
|
</div>
|
|
</h5>
|
|
<p>${rule.Desc}</p>
|
|
${rule.BlacklistEnabled?`<small><i class="ui red filter icon"></i> Blacklist Enabled</small>`:""}
|
|
${rule.WhitelistEnabled?`<small><i class="ui green filter icon"></i> Whitelist Enabled</small>`:""}
|
|
<div class="selected"><i class="ui large green check icon"></i></div>
|
|
</div>`);
|
|
});
|
|
accessRuleList = data;
|
|
$(".dropdown").dropdown();
|
|
if (callback != undefined){
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
initAccessRuleList(function(){
|
|
$.ajax({
|
|
url: "/api/proxy/detail",
|
|
method: "POST",
|
|
data: {"type":"host", "epname": editingEndpoint.ep },
|
|
success: function(data){
|
|
console.log(data);
|
|
if (data.error != undefined){
|
|
alert(data.error);
|
|
}else{
|
|
let currentAccessFilter = data.AccessFilterUUID;
|
|
if (currentAccessFilter == ""){
|
|
//Use default
|
|
currentAccessFilter = "default";
|
|
}
|
|
|
|
$(`.accessRule[ruleid=${currentAccessFilter}]`).addClass("active");
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
function selectThisRule(accessRuleObject){
|
|
let accessRuleID = $(accessRuleObject).attr("ruleid");
|
|
$(".accessRule").removeClass('active');
|
|
$(accessRuleObject).addClass('active');
|
|
}
|
|
|
|
function applyChangeAndClose(){
|
|
let newAccessRuleID = $(".accessRule.active").attr("ruleid");
|
|
let targetEndpoint = editingEndpoint.ep;
|
|
$.ajax({
|
|
url: "/api/access/attach",
|
|
method: "POST",
|
|
data: {
|
|
id: newAccessRuleID,
|
|
host: targetEndpoint
|
|
},
|
|
success: function(data){
|
|
if (data.error != undefined){
|
|
parent.msgbox(data.error, false);
|
|
}else{
|
|
parent.msgbox("Access Rule Updated");
|
|
|
|
//Modify the parent list if exists
|
|
if (parent != undefined && parent.updateAccessRuleNameUnderHost){
|
|
parent.updateAccessRuleNameUnderHost(targetEndpoint, newAccessRuleID);
|
|
}
|
|
parent.hideSideWrapper();
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |