diff --git a/frontend/src/pages/Users.jsx b/frontend/src/pages/Users.jsx index 52e79869..765eedc8 100644 --- a/frontend/src/pages/Users.jsx +++ b/frontend/src/pages/Users.jsx @@ -18,6 +18,8 @@ import UserForm from '../components/forms/User'; import useAuthStore from '../store/auth'; import API from '../api'; import { USER_LEVELS, USER_LEVEL_LABELS } from '../constants'; +import ConfirmationDialog from '../components/ConfirmationDialog'; +import useWarningsStore from '../store/warnings'; const UsersPage = () => { const theme = useMantineTheme(); @@ -27,6 +29,12 @@ const UsersPage = () => { const [selectedUser, setSelectedUser] = useState(null); const [userModalOpen, setUserModalOpen] = useState(false); + const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false); + const [deleteTarget, setDeleteTarget] = useState(null); + const [userToDelete, setUserToDelete] = useState(null); + + const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed); + const suppressWarning = useWarningsStore((s) => s.suppressWarning); console.log(authUser); @@ -34,14 +42,28 @@ const UsersPage = () => { setSelectedUser(null); setUserModalOpen(false); }; - const editUser = (user) => { setSelectedUser(user); setUserModalOpen(true); }; const deleteUser = (id) => { - API.deleteUser(id); + // Get user details for the confirmation dialog + const user = users.find((u) => u.id === id); + setUserToDelete(user); + setDeleteTarget(id); + + // Skip warning if it's been suppressed + if (isWarningSuppressed('delete-user')) { + return executeDeleteUser(id); + } + + setConfirmDeleteOpen(true); + }; + + const executeDeleteUser = async (id) => { + await API.deleteUser(id); + setConfirmDeleteOpen(false); }; return ( @@ -118,13 +140,38 @@ const UsersPage = () => { })} - - - + + setConfirmDeleteOpen(false)} + onConfirm={() => executeDeleteUser(deleteTarget)} + title="Confirm User Deletion" + message={ + userToDelete ? ( +
+ {`Are you sure you want to delete the following user? + +Username: ${userToDelete.username} +Email: ${userToDelete.email} +User Level: ${USER_LEVEL_LABELS[userToDelete.user_level]} + +This action cannot be undone.`} +
+ ) : ( + 'Are you sure you want to delete this user? This action cannot be undone.' + ) + } + confirmLabel="Delete" + cancelLabel="Cancel" + actionKey="delete-user" + onSuppressChange={suppressWarning} + size="md" + /> ); };