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

Vous pouvez afficher les personnalisations de l’écran d’inscription 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 peut être utilisée à la place.

Prérequis

Le tenant a un Custom Domain vérifié
Le tenant a un Page Template configuré

Activer les locales fr et es

Accédez à votre , puis allez à Settings > General et activez les locales :

Afficher conditionnellement des champs personnalisés

Utilisez pour ajouter un template partiel au conteneur Prompt du prompt d’inscription form-content-end de . Lorsque la locale est es ou fr, vous pourriez vouloir afficher un message sur les Conditions d’utilisation ainsi qu’une case à cocher.

{% 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 :

// 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 :

Pour tester le résultat, allez dans Manage Dashboard et accédez à Branding > Universal Login > Options de personnalisation, 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).

Ajouter la validation

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 :

{% 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.

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.

Personnalisation de la marque

Personnalisation du code

Personnalisation tierce

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

Prérequis

Activer les locales fr et es

Afficher conditionnellement des champs personnalisés

Ajouter la validation

​Prérequis

​Activer les locales fr et es

​Afficher conditionnellement des champs personnalisés

​Ajouter la validation

Prérequis

Activer les locales fr et es

Afficher conditionnellement des champs personnalisés

Ajouter la validation