Développement #47406
Personnaliser l'interface de connexion selon le FS OIDC source du SSO.
0%
Description
Par exemple : un logo, le nom du FS et la couleur pour ce nom. (Comme sur GLC.)
Files
Related issues
Associated revisions
display service logo and name on login and registration pages (#47406)
History
Updated by Mikaël Ates over 4 years ago
De #47401 :
Quand à déplacer la customization au niveau du service lui même, c'est à voir parce qu'en fait ça dépend plus de l'OU que du service (après on peut configurer la même chose dans chaque service), mais on pourrait prévoir un logo optionnel par OU et par service, en gros on a trois choses, le nom (mais le nom de l'OU ou du service fera l'affaire), le logo (un champ logo = ImageField() et basta) et la couleur, un champ couleur ? Si vous pensez que ça peut suffire pour 99% des clients on fait ça. Dans le code on devrait pouvoir faire des <style> body { --parner-color: {% firstof service.color service.ou.color "var(--default-partner-color)" %}; } </style>
Updated by Mikaël Ates almost 3 years ago
https://dev.entrouvert.org/issues/63086#note-4 :
Ce devrait être en fait, pour être exhaustif : « toutes les pages qui apparaissent dans un parcours de sso ».
Updated by Mikaël Ates almost 3 years ago
- Related to Support #63086: idp_oidc : simplifier la page de consentement added
Updated by Serghei Mihai almost 3 years ago
- File register.png register.png added
- File login.png login.png added
- Status changed from Nouveau to En cours
Appel aux CPF (et tout le monde) pour un texte neutre qui conviendrait à tout les clients.
Sur le page d'inscription on reste sur le même message: "Connexion à ..." car après la création du compte l'usager sera rédirigé vers le service.
Updated by Frédéric Péters almost 3 years ago
Perso à penser qu'on ne peut pas construire une phrase avec des petits bouts, ça va finir en "Connexion à Portail famille" et tristesse.
Plutôt juste "Connexion · Le nom du service" (ou un séparateur moins clivant).
Updated by Thomas Noël almost 3 years ago
Dans les parcours déjà vus mille fois, une fois qu'on aura créé son compte sur Publik, on arrivera sur un portail famille qui demandera... de se connecter (avec ses identifiants famille, pour fédéreration). Donc badaboum "Connexion" oui mais en fait non.
Je suis pour ne rien mettre du tout, rester sur la description du ticket, juste le nom du service, coloré.
Updated by Serghei Mihai almost 3 years ago
- File 0002-display-service-logo-and-name-on-login-and-registrat.patch 0002-display-service-logo-and-name-on-login-and-registrat.patch added
- File 0001-misc-add-logo-and-text-color-for-service-and-OU.patch 0001-misc-add-logo-and-text-color-for-service-and-OU.patch added
- Status changed from En cours to Solution proposée
- Patch proposed changed from No to Yes
Je suis parti sur la proposition de Thomas d'afficher uniquement le nom du service/ou.
Une petite adaptation des tests pour faire accepter à webtest l'ajout d'un FileField.
Updated by Benjamin Dauvergne (en congé) almost 3 years ago
- Status changed from Solution proposée to En cours
- ajouter la suppression du logo quand on supprime le service (dans une surcharge de delete())
- ajouter un validateur coté serveur pour la regexp
#[0-9a-fA-F]{6}
sur le champ text_color - je ne comprends pas les modifications à idtoken_duration, c'est un DurationField, le type est timedelta pas une chaîne contenant un entier, mais même s'il y a un souci ça doit aller dans un autre ticket
On aurait pu avoir des tests plus simples sans passer par le module OIDC mais soit (poser le service en session puis appeler la page login).
Updated by Frédéric Péters almost 3 years ago
Pourquoi alt="{% firstof service.name service.ou.name %}" ? (qui répète une info qui arrive juste après)
text_color = models.CharField(verbose_name=_('Colour'),
color ou colour ?
max_length=7
je monterais la limite, permettre que peut-être un canal alpha soit utilisé, ou une des nouvelles notations alternatives, sans avoir à taper une migration plus tard.
{% if text_color %} style="color: {{ text_color }}"
Si tu veux vraiment, je proposerais alors plutôt que tu tapes une classe sur l'élément + une balise <style>, celle-ci dans un {% block %} django distinct, ça permettra ainsi à une intégration graphique d'ajuster l'exploitation de la couleur. Et que ça soit appelé "color" plutôt que "text_color", qu'il n'y ait pas de honte à l'utiliser pour faire une bordure, si jamais.
(sur le fond je serais pour dégager la sélection de la couleur, ça va juste amener des trucs discordants et peu lisibles mais comme ça fait partie des attributs évoqués le long du ticket, oublions)
<h2>{{ view.title }}</h2>
puis
<h2> avec le nom du service
Va y avoir commentaire RGAA sur la hiérarchisation des titres. Le plus simple est peut-être que ça ne soit pas un titre ?
<a href="{{ home_url }}"
Surtout avec un style qui ne marque pas du tout que c'est un lien, je ne vois pas pourquoi ça serait un lien. Ou alors que le logo soit aussi repris dans le lien.
Updated by Serghei Mihai almost 3 years ago
Benjamin Dauvergne a écrit :
- ajouter la suppression du logo quand on supprime le service (dans une surcharge de delete())
Ok.
- ajouter un validateur coté serveur pour la regexp
#[0-9a-fA-F]{6}
sur le champ text_color
En lisant le commentaire de Frédéric je me dis qu'il est possible qu'on définisse la couleur par son code hexa, rgb(a), ou simplement avec un texte: "red", "cyan" etc, que les navigos comprennent.
Je vais donc zapper le validateur.
- je ne comprends pas les modifications à idtoken_duration, c'est un DurationField, le type est timedelta pas une chaîne contenant un entier, mais même s'il y a un souci ça doit aller dans un autre ticket
C'est lié à la manière dont webtest traite les formulaires avec des fichiers (avec l'ajout du logo). Il passe les données à encode_multipart
qui tente de convertir toutes les valeurs en string (https://docs.pylonsproject.org/projects/webtest/en/latest/_modules/webtest/app.html#TestApp.encode_multipart), et ça pète ValueError(('Value for field {} is a {} ({})...'
.
On aurait pu avoir des tests plus simples sans passer par le module OIDC mais soit (poser le service en session puis appeler la page login).
Oui, mais je trouve plus clair quand on réproduit le vrai parcours qui affiche les infos. Mais pas de soucis pour balancer le service en session.
Updated by Benjamin Dauvergne (en congé) almost 3 years ago
Serghei Mihai a écrit :
- ajouter un validateur coté serveur pour la regexp
#[0-9a-fA-F]{6}
sur le champ text_colorEn lisant le commentaire de Frédéric je me dis qu'il est possible qu'on définisse la couleur par son code hexa, rgb(a), ou simplement avec un texte: "red", "cyan" etc, que les navigos comprennent.
Je vais donc zapper le validateur.
La remarque de Fred concerne la longueur du champ pour ne pas à migrer plus tard, limiter les valeurs à un seul format ne nécessitera pas de migration pour changer ça (mais bon dans l'absolu les migrations sur des tables avec 3 lignes ce n'est pas un souci) ou en nécessitera une quand même si tu limites à 9 caractères, met 32 mais valide l'hexa pour l'instant. Je ne vois aucun intérêt à pouvoir écrire cyan
ou hsl(...)
alors qu'on force un sélecteur natif en front.
- je ne comprends pas les modifications à idtoken_duration, c'est un DurationField, le type est timedelta pas une chaîne contenant un entier, mais même s'il y a un souci ça doit aller dans un autre ticket
C'est lié à la manière dont webtest traite les formulaires avec des fichiers (avec l'ajout du logo). Il passe les données à
encode_multipart
qui tente de convertir toutes les valeurs en string (https://docs.pylonsproject.org/projects/webtest/en/latest/_modules/webtest/app.html#TestApp.encode_multipart), et ça pèteValueError(('Value for field {} is a {} ({})...'
.
Sauf que c'est aussi utilisé pour initialisé un modèle, pour changer moins de code je dirai de mettre dans l'init du formulaire dans test_admin (mais c'est bizarre que ça ait marché avant aussi...):
if isinstance(value, datetime.timedelta): value = f'{value.total_seconds()}'
On aurait pu avoir des tests plus simples sans passer par le module OIDC mais soit (poser le service en session puis appeler la page login).
Oui, mais je trouve plus clair quand on réproduit le vrai parcours qui affiche les infos. Mais pas de soucis pour balancer le service en session.
C'est moins unitaire, on veut juste tester que si un service est en session, les choses s'affichent, mais bon passons.
Updated by Serghei Mihai almost 3 years ago
- File 0002-display-service-logo-and-name-on-login-and-registrat.patch 0002-display-service-logo-and-name-on-login-and-registrat.patch added
- File 0001-misc-add-logo-and-text-color-for-service-and-OU.patch 0001-misc-add-logo-and-text-color-for-service-and-OU.patch added
- Status changed from En cours to Solution proposée
Frédéric Péters a écrit :
Pourquoi alt="{% firstof service.name service.ou.name %}" ? (qui répète une info qui arrive juste après)
Utilisé une seule fois.
text_color = models.CharField(verbose_name=_('Colour'),
color ou colour ?
Colour.
max_length=7
je monterais la limite, permettre que peut-être un canal alpha soit utilisé, ou une des nouvelles notations alternatives, sans avoir à taper une migration plus tard.
Ok, monté à 32.
{% if text_color %} style="color: {{ text_color }}"
Si tu veux vraiment, je proposerais alors plutôt que tu tapes une classe sur l'élément + une balise <style>, celle-ci dans un {% block %} django distinct, ça permettra ainsi à une intégration graphique d'ajuster l'exploitation de la couleur. Et que ça soit appelé "color" plutôt que "text_color", qu'il n'y ait pas de honte à l'utiliser pour faire une bordure, si jamais.
Oui, bonne idée.
<h2>{{ view.title }}</h2>
puis
<h2> avec le nom du service
Va y avoir commentaire RGAA sur la hiérarchisation des titres. Le plus simple est peut-être que ça ne soit pas un titre ?
Mon intention d'utiliser un titre était d'avoir un élément avec un display: block
et des marges par défaut pour avoir un rendu potable sans taper trop de CSS.
Mais tu as raison, j'ai tapé un div
.
<a href="{{ home_url }}"
Surtout avec un style qui ne marque pas du tout que c'est un lien, je ne vois pas pourquoi ça serait un lien. Ou alors que le logo soit aussi repris dans le lien.
Je le vois en lien car le nom du service, genre "Votre portail Mediathèque" sera plus parlant que le logo et l'usager est plus habitué avoir des liens sur du texte que sur les images.
Ok, logo devient un lien aussi.
Updated by Serghei Mihai almost 3 years ago
- File 0001-misc-add-logo-and-text-color-for-service-and-OU.patch 0001-misc-add-logo-and-text-color-for-service-and-OU.patch added
Branche à jour avec l'ajout des nouveaux champs dans l'admin pour l'OU.
Updated by Benjamin Dauvergne (en congé) almost 3 years ago
- Status changed from Solution proposée to Solution validée
Updated by Serghei Mihai almost 3 years ago
- Status changed from Solution validée to Résolu (à déployer)
commit 3a10736b32bb2a5abbe6fa590be400491a92b50e (HEAD -> main, origin/main) Author: Serghei Mihai <smihai@entrouvert.com> Date: Wed Mar 30 10:48:50 2022 +0200 display service logo and name on login and registration pages (#47406) commit 10366ac244f247698e2ce50b7e2cc0f80df629ca Author: Serghei Mihai <smihai@entrouvert.com> Date: Thu Mar 10 17:39:47 2022 +0100 misc: add logo and text color for service and OU (#47406)
Updated by Serghei Mihai almost 3 years ago
- Related to Développement #63568: intégrer le bloc avec l'image et lien vers le service déclencheur du SSO added
Updated by Transition automatique almost 3 years ago
- Status changed from Résolu (à déployer) to Solution déployée
Updated by Mikaël Ates almost 3 years ago
- Related to Développement #64649: Personnalisation de l'interface au SSO : ne pas mettre de lien par défaut sur le nom et le logo du service si l'url n'est pas définie added
Updated by Mikaël Ates almost 3 years ago
- Related to Développement #64672: idp_oidc: utiliser couleur, logo et home_url dans l'affichage de la page de consentement added
misc: add logo and text color for service and OU (#47406)