Bonjour,
en V4, le paramétrage de la page de login se faisait via les zones Web (Menu Web>Zone)
En V5, quels sont les paramètres disponibles pour customiser la page de login ?
En V5 les “web zones” legacy ont été supprimées au profit de l’utilisation plus souple des ressources.
Pour les pages de “logon” il y en a 4:
-
LOGON_TITLEetLOGON_ADDONpour la page de login/password du provider interne -
LOGON_PROVIDERS_TITLEetLOGON_PROVIDERS_ADDONpour la page de sélection du provider
Attention à bien associer ces ressources à la disposition default
en 5.0.4, seule la LOGON_ADDON existe.
Oui les autres peuvent être créés (type HTML)
Je ne sais pas trop pourquoi LOGON_ADDON existe par défaut…
Attention à bien tous les associer à la disposition default
Pour customiser le logo et les styles il faut ajouter les resources: OAUTH2_LOGO (type image) et OAUTH2_STYLES (type CSS) (les nomages en OAUTH2_* sont “historiques”)
Ex de styles custom:
.auth-signin { background-color: #152935; }
.auth-signin-with img, .auth-signin button { border: none 0; box-shadow: 5px 5px 10px #3A3A3A; }
.auth-signin-logo { border-radius: 10px; }
.auth-signin-form { border-radius: 20px; max-width: 600px; background-color: #394b54; box-shadow: 5px 5px 10px #131b21; border: solid 1px #152935; }
.auth-signin-version { color: #C0C0C0; }
.auth-signin-fp a, .auth-signin-fp p, .auth-signin-reg a, .auth-signin-reg p { color: #D0D0D0; }
.auth-signin-fpz p { color: #404040; }
.auth-signin-title { color: #FFFFFF; background: transparent; text-align: center; }
.auth-signin-addon { border-radius: 5px; background: #F0F0F0; color: #202020; }
Ce qui donne ça:
Enfin, pour customiser l’image “bouton” du provider il faut aussi ajouter une ressource (idéalement un SVG ou un PNG de 400x100px) OAUTH2_SIGNIN_<nom du provider en majuscules>
L’idéal c’est de mettre toutes ces ressources dans un module ad hoc (qui contient aussi, par exemple, vos thèmes)
PS: il y avait un pb avec l’addon de la page de choix du provider ce sera corrigé dans le build de ce soir (5.0.5)
Ok,
Cela étant il faudrait revoir le templating de la page des providers pour ne pas a avoir à gérer des images qui mélange le logo, la font, le texte au sein d’un SVG. et permettre plus de souplesse sur l’affichage (ex mapping de champ des providers avec mustache + css via une ressource de la disposition responsive5).
Le cas d’usage qu’on me remonte souvent :
- de mettre un des providers en avant et d’autres en complément pas forcement sous forme de gros boutons
- voire de mettre le login/pwd local et les autres providers au sein d’une même page. Avoir 1 clique sur “Simplicité” pou accéder au login/pwd local (2 écrans) n’apporte rien terme d’UX
(ps : je veux bien le SVG pour KeyCloak)
Oui on va faire évoluer tout cas en 5.2+ mais en l’état dans le cas de @rosanneQuily ce que j’ai indiqué doit permettre de se rapprocher de ce qu’elle souhaite (hormis le choix de la langue)
Pour le SVG KeyCloak il faut demander à @Etienne c’est lui qui dessine nos boutons standards
L’astuce temporaire pour rester sur la page de choix du provider sans montrer le provider interne :
#auth-signin-with-simplicite { display: none; }
A mettre dans le OAUTH2_STYLES custom.
Attention: Ne pas le mettre hidden dans AUTH_PROVIDERS
Voici les SVG pour Keycloak en ENG et FR si besoin 
1 Like
Ok ajoutés au socle V5, merci @Etienne
Hello,
J’essais de voir pour supprimer les liens “I forgot my password” et “S’inscrire” de la page de connexion à une appli Simplicité, par le provider de base.
Dans le cas du premier lien, j’ai trouvé un paramètre système: USE_FORGOT_PWD, que j’ai alors passé à no et le résultat est correct.
Cependant, pour le second lien, je ne trouve aucun paramètre système ni autre façons de l’enlever. Faut-il le définir soi même ? Est-ce possible de l’enlever ?
J’aurais pensé à une option permettant de désactiver la création de comptes par Simplicité, étant donné qu’ils nous viennent tous d’un provider secondaire.
Merci d’avance :)
Le lien “register” est lié au paramétrage de vos groupes de droits.
Si au moins un de vos groupes est registrable vous aurez ce lien, sinon non.
1 Like
C’est bon, merci de la réponse réactive !
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.