> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-feat-init-gt-translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Découvrez comment utiliser des variables dynamiques pour afficher des prompts d’inscription et de connexion Universal Login localisés.

# Utiliser des variables dynamiques pour internationaliser des éléments de formulaire personnalisés

Vous pouvez afficher les [personnalisations de l’écran d’inscription](/docs/fr-ca/customize/login-pages/universal-login/customize-signup-and-login-prompts) différemment en fonction des données contextuelles. Elles utilisent la variable `locale` pour afficher conditionnellement les champs du formulaire et définir le comportement de validation.

Le cas d’utilisation suivant s’appuie sur la variable `locale` pour afficher un message de Conditions d’utilisation et une case à cocher. Toute variable exposée aux [modèles de page](/docs/fr-ca/customize/login-pages/universal-login/customize-templates#available-variables) peut être utilisée à la place.

<h3 id="prerequisites">
  Prérequis
</h3>

* Le tenant a un [Custom Domain](/docs/fr-ca/customize/custom-domains) vérifié
* Le tenant a un Page Template configuré

<h3 id="enable-fr-and-es-locales">
  Activer les locales fr et es
</h3>

Accédez à votre <Tooltip tip="Auth0 Dashboard : le principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, puis allez à Settings > General et activez les locales :

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/4yCGYTZ3RDyeULWIFcyHSv/01ce1985b1f8655aff0a0a2b4db6bee0/Language_Picker_-_EN.png" alt="" />
</Frame>

<h3 id="conditionally-render-custom-fields">
  Afficher conditionnellement des champs personnalisés
</h3>

Utilisez <Tooltip tip="Management API : un produit qui permet aux clients d’effectuer des tâches administratives." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Management+API">Management API</Tooltip> pour ajouter un template partiel au conteneur Prompt du prompt d’inscription `form-content-end` de <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur l’Authorization Server d’Auth0, pour vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Universal+Login">Universal Login</Tooltip>. Lorsque la locale est `es` ou `fr`, vous pourriez vouloir afficher un message sur les Conditions d’utilisation ainsi qu’une case à cocher.

```liquid lines theme={null}
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}
```

La requête suivante est envoyée au point de terminaison **Définir le texte personnalisé pour un prompt précis** de la [Management API](https://auth0.com/docs/api/management/v2/prompts/put-custom-text-by-language) :

```javascript lines theme={null}
// PUT prompts/signup/partials

{
  "signup": {
    "form-content-end": "{% if locale..."
  }
}
```

Votre prompt d’inscription affiche maintenant un message de conditions d’utilisation et une case à cocher uniquement lorsque la locale est définie sur `fr` ou `es` :

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/3zBadIHnkl9bIWP9BH1lLj/b2a6d9932be3bbb150b4dbbf76bc6599/2024-01-31_16-17-04.png" alt="" />
</Frame>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/3rwVd1h1Av7QzOEEWoCHhF/519a2eb5ac99c3801861c3372b81c0b9/2024-01-31_16-17-16.png" alt="" />
</Frame>

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/2qYzAI6QVBLmqCW2FTAiGj/f19c59d79c67c63782b70995dbd223c3/2024-01-31_16-17-24.png" alt="" />
</Frame>

Pour tester le résultat, allez dans **Manage Dashboard** et accédez à [Branding > Universal Login > Options de personnalisation](https://manage.auth0.com/dashboard/us/dev-6endizjt/universal-login/customizations/colors), puis cliquez avec le bouton droit sur le **bouton Try** et copiez l’adresse du lien. Ajoutez les paramètres de requête suivants à l’URL copiée, puis ouvrez la nouvelle URL : `&screen_hint=signup&ui_locales=fr` (ou `es`).

<h3 id="add-validation">
  Ajouter la validation
</h3>

Lorsque la locale est `fr,`, vous pouvez valider que la case à cocher est cochée avant de poursuivre. Mettez à jour le template partiel à l’aide du code de validation suivant :

```liquid lines expandable theme={null}
{% if locale == 'fr' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      J'accepte les
      <a href="https://fr.example.com/tos">termes et conditions</a>
    </label>

    <!-- NOUVEAU -->
    <div
      class="ulp-error-info"
      data-ulp-validation-function="requiredFunction"
      data-ulp-validation-event-listeners="change">
      Vous devez accepter les termes et conditions pour continuer
    </div>
    <!-- FIN NOUVEAU -->
  </div>
{% endif %}
{% if locale == 'es' %}
  <div class="ulp-field">
    <input
      type="checkbox"
      name="ulp-terms-of-service"
      id="terms-of-service">
    <label for="terms-of-service">
      Estoy de acuerdo con los
      <a href="https://es.example.com/tos">términos y condiciones</a>
    </label>
  </div>
{% endif %}

<!-- NOUVEAU -->
<script>
  function requiredFunction(element, formSubmitted) {
    if (! formSubmitted) {
      return true;
    }
    return element.checked;
  }
</script>
<!-- FIN NOUVEAU -->
```

Avec cette validation en place, seuls les utilisateurs dont la locale est `fr` doivent consentir aux conditions d’utilisation.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/auth0-feat-init-gt-translations/docs/images/cdy7uua7fh8z/7jBPuIe62PDNiIPUYzVVix/74de519659de4a8b4329165e799b1815/2024-01-31_16-20-54.png" alt="" />
</Frame>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Les validations de ce cas d’utilisation se font côté client et visent à faciliter l’expérience utilisateur. Rien ne garantit qu’elles s’exécutent; par exemple, Javascript peut être désactivé dans le navigateur de l’utilisateur. De plus, les validations peuvent être modifiées par des personnes curieuses ou malveillantes. Afin de garantir l’intégrité de la logique de validation, les validations côté client devraient être combinées à des validations côté serveur.
</Callout>