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