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
                       </button>
                       <button
-                        onClick={() => handleDelete(user.id)}
+                        onClick={() => handleDelete(user)}
                         className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors"
                       >
                         Löschen
@@ -467,6 +485,69 @@ const Users = () => {
             </div>
           )}
         </div>
+
+        {/* Delete Confirmation Modal */}
+        {showDeleteModal && userToDelete && (
+          <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+            <div className="bg-slate-800 rounded-xl shadow-2xl border border-slate-600/50 max-w-md w-full p-6">
+              <div className="flex items-center mb-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-red-500/20 rounded-full flex items-center justify-center mr-4">
+                  <svg
+                    className="w-6 h-6 text-red-400"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-bold text-white">
+                  Benutzer löschen
+                </h3>
+              </div>
+
+              <div className="mb-6">
+                <p className="text-slate-300 mb-4">
+                  Möchten Sie den Benutzer <span className="font-semibold text-white">{userToDelete.username}</span> wirklich löschen?
+                </p>
+                <p className="text-sm text-red-400 mb-4">
+                  Diese Aktion kann nicht rückgängig gemacht werden.
+                </p>
+
+                <label className="flex items-start cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={confirmChecked}
+                    onChange={(e) => setConfirmChecked(e.target.checked)}
+                    className="mt-1 w-5 h-5 text-red-600 bg-slate-700 border-slate-600 rounded focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-slate-800 cursor-pointer"
+                  />
+                  <span className="ml-3 text-sm text-slate-300 group-hover:text-white transition-colors">
+                    Ich bestätige, dass ich diesen Benutzer unwiderruflich löschen möchte
+                  </span>
+                </label>
+              </div>
+
+              <div className="flex gap-3">
+                <button
+                  onClick={confirmDelete}
+                  disabled={!confirmChecked}
+                  className="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-colors duration-200"
+                >
+                  Löschen
+                </button>
+                <button
+                  onClick={cancelDelete}
+                  className="flex-1 px-4 py-2 bg-slate-600 hover:bg-slate-700 text-white font-semibold rounded-lg transition-colors duration-200"
+                >
+                  Abbrechen
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )