mirror of
https://github.com/tobychui/zoraxy.git
synced 2025-08-07 13:48:29 +02:00
v3.0.2 init commit
+ Fixed zeroSSL bug (said by @yeungalan ) #45 + Fixed manual renew button bug + Seperated geodb module with access controller + Added per hosts access control (experimental) #69 + Fixed basic auth not working on TLS bypass mode bug + Fixed empty domain crash bug #120
This commit is contained in:
Toby Chui
267
src/web/snippet/accessRuleEditor.html
Normal file
267
src/web/snippet/accessRuleEditor.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!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>
|
||||
#refreshAccessRuleListBtn{
|
||||
position: absolute;
|
||||
top: 0.4em;
|
||||
right: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<div class="ui container">
|
||||
<div class="ui header">
|
||||
<div class="content">
|
||||
Access Rule Editor
|
||||
<div class="sub header">Create, Edit or Remove Access Rules</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui top attached tabular menu">
|
||||
<a class="active item" data-tab="new"><i class="ui green add icon"></i> New</a>
|
||||
<a class="item" data-tab="edit"><i class="ui grey edit icon"></i> Edit</a>
|
||||
</div>
|
||||
<div class="ui bottom attached active tab segment" data-tab="new">
|
||||
<p>Create a new Access Rule</p>
|
||||
<form class="ui form" id="accessRuleForm">
|
||||
<div class="field">
|
||||
<label>Rule Name</label>
|
||||
<input type="text" name="accessRuleName" placeholder="Rule Name" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<textarea name="description" placeholder="Description" required></textarea>
|
||||
</div>
|
||||
<button class="ui basic button" type="submit"><i class="ui green add icon"></i> Create</button>
|
||||
</form>
|
||||
<br>
|
||||
</div>
|
||||
<div class="ui bottom attached tab segment" data-tab="edit">
|
||||
<p>Select an Access Rule to edit</p>
|
||||
<button id="refreshAccessRuleListBtn" class="ui circular basic icon button" onclick="reloadAccessRuleList()"><i class="ui green refresh icon"></i></button>
|
||||
<div class="ui selection fluid dropdown" id="accessRuleSelector">
|
||||
<input type="hidden" name="targetAccessRule" value="default">
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="default text"></div>
|
||||
<div class="menu" id="accessRuleList">
|
||||
<div class="item" data-value="default"><i class="ui yellow star icon"></i> Default</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<form class="ui form" id="modifyRuleInfo">
|
||||
<div class="disabled field">
|
||||
<label>Rule ID</label>
|
||||
<input type="text" name="accessRuleUUID">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Rule Name</label>
|
||||
<input type="text" name="accessRuleName" placeholder="Rule Name" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<textarea name="description" placeholder="Description" required></textarea>
|
||||
</div>
|
||||
<button class="ui basic button" type="submit"><i class="ui green save icon"></i> Save Changes</button>
|
||||
<button class="ui basic button" onclick="removeAccessRule(event);"><i class="ui red trash icon"></i> Remove Rule</button>
|
||||
</form>
|
||||
</div>
|
||||
<br>
|
||||
<button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Close</button>
|
||||
<br><br><br>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let accessRuleList = [];
|
||||
$('.dropdown').dropdown();
|
||||
$('.menu .item').tab();
|
||||
|
||||
function handleCreateNewAccessRule(event) {
|
||||
event.preventDefault(); // Prevent the default form submission
|
||||
const formData = new FormData(event.target);
|
||||
const accessRuleName = formData.get('accessRuleName');
|
||||
const description = formData.get('description');
|
||||
|
||||
console.log('Access Rule Name:', accessRuleName);
|
||||
console.log('Description:', description);
|
||||
|
||||
$("#accessRuleForm input[name='accessRuleName']").val("");
|
||||
$("#accessRuleForm textarea[name='description']").val("");
|
||||
|
||||
$.ajax({
|
||||
url: "/api/access/create",
|
||||
method: "POST",
|
||||
data: {
|
||||
"name": accessRuleName,
|
||||
"desc": description
|
||||
},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
parent.msgbox(data.error, false);
|
||||
}else{
|
||||
parent.msgbox("Access Rule Created", true);
|
||||
reloadAccessRuleList();
|
||||
if (parent != undefined && parent.reloadAccessRules != undefined){
|
||||
parent.reloadAccessRules();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//Handle on change of the dropdown selection
|
||||
function handleSelectEditingAccessRule(){
|
||||
const selectedValue = document.querySelector('#accessRuleSelector').querySelector('input').value;
|
||||
console.log('Selected Value:', selectedValue);
|
||||
//Load the information from list
|
||||
loadAccessRuleInfoIntoEditFields(selectedValue);
|
||||
}
|
||||
|
||||
//Load the access rules information into the fields
|
||||
function loadAccessRuleInfoIntoEditFields(targetAccessRuleUUID){
|
||||
var targetAccessRule = undefined;
|
||||
for (var i = 0; i < accessRuleList.length; i++){
|
||||
let thisAccessRule = accessRuleList[i];
|
||||
if (thisAccessRule.ID == targetAccessRuleUUID){
|
||||
targetAccessRule = thisAccessRule;
|
||||
}
|
||||
}
|
||||
|
||||
if (targetAccessRule == undefined){
|
||||
//Target exists rule no longer exists
|
||||
return;
|
||||
}
|
||||
|
||||
let accessRuleID = targetAccessRule.ID;
|
||||
let accessRuleName = targetAccessRule.Name;
|
||||
let accessRuleDesc = targetAccessRule.Desc;
|
||||
|
||||
//Load the information into the form input field
|
||||
//Load the information into the form input field
|
||||
document.querySelector('#modifyRuleInfo input[name="accessRuleUUID"]').value = accessRuleID;
|
||||
document.querySelector('#modifyRuleInfo input[name="accessRuleName"]').value = accessRuleName;
|
||||
document.querySelector('#modifyRuleInfo textarea[name="description"]').value = accessRuleDesc;
|
||||
}
|
||||
|
||||
//Bind events to modify rule form
|
||||
document.getElementById('modifyRuleInfo').addEventListener('submit', function(event){
|
||||
event.preventDefault(); // Prevent the default form submission
|
||||
|
||||
const accessRuleUUID = document.querySelector('#modifyRuleInfo input[name="accessRuleUUID"]').value;
|
||||
const accessRuleName = document.querySelector('#modifyRuleInfo input[name="accessRuleName"]').value;
|
||||
const description = document.querySelector('#modifyRuleInfo textarea[name="description"]').value;
|
||||
|
||||
|
||||
console.log('Access Rule UUID:', accessRuleUUID);
|
||||
console.log('Access Rule Name:', accessRuleName);
|
||||
console.log('Description:', description);
|
||||
|
||||
$.ajax({
|
||||
url: "/api/access/update",
|
||||
method: "POST",
|
||||
data: {
|
||||
"id":accessRuleUUID,
|
||||
"name":accessRuleName,
|
||||
"desc":description
|
||||
},
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
parent.msgbox(data.error, false);
|
||||
}else{
|
||||
parent.msgbox("Access rule updated", true);
|
||||
initAccessRuleList(function(){
|
||||
$("#accessRuleSelector").dropdown("set selected", accessRuleUUID);
|
||||
loadAccessRuleInfoIntoEditFields(accessRuleUUID);
|
||||
});
|
||||
if (parent != undefined && parent.reloadAccessRules != undefined){
|
||||
parent.reloadAccessRules();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
function initAccessRuleList(callback=undefined){
|
||||
$.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>`;
|
||||
}
|
||||
$("#accessRuleList").append(`<div class="item" data-value="${rule.ID}">${icon} ${rule.Name}</div>`);
|
||||
});
|
||||
accessRuleList = data;
|
||||
$(".dropdown").dropdown();
|
||||
if (callback != undefined){
|
||||
callback();
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
initAccessRuleList(function(){
|
||||
$("#accessRuleSelector").dropdown("set selected", "default");
|
||||
loadAccessRuleInfoIntoEditFields("default");
|
||||
});
|
||||
|
||||
function reloadAccessRuleList(){
|
||||
initAccessRuleList(function(){
|
||||
$("#accessRuleSelector").dropdown("set selected", "default");
|
||||
loadAccessRuleInfoIntoEditFields("default");
|
||||
});
|
||||
}
|
||||
|
||||
function removeAccessRule(event){
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
let accessRuleUUID = $("#modifyRuleInfo input[name='accessRuleUUID']").val();
|
||||
if (accessRuleUUID == ""){
|
||||
return;
|
||||
}
|
||||
if (accessRuleUUID == "default"){
|
||||
parent.msgbox("Default access rule cannot be removed", false);
|
||||
return;
|
||||
}
|
||||
let accessRuleName = $("#modifyRuleInfo input[name='accessRuleName']").val();
|
||||
if (confirm("Confirm removing access rule " + accessRuleName + "?")){
|
||||
$.ajax({
|
||||
url: "/api/access/remove",
|
||||
data: {
|
||||
"id": accessRuleUUID
|
||||
},
|
||||
method: "POST",
|
||||
success: function(data){
|
||||
if (data.error != undefined){
|
||||
parent.msgbox(data.error, false);
|
||||
}else{
|
||||
parent.msgbox("Access rule removed", true);
|
||||
reloadAccessRuleList();
|
||||
if (parent != undefined && parent.reloadAccessRules != undefined){
|
||||
parent.reloadAccessRules();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.getElementById('accessRuleSelector').addEventListener('change', handleSelectEditingAccessRule);
|
||||
document.getElementById('accessRuleForm').addEventListener('submit', handleCreateNewAccessRule);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user