diff --git a/frontend/src/pages/Users.jsx b/frontend/src/pages/Users.jsx index 6a36bf2..7bd51eb 100644 --- a/frontend/src/pages/Users.jsx +++ b/frontend/src/pages/Users.jsx @@ -9,6 +9,9 @@ const Users = () => { const [error, setError] = useState('') const [showForm, setShowForm] = useState(false) const [editingUser, setEditingUser] = useState(null) + const [showDeleteModal, setShowDeleteModal] = useState(false) + const [userToDelete, setUserToDelete] = useState(null) + const [confirmChecked, setConfirmChecked] = useState(false) const [formData, setFormData] = useState({ username: '', email: '', @@ -131,28 +134,43 @@ const Users = () => { setShowForm(true) } - const handleDelete = async (userId) => { - if (!window.confirm('Möchten Sie diesen Benutzer wirklich löschen?')) { + const handleDelete = (user) => { + setUserToDelete(user) + setShowDeleteModal(true) + setConfirmChecked(false) + } + + const confirmDelete = async () => { + if (!confirmChecked || !userToDelete) { return } try { - const response = await authFetch(`/api/users/${userId}`, { + const response = await authFetch(`/api/users/${userToDelete.id}`, { method: 'DELETE', }) if (response.ok) { await fetchUsers() + setShowDeleteModal(false) + setUserToDelete(null) + setConfirmChecked(false) } else { - const errorData = await response.json() + const errorData = await response.json().catch(() => ({ error: 'Fehler beim Löschen' })) alert(errorData.error || 'Fehler beim Löschen des Benutzers') } } catch (err) { - alert('Fehler beim Löschen des Benutzers') console.error('Error deleting user:', err) + alert('Fehler beim Löschen des Benutzers') } } + const cancelDelete = () => { + setShowDeleteModal(false) + setUserToDelete(null) + setConfirmChecked(false) + } + const handleChange = (e) => { setFormData({ ...formData, @@ -455,7 +473,7 @@ const Users = () => { Bearbeiten + + + + + )} )