|
|
@@ -0,0 +1,166 @@
|
|
|
+<!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>
|
|
|
+ <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");
|
|
|
+ alert(newAccessRuleID);
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Toby Chui