From e1018b137eef9f4c825628185abd39539b254e34 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Sat, 22 Feb 2025 11:31:29 -0500
Subject: [PATCH] change to updateUI

---
 index.html | 455 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 241 insertions(+), 214 deletions(-)
diff --git a/index.html b/index.html
index 2d9d436..3f97b6f 100644
--- a/index.html
+++ b/index.html
@@ -1,238 +1,265 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Multi File Upload & Edit</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="auth.js"></script>
-    <script src="upload.js"></script>
-    <script src="displayFileList.js"></script>
-    <style>
-        .container { margin-top: 10px; }
-        #fileListContainer, #uploadForm, #addUserModal { display: none; }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Multi File Upload & Edit</title>
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="auth.js"></script>
+  <script src="upload.js"></script>
+  <script src="displayFileList.js"></script>
+  <style>
+    .container { margin-top: 10px; }
+    #fileListContainer, #uploadForm, #addUserModal { display: none; }
 
-        .logout-container {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            gap: 5px;
-        }
+    .logout-container {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 5px;
+    }
 
-        @media (max-width: 768px) {
-            .logout-container {
-                position: static;
-                align-items: flex-end;
-                text-align: right;
-                margin-top: 10px;
-            }
+    @media (max-width: 768px) {
+      .logout-container {
+        position: static;
+        align-items: flex-end;
+        text-align: right;
+        margin-top: 10px;
+      }
+      .logout-container button {
+        width: auto;
+        min-width: 120px;
+      }
+    }
 
-            .logout-container button {
-                width: auto;
-                min-width: 120px;
-            }
-        }
-
-        .modal {
-            display: none;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: white;
-            padding: 20px;
-            border: 1px solid black;
-            box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
-            z-index: 1000;
-            width: 350px;
-            height: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-    </style>
+    .modal {
+      display: none;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: white;
+      padding: 20px;
+      border: 1px solid black;
+      box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
+      z-index: 1000;
+      width: 350px;
+      height: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  </style>
 </head>
 <body>
-    <header class="text-center" style="position: relative;">
-        <h1>Multi File Upload & Edit</h1>
-        <div class="logout-container">
-            <button id="logoutBtn" class="btn btn-danger" style="display: none;">Logout</button>
-            <button id="addUserBtn" class="btn btn-success" style="display: none;">Add User</button>
-        </div>
-    </header>
-    
-    <div class="container">
-        <div class="row" id="loginForm">
-            <div class="col-md-6">
-                <form id="authForm" method="post">
-                    <div class="form-group">
-                        <label for="loginUsername">User:</label>
-                        <input type="text" class="form-control" id="loginUsername" name="username" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="loginPassword">Password:</label>
-                        <input type="password" class="form-control" id="loginPassword" name="password" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Login</button>
-                </form>
-            </div>
-        </div>
-
-        <div class="row" id="uploadForm">
-            <div class="col-md-12">
-                <form id="uploadFileForm" method="post" enctype="multipart/form-data">
-                    <div class="form-group">
-                        <label for="file"></label>
-                        <input type="file" id="file" name="file[]" class="form-control-file" multiple required style="width: 768px;">
-                    </div>
-                    <button type="submit" id="uploadBtn" class="btn btn-primary" disabled>Upload</button>
-                    <div id="statusMessage"></div>
-                </form>
-            </div>
-        </div>
-
-        <div id="fileListContainer">
-            <h2>Uploaded Files</h2>
-            <button id="deleteSelectedBtn" class="btn btn-danger" style="margin-bottom: 10px; display: none;">Delete Selected</button>
-            <div id="fileList"></div>
-        </div>
-
-        <!-- Add User Modal -->
-        <div id="addUserModal" class="modal">
-            <h3>Create New User</h3>
-            <label for="newUsername">Username:</label>
-            <input type="text" id="newUsername" class="form-control">
-            
-            <label for="newPassword">Password:</label>
-            <input type="password" id="newPassword" class="form-control">
-
-            <div>
-                <input type="checkbox" id="isAdmin">
-                <label for="isAdmin">Grant Admin Access</label>
-            </div>
-
-            <button id="saveUserBtn" class="btn btn-primary">Save User</button>
-            <button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
-        </div>
+  <header class="text-center" style="position: relative;">
+    <h1>Multi File Upload & Edit</h1>
+    <div class="logout-container">
+      <button id="logoutBtn" class="btn btn-danger" style="display: none;">Logout</button>
+      <button id="addUserBtn" class="btn btn-success" style="display: none;">Add User</button>
     </div>
-    
-    <script>
+  </header>
+  
+  <div class="container">
+    <div class="row" id="loginForm">
+      <div class="col-md-6">
+        <form id="authForm" method="post">
+          <div class="form-group">
+            <label for="loginUsername">User:</label>
+            <input type="text" class="form-control" id="loginUsername" name="username" required>
+          </div>
+          <div class="form-group">
+            <label for="loginPassword">Password:</label>
+            <input type="password" class="form-control" id="loginPassword" name="password" required>
+          </div>
+          <button type="submit" class="btn btn-primary">Login</button>
+        </form>
+      </div>
+    </div>
+
+    <div class="row" id="uploadForm">
+      <div class="col-md-12">
+        <form id="uploadFileForm" method="post" enctype="multipart/form-data">
+          <div class="form-group">
+            <label for="file"></label>
+            <input type="file" id="file" name="file[]" class="form-control-file" multiple required style="width: 768px;">
+          </div>
+          <button type="submit" id="uploadBtn" class="btn btn-primary" disabled>Upload</button>
+          <div id="statusMessage"></div>
+        </form>
+      </div>
+    </div>
+
+    <div id="fileListContainer">
+      <h2>Uploaded Files</h2>
+      <button id="deleteSelectedBtn" class="btn btn-danger" style="margin-bottom: 10px; display: none;">Delete Selected</button>
+      <div id="fileList"></div>
+    </div>
+
+    <!-- Add User Modal -->
+    <div id="addUserModal" class="modal">
+      <h3>Create New User</h3>
+      <label for="newUsername">Username:</label>
+      <input type="text" id="newUsername" class="form-control">
+      
+      <label for="newPassword">Password:</label>
+      <input type="password" id="newPassword" class="form-control">
+
+      <div id="adminCheckboxContainer">
+        <input type="checkbox" id="isAdmin">
+        <label for="isAdmin">Grant Admin Access</label>
+      </div>
+
+      <button id="saveUserBtn" class="btn btn-primary">Save User</button>
+      <button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
+    </div>
+  </div>
+  
+  <script>
+    // Global flag to determine if we are in setup mode.
+    window.setupMode = false;
+
     document.addEventListener("DOMContentLoaded", function () {
-        checkAuthentication();
+      checkAuthentication();
 
-        function updateUI(data) {
-            if (data.authenticated) {
-                document.getElementById("loginForm").style.display = "none";
-                document.getElementById("uploadForm").style.display = "block";
-                document.getElementById("fileListContainer").style.display = "block";
-                document.getElementById("logoutBtn").style.display = "block";
+      function updateUI(data) {
+        if (data.setup) {
+          // In setup mode, show the Add User Modal and hide other UI elements.
+          document.getElementById("loginForm").style.display = "none";
+          document.getElementById("uploadForm").style.display = "none";
+          document.getElementById("fileListContainer").style.display = "none";
+          document.getElementById("logoutBtn").style.display = "none";
+          document.getElementById("addUserBtn").style.display = "none";
+          // Pre-check and disable the admin checkbox.
+          document.getElementById("isAdmin").checked = true;
+          document.getElementById("isAdmin").disabled = true;
+          // Optionally hide the container (since it's always admin in setup mode).
+          document.getElementById("adminCheckboxContainer").style.display = "none";
+          document.getElementById("addUserModal").style.display = "block";
+          window.setupMode = true;
+          return;
+        }
+        
+        // Normal authenticated user flow.
+        if (data.authenticated) {
+          document.getElementById("loginForm").style.display = "none";
+          document.getElementById("uploadForm").style.display = "block";
+          document.getElementById("fileListContainer").style.display = "block";
+          document.getElementById("logoutBtn").style.display = "block";
+          if (data.isAdmin) {
+            document.getElementById("addUserBtn").style.display = "block";
+          } else {
+            document.getElementById("addUserBtn").style.display = "none";
+          }
+          loadFileList();
+        } else {
+          document.getElementById("loginForm").style.display = "block";
+          document.getElementById("uploadForm").style.display = "none";
+          document.getElementById("fileListContainer").style.display = "none";
+          document.getElementById("logoutBtn").style.display = "none";
+          document.getElementById("addUserBtn").style.display = "none";
+        }
+      }
 
-                if (data.isAdmin) {
-                    document.getElementById("addUserBtn").style.display = "block";
-                } else {
-                    document.getElementById("addUserBtn").style.display = "none";
-                }
+      function checkAuthentication() {
+        fetch("checkAuth.php")
+          .then(response => response.json())
+          .then(updateUI)
+          .catch(error => console.error("Error checking authentication:", error));
+      }
 
-                loadFileList();
-            } else {
-                document.getElementById("loginForm").style.display = "block";
-                document.getElementById("uploadForm").style.display = "none";
-                document.getElementById("fileListContainer").style.display = "none";
-                document.getElementById("logoutBtn").style.display = "none";
-                document.getElementById("addUserBtn").style.display = "none";
-            }
+      document.getElementById("authForm").addEventListener("submit", function (event) {
+        event.preventDefault();
+        
+        const formData = {
+          username: document.getElementById("loginUsername").value.trim(),
+          password: document.getElementById("loginPassword").value.trim()
+        };
+
+        fetch("auth.php", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(formData)
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            updateUI({ authenticated: true, isAdmin: data.isAdmin });
+          } else {
+            alert("Login failed: " + (data.error || "Unknown error"));
+          }
+        })
+        .catch(error => console.error("Error logging in:", error));
+      });
+
+      document.getElementById("logoutBtn").addEventListener("click", function () {
+        fetch("logout.php", { method: "POST" })
+          .then(() => window.location.reload(true))
+          .catch(error => console.error("Logout error:", error));
+      });
+
+      document.getElementById("addUserBtn").addEventListener("click", function () {
+        resetUserForm();
+        document.getElementById("addUserModal").style.display = "block";
+      });
+
+      document.getElementById("saveUserBtn").addEventListener("click", function () {
+        const newUsername = document.getElementById("newUsername").value.trim();
+        const newPassword = document.getElementById("newPassword").value.trim();
+        // In setup mode, ignore the checkbox value (always admin)
+        const isAdmin = window.setupMode ? true : document.getElementById("isAdmin").checked;
+
+        if (!newUsername || !newPassword) {
+          alert("Username and password are required!");
+          return;
         }
 
-        function checkAuthentication() {
-            fetch("checkAuth.php")
-                .then(response => response.json())
-                .then(updateUI)
-                .catch(error => console.error("Error checking authentication:", error));
+        let url = "addUser.php";
+        if (window.setupMode) {
+          url += "?setup=1";
         }
 
-        document.getElementById("authForm").addEventListener("submit", function (event) {
-            event.preventDefault();
-            
-            const formData = {
-                username: document.getElementById("loginUsername").value.trim(),
-                password: document.getElementById("loginPassword").value.trim()
-            };
-
-            fetch("auth.php", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(formData)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    updateUI({ authenticated: true, isAdmin: data.isAdmin }); // Update UI immediately
-                } else {
-                    alert("Login failed: " + (data.error || "Unknown error"));
-                }
-            })
-            .catch(error => console.error("Error logging in:", error));
-        });
-
-        document.getElementById("logoutBtn").addEventListener("click", function () {
-            fetch("logout.php", { method: "POST" })
-                .then(() => window.location.reload(true))
-                .catch(error => console.error("Logout error:", error));
-        });
-
-        document.getElementById("addUserBtn").addEventListener("click", function () {
-            resetUserForm();
-            document.getElementById("addUserModal").style.display = "block";
-        });
-
-        document.getElementById("saveUserBtn").addEventListener("click", function () {
-            const newUsername = document.getElementById("newUsername").value.trim();
-            const newPassword = document.getElementById("newPassword").value.trim();
-            const isAdmin = document.getElementById("isAdmin").checked;
-
-            if (!newUsername || !newPassword) {
-                alert("Username and password are required!");
-                return;
-            }
-
-            fetch("addUser.php", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert("User added successfully!");
-                    closeAddUserModal();
-                    checkAuthentication(); // Refresh UI after adding user
-                } else {
-                    alert("Error: " + (data.error || "Could not add user"));
-                }
-            })
-            .catch(error => console.error("Error adding user:", error));
-        });
-
-        document.getElementById("cancelUserBtn").addEventListener("click", function () {
+        fetch(url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username: newUsername, password: newPassword, isAdmin })
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            alert("User added successfully!");
             closeAddUserModal();
-        });
+            // If this was the setup, reload the page to show the login form.
+            window.location.reload(true);
+          } else {
+            alert("Error: " + (data.error || "Could not add user"));
+          }
+        })
+        .catch(error => console.error("Error adding user:", error));
+      });
 
-        function closeAddUserModal() {
-            document.getElementById("addUserModal").style.display = "none";
-            resetUserForm();
-        }
+      document.getElementById("cancelUserBtn").addEventListener("click", function () {
+        closeAddUserModal();
+      });
 
-        function resetUserForm() {
-            document.getElementById("newUsername").value = "";
-            document.getElementById("newPassword").value = "";
-            document.getElementById("isAdmin").checked = false;
-        }
+      function closeAddUserModal() {
+        document.getElementById("addUserModal").style.display = "none";
+        resetUserForm();
+      }
+
+      function resetUserForm() {
+        document.getElementById("newUsername").value = "";
+        document.getElementById("newPassword").value = "";
+        document.getElementById("isAdmin").checked = false;
+        document.getElementById("isAdmin").disabled = false;
+        document.getElementById("adminCheckboxContainer").style.display = "block";
+      }
     });
-</script>
+  </script>
 
 </body>
 </html>
