Merge pull request #61 from aldbr/main_FIX-multi-vo-login

fix theme and simplify multi-vo login a bit

src/components/applications/LoginForm.tsx

@@ -32,20 +32,16 @@ export function LoginForm() {
   const { data, error, isLoading } = useMetadata();
   const [selectedVO, setSelectedVO] = useState<string | null>(null);
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
-  const {
-    configuration,
-    setConfiguration,
-    configurationName,
-    setConfigurationName,
-  } = useOIDCContext();
-  const { isAuthenticated, login } = useOidc(configurationName);
+  const { configuration, setConfiguration } = useOIDCContext();
+  const { isAuthenticated, login } = useOidc(configuration?.scope);
 
   // Login if not authenticated
   useEffect(() => {
-    if (configurationName && isAuthenticated === false) {
+    if (configuration && configuration.scope && isAuthenticated === false) {
+      sessionStorage.setItem("oidcScope", JSON.stringify(configuration.scope));
       login();
     }
-  }, [configurationName, isAuthenticated, login]);
+  }, [configuration, isAuthenticated, login]);
 
   // Get default group
   const getDefaultGroup = (data: Metadata | undefined, vo: string): string => {
@@ -87,10 +83,6 @@ export function LoginForm() {
         ...configuration,
         scope: newScope,
       });
-      setConfigurationName(newScope);
-
-      sessionStorage.setItem("oidcConfigName", JSON.stringify(newScope));
-      login();
     }
   };
   // Redirect to dashboard if already authenticated

src/components/applications/UserDashboard.tsx

@@ -13,8 +13,8 @@ import { useOIDCContext } from "@/hooks/oidcConfiguration";
  */
 export default function UserDashboard() {
   const theme = useMUITheme();
-  const { configurationName } = useOIDCContext();
-  const { accessTokenPayload } = useOidcAccessToken(configurationName);
+  const { configuration } = useOIDCContext();
+  const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
   return (
     <React.Fragment>

src/components/layout/OIDCProvider.tsx

@@ -15,22 +15,16 @@ interface OIDCProviderProps {
  * @returns the wrapper around OidcProvider
  */
 export function OIDCProvider(props: OIDCProviderProps) {
-  const {
-    configuration,
-    setConfiguration,
-    configurationName,
-    setConfigurationName,
-  } = useOIDCContext();
+  const { configuration, setConfiguration } = useOIDCContext();
   const diracxUrl = useDiracxUrl();
 
   useEffect(() => {
-    if (!configuration && !configurationName && diracxUrl) {
+    if (!configuration && diracxUrl) {
       // Get the OIDC configuration name from the session storage if it exists
-      let scope = sessionStorage.getItem("oidcConfigName") || ``;
+      let scope = sessionStorage.getItem("oidcScope") || ``;
 
       if (scope) {
         scope = scope.replace(/^"|"$/g, "");
-        setConfigurationName(scope);
       }
 
       // Set the OIDC configuration
@@ -41,7 +35,7 @@ export function OIDCProvider(props: OIDCProviderProps) {
         redirect_uri: `${diracxUrl}/#authentication-callback`,
       });
     }
-  }, [diracxUrl, configuration, setConfiguration]);
+  }, [diracxUrl, configuration]);
 
   const withCustomHistory = () => {
     return {
@@ -61,7 +55,7 @@ export function OIDCProvider(props: OIDCProviderProps) {
     <>
       <OidcProvider
         configuration={configuration}
-        configurationName={configurationName}
+        configurationName={configuration.scope}
         withCustomHistory={withCustomHistory}
       >
         <main>{props.children}</main>

src/components/layout/OIDCSecure.tsx

@@ -14,8 +14,8 @@ interface OIDCProps {
  * @returns The children if the user is authenticated, null otherwise
  */
 export function OIDCSecure({ children }: OIDCProps) {
-  const { configurationName } = useOIDCContext();
-  const { isAuthenticated } = useOidc(configurationName);
+  const { configuration } = useOIDCContext();
+  const { isAuthenticated } = useOidc(configuration?.scope);
   const router = useRouter();
 
   // Redirect to login page if not authenticated

src/components/ui/DashboardButton.tsx

@@ -9,8 +9,8 @@ import Link from "next/link";
  * @returns a Button
  */
 export function DashboardButton() {
-  const { configurationName } = useOIDCContext();
-  const { isAuthenticated } = useOidc(configurationName);
+  const { configuration } = useOIDCContext();
+  const { isAuthenticated } = useOidc(configuration?.scope);
 
   // Render null if the OIDC configuration is not ready or no access token is available
   if (!isAuthenticated) {

src/components/ui/ProfileButton.tsx

@@ -21,9 +21,9 @@ import React from "react";
  * @returns a Button
  */
 export function ProfileButton() {
-  const { configurationName, setConfigurationName } = useOIDCContext();
-  const { accessTokenPayload } = useOidcAccessToken(configurationName);
-  const { logout, isAuthenticated } = useOidc(configurationName);
+  const { configuration, setConfiguration } = useOIDCContext();
+  const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
+  const { logout, isAuthenticated } = useOidc(configuration?.scope);
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -35,9 +35,13 @@ export function ProfileButton() {
     setAnchorEl(null);
   };
   const handleLogout = () => {
+    if (!configuration) {
+      return;
+    }
+
     // Remove the OIDC configuration name from the session storage
-    setConfigurationName(undefined);
-    sessionStorage.removeItem("oidcConfigName");
+    setConfiguration({ ...configuration, scope: `` });
+    sessionStorage.removeItem("oidcScope");
     logout();
   };
 

src/contexts/OIDCConfigurationProvider.tsx

@@ -13,13 +13,9 @@ import { OIDCProvider } from "@/components/layout/OIDCProvider";
 export const OIDCConfigurationContext = createContext<{
   configuration: OidcConfiguration | null;
   setConfiguration: (config: OidcConfiguration | null) => void;
-  configurationName: string | undefined;
-  setConfigurationName: (name: string | undefined) => void;
 }>({
   configuration: null,
   setConfiguration: () => {},
-  configurationName: undefined,
-  setConfigurationName: () => {},
 });
 
 /**
@@ -35,17 +31,12 @@ export const OIDCConfigurationProvider = ({
   const [configuration, setConfiguration] = useState<OidcConfiguration | null>(
     null,
   );
-  const [configurationName, setConfigurationName] = useState<
-    string | undefined
-  >(undefined);
 
   return (
     <OIDCConfigurationContext.Provider
       value={{
         configuration,
         setConfiguration,
-        configurationName,
-        setConfigurationName,
       }}
     >
       <OIDCProvider>{children}</OIDCProvider>

src/contexts/ThemeProvider.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { useMediaQuery } from "@mui/material";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 
 /**
  * Theme context type
  * @property theme - the current theme mode
  * @property toggleTheme - function to toggle the theme mode
  */
 type ThemeContextType = {
-  theme: "light" | "dark";
+  theme: string;
   toggleTheme: () => void;
 };
 
@@ -30,12 +30,22 @@ export const ThemeContext = createContext<ThemeContextType | undefined>(
  * ThemeProvider component to provide the theme context to its children
  */
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
-  // State to manage the current theme mode
-  const [theme, setTheme] = useState<"light" | "dark">(
-    useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light",
-  );
+  // Read the initial theme from localStorage
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const storedTheme = localStorage.getItem("theme");
+  const defaultTheme = storedTheme
+    ? storedTheme
+    : prefersDarkMode
+      ? "dark"
+      : "light";
+
+  const [theme, setTheme] = useState<string>(defaultTheme);
+
+  // Update localStorage when the theme changes
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+  }, [theme]);
 
-  // Function to toggle the theme mode
   const toggleTheme = () => {
     setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
   };

src/hooks/jobs.tsx

@@ -8,9 +8,9 @@ import { useOIDCContext } from "./oidcConfiguration";
  * @returns the jobs
  */
 export function useJobs() {
-  const { configurationName } = useOIDCContext();
+  const { configuration } = useOIDCContext();
   const diracxUrl = useDiracxUrl();
-  const { accessToken } = useOidcAccessToken(configurationName);
+  const { accessToken } = useOidcAccessToken(configuration?.scope);
 
   const url = `${diracxUrl}/api/jobs/search?page=0&per_page=100`;
   const { data, error } = useSWR([url, accessToken, "POST"], fetcher);

src/hooks/theme.tsx

@@ -1,4 +1,5 @@
 import { ThemeContext } from "@/contexts/ThemeProvider";
+import { PaletteMode } from "@mui/material";
 import { createTheme } from "@mui/material/styles";
 import { useContext } from "react";
 
@@ -20,13 +21,14 @@ export const useTheme = () => {
  * @returns the Material-UI theme
  * @throws an error if the hook is not used within a ThemeProvider
  */
+
 export const useMUITheme = () => {
   const { theme } = useTheme();
 
   // Create a Material-UI theme based on the current mode
   const muiTheme = createTheme({
     palette: {
-      mode: theme,
+      mode: theme as PaletteMode,
       primary: {
         main: "#ffffff",
       },

test/unit-tests/LoginButton.test.tsx → test/unit-tests/ProfileButton.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import { ProfileButton } from "@/components/ui/ProfileButton";
 import { useOidcAccessToken, useOidc } from "@axa-fr/react-oidc";
+import { OIDCConfigurationContext } from "@/contexts/OIDCConfigurationProvider";
 
 // Mocking the hooks
 jest.mock("@axa-fr/react-oidc");
@@ -51,11 +52,20 @@ describe("<ProfileButton />", () => {
       logout: mockLogout,
     });
     (useOidcAccessToken as jest.Mock).mockReturnValue({
-      accessToken: "mockAccessToken",
       accessTokenPayload: { preferred_username: "John" },
     });
 
-    const { getByText } = render(<ProfileButton />);
+    // Mock context value
+    const mockContextValue = {
+      configuration: { scope: "mockScope" },
+      setConfiguration: jest.fn(),
+    };
+
+    const { getByText } = render(
+      <OIDCConfigurationContext.Provider value={mockContextValue}>
+        <ProfileButton />
+      </OIDCConfigurationContext.Provider>,
+    );
 
     // Open the menu by clicking the avatar
     fireEvent.click(getByText("J"));