soufiane
c8fdd59553
- Add animated tea icon backgrounds to login and register pages (35 icons) - Update color scheme from green to golden/beige theme matching header - Change header navigation text from "Loto à gagner" to "Lots à gagner" - Update form placeholders to lowercase French (prénom, nom, email, etc.) - Standardize Facebook login button style to match Google button - Update all focus rings and button colors to #d4a574 (golden) theme 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
292 lines
16 KiB
TypeScript
292 lines
16 KiB
TypeScript
"use client";
|
|
import { useState, useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { loginSchema, LoginFormData } from "@/lib/validations";
|
|
import { Input } from "@/components/ui/Input";
|
|
import Button from "@/components/Button";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { ROUTES } from "@/utils/constants";
|
|
import { GoogleLoginButton } from "@/components/GoogleLoginButton";
|
|
import { initFacebookSDK, loginWithFacebook } from "@/lib/facebook-sdk";
|
|
import toast from "react-hot-toast";
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default function LoginPage() {
|
|
const { login, facebookLogin } = useAuth();
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isFacebookLoading, setIsFacebookLoading] = useState(false);
|
|
const [isFacebookSDKLoaded, setIsFacebookSDKLoaded] = useState(false);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [animationKey] = useState(Date.now());
|
|
|
|
const hasGoogleAuth = !!process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
|
|
const hasFacebookAuth = !!process.env.NEXT_PUBLIC_FACEBOOK_APP_ID;
|
|
|
|
useEffect(() => {
|
|
initFacebookSDK()
|
|
.then(() => {
|
|
setIsFacebookSDKLoaded(true);
|
|
console.log('Facebook SDK loaded successfully');
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to load Facebook SDK:', error);
|
|
});
|
|
}, []);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<LoginFormData>({
|
|
resolver: zodResolver(loginSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: LoginFormData) => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await login(data);
|
|
} catch (error) {
|
|
console.error("Login error:", error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const handleFacebookLogin = async () => {
|
|
if (!isFacebookSDKLoaded) {
|
|
toast.error("Le SDK Facebook n'est pas encore chargé. Veuillez réessayer dans quelques secondes.");
|
|
return;
|
|
}
|
|
|
|
setIsFacebookLoading(true);
|
|
try {
|
|
const accessToken = await loginWithFacebook();
|
|
await facebookLogin(accessToken);
|
|
} catch (error: any) {
|
|
console.error("Facebook login error:", error);
|
|
if (error.message !== 'Facebook login cancelled') {
|
|
// Show the specific error message from Facebook SDK
|
|
toast.error(error.message || "Erreur lors de la connexion avec Facebook");
|
|
}
|
|
} finally {
|
|
setIsFacebookLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen relative flex items-center justify-center py-12 px-4">
|
|
{/* Background avec icônes de thé */}
|
|
<div className="fixed inset-0 -z-10 overflow-hidden">
|
|
{/* Fond dégradé beige clair */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#fdfcf8] via-[#f8f6f0] to-[#f0ede5]"></div>
|
|
|
|
{/* Icônes de thé dispersées avec animation de descente - 35 icônes */}
|
|
<div key={animationKey} className="absolute inset-0 opacity-[0.5]">
|
|
{/* Ligne 1 - 5 icons */}
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[5%] left-[10%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[7%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[6%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[8%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[5%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
|
|
|
{/* Ligne 2 - 5 icons */}
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[18%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[20%] left-[35%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[19%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[21%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[18%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
|
|
|
{/* Ligne 3 - 5 icons */}
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[31%] left-[10%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[33%] left-[30%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[32%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[34%] left-[70%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[31%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
|
|
|
{/* Ligne 4 - 5 icons */}
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[44%] left-[15%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[46%] left-[35%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[45%] left-[55%] animate-float-gentle" style={{animationDuration: '33s'}} />
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[47%] left-[75%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[44%] left-[95%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
|
|
|
{/* Ligne 5 - 5 icons */}
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[57%] left-[10%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[59%] left-[30%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[58%] left-[50%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[60%] left-[70%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[57%] left-[90%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
|
|
|
{/* Ligne 6 - 5 icons */}
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[70%] left-[15%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[72%] left-[35%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[71%] left-[55%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[73%] left-[75%] animate-float-gentle" style={{animationDuration: '28s'}} />
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[70%] left-[95%] animate-float-gentle" style={{animationDuration: '30s'}} />
|
|
|
|
{/* Ligne 7 - 5 icons */}
|
|
<Image src="/images/tea-icons/gift-box.png" alt="" width={56} height={56} className="absolute top-[83%] left-[10%] animate-float-gentle" style={{animationDuration: '26s'}} />
|
|
<Image src="/images/tea-icons/teapot-green.png" alt="" width={56} height={56} className="absolute top-[85%] left-[30%] animate-float-gentle" style={{animationDuration: '32s'}} />
|
|
<Image src="/images/tea-icons/tea-leaves.png" alt="" width={56} height={56} className="absolute top-[84%] left-[50%] animate-float-gentle" style={{animationDuration: '29s'}} />
|
|
<Image src="/images/tea-icons/tea-cup.png" alt="" width={56} height={56} className="absolute top-[86%] left-[70%] animate-float-gentle" style={{animationDuration: '27s'}} />
|
|
<Image src="/images/tea-icons/teapot-pink.png" alt="" width={56} height={56} className="absolute top-[83%] left-[90%] animate-float-gentle" style={{animationDuration: '31s'}} />
|
|
</div>
|
|
|
|
{/* Overlay lumineux pour harmoniser */}
|
|
<div className="absolute inset-0 bg-gradient-radial from-white/30 via-transparent to-transparent"></div>
|
|
</div>
|
|
|
|
<div className="w-full max-w-md relative z-10">
|
|
|
|
{/* Title */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">Connexion</h1>
|
|
<p className="text-gray-600">
|
|
Connectez-vous pour participer au jeu-concours
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main Card */}
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
|
|
|
{/* Tabs */}
|
|
<div className="flex border-b border-gray-200">
|
|
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#d4a574]">
|
|
Connexion
|
|
</button>
|
|
<Link
|
|
href={ROUTES.REGISTER}
|
|
className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gray-100 transition-colors"
|
|
>
|
|
Inscription
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Form Container */}
|
|
<div className="p-8">
|
|
|
|
{/* Social Login Buttons */}
|
|
{(hasGoogleAuth || hasFacebookAuth) && (
|
|
<div className="space-y-3 mb-6">
|
|
{hasGoogleAuth && (
|
|
<GoogleLoginButton fullWidth />
|
|
)}
|
|
|
|
{hasFacebookAuth && (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleFacebookLogin}
|
|
disabled={isFacebookLoading || !isFacebookSDKLoaded}
|
|
isLoading={isFacebookLoading}
|
|
fullWidth
|
|
>
|
|
<svg className="w-5 h-5 mr-2" fill="#1877F2" viewBox="0 0 24 24">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
|
</svg>
|
|
Facebook
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Divider */}
|
|
{(hasGoogleAuth || hasFacebookAuth) && (
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-300" />
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-4 bg-white text-gray-500">
|
|
Ou avec votre email
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Login Form */}
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
|
|
|
|
{/* Email */}
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Email <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
placeholder="email"
|
|
{...register("email")}
|
|
className={`w-full px-4 py-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent`}
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Password */}
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Mot de passe <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
placeholder="mot de passe"
|
|
{...register("password")}
|
|
className={`w-full px-4 py-3 border ${errors.password ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-12`}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
{showPassword ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
{errors.password && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full bg-[#d4a574] hover:bg-[#c4956a] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
|
>
|
|
{isSubmitting ? "Connexion..." : "Se connecter"}
|
|
</button>
|
|
|
|
{/* Forgot Password */}
|
|
<div className="text-center">
|
|
<Link
|
|
href="/forgot-password"
|
|
className="text-sm text-[#5a5a4e] hover:text-[#d4a574] hover:underline transition-colors"
|
|
>
|
|
Mot de passe oublié ?
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|