Feat: hiérarchiser les fournisseurs d'identité sur la page de connexion

[IdrissaD]

Fixes #3912

En lien avec la PR 144 de UsersHub-authentification-module

• transformation des blocs de connexion local-provider et des autres fournisseurs en templates
• refonte de la logique d'affichage des fournisseurs avec une séparation en primaryProviders et secondaryProviders
• création d'un composant details pour masquer les secondaryProviders
• traduction de tous les éléments de la page en français et anglais

[christophe-ramet]

J'ai revue et testé la PR et ça me semble top à part les petites remarques (qui sont des détails)

Pas directement lié à cette PR mais ça m'a permis de me rendre compte que le fait qu'on ne centre pas le fournisseur d'identité donne un résultat un peu moche :

Pour moi centrer parrait plus clean

On pourrait peut être profiter de cette PR qui modifie pas mal d'élément de la page pour centrer le founisseur ?

[christophe-ramet]

Ce serait pas mal de mettre un br ici car quand on a juste l'auth geonature en secondary, ça fait un peu encombré

[IdrissaD]

Je suis d'accord mais je me suis débattu avec des br dans tous les sens, y compris derrière des ngIf, dans et en-dehors des boucles, etc., sans arriver à un résultat satisfaisant dans toutes les situations. Si j'ajoute un br entre details et summary, quand l'auth GeoNature est première des secondary, c'est bien, et quand elle est deuxième :

Si t'as une idée d'agencement précis des br qui donne un truc sympa dans toutes les configurations je suis preneur !

Je viens de mettre deux br au-dessus de details et un entre details et summary pour couvrir les cas les plus courants :

• auth GeoNature seule primary, un ou plusieurs secondary
• un ou plusieurs primary autres que GeoNature, et auth GeoNature première des secondary

Dans les autres cas, c'est moins esthétique.

[IdrissaD]

Tout à fait d'accord avec le centrage, mais idem que pour les sauts de ligne, j'avais déjà essayé de centrer dans toutes les balises possibles et j'ai pas réussi... Mes limites en CSS sont très rapidement atteintes haha
Si tu peux me dire ce que t'as ajouté, ou l'ajouter toi-même, je veux bien !

[christophe-ramet]

Top merci.

Ce que je te propose de mettre :

                <div>
                  <ng-container *ngFor="let provider of primaryProviders">
                    <div class="text-center">
                      <ng-container
                        *ngTemplateOutlet="providerTemplate; context: { provider: provider }"
                      />
                    </div>
                    <br *ngIf="primaryProviders.length > 1"/>
                  </ng-container>

                  <ng-container *ngIf="hasSecondaryProviders">
                    <br/>
                    <details>
                      <summary>{{ 'Authentication.OtherAuthProviders' | translate }}</summary>
                      <br/>
                      <ng-container *ngFor="let provider of secondaryProviders">
                        <div class="text-center">
                          <ng-container
                            *ngTemplateOutlet="providerTemplate; context: { provider: provider }"
                          />
                        </div>
                        <br *ngIf="secondaryProviders.length > 1"/>
                      </ng-container>
                    </details>
                  </ng-container>
                </div>

Et ça donne ça dans les différents cas :

[IdrissaD]

Si simple, merci !
J'en ai profité pour ajouter une condition sur les br post-fournisseur afin de pas les afficher si c'est le dernier fournisseur de la liste.

[christophe-ramet]

C'est testé et bon pour moi merci ! :)