logo out issues fixes
This commit is contained in:
IGNY8 VPS (Salman)
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "../../icons";
|
||||
import Label from "../form/Label";
|
||||
@@ -7,16 +7,51 @@ import Checkbox from "../form/input/Checkbox";
|
||||
import Button from "../ui/button/Button";
|
||||
import { useAuthStore } from "../../store/authStore";
|
||||
|
||||
interface LogoutReason {
|
||||
code: string;
|
||||
message: string;
|
||||
path: string;
|
||||
context?: any;
|
||||
timestamp: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
export default function SignInForm() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [logoutReason, setLogoutReason] = useState<LogoutReason | null>(null);
|
||||
const [showLogoutDetails, setShowLogoutDetails] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { login, loading } = useAuthStore();
|
||||
|
||||
// Check for logout reason on component mount
|
||||
useEffect(() => {
|
||||
try {
|
||||
const storedReason = localStorage.getItem('logout_reason');
|
||||
|
||||
if (storedReason) {
|
||||
const reason = JSON.parse(storedReason);
|
||||
setLogoutReason(reason);
|
||||
|
||||
// Check if we've already logged this (prevent StrictMode duplicates)
|
||||
const loggedKey = 'logout_reason_logged';
|
||||
const alreadyLogged = sessionStorage.getItem(loggedKey);
|
||||
|
||||
if (!alreadyLogged) {
|
||||
// Single consolidated log
|
||||
console.error('🚨 LOGOUT:', reason.code, '-', reason.message, 'on', reason.path);
|
||||
sessionStorage.setItem(loggedKey, 'true');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to read logout reason:', e);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
@@ -27,7 +62,7 @@ export default function SignInForm() {
|
||||
}
|
||||
|
||||
try {
|
||||
await login(email, password);
|
||||
await login(email, password, isChecked);
|
||||
// Redirect to the page user was trying to access, or home
|
||||
const from = (location.state as any)?.from?.pathname || "/";
|
||||
navigate(from, { replace: true });
|
||||
@@ -109,6 +144,64 @@ export default function SignInForm() {
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="space-y-6">
|
||||
{/* Logout Reason Display */}
|
||||
{logoutReason && (
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<svg className="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<h4 className="font-semibold text-yellow-800 dark:text-yellow-300">
|
||||
Session Ended
|
||||
</h4>
|
||||
</div>
|
||||
<p className="text-sm text-yellow-700 dark:text-yellow-400 mb-2">
|
||||
{logoutReason.message}
|
||||
</p>
|
||||
{logoutReason.path && logoutReason.path !== '/signin' && (
|
||||
<p className="text-xs text-yellow-600 dark:text-yellow-500">
|
||||
Original page: <span className="font-mono">{logoutReason.path}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLogoutDetails(!showLogoutDetails)}
|
||||
className="ml-2 p-1 text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-300"
|
||||
title="Toggle technical details"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expandable Technical Details */}
|
||||
{showLogoutDetails && (
|
||||
<div className="mt-3 pt-3 border-t border-yellow-300 dark:border-yellow-700">
|
||||
<p className="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-2">
|
||||
Technical Details:
|
||||
</p>
|
||||
<div className="space-y-1 text-xs font-mono text-yellow-700 dark:text-yellow-400">
|
||||
<div><span className="font-bold">Code:</span> {logoutReason.code}</div>
|
||||
<div><span className="font-bold">Source:</span> {logoutReason.source}</div>
|
||||
<div><span className="font-bold">Time:</span> {new Date(logoutReason.timestamp).toLocaleString()}</div>
|
||||
{logoutReason.context && Object.keys(logoutReason.context).length > 0 && (
|
||||
<div className="mt-2">
|
||||
<span className="font-bold">Context:</span>
|
||||
<pre className="mt-1 p-2 bg-yellow-100 dark:bg-yellow-900/30 rounded text-xs overflow-x-auto">
|
||||
{JSON.stringify(logoutReason.context, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
|
||||
{error}
|
||||
|
||||
Reference in New Issue
Block a user