diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx index 2903285..8943814 100644 --- a/frontend/src/ui/App.tsx +++ b/frontend/src/ui/App.tsx @@ -4,9 +4,15 @@ import LoginScreen from "./screen/LoginScreen"; import RegisterScreen from "./screen/RegisterScreen"; import { useAppState } from "./state"; import { DialogProvider } from "./contexts/DialogContext"; +import { useEffect } from "react"; export default function App() { - const { currentPage } = useAppState(); + const { currentPage, restoreUserFromStorage } = useAppState(); + + // Restore user from localStorage on app initialization + useEffect(() => { + restoreUserFromStorage(); + }, [restoreUserFromStorage]); let page = ; diff --git a/frontend/src/ui/components/chat/LeftPanel.tsx b/frontend/src/ui/components/chat/LeftPanel.tsx index 3150a0d..07e4416 100644 --- a/frontend/src/ui/components/chat/LeftPanel.tsx +++ b/frontend/src/ui/components/chat/LeftPanel.tsx @@ -12,6 +12,11 @@ import type { ChatTabs } from "../../state"; function BottomAppBar() { const [settingsOpen, onSettingsOpenChange] = useState(false); + const { logout } = useAppState(); + + const handleLogout = () => { + logout(); + }; return ( <> @@ -19,6 +24,12 @@ function BottomAppBar() { onSettingsOpenChange(true)}>
+ diff --git a/frontend/src/ui/state.ts b/frontend/src/ui/state.ts index 1ef2486..f9470dc 100644 --- a/frontend/src/ui/state.ts +++ b/frontend/src/ui/state.ts @@ -55,6 +55,7 @@ interface AppState { user: UserState; setUser: (token: string, user: User) => void; logout: () => void; + restoreUserFromStorage: () => void; } export const useAppState = create((set, get) => ({ @@ -151,6 +152,14 @@ export const useAppState = create((set, get) => ({ } })); + // Store credentials in localStorage + try { + localStorage.setItem('authToken', token); + localStorage.setItem('currentUser', JSON.stringify(user)); + } catch (error) { + console.error('Failed to store credentials in localStorage:', error); + } + try { const payload: WebSocketMessage = { type: "ping", @@ -166,13 +175,45 @@ export const useAppState = create((set, get) => ({ }) } catch {} }, - logout: () => set(() => ({ - user: { - currentUser: null, - authToken: null - }, - currentPage: "login" - })), + logout: () => { + // Clear localStorage + try { + localStorage.removeItem('authToken'); + localStorage.removeItem('currentUser'); + } catch (error) { + console.error('Failed to clear localStorage:', error); + } + + set(() => ({ + user: { + currentUser: null, + authToken: null + }, + currentPage: "login" + })); + }, + restoreUserFromStorage: () => { + try { + const token = localStorage.getItem('authToken'); + const userStr = localStorage.getItem('currentUser'); + + if (token && userStr) { + const user = JSON.parse(userStr) as User; + set(() => ({ + user: { + currentUser: user, + authToken: token + }, + currentPage: "chat" + })); + } + } catch (error) { + console.error('Failed to restore user from localStorage:', error); + // Clear invalid data + localStorage.removeItem('authToken'); + localStorage.removeItem('currentUser'); + } + }, // Panel management setActivePanel: (panel: MessagePanel | null) => set((state) => ({