Bouton ProConnect

Le bouton ProConnect n’est pas directement régi par le DSFR mais il est inclu ici car il se base sur le bouton FranceConnect qui lui en fait partie. Comme ce dernier, son aspect visuel est à respecter pour permettre aux usagers de l’identifier plus facilement.

⚠️ Attention : pour éviter d’enfreindre d’éventuelles Content-Security-Policy (CSP) strictes, nous ne pouvons pas inclure le CSS de ProConnnect directement dans le rendu HTML du composant. Vous devez donc inclure le CSS vous même, avec deux options suggérées :

  1. la gem dsfr-assets incluse dans dsfr-view-components embarque le CSS du bouton ProConnect. Une fois les assets exposés, vous pouvez utiliser stylesheet_link_tag 'proconnect-button' dans votre template de login

  2. sinon récupérer et adapter le CSS directement depuis le site de ProConnect

Enfin, notez que notre implémentation et le CSS du dsfr-assetes utilisent la double classe .fr-connect et .fr-proconnect pour distinguer le bouton ProConnect du bouton original de FranceConnect.

Par défaut

Dans son implémentation la plus simple, le bouton POST sur l’attribut target:.

Code

= dsfr_proconnect_button(target: "#")

Résultat

Qu’est-ce que ProConnect ? 

<div class="fr-connect-group">
  <form class="button_to" method="post" action="#">
    <button class="fr-connect fr-proconnect" data-turbo="false" type="submit">
      <span class="fr-connect__login">
        S'identifier avec
      </span>
      <span class="fr-connect__brand">
        ProConnect
      </span>
    </button>
  </form>
  <p>
    <a target="_blank" rel="noopener" title="Qu’est-ce que ProConnect ? - nouvelle fenêtre" href="https://www.proconnect.gouv.fr/">
      Qu'est-ce que ProConnect ?
    </a>
  </p>
</div>

Surcharge du bouton

Si vous devez configurer le bouton au delà de l’implémentation par défaut, vous pouvez utiliser button_attributes:

Code

= dsfr_proconnect_button(target: "#", button_overrides: { class: "fr-foobar", method: :get })

Résultat

Qu’est-ce que ProConnect ? 

<div class="fr-connect-group">
  <form class="button_to" method="get" action="#">
    <button class="fr-connect fr-proconnect fr-foobar" data-turbo="false" type="submit">
      <span class="fr-connect__login">
        S'identifier avec
      </span>
      <span class="fr-connect__brand">
        ProConnect
      </span>
    </button>
  </form>
  <p>
    <a target="_blank" rel="noopener" title="Qu’est-ce que ProConnect ? - nouvelle fenêtre" href="https://www.proconnect.gouv.fr/">
      Qu'est-ce que ProConnect ?
    </a>
  </p>
</div>

Plus d’informations