feat: implement logout functionality

[akintewe]

Logout Functionality Implementation

Overview

This PR implements the complete logout flow for the StellarAid application. Users can now sign out from both desktop and mobile interfaces with a seamless experience.

Changes

1. authSlice.js - Redux State Management

• Added import of logoutUser async thunk
• Implemented extraReducers to handle logout thunk states:
  • pending: Sets isLoading to true while processing logout request
  • fulfilled: Clears all auth state including user, token, and isAuthenticated flag
  • rejected: Clears auth state locally even if backend logout fails, ensuring user cannot access protected routes

2. Navbar.jsx - UI Integration & Logout Flow

• Removed: Placeholder useAuth mock hook
• Added: Redux integration using useAppDispatch and useAppSelector
• Imported:
  • selectCurrentUser selector for user state
  • logoutUser async thunk from authThunks
  • toastSuccess utility for user notifications
• Implemented handleLogout function:
  • Dispatches logoutUser() thunk which calls POST /api/auth/logout
  • Shows success toast: "You have been logged out."
  • Redirects user to /login page
  • Gracefully handles errors by clearing local state anyway (preserves UX consistency)
• Enhanced UI/UX:
  • Added isLoggingOut state to track logout progress
  • Both desktop dropdown and mobile menu buttons now show loading state
  • Button text changes to "Signing out..." during processing
  • Buttons disabled during logout to prevent double-click issues
  • Visual feedback with opacity change on disabled state

Acceptance Criteria ✅

• "Log Out" button appears in Navbar user menu (desktop + mobile)
• Dispatches logoutUser() thunk which calls POST /api/auth/logout
• Clears all auth state via Redux extraReducers
• Clears persisted localStorage (handled by redux-persist automatically)
• Redirects to /login with success toast message
• Robust error handling - still logs out locally even if backend fails

Testing Notes

• Desktop flow: Click user avatar → Click "Sign out" → Toast + Redirect
• Mobile flow: Toggle hamburger menu → Click "Sign out" → Toast + Redirect
• Error handling: Logout still completes locally even if network fails
• Redux state: All user data cleared from store after logout
• Persistence: localStorage auth is cleared (redux-persist integration)

Files Modified

• src/components/layout/Navbar.jsx - UI and logout handler
• src/features/auth/authSlice.js - Redux thunk handling

Dependencies

• @reduxjs/toolkit - Already in use for Redux setup
• react-hot-toast - Already in use for toast notifications
• react-router-dom - Already in use for navigation

closes #31