85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import type { Route } from "./+types/login";
|
||
import { LoginForm } from "~/components/auth/login-form";
|
||
import { PublicRoute } from "~/components/auth/protected-route";
|
||
import { useAuth } from "~/contexts/auth-context";
|
||
import { useEffect, useState } from "react";
|
||
import { useNavigate, useSearchParams } from "react-router";
|
||
|
||
export function meta({}: Route.MetaArgs) {
|
||
return [
|
||
{ title: "ورود - سیستم مدیریت فناوری و نوآوری" },
|
||
{
|
||
name: "description",
|
||
content: "ورود به سیستم مدیریت فناوری و نوآوری اینوژن",
|
||
},
|
||
{ name: "keywords", content: "ورود, سیستم مدیریت, فناوری, نوآوری, اینوژن" },
|
||
{ name: "robots", content: "noindex, nofollow" },
|
||
];
|
||
}
|
||
|
||
export default function Login() {
|
||
const { isAuthenticated, isLoading } = useAuth();
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const returnTo = searchParams.get("returnTo");
|
||
const [isRedirecting, setIsRedirecting] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (isAuthenticated && !isLoading && !isRedirecting) {
|
||
setIsRedirecting(true);
|
||
|
||
// Small delay to prevent flash
|
||
setTimeout(() => {
|
||
const redirectPath =
|
||
returnTo && returnTo !== "/login" ? returnTo : "/dashboard";
|
||
navigate(redirectPath, { replace: true });
|
||
}, 100);
|
||
}
|
||
}, [isAuthenticated, isLoading, navigate, returnTo, isRedirecting]);
|
||
|
||
const handleLoginSuccess = () => {
|
||
if (!isRedirecting) {
|
||
setIsRedirecting(true);
|
||
|
||
const redirectPath =
|
||
returnTo && returnTo !== "/login" ? returnTo : "/dashboard";
|
||
|
||
// Immediate redirect on successful login
|
||
navigate(redirectPath, { replace: true });
|
||
}
|
||
};
|
||
|
||
// Show loading state during redirect
|
||
if (isAuthenticated && (isLoading || isRedirecting)) {
|
||
return (
|
||
<div
|
||
className="min-h-screen flex items-center justify-center"
|
||
style={{
|
||
background:
|
||
"linear-gradient(135deg, var(--color-login-dark-start) 0%, var(--color-login-dark-end) 100%)",
|
||
}}
|
||
>
|
||
<div className="text-center space-y-6 max-w-md mx-auto p-8">
|
||
<div className="flex justify-center">
|
||
<div className="w-8 h-8 border-2 border-[var(--color-login-primary)] border-t-transparent rounded-full animate-spin"></div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<h2 className="text-lg font-medium font-persian text-white">
|
||
در حال انتقال...
|
||
</h2>
|
||
<p className="text-sm font-persian leading-relaxed text-gray-300">
|
||
در حال هدایت به صفحه مقصد
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<PublicRoute>
|
||
<LoginForm onSuccess={handleLoginSuccess} />
|
||
</PublicRoute>
|
||
);
|
||
}
|