84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React, { Suspense } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { Button } from 'primereact/button';
|
|
import { Card } from 'primereact/card';
|
|
import { redirectToLogin } from '@/lib/auth';
|
|
|
|
function LoginContent() {
|
|
const searchParams = useSearchParams();
|
|
const returnUrl = searchParams.get('returnUrl') || '/dashboard';
|
|
|
|
const handleLogin = () => {
|
|
// Stocker l'URL de retour dans le sessionStorage
|
|
if (returnUrl) {
|
|
sessionStorage.setItem('returnUrl', returnUrl);
|
|
}
|
|
|
|
// Rediriger vers Keycloak pour l'authentification
|
|
redirectToLogin(returnUrl);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex align-items-center justify-content-center" style={{
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|
}}>
|
|
<div className="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
|
<div className="text-center mb-5">
|
|
<div className="text-900 text-3xl font-medium mb-3">
|
|
BTP Xpress
|
|
</div>
|
|
<span className="text-600 font-medium line-height-3">
|
|
Plateforme de gestion pour le secteur du BTP
|
|
</span>
|
|
</div>
|
|
|
|
<Card>
|
|
<div className="text-center">
|
|
<i className="pi pi-lock text-6xl text-primary mb-4"></i>
|
|
<h2 className="text-900 font-bold text-2xl mb-2">
|
|
Connexion requise
|
|
</h2>
|
|
<p className="text-600 mb-4">
|
|
Veuillez vous connecter pour accéder à l'application
|
|
</p>
|
|
|
|
<Button
|
|
label="Se connecter avec Keycloak"
|
|
icon="pi pi-sign-in"
|
|
onClick={handleLogin}
|
|
className="w-full p-3 text-xl"
|
|
severity="info"
|
|
/>
|
|
|
|
<div className="mt-4 text-center">
|
|
<span className="text-600 text-sm">
|
|
Authentification sécurisée via Keycloak OAuth 2.0
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<div className="mt-5 text-center">
|
|
<span className="text-white-alpha-80 text-sm">
|
|
© 2025 BTP Xpress - Tous droits réservés
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="min-h-screen flex align-items-center justify-content-center">
|
|
<i className="pi pi-spin pi-spinner text-4xl"></i>
|
|
</div>
|
|
}>
|
|
<LoginContent />
|
|
</Suspense>
|
|
);
|
|
}
|