Merge pull request #1934 from GluuFederation/admin-ui-1929

feat(admin-ui): logout not working
GluuFederation · Dec 27, 2024 · ce97299 · ce97299
2 parents 420c4b3 + 903e6a2
commit ce97299
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 61 deletions.
diff --git a/admin-ui/app/routes/Pages/ByeBye.js b/admin-ui/app/routes/Pages/ByeBye.js
@@ -1,33 +1,36 @@
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { uuidv4 } from 'Utils/Util'
-import { EmptyLayout, Label } from 'Components'
-import { logoutUser } from 'Redux/features/logoutSlice'
-import { useTranslation } from 'react-i18next'
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { uuidv4 } from "Utils/Util";
+import { EmptyLayout, Label } from "Components";
+import { logoutUser } from "Redux/features/logoutSlice";
+import { useTranslation } from "react-i18next";
+import { setAuthState } from "../../redux/features/authSlice";
 
 function ByeBye() {
-  const config = useSelector((state) => state.authReducer.config)
-  const dispatch = useDispatch()
-  const { t } = useTranslation()
+  const config = useSelector((state) => state.authReducer.config);
+
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
   useEffect(() => {
-    if (config) {
-      const state = uuidv4()
-      const sessionEndpoint = `${config.endSessionEndpoint}?state=${state}&post_logout_redirect_uri=${config.postLogoutRedirectUri}`
-      window.location.href = sessionEndpoint
+    dispatch(setAuthState(false));
+    if (config && Object.keys(config).length > 0) {
+      const state = uuidv4();
+      const sessionEndpoint = `${config.endSessionEndpoint}?state=${state}&post_logout_redirect_uri=${config.postLogoutRedirectUri}`;
+      dispatch(logoutUser());
+      window.location.href = sessionEndpoint;
     }
-
-    dispatch(logoutUser())
-  }, [])
+  }, []);
 
   return (
     <div className="fullscreen">
       <EmptyLayout.Section center>
-        <Label style={{ fontSize: '2em', fontWeight: 'bold' }}>
-          {t('Thanks for using the admin ui')}.
+        <Label style={{ fontSize: "2em", fontWeight: "bold" }}>
+          {t("Thanks for using the admin ui")}.
         </Label>
       </EmptyLayout.Section>
     </div>
-  )
+  );
 }
 
-export default ByeBye
+export default ByeBye;
diff --git a/admin-ui/app/routes/Pages/ProtectRoutes.js b/admin-ui/app/routes/Pages/ProtectRoutes.js
@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+const ProtectedRoute = ({ children }) => {
+  const isAuthenticated = useSelector(
+    (state) => state.authReducer.isAuthenticated
+  );
+
+  if (!isAuthenticated) {
+    // Redirect to login if the user is not authenticated
+    return <Navigate to="/" replace />;
+  }
+
+  // Render the protected content
+  return children;
+};
+
+ProtectedRoute.propTypes = {
+  children: PropTypes.node.isRequired, // Enforce that children must be a React node
+};
+
+export default ProtectedRoute;
diff --git a/admin-ui/app/routes/index.js b/admin-ui/app/routes/index.js
@@ -1,56 +1,82 @@
-import React, { useState, useEffect, lazy, Suspense } from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import React, { useState, useEffect, lazy, Suspense } from "react";
+import { Route, Routes, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
 
-import NavbarOnly from './Layouts/NavbarOnly'
-import SidebarDefault from './Layouts/SidebarDefault'
-import SidebarA from './Layouts/SidebarA'
-import SidebarWithNavbar from './Layouts/SidebarWithNavbar'
+import NavbarOnly from "./Layouts/NavbarOnly";
+import SidebarDefault from "./Layouts/SidebarDefault";
+import SidebarA from "./Layouts/SidebarA";
+import SidebarWithNavbar from "./Layouts/SidebarWithNavbar";
 
 // ----------- Layout Imports ---------------
-import { processRoutes } from 'Plugins/PluginMenuResolver'
-import { hasPermission } from 'Utils/PermChecker'
-import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
+import { processRoutes } from "Plugins/PluginMenuResolver";
+import { hasPermission } from "Utils/PermChecker";
+import GluuSuspenseLoader from "Routes/Apps/Gluu/GluuSuspenseLoader";
 
-import { uuidv4 } from 'Utils/Util'
+import { uuidv4 } from "Utils/Util";
+import ProtectedRoute from "./Pages/ProtectRoutes";
 
-const DashboardPage = lazy(() => import('./Dashboards/DashboardPage'))
-const HealthPage = lazy(() => import('./Health/HealthPage'))
-const LicenseDetailsPage = lazy(() => import('./License/LicenseDetailsPage'))
-const ProfilePage = lazy(() => import('./Apps/Profile/ProfilePage'))
-const Gluu404Error = lazy(() => import('./Apps/Gluu/Gluu404Error'))
-const ByeBye = lazy(() => import('./Pages/ByeBye'))
-const GluuNavBar = lazy(() => import('./Apps/Gluu/GluuNavBar'))
-const DefaultSidebar = lazy(() => import('./../layout/components/DefaultSidebar'))
+const DashboardPage = lazy(() => import("./Dashboards/DashboardPage"));
+const HealthPage = lazy(() => import("./Health/HealthPage"));
+const LicenseDetailsPage = lazy(() => import("./License/LicenseDetailsPage"));
+const ProfilePage = lazy(() => import("./Apps/Profile/ProfilePage"));
+const Gluu404Error = lazy(() => import("./Apps/Gluu/Gluu404Error"));
+const ByeBye = lazy(() => import("./Pages/ByeBye"));
+const GluuNavBar = lazy(() => import("./Apps/Gluu/GluuNavBar"));
+const DefaultSidebar = lazy(() =>
+  import("./../layout/components/DefaultSidebar")
+);
 
 //------ Route Definitions --------
 // eslint-disable-next-line no-unused-vars
 export const RoutedContent = () => {
   const scopes = useSelector((state) =>
-    state.token ? state.token.scopes : state.authReducer.permissions,
-  )
-  const [pluginMenus, setPluginMenus] = useState([])
+    state.token ? state.token.scopes : state.authReducer.permissions
+  );
+  const [pluginMenus, setPluginMenus] = useState([]);
   useEffect(() => {
-    setPluginMenus(processRoutes())
-  }, [])
+    setPluginMenus(processRoutes());
+  }, []);
 
   const { userinfo } = useSelector((state) => state.authReducer);
-  const config = useSelector((state) => state.authReducer.config)
+  const config = useSelector((state) => state.authReducer.config);
 
   useEffect(() => {
     if (!userinfo.jansAdminUIRole || userinfo.jansAdminUIRole.length === 0) {
-      const state = uuidv4()
-      const sessionEndpoint = `${config.endSessionEndpoint}?state=${state}&post_logout_redirect_uri=${config.postLogoutRedirectUri}`
-      window.location.href = sessionEndpoint
+      const state = uuidv4();
+      const sessionEndpoint = `${config.endSessionEndpoint}?state=${state}&post_logout_redirect_uri=${config.postLogoutRedirectUri}`;
+      window.location.href = sessionEndpoint;
     }
   }, [userinfo]);
 
   return (
     <Routes>
-      <Route path="/home/dashboard" element={<Suspense fallback={<GluuSuspenseLoader />}><DashboardPage /></Suspense>} />
+      <Route
+        path="/home/dashboard"
+        element={
+          <ProtectedRoute>
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <DashboardPage />
+          </Suspense>
+          </ProtectedRoute>
+        }
+      />
       <Route path="/" element={<Navigate to="/home/dashboard" />} />
-      <Route path="/home/health" element={<Suspense fallback={<GluuSuspenseLoader />}><HealthPage /></Suspense>} />
-      <Route path="/home/licenseDetails" element={<Suspense fallback={<GluuSuspenseLoader />}><LicenseDetailsPage /></Suspense>} />
+      <Route
+        path="/home/health"
+        element={
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <HealthPage />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/home/licenseDetails"
+        element={
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <LicenseDetailsPage />
+          </Suspense>
+        }
+      />
       {/*    Layouts     */}
       <Route path="/layouts/navbar" element={<NavbarOnly />} />
       <Route path="/layouts/sidebar" element={<SidebarDefault />} />
@@ -65,33 +91,70 @@ export const RoutedContent = () => {
         (item, key) =>
           hasPermission(scopes, item.permission) && (
             <Route key={key} path={item.path} element={<item.component />} />
-          ),
+          )
       )}
       {/*    Pages Routes    */}
-      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><ProfilePage /></Suspense>} path="/profile" />
-      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><ByeBye /></Suspense>} path="/logout" />
-      <Route element={<Suspense fallback={<GluuSuspenseLoader />}><Gluu404Error /></Suspense>} path="/error-404" />
+      <Route
+        element={
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <ProfilePage />
+          </Suspense>
+        }
+        path="/profile"
+      />
+
+      <Route
+        path="/logout"
+        element={
+          <ProtectedRoute>
+            <Suspense fallback={<GluuSuspenseLoader />}>
+              <ByeBye />
+            </Suspense>
+          </ProtectedRoute>
+        }
+      />
+      <Route
+        element={
+          <Suspense fallback={<GluuSuspenseLoader />}>
+            <Gluu404Error />
+          </Suspense>
+        }
+        path="/error-404"
+      />
 
       {/*    404    */}
       <Route path="*" element={<Navigate to="/error-404" />} />
     </Routes>
-  )
-}
+  );
+};
 
 //------ Custom Layout Parts --------
 export const RoutedNavbars = () => (
   <Routes>
     <Route
       path="/*"
       element={
-        <Suspense fallback={<GluuSuspenseLoader />}><GluuNavBar themeStyle="color" themeColor="primary" navStyle="accent" /></Suspense>
+        <Suspense fallback={<GluuSuspenseLoader />}>
+          <GluuNavBar
+            themeStyle="color"
+            themeColor="primary"
+            navStyle="accent"
+          />
+        </Suspense>
       }
     />
   </Routes>
-)
+);
 
 export const RoutedSidebars = () => (
   <Routes>
-    <Route path="/*" element={<Suspense fallback={<GluuSuspenseLoader />}><DefaultSidebar /></Suspense>} />
+    <Route
+      path="/*"
+      element={
+        <Suspense fallback={<GluuSuspenseLoader />}>
+          <DefaultSidebar />
+        </Suspense>
+      }
+    />
   </Routes>
-)
+);
diff --git a/admin-ui/app/utils/AppAuthProvider.js b/admin-ui/app/utils/AppAuthProvider.js
@@ -44,6 +44,7 @@ export default function AppAuthProvider(props) {
     token,
     issuer,
   } = useSelector((state) => state.authReducer)
+
   const {
     islicenseCheckResultLoaded,
     isLicenseActivationResultLoaded,
@@ -65,6 +66,7 @@ export default function AppAuthProvider(props) {
       dispatch(checkLicensePresent())
     }
   }, [isConfigValid])
+
   const [error, setError] = useState(null)
   const [code, setCode] = useState(null)
 
@@ -115,6 +117,7 @@ export default function AppAuthProvider(props) {
   }, [isLicenseValid])
 
   useEffect(() => {
+    console.log("Heloooo")
     const tokenHandler = new BaseTokenRequestHandler(new FetchRequestor())
     const authorizationHandler = new RedirectRequestHandler(
       new LocalStorageBackend(),