ajout de la connection via facebook et du captcha

frontend/src/pages/Inscription.jsx

@@ -3,6 +3,8 @@ import { Link, useNavigate } from 'react-router-dom'
 import { registerApi, verifyCodeApi } from '../services/auth'
 import { useAuth } from '../context/AuthContext'
 import usePageMeta from '../hooks/usePageMeta'
+import Captcha from '../components/Captcha'
+import { CAPTCHA_ENABLED } from '../config/captcha'
 
 // Une naissance ne peut pas être dans le futur : borne haute du sélecteur.
 const AUJOURD_HUI = new Date().toISOString().split('T')[0]
@@ -50,6 +52,8 @@ export default function Inscription() {
   const [showPassword, setShowPassword]   = useState(false)
   const [error, setError]         = useState('')
   const [loading, setLoading]     = useState(false)
+  const [captchaToken, setCaptchaToken] = useState('')
+  const captchaRef = useRef()
 
   // Code à 4 chiffres
   const [digits, setDigits]       = useState(['', '', '', ''])
@@ -59,10 +63,10 @@ export default function Inscription() {
 
   const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value })
 
-  // Même route que la connexion : Google crée le compte à la première venue.
-  const handleGoogleSignup = () => {
+  // Même route que la connexion : le provider crée le compte à la première venue.
+  const handleOAuthSignup = (provider) => {
     const apiUrl = import.meta.env.VITE_API_URL || ''
-    window.location.href = `${apiUrl}/api/auth/google`
+    window.location.href = `${apiUrl}/api/auth/${provider}`
   }
 
   // Étape 1 — Inscription
@@ -85,11 +89,15 @@ export default function Inscription() {
         birthdate: form.birthdate,
         gender: form.gender,
         marketingOptIn,
+        captchaToken,
       })
       setEmail(form.email)
       setStep('verify')
     } catch (err) {
       setError(err.message)
+      // Le jeton a été consommé par le backend : on en redemande un.
+      captchaRef.current?.reset()
+      setCaptchaToken('')
     } finally {
       setLoading(false)
     }
@@ -183,7 +191,7 @@ export default function Inscription() {
           Le code expire dans 15 minutes.{' '}
           <button
             type="button"
-            onClick={() => { setStep('form'); setDigits(['', '', '', '']); setCodeError('') }}
+            onClick={() => { setStep('form'); setDigits(['', '', '', '']); setCodeError(''); setCaptchaToken('') }}
             className="text-[#006B6B] hover:underline"
           >
             Recommencer
@@ -281,7 +289,9 @@ export default function Inscription() {
           </span>
         </label>
 
-        <button type="submit" disabled={loading || !acceptedTerms}
+        <Captcha ref={captchaRef} onToken={setCaptchaToken} />
+
+        <button type="submit" disabled={loading || !acceptedTerms || (CAPTCHA_ENABLED && !captchaToken)}
           className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors">
           {loading ? 'Inscription…' : "S'inscrire"}
         </button>
@@ -294,7 +304,7 @@ export default function Inscription() {
       </div>
 
       <div className="grid grid-cols-2 gap-3">
-        <button type="button" onClick={handleGoogleSignup} className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
+        <button type="button" onClick={() => handleOAuthSignup('google')} className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
           <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
             <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
             <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
@@ -303,7 +313,7 @@ export default function Inscription() {
           </svg>
           Google
         </button>
-        <button type="button" disabled title="Inscription Facebook bientôt disponible" className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-500 cursor-not-allowed opacity-60">
+        <button type="button" onClick={() => handleOAuthSignup('facebook')} className="flex items-center justify-center gap-2 border border-gray-200 rounded-lg py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
           <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
             <circle cx="12" cy="12" r="12" fill="#1877F2" />
             <path fill="#FFFFFF" d="M13.5 21v-8h2.7l.4-3h-3.1V8.1c0-.9.3-1.6 1.7-1.6h1.8V3.8c-.3 0-1.4-.1-2.6-.1-2.6 0-4.4 1.6-4.4 4.5V10H7.2v3H10v8h3.5z" />