138 lines
7.2 KiB
JavaScript
138 lines
7.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Building2, Mail, Lock, Eye, EyeOff } from 'lucide-react';
|
|
|
|
const Login = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const navigate = useNavigate();
|
|
const { login, loginWithO365 } = useAuth();
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError('');
|
|
|
|
const success = await login(email, password);
|
|
if (success) {
|
|
navigate('/dashboard');
|
|
} else {
|
|
setError('Identifiants incorrects. Veuillez réessayer.');
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col lg:flex-row">
|
|
{/* Image côté gauche */}
|
|
<div className="h-32 lg:h-auto lg:flex lg:w-1/2 bg-cover bg-center"
|
|
style={{ backgroundImage: "url('/assets/ImageEnsup.png')" }}>
|
|
<div className="w-full bg-black bg-opacity-40 flex items-center justify-center p-4">
|
|
</div>
|
|
</div>
|
|
|
|
{/* Formulaire côté droit */}
|
|
<div className="flex-1 lg:w-1/2 flex items-center justify-center p-4 lg:p-8">
|
|
<div className="max-w-md w-full">
|
|
<div className="bg-white rounded-2xl shadow-xl p-6 lg:p-8">
|
|
{/* Logo */}
|
|
<div className="text-center mb-6 lg:mb-8">
|
|
<div className="w-12 h-12 lg:w-16 lg:h-16 bg-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<Building2 className="w-6 h-6 lg:w-8 lg:h-8 text-white" />
|
|
</div>
|
|
<h1 className="text-xl lg:text-2xl font-bold text-gray-900">GTA</h1>
|
|
<p className="text-sm lg:text-base text-gray-600">Gestion de congés</p>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-4 lg:space-y-6">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm lg:text-base font-medium text-gray-700 mb-2">
|
|
Email
|
|
</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 lg:w-5 lg:h-5" />
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full pl-9 lg:pl-10 pr-4 py-2 lg:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm lg:text-base"
|
|
placeholder="votre.email@entreprise.com"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm lg:text-base font-medium text-gray-700 mb-2">
|
|
Mot de passe
|
|
</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 lg:w-5 lg:h-5" />
|
|
<input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full pl-9 lg:pl-10 pr-10 lg:pr-12 py-2 lg:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm lg:text-base"
|
|
placeholder="••••••••"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-900"
|
|
title={showPassword ? "Masquer le mot de passe" : "Afficher le mot de passe"}
|
|
>
|
|
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 text-center">
|
|
<button
|
|
onClick={async () => {
|
|
const success = await loginWithO365();
|
|
if (success) {
|
|
navigate('/dashboard');
|
|
} else {
|
|
setError("Erreur lors de la connexion Office 365");
|
|
}
|
|
}}
|
|
type="button"
|
|
className="w-full bg-gray-700 text-white py-3 rounded-lg font-medium hover:bg-green-700 transition-colors"
|
|
>
|
|
Se connecter avec Office 365
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="p-2 lg:p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
<p className="text-red-600 text-xs lg:text-sm">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full bg-blue-600 text-white py-2 lg:py-3 px-4 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-sm lg:text-base"
|
|
>
|
|
{isLoading ? 'Connexion...' : 'Se connecter'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|