TC
/
Zoraxy
spiegel van https://git.hkwtc.org/TC/ReverseProxy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<!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>
    </head>
    <body>
        <br>
        <div class="ui container">
            <div class="ui header">
                <div class="content">
                    Basic Auth Settings
                    <div class="sub header" id="epname"></div>
                </div>
            </div>
            <div class="ui divider"></div>
            <h3 class="ui header">Basic Auth Credential</h3>
            <div class="scrolling content ui form">
                <div id="inlineEditBasicAuthCredentials" class="field">
                    <p>Enter the username and password for allowing them to access this proxy endpoint</p>
                    <table class="ui very basic compacted unstackable celled table">
                        <thead>
                        <tr>
                            <th>Username</th>
                            <th>Password</th>
                            <th>Remove</th>
                        </tr></thead>
                        <tbody id="inlineEditBasicAuthCredentialTable">
                        <tr>
                            <td colspan="3"><i class="ui green circle check icon"></i> No Entered Credential</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="three small fields credentialEntry">
                        <div class="field">
                            <input id="inlineEditBasicAuthCredUsername" type="text" placeholder="Username" autocomplete="off">
                        </div>
                        <div class="field">
                            <input id="inlineEditBasicAuthCredPassword" type="password" placeholder="Password" autocomplete="off">
                        </div>
                        <div class="field" >
                            <button class="ui basic button" onclick="addCredentialsToEditingList();"><i class="blue add icon"></i> Add Credential</button>
                        </div>
                        <div class="ui divider"></div>
                        <div class="field" >
                            <button class="ui basic button"  style="float: right;" onclick="saveCredentials();"><i class="green save icon"></i> Save</button>
                            <button class="ui basic button"  style="float: right;" onclick="cancelCredentialEdit();"><i class="remove icon"></i> Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui divider"></div>
            <h3 class="ui header">No-Auth Paths</h3>
            <div class="scrolling content ui form">
                <p>Exclude specific paths from the basic auth interface. Useful if you are hosting services require remote API access.</p>
                    <table class="ui very basic compacted unstackable celled table">
                        <thead>
                        <tr>
                            <th>Username</th>
                            <th>Password</th>
                            <th>Remove</th>
                        </tr></thead>
                        <tbody id="inlineEditExclusionPaths">
                        <tr>
                            <td colspan="3"><i class="ui green circle check icon"></i> No Path Excluded</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="field">
                        <input id="inlineEditExclusionPath" type="text" placeholder="/api" autocomplete="off">
                    </div>
                    <div class="field" >
                        <button class="ui basic button" onclick="addCredentialsToEditingList();"><i class="blue add icon"></i> Add Credential</button>
                    </div>
            </div>

        </div>
        <script>
            let editingCredentials = [];
            let editingEndpoint = {};

            if (window.location.hash.length > 1){
                let payloadHash = window.location.hash.substr(1);
                try{
                    payloadHash = JSON.parse(decodeURIComponent(payloadHash));
                    loadBasicAuthCredentials(payloadHash.ept, payloadHash.ep);
                    $("#epname").text(payloadHash.ep);
                    editingEndpoint = payloadHash;
                }catch(ex){
                    console.log("Unable to load endpoint data from hash")
                }
            }

            function loadBasicAuthCredentials(endpointType, uuid){
                $.ajax({
                    url: "/api/proxy/updateCredentials",
                    method: "GET",
                    data: {
                        ep: uuid,
                        ptype: endpointType
                    },
                    success: function(data){
                        //Push the existing account to list
                        for(var i = 0; i < data.length; i++){
                            // Create a new credential object
                            var credential = {
                                username: data[i],
                                password: ""
                            };

                            // Add the credential to the global credentials array
                            editingCredentials.push(credential);
                        }
                        console.log(data);
                        updateEditingCredentialList();
                    }
                })
            }

            function addCredentialsToEditingList() {
                // Retrieve the username and password input values
                var username = $('#inlineEditBasicAuthCredUsername').val();
                var password = $('#inlineEditBasicAuthCredPassword').val();
                
                if(username == "" || password == ""){
                    parent.msgbox("Username or password cannot be empty", false, 5000);
                    return;
                }

                if (alreadyExists(username)){
                    parent.msgbox("Credential with same username already exists", false, 5000);
                    return;
                }
                
                // Create a new credential object
                var credential = {
                    username: username,
                    password: password
                };

                // Add the credential to the global credentials array
                editingCredentials.push(credential);

                // Clear the input fields
                $('#inlineEditBasicAuthCredUsername').val('');
                $('#inlineEditBasicAuthCredPassword').val('');

                // Update the table body with the credentials
                updateEditingCredentialList();
            }

            function updateEditingCredentialList() {
                var tableBody = $('#inlineEditBasicAuthCredentialTable');
                tableBody.empty();

                if (editingCredentials.length === 0) {
                    tableBody.append('<tr><td colspan="3"><i class="ui green circle check icon"></i> No Entered Credential</td></tr>');
                } else {
                    for (var i = 0; i < editingCredentials.length; i++) {
                    var credential = editingCredentials[i];
                    var username = credential.username;
                    var password = credential.password.replace(/./g, '*'); // Replace each character with '*'
                    
                    if (credential.password == ""){
                        password = `<span style="color: #c9c9c9;"><i class="eye slash outline icon"></i> Hidden<span>`;
                    }
                    var row = '<tr>' +
                        '<td>' + username + '</td>' +
                        '<td>' + password + '</td>' +
                        '<td><button class="ui basic button" onclick="removeCredentialFromEditingList(' + i + ');"><i class="red remove icon"></i> Remove</button></td>' +
                        '</tr>';

                    tableBody.append(row);
                    }
                }
            }

            function removeCredentialFromEditingList(index) {
                // Remove the credential from the credentials array
                editingCredentials.splice(index, 1);

                // Update the table body
                updateEditingCredentialList();
            }

            function alreadyExists(username){
                let isExists = false;
                editingCredentials.forEach(function(cred){
                    if (cred.username == username){
                        isExists = true;
                    }
                });
                return isExists;
            }

            function cancelCredentialEdit(){
                parent.hideSideWrapper(true);
            }

            function saveCredentials(){
                $.ajax({
                    url: "/api/proxy/updateCredentials",
                    method: "POST",
                    data: {
                        ep: editingEndpoint.ep, 
                        ptype: editingEndpoint.ept,
                        creds: JSON.stringify(editingCredentials)
                    },
                    success: function(data){
                        if (data.error != undefined){
                            parent.msgbox(data.error, false, 6000);
                        }else{
                            parent.msgbox("Credentials Updated");
                            parent.hideSideWrapper(true);
                        }
                    }
                })
            }
        </script>
    </body>
</html>