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]'}"
                 }
             }
         }
@@ -219,8 +224,8 @@ pipeline {
                     docker run --rm \
                       --volumes-from furious-jenkins \
                       -v tiptop-npm-cache-frontend:/npm-cache \
-                      --user "$(id -u):$(id -g)" \
                       -e HOME=/tmp \
+                      -e CHROMIUM_PATH=/usr/bin/chromium \
                       -e NODE_OPTIONS=--dns-result-order=ipv4first \
                       -e NPM_CONFIG_CACHE=/npm-cache \
                       -e NPM_CONFIG_FETCH_RETRIES=5 \
@@ -230,6 +235,8 @@ pipeline {
                       -w "${WORKSPACE}/frontend" \
                       node:22-alpine \
                       sh -c "
+                        apk add --no-cache chromium nss freetype harfbuzz ca-certificates ttf-freefont &&
+                        export CHROMIUM_PATH=/usr/bin/chromium &&
                         npm ci --prefer-offline --no-audit --no-fund &&
                         npm run lint &&
 			npm run test:coverage &&
@@ -327,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

deploy/dev/docker-compose.yml

@@ -42,12 +42,12 @@ services:
 
       # Injectés par le pipeline, jamais commités. Vides, les routes de
       # connexion externe répondent 503 sans bloquer le démarrage.
-      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID:-}"
-      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET:-}"
-      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID:-}"
-      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET:-}"
+      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID}"
+      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET}"
+      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID}"
+      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET}"
       # Vide, la vérification anti-robot Turnstile est désactivée.
-      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY:-}"
+      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY}"
 
     command: >
       sh -c "

deploy/preprod/docker-compose.yml

@@ -42,12 +42,12 @@ services:
 
       # Injectés par le pipeline, jamais commités. Vides, les routes de
       # connexion externe répondent 503 sans bloquer le démarrage.
-      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID:-}"
-      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET:-}"
-      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID:-}"
-      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET:-}"
+      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID}"
+      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET}"
+      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID}"
+      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET}"
       # Vide, la vérification anti-robot Turnstile est désactivée.
-      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY:-}"
+      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY}"
 
     command: >
       sh -c "

deploy/prod/docker-compose.yml

@@ -42,12 +42,12 @@ services:
 
       # Injectés par le pipeline, jamais commités. Vides, les routes de
       # connexion externe répondent 503 sans bloquer le démarrage.
-      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID:-}"
-      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET:-}"
-      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID:-}"
-      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET:-}"
+      GOOGLE_CLIENT_ID: "${GOOGLE_CLIENT_ID}"
+      GOOGLE_CLIENT_SECRET: "${GOOGLE_CLIENT_SECRET}"
+      FACEBOOK_APP_ID: "${FACEBOOK_APP_ID}"
+      FACEBOOK_APP_SECRET: "${FACEBOOK_APP_SECRET}"
       # Vide, la vérification anti-robot Turnstile est désactivée.
-      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY:-}"
+      TURNSTILE_SECRET_KEY: "${TURNSTILE_SECRET_KEY}"
 
     command: >
       sh -c "

frontend/scripts/prerender.js

@@ -30,7 +30,10 @@ async function main() {
   const server = await preview({ root, preview: { port: 4173, strictPort: false } })
   const base = server.resolvedUrls.local[0].replace(/\/$/, '')
 
-  const browser = await chromium.launch()
+  const browser = await chromium.launch({
+    executablePath: process.env.CHROMIUM_PATH || chromium.executablePath(),
+    headless: true,
+  })
   const page = await browser.newPage()
 
   for (const route of ROUTES) {

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/hooks/usePageMeta.js

@@ -1,37 +1,36 @@
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
-// Domaine de production, utilisé pour construire des URLs absolues
-// (canonical, og:url) à partir du chemin de la route courante.
 const SITE_URL = 'https://www.dsp5-archi-o24a-4-5-g4.fr'
 
-// Change la valeur d'un attribut sur le premier élément trouvé par le
-// sélecteur, et retourne de quoi la restaurer plus tard. N'écrit rien si
-// l'élément est absent du <head> (les balises de base vivent dans
-// index.html ; ce hook ne fait que les mettre à jour, jamais les créer).
 function setAttr(selector, attr, value) {
   if (value == null) return null
+
   const el = document.querySelector(selector)
   if (!el) return null
+
   const previous = el.getAttribute(attr)
   el.setAttribute(attr, value)
-  return () => el.setAttribute(attr, previous ?? '')
+
+  return () => {
+    if (previous == null) {
+      el.removeAttribute(attr)
+    } else {
+      el.setAttribute(attr, previous)
+    }
+  }
 }
 
-// Permet à une page de définir son propre <title>, sa meta description, son
-// URL canonique et ses balises Open Graph/Twitter le temps qu'elle est
-// affichée. La SPA n'a qu'un seul index.html : sans ce hook, toutes les
-// routes partagent les mêmes balises. Les valeurs précédentes sont
-// restaurées au démontage, donc quitter la page revient à l'état d'avant
-// (celui d'index.html, ou celui d'une page parente si elles s'enchaînent).
 export default function usePageMeta({ title, description, image } = {}) {
   const { pathname } = useLocation()
 
   useEffect(() => {
-    const previousTitle = document.title
-    if (title) document.title = title
+    if (title) {
+      document.title = title
+    }
 
     const url = `${SITE_URL}${pathname}`
+
     const restores = [
       setAttr('meta[name="description"]', 'content', description),
       setAttr('link[rel="canonical"]', 'href', url),
@@ -45,7 +44,6 @@ export default function usePageMeta({ title, description, image } = {}) {
     ].filter(Boolean)
 
     return () => {
-      document.title = previousTitle
       restores.forEach((restore) => restore())
     }
   }, [title, description, image, pathname])

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/pages/Profile.jsx

@@ -4,7 +4,6 @@ import UserNav from '../components/UserNav'
 import {
   changePasswordApi,
   meApi,
-  forgotPasswordApi,
   sendPasswordSetupLinkApi,
 } from '../services/auth'
 import { useHandleAuthError } from '../hooks/useHandleAuthError'

frontend/src/test/fonctionnel/Accueil.test.jsx

@@ -25,8 +25,10 @@ describe('Accueil - dates du jeu-concours', () => {
     expect(await screen.findByText('Du 15 novembre au 14 décembre 2026')).toBeInTheDocument()
     expect(screen.getByText(/ouverte du 15 novembre au 14 décembre 2026 inclus/)).toBeInTheDocument()
     expect(screen.getByText(/retirer jusqu'au 13 janvier 2027/)).toBeInTheDocument()
+    await vi.waitFor(() => {
       expect(document.title).toBe('Jeu-concours 100 % Gagnant du 15 novembre au 14 décembre | Thé Tip Top')
     })
+  })
 
   it("affiche les dates par défaut (2 → 31 octobre 2026) si l'API ne répond pas", async () => {
     getGameWindowApi.mockRejectedValue(new Error('réseau'))

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')
+  })
+
+})

frontend/src/test/unit/admin.service.test.js

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  getStatsApi,
+  getUsersApi,
+  drawWinnerApi,
+  getEmailingContactsApi,
+  getWinnerApi,
+  getEmployeesApi,
+  getEmployeeDeliveriesApi,
+  getDeliveryByTicketCodeApi,
+  createEmployeeApi,
+} from '../../services/admin'
+
+describe('admin service', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    localStorage.setItem('token', 'test-token')
+    vi.restoreAllMocks()
+  })
+
+  function mockFetch(data, ok = true, status = 200) {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn().mockResolvedValue({
+        ok,
+        status,
+        json: vi.fn().mockResolvedValue(data),
+      }),
+    )
+  }
+
+  it('getStatsApi retourne les statistiques', async () => {
+    mockFetch({ users: 10 })
+
+    const result = await getStatsApi()
+
+    expect(result).toEqual({ users: 10 })
+    expect(fetch).toHaveBeenCalledWith(
+      '/api/admin/stats',
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: 'Bearer test-token',
+        }),
+      }),
+    )
+  })
+
+  it('getUsersApi retourne les utilisateurs', async () => {
+    mockFetch({ users: [{ id: 1 }] })
+
+    await expect(getUsersApi()).resolves.toEqual({
+      users: [{ id: 1 }],
+    })
+  })
+
+  it('drawWinnerApi effectue un POST', async () => {
+    mockFetch({ winner: { id: 1 } })
+
+    const result = await drawWinnerApi()
+
+    expect(result).toEqual({ winner: { id: 1 } })
+    expect(fetch).toHaveBeenCalledWith(
+      '/api/admin/draw',
+      expect.objectContaining({
+        method: 'POST',
+      }),
+    )
+  })
+
+  it('getEmailingContactsApi retourne les contacts', async () => {
+    mockFetch({ contacts: ['test@example.com'] })
+
+    await expect(getEmailingContactsApi()).resolves.toEqual({
+      contacts: ['test@example.com'],
+    })
+  })
+
+  it('getWinnerApi retourne null si aucun gagnant', async () => {
+    mockFetch({}, false, 404)
+
+    await expect(getWinnerApi()).resolves.toBeNull()
+  })
+
+  it('getWinnerApi retourne le gagnant', async () => {
+    mockFetch({ winner: { id: 5 } })
+
+    await expect(getWinnerApi()).resolves.toEqual({
+      winner: { id: 5 },
+    })
+  })
+
+  it('getEmployeesApi retourne les employés', async () => {
+    mockFetch({ employees: [{ id: 10 }] })
+
+    await expect(getEmployeesApi()).resolves.toEqual({
+      employees: [{ id: 10 }],
+    })
+  })
+
+  it('getEmployeeDeliveriesApi retourne les remises', async () => {
+    mockFetch({
+      employee: { id: 10 },
+      deliveries: [],
+    })
+
+    await expect(getEmployeeDeliveriesApi(10)).resolves.toEqual({
+      employee: { id: 10 },
+      deliveries: [],
+    })
+  })
+
+  it('getDeliveryByTicketCodeApi encode le code du ticket', async () => {
+    mockFetch({ delivery: { id: 1 } })
+
+    await getDeliveryByTicketCodeApi(' ABC 123 ')
+
+    expect(fetch).toHaveBeenCalledWith(
+      '/api/admin/deliveries/ABC%20123',
+      expect.anything(),
+    )
+  })
+
+  it('createEmployeeApi crée un employé', async () => {
+    mockFetch({ employee: { id: 20 } })
+
+    await expect(
+      createEmployeeApi({
+        firstname: 'Jean',
+        lastname: 'Dupont',
+        email: 'jean@example.com',
+      }),
+    ).resolves.toEqual({
+      employee: { id: 20 },
+    })
+
+    expect(fetch).toHaveBeenCalledWith(
+      '/api/admin/employees',
+      expect.objectContaining({
+        method: 'POST',
+        body: JSON.stringify({
+          firstname: 'Jean',
+          lastname: 'Dupont',
+          email: 'jean@example.com',
+        }),
+      }),
+    )
+  })
+
+  it('transforme les erreurs API en Error', async () => {
+    mockFetch(
+      { message: 'Erreur serveur' },
+      false,
+      500,
+    )
+
+    await expect(getStatsApi()).rejects.toMatchObject({
+      message: 'Erreur serveur',
+      status: 500,
+    })
+  })
+})

frontend/vite.config.js

@@ -25,6 +25,14 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'html', 'lcov'],
       reportsDirectory: './coverage',
+      exclude: [
+        '**/*.webp',
+        '**/*.png',
+        '**/*.jpg',
+        '**/*.jpeg',
+        '**/*.gif',
+        '**/*.svg',
+      ],
     },
 
     // Le widget Turnstile ne doit pas bloquer les tests jsdom.