updateweb

website/admin/js/users.js

@@ -84,19 +84,19 @@ function renderUsers(users) {
         ${u.isactive ? "Active" : "Disabled"}</span></td>
       <td>${formatDate(u.createdat)}</td>
       <td>
-        <button class="btn btn-sm btn-info" onclick="editUser(${
+        <button class="btn btn-sm btn-info" onclick="editUser('${escapeHtml(
           u.id
-        })" title="Edit User">
+        )}')" title="Edit User">
           <i class="bi bi-pencil"></i>
         </button>
-        <button class="btn btn-sm btn-warning" onclick="showChangePassword(${
+        <button class="btn btn-sm btn-warning" onclick="showChangePassword('${escapeHtml(
           u.id
-        }, '${escapeHtml(u.name)}')" title="Change Password">
+        )}', '${escapeHtml(u.name)}')" title="Change Password">
           <i class="bi bi-key"></i>
         </button>
-        <button class="btn btn-sm btn-danger" onclick="deleteUser(${
+        <button class="btn btn-sm btn-danger" onclick="deleteUser('${escapeHtml(
           u.id
-        }, '${escapeHtml(u.name)}')" title="Delete User">
+        )}', '${escapeHtml(u.name)}')" title="Delete User">
           <i class="bi bi-trash"></i>
         </button>
       </td>
@@ -195,6 +195,8 @@ async function saveUser() {
     return;
   }
 
+  showLoading(id ? "Updating user..." : "Creating user...");
+
   try {
     const url = id ? `/api/admin/users/${id}` : "/api/admin/users";
     const method = id ? "PUT" : "POST";
@@ -206,6 +208,8 @@ async function saveUser() {
     });
 
     const data = await response.json();
+    hideLoading();
+
     if (data.success) {
       showSuccess(
         id ? "User updated successfully" : "User created successfully"
@@ -217,6 +221,7 @@ async function saveUser() {
     }
   } catch (error) {
     console.error("Failed to save user:", error);
+    hideLoading();
     showError("Failed to save user");
   }
 }
@@ -249,6 +254,8 @@ async function changePassword() {
     return;
   }
 
+  showLoading("Changing password...");
+
   try {
     const response = await fetch(`/api/admin/users/${id}/password`, {
       method: "PUT",
@@ -258,6 +265,8 @@ async function changePassword() {
     });
 
     const data = await response.json();
+    hideLoading();
+
     if (data.success) {
       showSuccess("Password changed successfully");
       passwordModal.hide();
@@ -266,6 +275,7 @@ async function changePassword() {
     }
   } catch (error) {
     console.error("Failed to change password:", error);
+    hideLoading();
     showError("Failed to change password");
   }
 }
@@ -278,12 +288,16 @@ async function deleteUser(id, name) {
   )
     return;
 
+  showLoading("Deleting user...");
+
   try {
     const response = await fetch(`/api/admin/users/${id}`, {
       method: "DELETE",
       credentials: "include",
     });
     const data = await response.json();
+    hideLoading();
+
     if (data.success) {
       showSuccess("User deleted successfully");
       loadUsers();
@@ -292,6 +306,7 @@ async function deleteUser(id, name) {
     }
   } catch (error) {
     console.error("Failed to delete user:", error);
+    hideLoading();
     showError("Failed to delete user");
   }
 }
@@ -332,9 +347,76 @@ function formatDate(dateString) {
   });
 }
 
+// Custom notification system
+function showNotification(type, title, message) {
+  const container = document.getElementById("notificationContainer");
+  const notification = document.createElement("div");
+  notification.className = `notification notification-${type}`;
+
+  const icon =
+    type === "success"
+      ? '<i class="bi bi-check-circle-fill"></i>'
+      : '<i class="bi bi-exclamation-circle-fill"></i>';
+
+  notification.innerHTML = `
+    <div class="notification-icon">${icon}</div>
+    <div class="notification-content">
+      <div class="notification-title">${title}</div>
+      <div class="notification-message">${message}</div>
+    </div>
+    <button class="notification-close" onclick="closeNotification(this)">
+      <i class="bi bi-x"></i>
+    </button>
+  `;
+
+  container.appendChild(notification);
+
+  // Auto remove after 3 seconds
+  setTimeout(() => {
+    if (notification.parentElement) {
+      notification.classList.add("removing");
+      setTimeout(() => {
+        if (notification.parentElement) {
+          notification.remove();
+        }
+      }, 300);
+    }
+  }, 3000);
+}
+
+function closeNotification(button) {
+  const notification = button.closest(".notification");
+  notification.classList.add("removing");
+  setTimeout(() => {
+    notification.remove();
+  }, 300);
+}
+
 function showSuccess(message) {
-  alert(message);
+  showNotification("success", "Success!", message);
 }
+
 function showError(message) {
-  alert("Error: " + message);
+  showNotification("error", "Error", message);
+}
+
+// Loading overlay functions
+function showLoading(message = "Saving...") {
+  const overlay = document.createElement("div");
+  overlay.className = "loading-overlay";
+  overlay.id = "loadingOverlay";
+  overlay.innerHTML = `
+    <div class="loading-spinner-container">
+      <div class="loading-spinner-icon"></div>
+      <div class="loading-spinner-text">${message}</div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+}
+
+function hideLoading() {
+  const overlay = document.getElementById("loadingOverlay");
+  if (overlay) {
+    overlay.remove();
+  }
 }