auto update script executed

web/components/rules.html

@@ -63,7 +63,7 @@
                                                 <th>Password</th>
                                                 <th>Remove</th>
                                             </tr></thead>
-                                            <tbody>
+                                            <tbody id="basicAuthCredentialTable">
                                             <tr>
                                                 <td colspan="3"><i class="ui green circle check icon"></i> No Entered Credential</td>
                                             </tr>
@@ -71,18 +71,15 @@
                                         </table>
                                         <div class="three small fields credentialEntry">
                                             <div class="field">
-                                                <input type="text" placeholder="Username" autocomplete="off">
+                                                <input id="basicAuthCredUsername" type="text" placeholder="Username" autocomplete="off">
                                             </div>
                                             <div class="field">
-                                                <input type="password" placeholder="Password" autocomplete="off">
+                                                <input id="basicAuthCredPassword" type="password" placeholder="Password" autocomplete="off">
                                             </div>
                                             <div class="field">
-                                                <button class="ui basic button"><i class="blue add icon"></i> Add Credential</button>
+                                                <button class="ui basic button" onclick="addCredentials();"><i class="blue add icon"></i> Add Credential</button>
                                             </div>
                                         </div>
-                                        <div class="">
-
-                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -221,6 +218,71 @@
     toggleBasicAuth();
 
 
+    /*
+        Credential Managements
+
+    */
+    let credentials = []; // Global variable to store credentials
+
+    function addCredentials() {
+        // Retrieve the username and password input values
+        var username = $('#basicAuthCredUsername').val();
+        var password = $('#basicAuthCredPassword').val();
+        
+        if(username == "" || password == ""){
+            msgbox("Username or password cannot be empty", false, 5000);
+            return;
+        }
+        
+        // Create a new credential object
+        var credential = {
+            username: username,
+            password: password
+        };
+
+        // Add the credential to the global credentials array
+        credentials.push(credential);
+
+        // Clear the input fields
+        $('input[type="text"]').val('');
+        $('input[type="password"]').val('');
+
+        // Update the table body with the credentials
+        updateTable();
+    }
+
+    function updateTable() {
+        var tableBody = $('#basicAuthCredentialTable');
+        tableBody.empty();
+
+        if (credentials.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 < credentials.length; i++) {
+            var credential = credentials[i];
+            var username = credential.username;
+            var password = credential.password.replace(/./g, '*'); // Replace each character with '*'
+
+            var row = '<tr>' +
+                '<td>' + username + '</td>' +
+                '<td>' + password + '</td>' +
+                '<td><button class="ui basic button" onclick="removeCredential(' + i + ');"><i class="red remove icon"></i> Remove</button></td>' +
+                '</tr>';
+
+            tableBody.append(row);
+            }
+        }
+    }
+
+    function removeCredential(index) {
+        // Remove the credential from the credentials array
+        credentials.splice(index, 1);
+
+        // Update the table body
+        updateTable();
+    }
+
+
     //Check if a string is a valid subdomain 
     function isSubdomainDomain(str) {
         const regex = /^(localhost|[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}|[a-z0-9]+([\-.]{1}[a-z0-9]+)*\.[a-z]{2,}\.)$/i;