db25bec3e5
- sentry - variables in manifest - some dynamic pages - breadcrumbs - dynamic page resolver
48 lines
2.1 KiB
Markdown
48 lines
2.1 KiB
Markdown
## Fonctionnement du composant `RecaptchaForm`
|
||
|
||
Le composant `RecaptchaForm` est un wrapper autour d’un `<form>` classique qui gère automatiquement :
|
||
|
||
1. L’injection du conteneur ReCaptcha (`.r_captcha`)
|
||
2. L’état actif ou inactif du formulaire via l’attribut `inert`
|
||
3. La récupération et l’injection du token reCAPTCHA dans les données du formulaire
|
||
4. L’affichage d’un bandeau d’alerte si les cookies reCAPTCHA ne sont pas encore acceptés
|
||
|
||
---
|
||
|
||
### 1. Props principales
|
||
|
||
| Prop | Type | Description |
|
||
|------|------|-------------|
|
||
| `onSubmit` | `(e: FormEvent<HTMLFormElement>) => void` | Callback appelé au submit avec le token déjà injecté dans `data["g-recaptcha-response"]`. |
|
||
| `data` | `TFormData & { "g-recaptcha-response"?: string }` | Objet représentant les données du formulaire. Le token reCAPTCHA y est ajouté automatiquement. |
|
||
| `children` | `React.ReactNode` | Champs et éléments du formulaire. |
|
||
| `banner` | `BannerClassName` | Optionnel. Permet de personnaliser le bandeau d’alerte affiché si le reCAPTCHA n’est pas activé. |
|
||
| `classNames` | `{ wrapperClassName?: string; formClassName?: string; }` | Optionnel. Permet de passer des classes CSS personnalisées pour le wrapper et le `<form>`. |
|
||
|
||
---
|
||
|
||
### 2. Comportement
|
||
|
||
- **Désactivation automatique du formulaire** :
|
||
Le formulaire est rendu `inert` si le reCAPTCHA n’est pas actif (cookie non accepté), empêchant l’interaction avec les champs et les boutons.
|
||
|
||
```ts
|
||
<form inert={!enabled} ... >
|
||
```
|
||
|
||
### Injection du token reCAPTCHA :
|
||
Au submit, si le reCAPTCHA est activé, le hook useRecaptcha récupère le token et l’injecte dans data["g-recaptcha-response"] avant d’appeler le callback onSubmit.
|
||
|
||
```tsx
|
||
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
||
...
|
||
data["g-recaptcha-response"] = token;
|
||
...
|
||
};
|
||
```
|
||
|
||
### Bandeau d’information (RecaptchaNotice) :
|
||
|
||
S’affiche uniquement si le reCAPTCHA n’est pas actif.
|
||
Invite l’utilisateur à accepter les cookies pour activer le formulaire.
|
||
Un bouton Accepter déclenche window.WebCookieNotice?.acceptCookie("recaptcha").
|