soufiane
d0ef196c0d
- Update about, contact, FAQ, forgot-password, lots, register, rules pages - Apply consistent styling with bg-gray-50 and modern cards - Update footer and layout with new design - Add gagnants (winners) page All pages now have consistent modern design matching homepage and dashboard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
247 lines
12 KiB
TypeScript
247 lines
12 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
import { registerSchema, RegisterFormData } from "@/lib/validations";
|
|
import Link from "next/link";
|
|
import { ROUTES } from "@/utils/constants";
|
|
|
|
export default function RegisterPage() {
|
|
const { register: registerUser } = useAuth();
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<RegisterFormData>({
|
|
resolver: zodResolver(registerSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: RegisterFormData) => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await registerUser(data);
|
|
} catch (error) {
|
|
console.error("Registration error:", error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
|
<div className="w-full max-w-md">
|
|
|
|
{/* Title */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">Inscription</h1>
|
|
<p className="text-gray-600">
|
|
Créez un compte 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">
|
|
<Link
|
|
href={ROUTES.LOGIN}
|
|
className="flex-1 py-4 px-6 text-center font-semibold text-gray-500 bg-gray-50 hover:bg-gray-100 transition-colors"
|
|
>
|
|
Connexion
|
|
</Link>
|
|
<button className="flex-1 py-4 px-6 text-center font-semibold text-gray-900 bg-white border-b-2 border-[#1a4d2e]">
|
|
Inscription
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form Container */}
|
|
<div className="p-8">
|
|
|
|
{/* Registration Form */}
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
|
|
|
|
{/* Prénom et Nom */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="firstName" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Prénom <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="firstName"
|
|
type="text"
|
|
placeholder="Jean"
|
|
{...register("firstName")}
|
|
className={`w-full px-4 py-3 border ${errors.firstName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
|
/>
|
|
{errors.firstName && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.firstName.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="lastName" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Nom <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="lastName"
|
|
type="text"
|
|
placeholder="Dupont"
|
|
{...register("lastName")}
|
|
className={`w-full px-4 py-3 border ${errors.lastName ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
|
/>
|
|
{errors.lastName && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.lastName.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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="votre.email@example.com"
|
|
{...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-[#1a4d2e] focus:border-transparent`}
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Téléphone */}
|
|
<div>
|
|
<label htmlFor="phone" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Téléphone
|
|
</label>
|
|
<input
|
|
id="phone"
|
|
type="tel"
|
|
placeholder="0612345678"
|
|
{...register("phone")}
|
|
className={`w-full px-4 py-3 border ${errors.phone ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent`}
|
|
/>
|
|
<p className="mt-1 text-xs text-gray-500">Optionnel - Format: 06 12 34 56 78</p>
|
|
{errors.phone && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.phone.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mot de passe */}
|
|
<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="••••••••"
|
|
{...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-[#1a4d2e] 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>
|
|
<p className="mt-1 text-xs text-gray-500">Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre</p>
|
|
{errors.password && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Confirmer mot de passe */}
|
|
<div>
|
|
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Confirmer le mot de passe <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="confirmPassword"
|
|
type={showConfirmPassword ? "text" : "password"}
|
|
placeholder="••••••••"
|
|
{...register("confirmPassword")}
|
|
className={`w-full px-4 py-3 border ${errors.confirmPassword ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12`}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
{showConfirmPassword ? (
|
|
<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.confirmPassword && (
|
|
<p className="mt-1 text-sm text-red-500">{errors.confirmPassword.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Checkbox CGU */}
|
|
<div className="flex items-start gap-3">
|
|
<input
|
|
id="terms"
|
|
type="checkbox"
|
|
required
|
|
className="mt-1 w-5 h-5 text-[#1a4d2e] border-gray-300 rounded focus:ring-2 focus:ring-[#1a4d2e]"
|
|
/>
|
|
<label htmlFor="terms" className="text-sm text-gray-700 select-none cursor-pointer">
|
|
J'accepte les{' '}
|
|
<Link href="/terms" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
|
conditions d'utilisation
|
|
</Link>{' '}
|
|
et la{' '}
|
|
<Link href="/privacy" className="text-[#1a4d2e] underline hover:text-[#f59e0b]">
|
|
politique de confidentialité
|
|
</Link>{' '}
|
|
<span className="text-red-500">*</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
|
>
|
|
{isSubmitting ? "Inscription..." : "S'inscrire"}
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|