From 7f972d13c33c03fdc9fefc19dee653a7340f6aef Mon Sep 17 00:00:00 2001 From: Yinyin Liu Date: Tue, 10 Mar 2026 08:50:46 +0100 Subject: [PATCH] fixed remember me token issue --- .../src/Resources/axiosConfig.tsx | 2 +- .../src/components/ResetPassword.tsx | 1 - .../src/components/SetNewPassword.tsx | 1 - .../frontend-marios2/src/components/login.tsx | 11 ++------- .../contexts/InstallationsContextProvider.tsx | 2 +- .../src/contexts/tokenContext.tsx | 23 +++++++++++++------ .../src/contexts/userContext.tsx | 20 ++++++++++------ 7 files changed, 33 insertions(+), 27 deletions(-) diff --git a/typescript/frontend-marios2/src/Resources/axiosConfig.tsx b/typescript/frontend-marios2/src/Resources/axiosConfig.tsx index 97dec2ca8..398057467 100644 --- a/typescript/frontend-marios2/src/Resources/axiosConfig.tsx +++ b/typescript/frontend-marios2/src/Resources/axiosConfig.tsx @@ -13,7 +13,7 @@ const axiosConfig = axios.create({ axiosConfig.defaults.params = {}; axiosConfig.interceptors.request.use( (config) => { - const tokenString = localStorage.getItem('token'); + const tokenString = localStorage.getItem('token') || sessionStorage.getItem('token'); const token = tokenString !== null ? tokenString : ''; if (token) { config.params['authToken'] = token; diff --git a/typescript/frontend-marios2/src/components/ResetPassword.tsx b/typescript/frontend-marios2/src/components/ResetPassword.tsx index 7928ab76a..3159cf6db 100644 --- a/typescript/frontend-marios2/src/components/ResetPassword.tsx +++ b/typescript/frontend-marios2/src/components/ResetPassword.tsx @@ -23,7 +23,6 @@ import { FormattedMessage, useIntl } from 'react-intl'; function ResetPassword() { const [username, setUsername] = useState(''); const [loading, setLoading] = useState(false); - const [rememberMe, setRememberMe] = useState(false); const [open, setOpen] = useState(false); const intl = useIntl(); const theme = useTheme(); diff --git a/typescript/frontend-marios2/src/components/SetNewPassword.tsx b/typescript/frontend-marios2/src/components/SetNewPassword.tsx index cf9de7e73..b243a25c3 100644 --- a/typescript/frontend-marios2/src/components/SetNewPassword.tsx +++ b/typescript/frontend-marios2/src/components/SetNewPassword.tsx @@ -23,7 +23,6 @@ import { FormattedMessage, useIntl } from 'react-intl'; function SetNewPassword() { const [username, setUsername] = useState(''); const [loading, setLoading] = useState(false); - const [rememberMe, setRememberMe] = useState(false); const [open, setOpen] = useState(false); const intl = useIntl(); const theme = useTheme(); diff --git a/typescript/frontend-marios2/src/components/login.tsx b/typescript/frontend-marios2/src/components/login.tsx index bc0f2ffa9..47bc84120 100644 --- a/typescript/frontend-marios2/src/components/login.tsx +++ b/typescript/frontend-marios2/src/components/login.tsx @@ -17,7 +17,6 @@ import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import Link from '@mui/material/Link'; import inescologo from 'src/Resources/Logo.svg'; import { axiosConfigWithoutToken } from 'src/Resources/axiosConfig'; -import Cookies from 'universal-cookie'; import { UserContext } from 'src/contexts/userContext'; import { TokenContext } from 'src/contexts/tokenContext'; import { useNavigate } from 'react-router-dom'; @@ -54,7 +53,6 @@ function Login() { const { currentUser, setUser, removeUser } = context; const tokencontext = useContext(TokenContext); const { token, setNewToken, removeToken } = tokencontext; - const cookies = new Cookies(); const handleUsernameChange = (event: React.ChangeEvent) => { setUsername(event.target.value); @@ -80,19 +78,14 @@ function Login() { if (response.data && response.data.token) { setLoading(false); - setNewToken(response.data.token); - setUser(response.data.user); + setNewToken(response.data.token, rememberMe); + setUser(response.data.user, rememberMe); setAccessToSalimax(response.data.accessToSalimax); setAccessToSalidomo(response.data.accessToSalidomo); setAccessToSodiohome(response.data.accessToSodioHome); setAccessToSodistore(response.data.accessToSodistoreMax); setAccessToSodistoreGrid(response.data.accessToSodistoreGrid); - - if (rememberMe) { - cookies.set('rememberedUsername', username, { path: '/' }); - cookies.set('rememberedPassword', password, { path: '/' }); - } if (response.data.accessToSalimax) { navigate(routes.installations); } else if (response.data.accessToSalidomo) { diff --git a/typescript/frontend-marios2/src/contexts/InstallationsContextProvider.tsx b/typescript/frontend-marios2/src/contexts/InstallationsContextProvider.tsx index b8ca1e030..02bed5596 100644 --- a/typescript/frontend-marios2/src/contexts/InstallationsContextProvider.tsx +++ b/typescript/frontend-marios2/src/contexts/InstallationsContextProvider.tsx @@ -132,7 +132,7 @@ const InstallationsContextProvider = ({ socket.current.close(); socket.current = null; } - const tokenString = localStorage.getItem('token'); + const tokenString = localStorage.getItem('token') || sessionStorage.getItem('token'); const token = tokenString !== null ? tokenString : ''; const urlWithToken = `wss://monitor.inesco.energy/api/CreateWebSocket?authToken=${token}`; diff --git a/typescript/frontend-marios2/src/contexts/tokenContext.tsx b/typescript/frontend-marios2/src/contexts/tokenContext.tsx index 191ff17ad..b1b1344f3 100644 --- a/typescript/frontend-marios2/src/contexts/tokenContext.tsx +++ b/typescript/frontend-marios2/src/contexts/tokenContext.tsx @@ -3,7 +3,7 @@ import {createContext, ReactNode, useState} from 'react'; // Define the shape of the context interface TokenContextType { token?: string | null; - setNewToken: (new_token: string) => void; + setNewToken: (new_token: string, rememberMe?: boolean) => void; removeToken: () => void; } @@ -12,20 +12,29 @@ export const TokenContext = createContext( undefined ); +const getStoredToken = (): string | null => { + // Check localStorage first (rememberMe was checked), then sessionStorage + return localStorage.getItem('token') || sessionStorage.getItem('token'); +}; + // Create a UserContextProvider component export const TokenContextProvider = ({ children }: { children: ReactNode }) => { - const searchParams = new URLSearchParams(location.search); - const tokenId = parseInt(searchParams.get('authToken')); - //Initialize context state with a "null" user - const [token, setToken] = useState(localStorage.getItem('token')); + const [token, setToken] = useState(getStoredToken); - const saveToken = (new_token: string) => { + const saveToken = (new_token: string, rememberMe = false) => { setToken(new_token); - localStorage.setItem('token', new_token); + if (rememberMe) { + localStorage.setItem('token', new_token); + sessionStorage.removeItem('token'); + } else { + sessionStorage.setItem('token', new_token); + localStorage.removeItem('token'); + } }; const deleteToken = () => { localStorage.removeItem('token'); + sessionStorage.removeItem('token'); setToken(null); }; diff --git a/typescript/frontend-marios2/src/contexts/userContext.tsx b/typescript/frontend-marios2/src/contexts/userContext.tsx index 9339bcab9..6ce1b2b58 100644 --- a/typescript/frontend-marios2/src/contexts/userContext.tsx +++ b/typescript/frontend-marios2/src/contexts/userContext.tsx @@ -4,7 +4,7 @@ import {InnovEnergyUser} from '../interfaces/UserTypes'; // Define the shape of the context interface UserContextType { currentUser?: InnovEnergyUser; - setUser: (user: InnovEnergyUser) => void; + setUser: (user: InnovEnergyUser, rememberMe?: boolean) => void; removeUser: () => void; } @@ -13,20 +13,26 @@ export const UserContext = createContext( undefined ); +const getStoredUser = (): InnovEnergyUser | null => { + const data = localStorage.getItem('currentUser') || sessionStorage.getItem('currentUser'); + return data ? JSON.parse(data) : null; +}; + // Create a UserContextProvider component export const UserContextProvider = ({ children }: { children: ReactNode }) => { - //Initialize context state with a "null" user - const [currentUser, setUser] = useState( - JSON.parse(localStorage.getItem('currentUser')) - ); + const [currentUser, setUser] = useState(getStoredUser); - const saveUser = (new_user: InnovEnergyUser) => { + const saveUser = (new_user: InnovEnergyUser, rememberMe?: boolean) => { setUser(new_user); - localStorage.setItem('currentUser', JSON.stringify(new_user)); + const storage = rememberMe !== undefined + ? (rememberMe ? localStorage : sessionStorage) + : (localStorage.getItem('currentUser') ? localStorage : sessionStorage); + storage.setItem('currentUser', JSON.stringify(new_user)); }; const deleteUser = () => { localStorage.removeItem('currentUser'); + sessionStorage.removeItem('currentUser'); }; return (