diff --git a/src/api/endpoints/apiActions.ts b/src/api/endpoints/apiActions.ts index 5210009f..302d05dd 100644 --- a/src/api/endpoints/apiActions.ts +++ b/src/api/endpoints/apiActions.ts @@ -32,7 +32,7 @@ export const createGetRequest = (endpoint: string, contentType signal, withCredentials: true } - + if (contentType) { config.headers = { ...config.headers, @@ -44,4 +44,4 @@ export const createGetRequest = (endpoint: string, contentType return response; }); } -} \ No newline at end of file +} diff --git a/src/components/Auth/Login.jsx b/src/components/Auth/Login.jsx index ddf73e65..edd7d4a4 100644 --- a/src/components/Auth/Login.jsx +++ b/src/components/Auth/Login.jsx @@ -13,11 +13,11 @@ import { import * as yup from "yup"; import FormField from "./UI/Formfield"; import { useCookies } from 'react-cookie'; +import { API_CONFIG } from "../../config"; import { requestUserSettings } from "./utils"; import Checkbox from "@mui/material/Checkbox"; import PasswordField from "./UI/PasswordField"; import { ArrowBack } from "@mui/icons-material"; -import { API_CONFIG } from "../../config"; import { Link, useNavigate } from "react-router-dom"; import { login } from "../../api/endpoints/apiService"; import { GlobalDataContext } from "../../contexts/DataContext"; @@ -36,11 +36,42 @@ const Login = () => { }); const [errors, setErrors] = React.useState({}); const [isLoading, setIsLoading] = React.useState(false); - const [existingCookies, setCookie] = useCookies(['session']); + const [existingCookies, setCookie, removeCookie] = useCookies(['session']); const { setUserData } = React.useContext(GlobalDataContext); const navigate = useNavigate(); + React.useEffect(() => { + (async () => { + const userSettings = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS)); + if (userSettings) { + try { + const userData = await requestUserSettings(userSettings?.groupname); + setUserData({ + name: userData['groupname'], + id: userData['orcid'], + email: userData?.emails[0]?.email, + role: userData['own-role'], + groupname: userData['groupname'], + settings: userData + }); + navigate("/"); + } catch (error) { + console.error("Error fetching user settings:", error); + localStorage.removeItem(API_CONFIG.SESSION_DATA.SETTINGS); + localStorage.removeItem(API_CONFIG.SESSION_DATA.COOKIE); + removeCookie('session', { path: '/' }); + setErrors((prev) => ({ + ...prev, + auth: "Session expired. Please log in again.", + })); + } + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + React.useEffect(() => { let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; let eventer = window[eventMethod]; @@ -59,30 +90,46 @@ const Login = () => { sessionCookie.value, { path: '/', - domain: API_CONFIG.BASE_URL.replace(/^https?:\/\//, '').replace(/:\d+$/, ''), secure: false, sameSite: false, - expires, httpOnly: false } ); } - const userData = await requestUserSettings(groupname); - localStorage.setItem(API_CONFIG.SESSION_DATA.SETTINGS, JSON.stringify(userData)); - localStorage.setItem(API_CONFIG.SESSION_DATA.COOKIE, JSON.stringify({ - name: 'session', - value: sessionCookie.value, - expires: expires - })); - setUserData({ - name: userData['groupname'], - id: userData['orcid'], - email: userData?.emails[0]?.email, - role: userData['own-role'], - groupname: userData['groupname'], - settings: userData - }); - navigate("/") + // Check if the session cookie is present + if (!sessionCookie) { + setErrors((prev) => ({ + ...prev, + auth: "Session cookie not found. Please try again", + })); + return; + } + // Retrieve user settings + try { + const userData = await requestUserSettings(groupname); + localStorage.setItem(API_CONFIG.SESSION_DATA.SETTINGS, JSON.stringify(userData)); + localStorage.setItem(API_CONFIG.SESSION_DATA.COOKIE, JSON.stringify({ + name: 'session', + value: sessionCookie.value, + expires: expires + })); + setUserData({ + name: userData['groupname'], + id: userData['orcid'], + email: userData?.emails[0]?.email, + role: userData['own-role'], + groupname: userData['groupname'], + settings: userData + }); + navigate("/") + } catch (error) { + console.error("Error fetching user settings:", error); + removeCookie('session', { path: '/' }); + setErrors((prev) => ({ + ...prev, + auth: "Failed to fetch user settings. Please try again", + })); + } } else if (code === 401) { setErrors((prev) => ({ ...prev, @@ -95,9 +142,7 @@ const Login = () => { })); } }); - setIsLoading(false) - // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLoading]); diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 953ee456..d5a13c24 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -35,6 +35,7 @@ import EditBulkTermsDialog from "../Dashboard/EditBulkTerms/EditBulkTermsDialog" import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined"; import PersonOutlineIcon from '@mui/icons-material/PersonOutline'; import { userLogout } from "../../api/endpoints/apiService"; +import { useCookies } from 'react-cookie'; import { vars } from "../../theme/variables"; const { gray200, white, gray100, gray600 } = vars; @@ -159,6 +160,8 @@ const Header = () => { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const { user, setUserData } = useContext(GlobalDataContext); const [openNewTermDialog, setOpenNewTermDialog] = React.useState(false); + // eslint-disable-next-line no-unused-vars + const [existingCookies, setCookie, removeCookie] = useCookies(['session']); const handleNewTermDialogClose = () => { setOpenNewTermDialog(false); @@ -219,9 +222,16 @@ const Header = () => { setOpenList(!openList); }; - const handleMenuClick = (e, menu) => { + const handleMenuClick = async (e, menu) => { if (menu.label === 'Log out') { - userLogout(); + try { + await userLogout(user['groupname']); + } catch (error) { + console.error("Logout error:", error); + } finally { + setUserData(null); + } + removeCookie('session', { path: '/' }); localStorage.removeItem('session'); localStorage.removeItem('settings'); setUserData({});