attachEnterKeyListener, focus and showCustomConfirmModal added

This commit is contained in:
Ryan
2025-03-24 13:46:35 -04:00
committed by GitHub
parent fc45767712
commit b72356b657
3 changed files with 83 additions and 15 deletions

45
auth.js
View File

@@ -1,5 +1,5 @@
import { sendRequest } from './networkUtils.js';
import { toggleVisibility, showToast } from './domUtils.js';
import { toggleVisibility, showToast, attachEnterKeyListener, showCustomConfirmModal } from './domUtils.js';
import { loadFileList, renderFileTable, displayFilePreview, initFileActions } from './fileManager.js';
import { loadFolderTree } from './folderManager.js';
@@ -13,6 +13,7 @@ function initAuth() {
toggleVisibility("mainOperations", false);
document.querySelector(".header-buttons").style.visibility = "hidden";
toggleVisibility("addUserModal", true);
document.getElementById('newUsername').focus();
return;
}
window.setupMode = false;
@@ -22,6 +23,9 @@ function initAuth() {
toggleVisibility("mainOperations", true);
toggleVisibility("uploadFileForm", true);
toggleVisibility("fileListContainer", true);
attachEnterKeyListener("addUserModal", "saveUserBtn");
attachEnterKeyListener("removeUserModal", "deleteUserBtn");
attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
document.querySelector(".header-buttons").style.visibility = "visible";
// If admin, show admin-only buttons.
if (data.isAdmin) {
@@ -64,6 +68,7 @@ function initAuth() {
}
} else {
toggleVisibility("loginForm", true);
attachEnterKeyListener("loginModal", "loginBtn");
toggleVisibility("mainOperations", false);
toggleVisibility("uploadFileForm", false);
toggleVisibility("fileListContainer", false);
@@ -79,8 +84,8 @@ function initAuth() {
authForm.addEventListener("submit", function (event) {
event.preventDefault();
// Get the "Remember me" checkbox value.
const rememberMe = document.getElementById("rememberMeCheckbox")
? document.getElementById("rememberMeCheckbox").checked
const rememberMe = document.getElementById("rememberMeCheckbox")
? document.getElementById("rememberMeCheckbox").checked
: false;
const formData = {
username: document.getElementById("loginUsername").value.trim(),
@@ -128,6 +133,7 @@ function initAuth() {
document.getElementById("addUserBtn").addEventListener("click", function () {
resetUserForm();
toggleVisibility("addUserModal", true);
document.getElementById('newUsername').focus();
});
document.getElementById("saveUserBtn").addEventListener("click", function () {
const newUsername = document.getElementById("newUsername").value.trim();
@@ -173,16 +179,22 @@ function initAuth() {
loadUserList();
toggleVisibility("removeUserModal", true);
});
document.getElementById("deleteUserBtn").addEventListener("click", function () {
document.getElementById("deleteUserBtn").addEventListener("click", async function () {
const selectElem = document.getElementById("removeUsernameSelect");
const usernameToRemove = selectElem.value;
if (!usernameToRemove) {
showToast("Please select a user to remove.");
return;
}
if (!confirm("Are you sure you want to delete user " + usernameToRemove + "?")) {
// Await the confirmation result from your custom modal helper.
const confirmed = await showCustomConfirmModal("Are you sure you want to delete user " + usernameToRemove + "?");
if (!confirmed) {
return;
}
// Proceed with deletion...
fetch("removeUser.php", {
method: "POST",
credentials: "include",
@@ -204,38 +216,40 @@ function initAuth() {
})
.catch(error => console.error("Error removing user:", error));
});
document.getElementById("cancelRemoveUserBtn").addEventListener("click", function () {
closeRemoveUserModal();
});
document.getElementById("changePasswordBtn").addEventListener("click", function() {
document.getElementById("changePasswordBtn").addEventListener("click", function () {
// Show the Change Password modal.
document.getElementById("changePasswordModal").style.display = "block";
document.getElementById("oldPassword").focus();
});
document.getElementById("closeChangePasswordModal").addEventListener("click", function() {
document.getElementById("closeChangePasswordModal").addEventListener("click", function () {
// Hide the Change Password modal.
document.getElementById("changePasswordModal").style.display = "none";
});
document.getElementById("saveNewPasswordBtn").addEventListener("click", function() {
document.getElementById("saveNewPasswordBtn").addEventListener("click", function () {
const oldPassword = document.getElementById("oldPassword").value.trim();
const newPassword = document.getElementById("newPassword").value.trim(); // Change Password modal field
const confirmPassword = document.getElementById("confirmPassword").value.trim();
if (!oldPassword || !newPassword || !confirmPassword) {
showToast("Please fill in all fields.");
return;
}
if (newPassword !== confirmPassword) {
showToast("New passwords do not match.");
return;
}
// Prepare the data to send.
const data = { oldPassword, newPassword, confirmPassword };
// Send request to changePassword.php.
fetch("changePassword.php", {
method: "POST",
@@ -276,6 +290,7 @@ function checkAuthentication(showLoginToast = true) {
toggleVisibility("mainOperations", false);
document.querySelector(".header-buttons").style.visibility = "hidden";
toggleVisibility("addUserModal", true);
document.getElementById('newUsername').focus();
return false;
}
window.setupMode = false;
@@ -316,7 +331,7 @@ document.addEventListener("DOMContentLoaded", function () {
function resetUserForm() {
document.getElementById("newUsername").value = "";
document.getElementById("addUserPassword").value = ""; // Updated for add user modal
document.getElementById("addUserPassword").value = "";
}
function closeAddUserModal() {

View File

@@ -305,4 +305,50 @@ export function previewFile(fileUrl, fileName) {
}
modal.style.display = "flex";
}
export function attachEnterKeyListener(modalId, buttonId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.addEventListener("keypress", function(e) {
if (e.key === "Enter") {
e.preventDefault();
const btn = document.getElementById(buttonId);
if (btn) {
btn.click();
}
}
});
}
}
export function showCustomConfirmModal(message) {
return new Promise((resolve) => {
const modal = document.getElementById("customConfirmModal");
const messageElem = document.getElementById("confirmMessage");
const yesBtn = document.getElementById("confirmYesBtn");
const noBtn = document.getElementById("confirmNoBtn");
messageElem.textContent = message;
modal.style.display = "block";
// Cleanup function to hide the modal and remove event listeners.
function cleanup() {
modal.style.display = "none";
yesBtn.removeEventListener("click", onYes);
noBtn.removeEventListener("click", onNo);
}
function onYes() {
cleanup();
resolve(true);
}
function onNo() {
cleanup();
resolve(false);
}
yesBtn.addEventListener("click", onYes);
noBtn.addEventListener("click", onNo);
});
}

View File

@@ -458,6 +458,12 @@ function openRenameFolderModal() {
const parts = selectedFolder.split("/");
document.getElementById("newRenameFolderName").value = parts[parts.length - 1];
document.getElementById("renameFolderModal").style.display = "block";
// Focus the input field after a short delay to ensure modal is visible.
setTimeout(() => {
const input = document.getElementById("newRenameFolderName");
input.focus();
input.select();
}, 100);
}
document.getElementById("cancelRenameFolder").addEventListener("click", function () {
@@ -552,6 +558,7 @@ document.getElementById("confirmDeleteFolder").addEventListener("click", functio
document.getElementById("createFolderBtn").addEventListener("click", function () {
document.getElementById("createFolderModal").style.display = "block";
document.getElementById("newFolderName").focus();
});
document.getElementById("cancelCreateFolder").addEventListener("click", function () {