TC
/
Zoraxy
mirror of https://git.hkwtc.org/TC/ReverseProxy


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!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>