created user settings in the settings page

py_app/app/static/script.js

@@ -31,4 +31,93 @@ document.addEventListener('DOMContentLoaded', () => {
             themeToggle.textContent = 'Change to light theme';
         }
     }
+
+    const createUserBtn = document.getElementById('create-user-btn');
+    const createUserPopup = document.getElementById('create-user-popup');
+    const closePopupBtn = document.getElementById('close-popup-btn');
+
+    // Open the popup
+    createUserBtn.addEventListener('click', () => {
+        createUserPopup.style.display = 'flex';
+    });
+
+    // Close the popup
+    closePopupBtn.addEventListener('click', () => {
+        createUserPopup.style.display = 'none';
+    });
+
+    // Close the popup when clicking outside the popup content
+    createUserPopup.addEventListener('click', (e) => {
+        if (e.target === createUserPopup) {
+            createUserPopup.style.display = 'none';
+        }
+    });
+
+    const editButtons = document.querySelectorAll('.edit-btn');
+    const editUserPopup = document.getElementById('edit-user-popup');
+    const closeEditPopupBtn = document.getElementById('close-edit-popup-btn');
+
+    // Open the edit user popup
+    editButtons.forEach((button) => {
+        button.addEventListener('click', (e) => {
+            const userElement = e.target.closest('li');
+            const username = userElement.querySelector('.user-name').textContent;
+            const role = userElement.querySelector('.user-role').textContent.split(': ')[1];
+            const userId = userElement.dataset.userId;
+
+            // Populate the form fields
+            document.getElementById('edit-user-id').value = userId;
+            document.getElementById('edit-username').value = username;
+            document.getElementById('edit-role').value = role;
+
+            // Show the popup
+            editUserPopup.style.display = 'flex';
+        });
+    });
+
+    // Close the edit user popup
+    closeEditPopupBtn.addEventListener('click', () => {
+        editUserPopup.style.display = 'none';
+    });
+
+    // Close the popup when clicking outside the popup content
+    editUserPopup.addEventListener('click', (e) => {
+        if (e.target === editUserPopup) {
+            editUserPopup.style.display = 'none';
+        }
+    });
+
+    const deleteButtons = document.querySelectorAll('.delete-btn');
+    const deleteUserPopup = document.getElementById('delete-user-popup');
+    const closeDeletePopupBtn = document.getElementById('close-delete-popup-btn');
+    const deleteUsernameSpan = document.getElementById('delete-username');
+    const deleteUserIdInput = document.getElementById('delete-user-id');
+
+    // Open the delete user popup
+    deleteButtons.forEach((button) => {
+        button.addEventListener('click', (e) => {
+            const userElement = e.target.closest('li');
+            const username = userElement.querySelector('.user-name').textContent;
+            const userId = userElement.dataset.userId;
+
+            // Populate the popup with user details
+            deleteUsernameSpan.textContent = username;
+            deleteUserIdInput.value = userId;
+
+            // Show the popup
+            deleteUserPopup.style.display = 'flex';
+        });
+    });
+
+    // Close the delete user popup
+    closeDeletePopupBtn.addEventListener('click', () => {
+        deleteUserPopup.style.display = 'none';
+    });
+
+    // Close the popup when clicking outside the popup content
+    deleteUserPopup.addEventListener('click', (e) => {
+        if (e.target === deleteUserPopup) {
+            deleteUserPopup.style.display = 'none';
+        }
+    });
 });