TC
/
Zoraxy
cermin dari https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<!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>
        #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>