132 lines
4.7 KiB
TypeScript
132 lines
4.7 KiB
TypeScript
import type { Route } from "./+types/success";
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
CheckCircleIcon,
|
|
ArrowRightIcon,
|
|
MonitorSmartphone,
|
|
} from "lucide-react";
|
|
import { Link, useNavigate, useSearchParams } from "react-router";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Khollisé - Connexion" },
|
|
{ name: "description", content: "Connexion réussie à Khollisé" },
|
|
];
|
|
}
|
|
|
|
export default function AuthSuccessPage() {
|
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const [email, redirect, code] = ["email", "redirect", "code"].map((param) =>
|
|
searchParams.get(param)
|
|
);
|
|
const [countdown, setCountdown] = useState(5000);
|
|
|
|
// Valider l'URL de redirection
|
|
const redirectUrl = "/home";
|
|
// isValidRedirectUrl(redirectParam) ? redirectParam : "/accueil"
|
|
|
|
useEffect(() => {
|
|
// Démarrer le compte à rebours pour la redirection
|
|
const timer = setInterval(() => {
|
|
setCountdown((prev) => {
|
|
if (prev <= 1) {
|
|
clearInterval(timer);
|
|
navigate(redirectUrl);
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [redirectUrl, navigate]);
|
|
|
|
return (
|
|
<main className="flex h-full flex-col items-center justify-center p-4 bg-gray-50">
|
|
<div className="w-full max-w-md">
|
|
<Card className="w-full overflow-hidden">
|
|
<div className="bg-green-500 h-2" />
|
|
<CardHeader className="space-y-1 pb-6">
|
|
<div className="flex justify-center mb-4">
|
|
<div className="rounded-full bg-green-100 p-3">
|
|
<CheckCircleIcon className="h-10 w-10 text-green-600" />
|
|
</div>
|
|
</div>
|
|
<CardTitle className="text-2xl font-bold text-center">
|
|
Authentification réussie
|
|
</CardTitle>
|
|
<CardDescription className="text-center">
|
|
Vous êtes maintenant connecté en tant que
|
|
<span className="font-bold"> {email}</span>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start space-x-3 p-3 bg-green-50 rounded-lg border border-green-100">
|
|
<CheckCircleIcon className="h-5 w-5 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-medium text-green-800">
|
|
Cet appareil a été authentifié avec succès
|
|
</p>
|
|
<p className="text-xs text-green-700 mt-1">
|
|
Vous êtes maintenant connecté et pouvez accéder à votre
|
|
compte.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg border border-blue-100">
|
|
<MonitorSmartphone className="h-5 w-5 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-medium text-blue-800">
|
|
Authentification multi-appareils
|
|
</p>
|
|
<p className="text-xs text-blue-700 mt-1">
|
|
Si vous avez initié cette connexion depuis un autre
|
|
appareil, celui-ci a également été authentifié.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-3">
|
|
<p className="text-sm text-center text-gray-500">
|
|
Vous allez être redirigé dans{" "}
|
|
<span className="font-bold">{countdown}</span> secondes...
|
|
</p>
|
|
<Button asChild className="w-full">
|
|
<Link
|
|
to={redirectUrl}
|
|
className="flex items-center justify-center"
|
|
>
|
|
Continuer maintenant
|
|
<ArrowRightIcon className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-gray-100">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs text-gray-500">Besoin d'aide ?</p>
|
|
<Button variant="link" size="sm" asChild className="h-auto p-0">
|
|
<Link to="/support" className="text-xs">
|
|
Contacter le support
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|