joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modal & global functions

Browse Source
This commit is contained in:
Ryan
2025-02-22 14:58:12 -05:00
committed by GitHub
parent e63ef2ff98
commit 201682da23
1 changed files with 214 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
index.html
View File

@@ -4,35 +4,83 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi File Upload & Edit</title> <title>Multi File Upload & Edit</title>
<!-- Google Fonts and Material Icons -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Scripts (order is important) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="auth.js"></script> <script src="auth.js"></script>
<script src="upload.js"></script> <script src="upload.js"></script>
<!-- Include your original displayFileList.js here -->
<script src="displayFileList.js"></script> <script src="displayFileList.js"></script>
<style> <style>
.container { margin-top: 10px; } /* General styles */
#fileListContainer, #uploadForm, #addUserModal, #removeUserModal { display: none; } body {
.logout-container { font-family: 'Roboto', sans-serif;
position: absolute; background-color: #f5f5f5;
top: 10px; }
right: 10px; .container {
margin-top: 30px;
}
/* Header: three fixed-width sections so the title stays centered */
header {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-end; justify-content: space-between;
gap: 5px; background-color: #2196F3;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
min-height: 80px;
} }
@media (max-width: 768px) { .header-left, .header-buttons {
.logout-container { width: 150px;
position: static;
align-items: flex-end;
text-align: right;
margin-top: 10px;
}
.logout-container button {
width: auto;
min-width: 120px;
}
} }
.header-title {
flex: 1;
text-align: center;
}
.header-title h1 {
margin: 0;
font-weight: 500;
color: white;
}
.header-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
align-items: center;
}
.header-buttons button {
background: none;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 50%;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.header-buttons button:hover {
background-color: rgba(255,255,255,0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.material-icons {
font-size: 24px;
vertical-align: middle;
color: white;
}
/* Login form styling */
#loginForm {
margin: 0 auto;
max-width: 400px;
background: white;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 4px;
}
/* Common modal styling */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@@ -41,30 +89,56 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: white; background: white;
padding: 20px; padding: 20px;
border: 1px solid black; border: 1px solid #ccc;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1); border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 1000; z-index: 1000;
width: 350px; width: 350px;
max-width: 90%;
height: auto; height: auto;
display: flex; }
flex-direction: column; /* Editor modal styling for the edit popup */
gap: 10px; .editor-modal {
width: 80vw;
max-width: 90vw;
min-width: 400px;
height: 400px;
max-height: 80vh;
overflow: auto;
resize: both;
}
/* Table header styling */
table.table th {
cursor: pointer;
text-decoration: underline;
white-space: nowrap;
} }
</style> </style>
</head> </head>
<body> <body>
<header class="text-center" style="position: relative;"> <!-- Header -->
<h1>Multi File Upload & Edit</h1> <header>
<div class="logout-container"> <div class="header-left"></div>
<button id="logoutBtn" class="btn btn-danger" style="display: none;">Logout</button> <div class="header-title">
<button id="addUserBtn" class="btn btn-success" style="display: none;">Add User</button> <h1>Multi File Upload & Edit</h1>
<button id="removeUserBtn" class="btn btn-warning" style="display: none;">Remove User</button> </div>
<div class="header-buttons">
<button id="logoutBtn" title="Logout" style="display: none;">
<i class="material-icons">exit_to_app</i>
</button>
<button id="addUserBtn" title="Add User" style="display: none;">
<i class="material-icons">person_add</i>
</button>
<button id="removeUserBtn" title="Remove User" style="display: none;">
<i class="material-icons">person_remove</i>
</button>
</div> </div>
</header> </header>
<div class="container"> <div class="container">
<!-- Login Form -->
<div class="row" id="loginForm"> <div class="row" id="loginForm">
<div class="col-md-6"> <div class="col-12">
<form id="authForm" method="post"> <form id="authForm" method="post">
<div class="form-group"> <div class="form-group">
<label for="loginUsername">User:</label> <label for="loginUsername">User:</label>
@@ -74,48 +148,47 @@
<label for="loginPassword">Password:</label> <label for="loginPassword">Password:</label>
<input type="password" class="form-control" id="loginPassword" name="password" required> <input type="password" class="form-control" id="loginPassword" name="password" required>
</div> </div>
<button type="submit" class="btn btn-primary">Login</button> <button type="submit" class="btn btn-primary btn-block">Login</button>
</form> </form>
</div> </div>
</div> </div>
<!-- Upload Form -->
<div class="row" id="uploadForm"> <div class="row" id="uploadForm">
<div class="col-md-12"> <div class="col-12">
<form id="uploadFileForm" method="post" enctype="multipart/form-data"> <form id="uploadFileForm" method="post" enctype="multipart/form-data">
<div class="form-group"> <div class="form-group">
<label for="file"></label> <label for="file"></label>
<input type="file" id="file" name="file[]" class="form-control-file" multiple required style="width: 768px;"> <input type="file" id="file" name="file[]" class="form-control-file" multiple required style="max-width: 768px;">
</div> </div>
<button type="submit" id="uploadBtn" class="btn btn-primary" disabled>Upload</button> <button type="submit" id="uploadBtn" class="btn btn-primary" disabled>Upload</button>
<div id="statusMessage"></div> <div id="statusMessage"></div>
</form> </form>
</div> </div>
</div> </div>
<!-- File List -->
<div id="fileListContainer"> <div id="fileListContainer">
<h2>Uploaded Files</h2> <h2>Uploaded Files</h2>
<button id="deleteSelectedBtn" class="btn btn-danger" style="margin-bottom: 10px; display: none;">Delete Selected</button> <button id="deleteSelectedBtn" class="btn btn-danger" style="margin-bottom: 10px; display: none;">Delete Selected</button>
<div id="fileList"></div> <div id="fileList"></div>
</div> </div>
<!-- Add User Modal --> <!-- Add User Modal -->
<div id="addUserModal" class="modal"> <div id="addUserModal" class="modal">
<h3>Create New User</h3> <h3>Create New User</h3>
<label for="newUsername">Username:</label> <label for="newUsername">Username:</label>
<input type="text" id="newUsername" class="form-control"> <input type="text" id="newUsername" class="form-control">
<label for="newPassword">Password:</label> <label for="newPassword">Password:</label>
<input type="password" id="newPassword" class="form-control"> <input type="password" id="newPassword" class="form-control">
<div id="adminCheckboxContainer"> <div id="adminCheckboxContainer">
<input type="checkbox" id="isAdmin"> <input type="checkbox" id="isAdmin">
<label for="isAdmin">Grant Admin Access</label> <label for="isAdmin">Grant Admin Access</label>
</div> </div>
<button id="saveUserBtn" class="btn btn-primary">Save User</button> <button id="saveUserBtn" class="btn btn-primary">Save User</button>
<button id="cancelUserBtn" class="btn btn-secondary">Cancel</button> <button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
</div> </div>
<!-- Remove User Modal --> <!-- Remove User Modal -->
<div id="removeUserModal" class="modal"> <div id="removeUserModal" class="modal">
<h3>Remove User</h3> <h3>Remove User</h3>
@@ -127,41 +200,35 @@
</div> </div>
<script> <script>
// Global flag to determine if we are in setup mode. // Global flag for setup mode.
window.setupMode = false; window.setupMode = false;
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
checkAuthentication(); checkAuthentication();
function updateUI(data) { function updateUI(data) {
console.log("Auth data:", data);
if (data.setup) { if (data.setup) {
// In setup mode, show the Add User Modal and hide other UI elements. // Setup mode: hide login, upload, file list; hide header buttons (reserve space)
document.getElementById("loginForm").style.display = "none"; document.getElementById("loginForm").style.display = "none";
document.getElementById("uploadForm").style.display = "none"; document.getElementById("uploadForm").style.display = "none";
document.getElementById("fileListContainer").style.display = "none"; document.getElementById("fileListContainer").style.display = "none";
document.getElementById("logoutBtn").style.display = "none"; document.querySelector(".header-buttons").style.visibility = "hidden";
document.getElementById("addUserBtn").style.display = "none";
document.getElementById("removeUserBtn").style.display = "none";
// Pre-check and disable the admin checkbox.
document.getElementById("isAdmin").checked = true;
document.getElementById("isAdmin").disabled = true;
// Optionally hide the container.
document.getElementById("adminCheckboxContainer").style.display = "none";
document.getElementById("addUserModal").style.display = "block"; document.getElementById("addUserModal").style.display = "block";
window.setupMode = true; window.setupMode = true;
return; return;
} }
// Normal authenticated user flow.
if (data.authenticated) { if (data.authenticated) {
document.getElementById("loginForm").style.display = "none"; document.getElementById("loginForm").style.display = "none";
document.getElementById("uploadForm").style.display = "block"; document.getElementById("uploadForm").style.display = "block";
document.getElementById("fileListContainer").style.display = "block"; document.getElementById("fileListContainer").style.display = "block";
document.getElementById("logoutBtn").style.display = "block"; document.querySelector(".header-buttons").style.visibility = "visible";
if (data.isAdmin) { if (data.isAdmin) {
document.getElementById("logoutBtn").style.display = "block";
document.getElementById("addUserBtn").style.display = "block"; document.getElementById("addUserBtn").style.display = "block";
document.getElementById("removeUserBtn").style.display = "block"; document.getElementById("removeUserBtn").style.display = "block";
} else { } else {
document.getElementById("logoutBtn").style.display = "block";
document.getElementById("addUserBtn").style.display = "none"; document.getElementById("addUserBtn").style.display = "none";
document.getElementById("removeUserBtn").style.display = "none"; document.getElementById("removeUserBtn").style.display = "none";
} }
@@ -170,19 +237,17 @@
document.getElementById("loginForm").style.display = "block"; document.getElementById("loginForm").style.display = "block";
document.getElementById("uploadForm").style.display = "none"; document.getElementById("uploadForm").style.display = "none";
document.getElementById("fileListContainer").style.display = "none"; document.getElementById("fileListContainer").style.display = "none";
document.getElementById("logoutBtn").style.display = "none"; document.querySelector(".header-buttons").style.visibility = "hidden";
document.getElementById("addUserBtn").style.display = "none";
document.getElementById("removeUserBtn").style.display = "none";
} }
} }
function checkAuthentication() { function checkAuthentication() {
fetch("checkAuth.php") fetch("checkAuth.php")
.then(response => response.json()) .then(response => response.json())
.then(updateUI) .then(updateUI)
.catch(error => console.error("Error checking authentication:", error)); .catch(error => console.error("Error checking authentication:", error));
} }
document.getElementById("authForm").addEventListener("submit", function (event) { document.getElementById("authForm").addEventListener("submit", function (event) {
event.preventDefault(); event.preventDefault();
const formData = { const formData = {
@@ -204,18 +269,18 @@
}) })
.catch(error => console.error("Error logging in:", error)); .catch(error => console.error("Error logging in:", error));
}); });
document.getElementById("logoutBtn").addEventListener("click", function () { document.getElementById("logoutBtn").addEventListener("click", function () {
fetch("logout.php", { method: "POST" }) fetch("logout.php", { method: "POST" })
.then(() => window.location.reload(true)) .then(() => window.location.reload(true))
.catch(error => console.error("Logout error:", error)); .catch(error => console.error("Logout error:", error));
}); });
document.getElementById("addUserBtn").addEventListener("click", function () { document.getElementById("addUserBtn").addEventListener("click", function () {
resetUserForm(); resetUserForm();
document.getElementById("addUserModal").style.display = "block"; document.getElementById("addUserModal").style.display = "block";
}); });
document.getElementById("saveUserBtn").addEventListener("click", function () { document.getElementById("saveUserBtn").addEventListener("click", function () {
const newUsername = document.getElementById("newUsername").value.trim(); const newUsername = document.getElementById("newUsername").value.trim();
const newPassword = document.getElementById("newPassword").value.trim(); const newPassword = document.getElementById("newPassword").value.trim();
@@ -225,9 +290,7 @@
return; return;
} }
let url = "addUser.php"; let url = "addUser.php";
if (window.setupMode) { if (window.setupMode) { url += "?setup=1"; }
url += "?setup=1";
}
fetch(url, { fetch(url, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
@@ -249,17 +312,16 @@
}) })
.catch(error => console.error("Error adding user:", error)); .catch(error => console.error("Error adding user:", error));
}); });
document.getElementById("cancelUserBtn").addEventListener("click", function () { document.getElementById("cancelUserBtn").addEventListener("click", function () {
closeAddUserModal(); closeAddUserModal();
}); });
// Remove User Button event
document.getElementById("removeUserBtn").addEventListener("click", function () { document.getElementById("removeUserBtn").addEventListener("click", function () {
loadUserList(); loadUserList();
document.getElementById("removeUserModal").style.display = "block"; document.getElementById("removeUserModal").style.display = "block";
}); });
document.getElementById("deleteUserBtn").addEventListener("click", function () { document.getElementById("deleteUserBtn").addEventListener("click", function () {
const selectElem = document.getElementById("removeUsernameSelect"); const selectElem = document.getElementById("removeUsernameSelect");
const usernameToRemove = selectElem.value; const usernameToRemove = selectElem.value;
@@ -287,16 +349,16 @@
}) })
.catch(error => console.error("Error removing user:", error)); .catch(error => console.error("Error removing user:", error));
}); });
document.getElementById("cancelRemoveUserBtn").addEventListener("click", function () { document.getElementById("cancelRemoveUserBtn").addEventListener("click", function () {
closeRemoveUserModal(); closeRemoveUserModal();
}); });
function closeAddUserModal() { function closeAddUserModal() {
document.getElementById("addUserModal").style.display = "none"; document.getElementById("addUserModal").style.display = "none";
resetUserForm(); resetUserForm();
} }
function resetUserForm() { function resetUserForm() {
document.getElementById("newUsername").value = ""; document.getElementById("newUsername").value = "";
document.getElementById("newPassword").value = ""; document.getElementById("newPassword").value = "";
@@ -304,36 +366,91 @@
document.getElementById("isAdmin").disabled = false; document.getElementById("isAdmin").disabled = false;
document.getElementById("adminCheckboxContainer").style.display = "block"; document.getElementById("adminCheckboxContainer").style.display = "block";
} }
function closeRemoveUserModal() { function closeRemoveUserModal() {
document.getElementById("removeUserModal").style.display = "none"; document.getElementById("removeUserModal").style.display = "none";
document.getElementById("removeUsernameSelect").innerHTML = ""; document.getElementById("removeUsernameSelect").innerHTML = "";
} }
// Load list of users into the Remove User modal.
function loadUserList() { function loadUserList() {
fetch("getUsers.php") fetch("getUsers.php")
.then(response => response.json()) .then(response => response.json())
.then(users => { .then(users => {
const selectElem = document.getElementById("removeUsernameSelect"); const selectElem = document.getElementById("removeUsernameSelect");
selectElem.innerHTML = ""; selectElem.innerHTML = "";
// Filter out the current logged-in user to prevent self-deletion. const currentUser = "<?php echo isset($_SESSION['username']) ? $_SESSION['username'] : ''; ?>";
const currentUser = "<?php echo isset($_SESSION['username']) ? $_SESSION['username'] : ''; ?>"; users.forEach(user => {
users.forEach(user => { if (user.username === currentUser) return;
if (user.username === currentUser) return; const option = document.createElement("option");
const option = document.createElement("option"); option.value = user.username;
option.value = user.username; option.textContent = user.username;
option.textContent = user.username; selectElem.appendChild(option);
selectElem.appendChild(option); });
}); if (selectElem.options.length === 0) {
if (selectElem.options.length === 0) { alert("No other users found to remove.");
alert("No other users found to remove."); closeRemoveUserModal();
closeRemoveUserModal(); }
} })
}) .catch(error => console.error("Error loading user list:", error));
.catch(error => console.error("Error loading user list:", error));
} }
}); });
// Global file list functions (from your original displayFileList.js) are loaded externally.
// We override only the editFile and saveFile functions here for modal styling.
window.editFile = function(fileName) {
console.log("Edit button clicked for:", fileName);
let existingEditor = document.getElementById("editorContainer");
if (existingEditor) { existingEditor.remove(); }
fetch("uploads/" + encodeURIComponent(fileName) + "?t=" + new Date().getTime())
.then(response => {
if (!response.ok) {
throw new Error("HTTP error! Status: " + response.status);
}
return response.text();
})
.then(content => {
const modal = document.createElement("div");
modal.id = "editorContainer";
// Apply modal and editor-modal classes for rounded corners and consistent styling.
modal.classList.add("modal", "editor-modal");
modal.innerHTML = `
<h3>Editing: ${fileName}</h3>
<textarea id="fileEditor" style="width:100%; height:60%; resize:none;">${content}</textarea>
<div style="margin-top:10px; text-align:right;">
<button onclick="saveFile('${fileName}')" class="btn btn-primary">Save</button>
<button onclick="document.getElementById('editorContainer').remove()" class="btn btn-secondary">Close</button>
</div>
`;
document.body.appendChild(modal);
modal.style.display = "block";
})
.catch(error => console.error("Error loading file:", error));
};
window.saveFile = function(fileName) {
const editor = document.getElementById("fileEditor");
if (!editor) {
console.error("Editor not found!");
return;
}
const fileDataObj = {
fileName: fileName,
content: editor.value
};
fetch("saveFile.php", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(fileDataObj)
})
.then(response => response.json())
.then(result => {
alert(result.success || result.error);
document.getElementById("editorContainer")?.remove();
loadFileList();
})
.catch(error => console.error("Error saving file:", error));
};
</script> </script>
</body> </body>
</html> </html>