messy logout fixing

frontend/src/components/auth/LogoutReasonBanner.tsx

@@ -0,0 +1,133 @@
+/**
+ * Logout Reason Banner
+ * Shows why user was logged out on the signin page
+ */
+import { useEffect, useState } from 'react';
+import { logoutTracker } from '../../services/logoutTracker';
+
+interface LogoutReason {
+  type: 'USER_ACTION' | 'TOKEN_EXPIRED' | 'REFRESH_FAILED' | 'AUTH_ERROR' | 'UNKNOWN';
+  message: string;
+  timestamp: number;
+  idleMinutes?: number;
+  location?: string;
+}
+
+export default function LogoutReasonBanner() {
+  const [logoutReason, setLogoutReason] = useState<LogoutReason | null>(null);
+  const [showDebug, setShowDebug] = useState(false);
+
+  useEffect(() => {
+    // Get last logout reason
+    const reason = logoutTracker.getLastLogoutReason();
+    if (reason) {
+      setLogoutReason(reason);
+      
+      // Auto-clear after displaying
+      setTimeout(() => {
+        logoutTracker.clearLastLogoutReason();
+      }, 30000); // Clear after 30 seconds
+    }
+  }, []);
+
+  if (!logoutReason) {
+    return null;
+  }
+
+  // Determine banner color based on logout type
+  const getBannerColor = () => {
+    switch (logoutReason.type) {
+      case 'USER_ACTION':
+        return 'bg-blue-50 border-blue-300 text-blue-800';
+      case 'TOKEN_EXPIRED':
+        return 'bg-yellow-50 border-yellow-300 text-yellow-800';
+      case 'REFRESH_FAILED':
+        return 'bg-red-50 border-red-300 text-red-800';
+      case 'AUTH_ERROR':
+        return 'bg-red-50 border-red-300 text-red-800';
+      default:
+        return 'bg-gray-50 border-gray-300 text-gray-800';
+    }
+  };
+
+  // Get icon based on type
+  const getIcon = () => {
+    switch (logoutReason.type) {
+      case 'USER_ACTION':
+        return '👋';
+      case 'TOKEN_EXPIRED':
+        return '⏰';
+      case 'REFRESH_FAILED':
+        return '🚨';
+      case 'AUTH_ERROR':
+        return '⚠️';
+      default:
+        return '❓';
+    }
+  };
+
+  // Get user-friendly message
+  const getMessage = () => {
+    if (logoutReason.type === 'USER_ACTION') {
+      return 'You signed out successfully.';
+    }
+    
+    if (logoutReason.idleMinutes && logoutReason.idleMinutes > 15) {
+      return `Session expired after ${logoutReason.idleMinutes} minutes of inactivity.`;
+    }
+    
+    return logoutReason.message || 'Your session has ended.';
+  };
+
+  const timeSinceLogout = Math.floor((Date.now() - logoutReason.timestamp) / 1000);
+  const minutesAgo = Math.floor(timeSinceLogout / 60);
+
+  return (
+    <div className="mb-6">
+      <div className={`border-2 rounded-lg p-4 ${getBannerColor()}`}>
+        <div className="flex items-start gap-3">
+          <div className="text-2xl flex-shrink-0">{getIcon()}</div>
+          <div className="flex-1">
+            <h3 className="font-semibold mb-1">Session Ended</h3>
+            <p className="text-sm mb-2">{getMessage()}</p>
+            <p className="text-xs opacity-75">
+              {minutesAgo === 0 ? 'Just now' : `${minutesAgo} minute${minutesAgo > 1 ? 's' : ''} ago`}
+            </p>
+            
+            {/* Debug toggle */}
+            {logoutReason.type !== 'USER_ACTION' && (
+              <button
+                onClick={() => setShowDebug(!showDebug)}
+                className="text-xs underline mt-2 opacity-75 hover:opacity-100"
+              >
+                {showDebug ? 'Hide' : 'Show'} technical details
+              </button>
+            )}
+            
+            {/* Debug info */}
+            {showDebug && (
+              <div className="mt-3 p-3 bg-white bg-opacity-50 rounded text-xs font-mono">
+                <div><strong>Type:</strong> {logoutReason.type}</div>
+                <div><strong>Idle Time:</strong> {logoutReason.idleMinutes || 0} minutes</div>
+                <div><strong>Location:</strong> {logoutReason.location || 'Unknown'}</div>
+                <div><strong>Timestamp:</strong> {new Date(logoutReason.timestamp).toISOString()}</div>
+                <div><strong>Message:</strong> {logoutReason.message}</div>
+              </div>
+            )}
+          </div>
+          
+          {/* Close button */}
+          <button
+            onClick={() => {
+              setLogoutReason(null);
+              logoutTracker.clearLastLogoutReason();
+            }}
+            className="text-xl opacity-50 hover:opacity-100 flex-shrink-0"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/auth/SignInForm.tsx

@@ -6,10 +6,11 @@ import Input from "../form/input/InputField";
 import Checkbox from "../form/input/Checkbox";
 import Button from "../ui/button/Button";
 import { useAuthStore } from "../../store/authStore";
+import LogoutReasonBanner from "./LogoutReasonBanner";
 
 export default function SignInForm() {
   const [showPassword, setShowPassword] = useState(false);
-  const [isChecked, setIsChecked] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -27,7 +28,7 @@ export default function SignInForm() {
     }
 
     try {
-      await login(email, password);
+      await login(email, password, rememberMe);
       // Redirect to the page user was trying to access, or home
       const from = (location.state as any)?.from?.pathname || "/";
       navigate(from, { replace: true });
@@ -46,6 +47,9 @@ export default function SignInForm() {
       </div>
       <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
         <div>
+          {/* Show logout reason if user was logged out */}
+          <LogoutReasonBanner />
+          
           <div className="mb-5 sm:mb-8">
             <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
               Sign In
@@ -152,9 +156,9 @@ export default function SignInForm() {
                 </div>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
-                    <Checkbox checked={isChecked} onChange={setIsChecked} />
+                    <Checkbox checked={rememberMe} onChange={setRememberMe} />
                     <span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">
-                      Keep me logged in
+                      Remember me for 20 days
                     </span>
                   </div>
                   <Link

frontend/src/components/debug/AuthDebugPanel.tsx

@@ -0,0 +1,178 @@
+/**
+ * Auth Debug Panel
+ * Shows auth status and recent logouts for debugging
+ * Add to your app to monitor auth issues in real-time
+ */
+import { useState, useEffect } from 'react';
+import { useAuthStore } from '../../store/authStore';
+import { logoutTracker } from '../../services/logoutTracker';
+import { tokenExpiryMonitor } from '../../services/tokenExpiryMonitor';
+
+export default function AuthDebugPanel() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [tokenStatus, setTokenStatus] = useState<any>(null);
+  const [logoutHistory, setLogoutHistory] = useState<any[]>([]);
+  const { user, token, refreshToken, isAuthenticated } = useAuthStore();
+
+  useEffect(() => {
+    if (isOpen) {
+      // Update token status
+      const status = tokenExpiryMonitor.getTokenStatus();
+      setTokenStatus(status);
+      
+      // Get logout history
+      const history = logoutTracker.getLogoutHistory();
+      setLogoutHistory(history);
+      
+      // Update every 5 seconds
+      const interval = setInterval(() => {
+        const status = tokenExpiryMonitor.getTokenStatus();
+        setTokenStatus(status);
+      }, 5000);
+      
+      return () => clearInterval(interval);
+    }
+  }, [isOpen]);
+
+  // Toggle with keyboard shortcut (Ctrl+Shift+D)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+        setIsOpen(prev => !prev);
+      }
+    };
+    
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  if (!isOpen) {
+    return (
+      <button
+        onClick={() => setIsOpen(true)}
+        className="fixed bottom-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-700 z-50"
+        title="Open Auth Debug Panel (Ctrl+Shift+D)"
+      >
+        🔍
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 w-96 max-h-[600px] bg-white shadow-2xl rounded-lg border-2 border-gray-300 overflow-hidden z-50">
+      {/* Header */}
+      <div className="bg-gray-800 text-white p-3 flex justify-between items-center">
+        <h3 className="font-bold">🔍 Auth Debug Panel</h3>
+        <button
+          onClick={() => setIsOpen(false)}
+          className="text-white hover:text-gray-300 text-xl"
+        >
+          ×
+        </button>
+      </div>
+      
+      {/* Content */}
+      <div className="p-4 overflow-y-auto max-h-[540px] text-sm">
+        {/* Auth Status */}
+        <div className="mb-4">
+          <h4 className="font-semibold mb-2 text-gray-700">Auth Status</h4>
+          <div className="bg-gray-50 p-3 rounded space-y-1 text-xs">
+            <div className="flex justify-between">
+              <span>Authenticated:</span>
+              <span className={isAuthenticated ? 'text-green-600 font-semibold' : 'text-red-600'}>
+                {isAuthenticated ? '✓ Yes' : '✗ No'}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>User ID:</span>
+              <span>{user?.id || 'None'}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Email:</span>
+              <span className="truncate ml-2">{user?.email || 'None'}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Has Access Token:</span>
+              <span className={token ? 'text-green-600' : 'text-red-600'}>
+                {token ? '✓' : '✗'}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>Has Refresh Token:</span>
+              <span className={refreshToken ? 'text-green-600' : 'text-red-600'}>
+                {refreshToken ? '✓' : '✗'}
+              </span>
+            </div>
+          </div>
+        </div>
+        
+        {/* Token Status */}
+        {tokenStatus && (
+          <div className="mb-4">
+            <h4 className="font-semibold mb-2 text-gray-700">Token Status</h4>
+            <div className="bg-gray-50 p-3 rounded space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span>Access Token:</span>
+                <span className={tokenStatus.accessTokenExpired ? 'text-red-600' : 'text-green-600'}>
+                  {tokenStatus.accessTokenExpired ? 'Expired' : `${tokenStatus.accessExpiresInMinutes}m left`}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span>Refresh Token:</span>
+                <span className={tokenStatus.refreshTokenExpired ? 'text-red-600' : 'text-green-600'}>
+                  {tokenStatus.refreshTokenExpired ? 'Expired' : `${tokenStatus.refreshExpiresInHours}h left`}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+        
+        {/* Logout History */}
+        <div>
+          <h4 className="font-semibold mb-2 text-gray-700">
+            Recent Logouts ({logoutHistory.length})
+          </h4>
+          {logoutHistory.length === 0 ? (
+            <div className="text-gray-500 text-xs italic">No logout events recorded</div>
+          ) : (
+            <div className="space-y-2">
+              {logoutHistory.slice(-5).reverse().map((event, idx) => (
+                <div key={idx} className="bg-gray-50 p-2 rounded border-l-4 border-red-500">
+                  <div className="flex justify-between items-start mb-1">
+                    <span className="font-semibold text-xs">{event.type}</span>
+                    <span className="text-xs text-gray-500">
+                      {Math.floor((Date.now() - event.timestamp) / 60000)}m ago
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-600">{event.message}</div>
+                  {event.idleMinutes > 0 && (
+                    <div className="text-xs text-gray-500 mt-1">
+                      Idle: {event.idleMinutes} minutes
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        
+        {/* Actions */}
+        <div className="mt-4 pt-4 border-t">
+          <button
+            onClick={() => {
+              console.log('=== AUTH STATE ===');
+              console.log('User:', user);
+              console.log('Token:', token?.substring(0, 20) + '...');
+              console.log('Refresh Token:', refreshToken?.substring(0, 20) + '...');
+              console.log('Token Status:', tokenStatus);
+              console.log('Logout History:', logoutHistory);
+            }}
+            className="w-full bg-gray-800 text-white py-2 rounded text-xs hover:bg-gray-700"
+          >
+            Log Full State to Console
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}