MEP

index.html

@@ -43,6 +43,6 @@
       })();
     </script>
     <script type="module" src="/src/index.js"></script>
-    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
   </body>
 </html>

package.json

@@ -34,7 +34,7 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-testing-library": "^6.2.2",
     "eslint-plugin-vitest": "^0.4.1",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.1",
     "vitest": "^2.0.0",
     "vitest-dom": "^0.1.1"
   },

src/App.js

@@ -52,9 +52,9 @@ function App() {
         <Router>
           <Routes>
             <Route path="/accueil" element={<GestionHash />}/>
-            <Route path="/nouveau-formulaire-conseiller" element={<PageCandidatureConseiller />}/>
-            <Route path="/nouveau-formulaire-structure" element={<PageCandidatureStructure />}/>
-            <Route path="/nouveau-formulaire-coordinateur" element={<PageCandidatureCoordinateur />}/>
+            <Route path="/candidature-conseiller" element={<PageCandidatureConseiller />}/>
+            <Route path="/candidature-poste-conseiller" element={<PageCandidatureStructure />}/>
+            <Route path="/candidature-poste-coordinateur" element={<PageCandidatureCoordinateur />}/>
             <Route path="/candidature-validee-conseiller" element={<PageCandidatureValideeConseiller />}/>
             <Route path="/candidature-validee-structure" element={<PageCandidatureValideeStructure />}/>
             <Route path="/candidature-confirmer-conseiller/:token" element={<PageConfirmationEmailCandidatureConseiller />}/>

src/components/Menu.js

@@ -97,8 +97,12 @@ function Menu() {
                 aria-expanded={activeMenu === 'cnfs'}
                 aria-controls="menu-cnfs"
                 onClick={onClickMenu}
-                {...(location.pathname.startsWith('/aide-candidat') || location.pathname.startsWith('/aide-structure') ? { 'aria-current': true } : {})}>
-                Recrutement
+                {
+                  ...(location.pathname.startsWith('/aide-candidat') ||
+                  location.pathname.startsWith('/aide-structure') ||
+                  location.pathname.startsWith('/candidature-poste-coordinateur') ? { 'aria-current': true } : {})
+                }>
+                Candidature
               </button>
               <div className={`fr-collapse fr-menu ${activeMenu === 'cnfs' ? 'fr-collapse--expanded' : ''}`} id="menu-cnfs">
                 <ul className="fr-menu__list">
@@ -115,7 +119,15 @@ function Menu() {
                       to="/aide-structure"
                       className="fr-nav__link"
                       {...(location.pathname.startsWith('/aide-structure') ? { 'aria-current': 'page' } : {})}>
-                      Recruter un conseiller num&eacute;rique
+                      Obtenir un poste de conseiller num&eacute;rique
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="/candidature-poste-coordinateur"
+                      className="fr-nav__link"
+                      {...(location.pathname.startsWith('/candidature-poste-coordinateur') ? { 'aria-current': 'page' } : {})}>
+                      Obtenir un poste de coordinateur de conseiller num&eacute;rique
                     </Link>
                   </li>
                 </ul>

src/components/commun/BoutonRadio.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function BoutonRadio({ children, id, nomGroupe }) {
+export default function BoutonRadio({ children, id, nomGroupe, onChange, checked }) {
   return (
     <div className="fr-fieldset__element">
       <div className="fr-radio-group">
-        <input type="radio" id={id} name={nomGroupe} value={id} required />
+        <input type="radio" id={id} name={nomGroupe} value={id} required onChange={onChange} checked={checked} />
         <label className="fr-label" htmlFor={id}>
           {children}
         </label>
@@ -18,5 +18,6 @@ BoutonRadio.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   nomGroupe: PropTypes.string,
-  value: PropTypes.string,
+  onChange: PropTypes.func,
+  checked: PropTypes.bool,
 };

src/components/commun/Captcha.jsx

@@ -1,19 +1,26 @@
 import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 
-const SITE_KEY = '84e24b30-44ca-488c-9260-ec80c290c166';
+const SITE_KEY = '0x4AAAAAAA0pjEgohPDZsyqu';
 
-export default function Captcha() {
+export default function Captcha({ setWidgetId }) {
   const captchaRef = useRef(null);
 
   useEffect(() => {
-    if (window.hcaptcha) {
-      window.hcaptcha.render(captchaRef.current, {
+    if (window.turnstile) {
+      window.turnstile.remove();
+      const widgetId = window.turnstile.render(captchaRef.current, {
         sitekey: SITE_KEY,
       });
+      setWidgetId(widgetId);
     }
   }, []);
 
   return (
     <div ref={captchaRef}></div>
   );
 }
+
+Captcha.propTypes = {
+  setWidgetId: PropTypes.func,
+};

src/components/commun/Datepicker.jsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function Datepicker({ children, id, isRequired = true, onChange, min }) {
+export default function Datepicker({ children, id, isRequired = true, onChange, min, error }) {
   return (
-    <div className="fr-input-group">
+    <div className={`fr-input-group${error ? ' fr-input-group--error' : ''}`}>
       <label className="fr-label" htmlFor={id}>
         {children}
       </label>
       <input className="fr-input cc-datepicker" id={id} type="date" required={isRequired} onChange={onChange} min={min} name={id} />
+      {error && (
+        <p id="text-input-error-desc-error" className="fr-error-text">
+          {error}
+        </p>
+      )}
     </div>
   );
 }
@@ -19,4 +24,5 @@ Datepicker.propTypes = {
   onChange: PropTypes.func,
   min: PropTypes.string,
   name: PropTypes.string,
+  error: PropTypes.string
 };