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';
+        }
+    });
 });

py_app/app/static/style.css

@@ -6,7 +6,7 @@ body {
 }
 
 .container {
-    width: 98%;
+    width: 100%;
     margin: auto;
     overflow: hidden;
     padding: 0; /* Remove padding */
@@ -17,10 +17,11 @@ body {
 
 .login-page {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
+    align-items: center; /* Vertically center the content */
+    justify-content: space-between; /* Space between the logo and the form container */
+    height: 100vh; /* Full height of the viewport */
     background-color: #f4f4f9;
+    padding: 0 20px; /* Add padding to the sides */
 }
 
 header {
@@ -92,12 +93,13 @@ header {
 }
 
 .form-container {
-    width: 600px; /* Set a fixed width for the login container */
+    width: 600px; /* Fixed width for the login container */
     background: #fff;
-    padding: 15px 30px 15px 15px; /* Add 30px padding to the right */
+    padding: 15px 30px; /* Add padding inside the container */
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 0 0 0 20px; /* Move the container closer to the picture */
+    margin: 0; /* Remove any extra margin */
+    align-self: center; /* Vertically center the form container */
 }
 
 .form-container h2 {
@@ -228,18 +230,17 @@ body.dark-mode .card {
 
 /* Common card styles */
 .card {
-    width: 400px; /* Fixed width */
-    height: 150px; /* Fixed height */
+    width: 600px;
+    background: #fff;
     border-radius: 5px;
     padding: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px auto; /* Center the card horizontally */
+    margin: 20px auto;
     text-align: center;
-    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
 }
 
 .card h3 {
-    margin-bottom: 10px;
+    margin-bottom: 20px;
     font-size: 1.5em;
 }
 
@@ -261,4 +262,134 @@ body.dark-mode .card {
 
 .card .btn:hover {
     background-color: #0056b3;
+}
+
+.user-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 20px 0;
+}
+
+.user-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+.user-name {
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.user-role {
+    font-size: 0.9em;
+    color: #555;
+    margin-left: 10px;
+}
+
+.btn {
+    padding: 5px 10px;
+    font-size: 1em;
+    color: #fff;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.create-btn {
+    margin-top: 20px;
+    background-color: #28a745;
+}
+
+.create-btn:hover {
+    background-color: #218838;
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+
+/* Light mode styles for pop-ups */
+body.light-mode .popup-content {
+    background: #fff;
+    color: #000;
+    border: 1px solid #ddd;
+}
+
+/* Dark mode styles for pop-ups */
+body.dark-mode .popup-content {
+    background: #1e1e1e;
+    color: #fff;
+    border: 1px solid #444;
+}
+
+/* Common styles for pop-ups */
+.popup-content {
+    padding: 20px;
+    border-radius: 5px;
+    width: 400px;
+    text-align: center;
+    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
+}
+
+.popup-content h3 {
+    margin-bottom: 20px;
+    font-size: 1.2em;
+}
+
+.popup-content form {
+    display: flex;
+    flex-direction: column;
+}
+
+.popup-content label {
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.popup-content input,
+.popup-content select {
+    margin-bottom: 15px;
+    padding: 10px;
+    font-size: 1em;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
+.popup-content input[readonly] {
+    background-color: #e9ecef;
+    cursor: not-allowed;
+}
+
+.cancel-btn {
+    background-color: #dc3545;
+}
+
+.cancel-btn:hover {
+    background-color: #c82333;
+}
+
+.delete-confirm-btn {
+    background-color: #dc3545;
+}
+
+.delete-confirm-btn:hover {
+    background-color: #c82333;
 }