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) => ({