fix: properly cleanup turnstile on unmount

Jenkinsfile

@@ -83,12 +83,17 @@ pipeline {
                         env.FRONTEND_API_URL = ''
 			env.FRONTEND_GA_ID = ""
                     }
+		    env.TURNSTILE_SITE_KEY = sh(
+    script: "grep '^TURNSTILE_SITE_KEY=' /opt/furious-ducks/secrets/tiptop-mail.env | cut -d= -f2-",
+    returnStdout: true
+).trim()
 
                     echo "Branche            : ${env.BRANCH_NAME}"
                     echo "Tag Docker         : ${env.IMAGE_TAG}"
                     echo "Environnement      : ${env.DEPLOY_ENV}"
                     echo "Déploiement activé : ${env.DEPLOY_ENABLED}"
                     echo "API frontend       : ${env.FRONTEND_API_URL}"
+		    echo "Turnstile          : ${env.TURNSTILE_SITE_KEY ? '[SET]' : '[EMPTY]'}"
                 }
             }
         }
@@ -329,6 +334,13 @@ stage('SonarQube Quality Gate') {
 
             steps {
                 sh '''
+                    set -a
+                    . /opt/furious-ducks/secrets/tiptop-mail.env
+                    set +a
+
+                    test -n "${TURNSTILE_SITE_KEY}"
+                    echo "Turnstile site key chargée (longueur: ${#TURNSTILE_SITE_KEY})"
+
                     docker build \
                       -t "${BACKEND_IMAGE}:${IMAGE_TAG}" \
                       backend

frontend/src/components/Captcha.jsx

@@ -1,19 +1,125 @@
-import { Turnstile } from '@marsidev/react-turnstile'
+import { useEffect, useRef } from 'react'
 import { CAPTCHA_ENABLED, TURNSTILE_SITE_KEY } from '../config/captcha'
 
-// `ref` expose reset() : un jeton Turnstile n'est valable qu'une fois, il faut
-// en redemander un après chaque envoi refusé.
-export default function Captcha({ ref, onToken }) {
-  if (!CAPTCHA_ENABLED) return null
+const TURNSTILE_SCRIPT_ID = 'cf-turnstile-script'
+const TURNSTILE_SCRIPT_URL =
+  'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'
+
+export default function Captcha({ onToken }) {
+  const containerRef = useRef(null)
+  const widgetIdRef = useRef(null)
+
+  useEffect(() => {
+    if (!CAPTCHA_ENABLED || !TURNSTILE_SITE_KEY || !containerRef.current) {
+      return
+    }
+
+    let cancelled = false
+    let localWidgetId = null
+
+    const renderWidget = () => {
+      if (
+        cancelled ||
+        !containerRef.current ||
+        !window.turnstile
+      ) {
+        return
+      }
+
+      // Nettoyage d'un éventuel widget précédent.
+      if (localWidgetId !== null) {
+        try {
+          window.turnstile.remove(localWidgetId)
+        } catch {
+          // Widget déjà supprimé.
+        }
+
+        localWidgetId = null
+        widgetIdRef.current = null
+      }
+
+      containerRef.current.innerHTML = ''
+
+      localWidgetId = window.turnstile.render(
+        containerRef.current,
+        {
+          sitekey: TURNSTILE_SITE_KEY,
+          language: 'fr',
+          size: 'flexible',
+          appearance: 'always',
+
+          callback: (token) => {
+            onToken(token)
+          },
+
+          'expired-callback': () => {
+            onToken('')
+          },
+
+          'error-callback': () => {
+            onToken('')
+          },
+        }
+      )
+
+      widgetIdRef.current = localWidgetId
+    }
+
+    const existingScript = document.getElementById(
+      TURNSTILE_SCRIPT_ID
+    )
+
+    if (window.turnstile) {
+      renderWidget()
+    } else if (existingScript) {
+      existingScript.addEventListener('load', renderWidget, {
+        once: true,
+      })
+    } else {
+      const script = document.createElement('script')
+
+      script.id = TURNSTILE_SCRIPT_ID
+      script.src = TURNSTILE_SCRIPT_URL
+      script.async = true
+      script.defer = true
+
+      script.addEventListener('load', renderWidget, {
+        once: true,
+      })
+
+      document.head.appendChild(script)
+    }
+
+    return () => {
+      cancelled = true
+
+      const widgetId =
+        localWidgetId !== null
+          ? localWidgetId
+          : widgetIdRef.current
+
+      if (widgetId !== null && window.turnstile) {
+        try {
+          window.turnstile.remove(widgetId)
+        } catch {
+          // Widget déjà supprimé.
+        }
+      }
+
+      localWidgetId = null
+      widgetIdRef.current = null
+    }
+  }, [onToken])
+
+  if (!CAPTCHA_ENABLED || !TURNSTILE_SITE_KEY) {
+    return null
+  }
 
   return (
-    <Turnstile
-      ref={ref}
-      siteKey={TURNSTILE_SITE_KEY}
-      options={{ language: 'fr', size: 'flexible' }}
-      onSuccess={onToken}
-      onExpire={() => onToken('')}
-      onError={() => onToken('')}
+    <div
+      ref={containerRef}
+      id="turnstile-captcha"
+      className="w-full min-h-[65px] flex justify-center"
     />
   )
 }

frontend/src/pages/Admin.jsx

@@ -236,8 +236,11 @@ export default function Admin() {
               </span>
             </div>
 
-            <form onSubmit={handleSaveGameSettings} className="mt-4 pt-4 border-t border-gray-200 flex flex-wrap items-end gap-3">
-              <div className="flex-1 min-w-[220px]">
+            <form
+  onSubmit={handleSaveGameSettings}
+  className="mt-4 pt-4 border-t border-gray-200 flex flex-col sm:flex-row sm:items-end gap-3"
+>
+              <div className="w-full sm:flex-1 sm:min-w-[220px]">
                 <label htmlFor="game-start" className="block text-xs font-medium text-gray-700 mb-1">
                   {stats.gameWindow.configured ? 'Corriger la date de début' : 'Date de début du jeu-concours'}
                 </label>
@@ -253,7 +256,7 @@ export default function Admin() {
               <button
                 type="submit"
                 disabled={settingsSaving || !startDateInput}
-                className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2 rounded-lg transition-colors text-xs sm:text-sm"
+                className="w-full sm:w-auto bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2 rounded-lg transition-colors text-xs sm:text-sm whitespace-nowrap"
               >
                 {settingsSaving ? 'Enregistrement…' : stats.gameWindow.configured ? 'Mettre à jour' : 'Lancer le jeu'}
               </button>

frontend/src/test/unit/Captcha.test.jsx

@@ -0,0 +1,139 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { render, cleanup, waitFor } from '@testing-library/react'
+
+vi.mock('../../config/captcha', () => ({
+  CAPTCHA_ENABLED: true,
+  TURNSTILE_SITE_KEY: '0x4AAAAAAE0AF9mR2Y1luOeG',
+}))
+
+import Captcha from '../../components/Captcha'
+
+describe('Captcha', () => {
+  let originalTurnstile
+
+  beforeEach(() => {
+    originalTurnstile = window.turnstile
+
+    document.head
+      .querySelectorAll('#cf-turnstile-script')
+      .forEach((script) => script.remove())
+
+    window.turnstile = undefined
+  })
+
+  afterEach(() => {
+    cleanup()
+    window.turnstile = originalTurnstile
+    vi.restoreAllMocks()
+  })
+
+  it('rend le widget lorsque Turnstile est déjà disponible', async () => {
+    const onToken = vi.fn()
+
+    window.turnstile = {
+      render: vi.fn((container, options) => {
+        options.callback('token-test')
+        return 'widget-1'
+      }),
+      remove: vi.fn(),
+    }
+
+    render(<Captcha onToken={onToken} />)
+
+    await waitFor(() => {
+      expect(window.turnstile.render).toHaveBeenCalled()
+    })
+
+    expect(onToken).toHaveBeenCalledWith('token-test')
+  })
+
+  it('gère expiration et erreur du widget', async () => {
+    const onToken = vi.fn()
+    let options
+
+    window.turnstile = {
+      render: vi.fn((container, opts) => {
+        options = opts
+        return 'widget-2'
+      }),
+      remove: vi.fn(),
+    }
+
+    render(<Captcha onToken={onToken} />)
+
+    await waitFor(() => {
+      expect(options).toBeDefined()
+    })
+
+    options['expired-callback']()
+    options['error-callback']()
+
+    expect(onToken).toHaveBeenNthCalledWith(1, '')
+    expect(onToken).toHaveBeenNthCalledWith(2, '')
+  })
+
+  it('charge Turnstile lorsque le script existe déjà', async () => {
+    const onToken = vi.fn()
+
+    const script = document.createElement('script')
+    script.id = 'cf-turnstile-script'
+    document.head.appendChild(script)
+
+    render(<Captcha onToken={onToken} />)
+
+    window.turnstile = {
+      render: vi.fn(() => 'widget-3'),
+      remove: vi.fn(),
+    }
+
+    script.dispatchEvent(new Event('load'))
+
+    await waitFor(() => {
+      expect(window.turnstile.render).toHaveBeenCalled()
+    })
+  })
+
+  it('supprime le widget au démontage', async () => {
+    const onToken = vi.fn()
+    const remove = vi.fn()
+
+    window.turnstile = {
+      render: vi.fn(() => 'widget-4'),
+      remove,
+    }
+
+    const { unmount } = render(<Captcha onToken={onToken} />)
+
+    await waitFor(() => {
+      expect(window.turnstile.render).toHaveBeenCalledTimes(1)
+    })
+
+    // Le widget est bien créé avant le démontage.
+    unmount()
+
+    expect(remove).toHaveBeenCalledWith('widget-4')
+  })
+
+  it('tolère une erreur lors de la suppression du widget', async () => {
+    const onToken = vi.fn()
+    const remove = vi.fn(() => {
+      throw new Error('widget déjà supprimé')
+    })
+
+    window.turnstile = {
+      render: vi.fn(() => 'widget-5'),
+      remove,
+    }
+
+    const { unmount } = render(<Captcha onToken={onToken} />)
+
+    await waitFor(() => {
+      expect(window.turnstile.render).toHaveBeenCalledTimes(1)
+    })
+
+    expect(() => unmount()).not.toThrow()
+
+    expect(remove).toHaveBeenCalledWith('widget-5')
+  })
+
+})