<!DOCTYPE html>
<html>
<head>
<!-- Notes: This should be open in its original path-->
<meta charset="utf-8">
<meta name="zoraxy.csrf.Token" content="{{.csrfToken}}">
<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>
<script src="../script/utils.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;
}
body.darkTheme #accessRuleList{
border: 1px solid rgb(50, 50, 50) !important;
}
body.darkTheme .ui.segment.accessRule {
border: 1px solid var(--theme_bg_secondary) !important;
}
body.darkTheme .ui.segment.accessRule:hover {
background-color: var(--theme_bg_secondary) !important;
}
body.darkTheme .ui.segment.accessRule.active {
background-color: var(--theme_bg_secondary) !important;
}
</style>
</head>
<body>
<link rel="stylesheet" href="../darktheme.css">
<script src="../script/darktheme.js"></script>
<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(){
$.cjax({
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;
$.cjax({
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>