Logout Implementation Guide

Overview

This guide documents the implementation of the logout feature in Sasha Studio, including the UI components, confirmation dialog, and integration with the authentication system.

Implementation Details

1. Icon Integration

• Icon Used: SignOut from Phosphor Icons (@phosphor-icons/react)
• Location: Added to /src/components/icons/index.jsx
• Color Scheme: Red (text-red-600 dark:text-red-400) to indicate destructive action

2. Component Updates

Sidebar Component (/src/components/Sidebar.jsx)

• Imports Added:

  • SignOut icon from icons index
  • useAuth hook from AuthContext

• State Management:

  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
  const { logout } = useAuth();
  

• Button Placement:

  • Mobile: Fourth button in bottom panel
  • Desktop: Fourth button in bottom toolbar
  • Positioned after Settings button

3. Logout Confirmation Dialog

Design

• Position: Centered on screen using CSS transforms
• Backdrop: Semi-transparent black overlay (bg-black/50)
• Dialog Styling:
  • Centered positioning: fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
  • Responsive width: w-[90%] md:w-full
  • Max width: max-w-sm
  • Animation: animate-in fade-in duration-200

Structure

<div className="space-y-4">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30">
      <SignOut className="w-5 h-5 text-red-600 dark:text-red-400" />
    </div>
    <div>
      <h3>Logout</h3>
      <p>Are you sure you want to logout?</p>
    </div>
  </div>
  <div className="flex gap-2 justify-end">
    <Button variant="ghost">Cancel</Button>
    <Button variant="destructive">Logout</Button>
  </div>
</div>

4. Visual Design

Button Styling

• Mobile Button:

  className="flex-1 h-12 bg-muted/50 hover:bg-red-500/20 rounded-xl"
  

• Desktop Button:

  className="flex-1 h-9 px-0 hover:bg-red-100 dark:hover:bg-red-900/30"
  

Color Palette

• Primary: Red-600 (light) / Red-400 (dark)
• Hover State: Red-500/20 (mobile) / Red-100 (desktop light) / Red-900/30 (desktop dark)
• Dialog Accent: Red-100 (light) / Red-900/30 (dark)

5. User Flow

1. User clicks logout button in bottom panel
2. Confirmation dialog appears centered on screen
3. User can:
   • Click "Cancel" to dismiss dialog
   • Click "Logout" to proceed
4. On logout confirmation:
   • logout() function called from AuthContext
   • Dialog closes
   • User redirected to login screen

6. Authentication Integration

The logout functionality uses the existing AuthContext:

• Function: logout() from useAuth() hook
• Actions:
  • Clears auth token from localStorage
  • Resets user state
  • Redirects to login screen

7. Accessibility

• Keyboard Navigation: Full keyboard support
• Screen Readers: Descriptive title attributes
• Visual Indicators: Red color for destructive action
• Confirmation: Prevents accidental logouts

Testing Checklist

• Logout button appears in correct position
• Button has proper red styling
• Confirmation dialog centers on screen
• Cancel button dismisses dialog
• Logout button logs user out
• User redirected to login after logout
• Dark mode styling works correctly
• Mobile and desktop layouts work

Files Modified

1. /src/components/icons/index.jsx - Added SignOut icon
2. /src/components/Sidebar.jsx - Added logout button and dialog
3. /TEST-ONBOARDING.md - Updated documentation
4. /RUN-SASHA.md - Added UI feature documentation

Future Enhancements

• Add logout reason tracking
• Implement session timeout auto-logout
• Add "Remember me" option on login
• Consider adding logout confirmation preference

---

Created: 2025-01-09
Author: Sasha Studio Team
Feature: User Authentication - Logout