diff --git a/app/register/page.tsx b/app/register/page.tsx index 25111ba..7f51368 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -6,7 +6,7 @@ import { useAuth } from "@/contexts/AuthContext"; import { registerSchema, RegisterFormData } from "@/lib/validations"; import Link from "next/link"; import TeaIconsBackground from "@/components/TeaIconsBackground"; -import { ROUTES } from "@/utils/constants"; +import { ROUTES, API_BASE_URL, API_ENDPOINTS } from "@/utils/constants"; import ReCAPTCHA from "react-google-recaptcha"; export default function RegisterPage() { @@ -19,6 +19,14 @@ export default function RegisterPage() { const [captchaError, setCaptchaError] = useState(false); const recaptchaRef = useRef(null); + // Email validation state + const [emailStatus, setEmailStatus] = useState<{ + checking: boolean; + exists: boolean | null; + valid: boolean | null; + message: string; + }>({ checking: false, exists: null, valid: null, message: '' }); + const { register, handleSubmit, @@ -32,7 +40,42 @@ export default function RegisterPage() { setCaptchaError(false); }; + // Vérifier si l'email existe déjà + const checkEmail = async (email: string) => { + if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { + setEmailStatus({ checking: false, exists: null, valid: null, message: '' }); + return; + } + + setEmailStatus({ checking: true, exists: null, valid: null, message: 'Vérification...' }); + + try { + const response = await fetch(`${API_BASE_URL}${API_ENDPOINTS.AUTH.CHECK_EMAIL}`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email }), + }); + + const data = await response.json(); + + setEmailStatus({ + checking: false, + exists: data.exists, + valid: data.isValid, + message: data.message, + }); + } catch (error) { + console.error('Error checking email:', error); + setEmailStatus({ checking: false, exists: null, valid: null, message: '' }); + } + }; + const onSubmit = async (data: RegisterFormData) => { + // Vérifier si l'email existe déjà + if (emailStatus.exists) { + return; + } + // Vérifier le captcha if (!captchaToken) { setCaptchaError(true); @@ -129,16 +172,53 @@ export default function RegisterPage() { - +
+ checkEmail(e.target.value)} + className={`w-full px-4 py-3 border ${ + errors.email || emailStatus.exists + ? 'border-red-500' + : emailStatus.valid + ? 'border-green-500' + : 'border-gray-300' + } rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent pr-10`} + /> + {/* Status icon */} + {emailStatus.checking && ( +
+ + + + +
+ )} + {!emailStatus.checking && emailStatus.valid && ( +
+ + + +
+ )} + {!emailStatus.checking && emailStatus.exists && ( +
+ + + +
+ )} +
{errors.email && (

{errors.email.message}

)} + {!errors.email && emailStatus.message && ( +

+ {emailStatus.message} +

+ )} {/* Téléphone */} diff --git a/utils/constants.ts b/utils/constants.ts index 5384b98..40dc546 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -12,6 +12,7 @@ export const API_ENDPOINTS = { VERIFY_EMAIL: '/auth/verify-email', FORGOT_PASSWORD: '/auth/forgot-password', RESET_PASSWORD: '/auth/reset-password', + CHECK_EMAIL: '/auth/check-email', }, GAME: { PLAY: '/game/play',