fixed ssl provider section view/edit permission

frontend/src/contexts/PermissionsContext.jsx

@@ -1,8 +1,11 @@
-import { createContext, useContext, useState, useEffect, useCallback } from 'react'
+import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react'
 import { useAuth } from './AuthContext'
 
 const PermissionsContext = createContext(null)
 
+// Intervall für automatisches Neuladen der Permissions (30 Sekunden)
+const PERMISSIONS_REFRESH_INTERVAL = 30000
+
 export const PermissionsProvider = ({ children }) => {
   const { authFetch, isAuthenticated } = useAuth()
   const [permissions, setPermissions] = useState({
@@ -17,17 +20,21 @@ export const PermissionsProvider = ({ children }) => {
     canSignCSR: {},
   })
   const [loading, setLoading] = useState(true)
+  const intervalRef = useRef(null)
+  const isMountedRef = useRef(true)
 
-  const fetchPermissions = useCallback(async () => {
+  const fetchPermissions = useCallback(async (isInitial = false) => {
     if (!isAuthenticated) {
       setLoading(false)
       return
     }
 
     try {
-      setLoading(true)
+      if (isInitial) {
+        setLoading(true)
+      }
       const response = await authFetch('/api/user/permissions')
-      if (response.ok) {
+      if (response.ok && isMountedRef.current) {
         const data = await response.json()
         setPermissions({
           isAdmin: data.isAdmin || false,
@@ -44,13 +51,16 @@ export const PermissionsProvider = ({ children }) => {
     } catch (err) {
       console.error('Error fetching permissions:', err)
     } finally {
-      setLoading(false)
+      if (isInitial && isMountedRef.current) {
+        setLoading(false)
+      }
     }
   }, [isAuthenticated, authFetch])
 
+  // Initiales Laden der Permissions
   useEffect(() => {
     if (isAuthenticated) {
-      fetchPermissions()
+      fetchPermissions(true)
     } else {
       setPermissions({
         isAdmin: false,
@@ -67,6 +77,69 @@ export const PermissionsProvider = ({ children }) => {
     }
   }, [isAuthenticated, fetchPermissions])
 
+  // Automatisches Neuladen der Permissions im Hintergrund
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+
+    // Starte Polling-Intervall
+    const startPolling = () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+      intervalRef.current = setInterval(() => {
+        if (isMountedRef.current && document.visibilityState === 'visible') {
+          fetchPermissions(false)
+        }
+      }, PERMISSIONS_REFRESH_INTERVAL)
+    }
+
+    // Handle visibility change - pausiere Polling wenn Tab versteckt ist
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // Tab ist versteckt, stoppe Intervall
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current)
+          intervalRef.current = null
+        }
+      } else {
+        // Tab ist sichtbar, lade Permissions sofort und starte Polling
+        if (isMountedRef.current) {
+          fetchPermissions(false)
+          startPolling()
+        }
+      }
+    }
+
+    // Starte initiales Polling
+    startPolling()
+
+    // Event Listener für visibility change
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    // Cleanup
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, [isAuthenticated, fetchPermissions])
+
+  // Cleanup beim Unmount
+  useEffect(() => {
+    isMountedRef.current = true
+    return () => {
+      isMountedRef.current = false
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+    }
+  }, [])
+
   const canCreateSpace = () => permissions.canCreateSpace
   const canDeleteSpace = (spaceId) => permissions.canDeleteSpace
   const canCreateFqdn = (spaceId) => permissions.canCreateFqdn[spaceId] === true
@@ -75,11 +148,18 @@ export const PermissionsProvider = ({ children }) => {
   const canSignCSR = (spaceId) => permissions.canSignCSR[spaceId] === true
   const hasAccessToSpace = (spaceId) => permissions.accessibleSpaces.includes(spaceId)
 
+  // refreshPermissions Funktion, die auch loading state setzt
+  const refreshPermissions = useCallback(async () => {
+    await fetchPermissions(true)
+  }, [fetchPermissions])
+
   const value = {
     permissions,
     loading,
-    refreshPermissions: fetchPermissions,
+    refreshPermissions,
     isAdmin: permissions.isAdmin,
+    hasFullAccess: permissions.hasFullAccess,
+    accessibleSpaces: permissions.accessibleSpaces,
     canCreateSpace,
     canDeleteSpace,
     canCreateFqdn,