refined delete function in permission groups

frontend/src/pages/Permissions.jsx

@@ -10,6 +10,9 @@ const Permissions = () => {
   const [error, setError] = useState('')
   const [showForm, setShowForm] = useState(false)
   const [editingGroup, setEditingGroup] = useState(null)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [groupToDelete, setGroupToDelete] = useState(null)
+  const [confirmChecked, setConfirmChecked] = useState(false)
   const [formData, setFormData] = useState({
     name: '',
     description: '',
@@ -132,28 +135,43 @@ const Permissions = () => {
     setShowForm(true)
   }
 
-  const handleDelete = async (groupId) => {
-    if (!window.confirm('Möchten Sie diese Berechtigungsgruppe wirklich löschen?')) {
+  const handleDelete = (group) => {
+    setGroupToDelete(group)
+    setShowDeleteModal(true)
+    setConfirmChecked(false)
+  }
+
+  const confirmDelete = async () => {
+    if (!confirmChecked || !groupToDelete) {
       return
     }
 
     try {
-      const response = await authFetch(`/api/permission-groups/${groupId}`, {
+      const response = await authFetch(`/api/permission-groups/${groupToDelete.id}`, {
         method: 'DELETE',
       })
 
       if (response.ok) {
         await fetchGroups()
+        setShowDeleteModal(false)
+        setGroupToDelete(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 der Berechtigungsgruppe')
       }
     } catch (err) {
-      alert('Fehler beim Löschen der Berechtigungsgruppe')
       console.error('Error deleting permission group:', err)
+      alert('Fehler beim Löschen der Berechtigungsgruppe')
     }
   }
 
+  const cancelDelete = () => {
+    setShowDeleteModal(false)
+    setGroupToDelete(null)
+    setConfirmChecked(false)
+  }
+
   const handleChange = (e) => {
     setFormData({
       ...formData,
@@ -488,7 +506,7 @@ const Permissions = () => {
                       </svg>
                     </button>
                     <button
-                      onClick={() => handleDelete(group.id)}
+                      onClick={() => handleDelete(group)}
                       className="p-2 bg-red-600/20 hover:bg-red-600/30 text-red-300 rounded-lg transition-all duration-200"
                       title="Löschen"
                     >
@@ -541,6 +559,69 @@ const Permissions = () => {
             ))}
           </div>
         )}
+
+        {/* Delete Confirmation Modal */}
+        {showDeleteModal && groupToDelete && (
+          <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">
+                  Berechtigungsgruppe löschen
+                </h3>
+              </div>
+
+              <div className="mb-6">
+                <p className="text-slate-300 mb-4">
+                  Möchten Sie die Berechtigungsgruppe <span className="font-semibold text-white">{groupToDelete.name}</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 diese Berechtigungsgruppe 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>
   )