Project

General

Profile

Développement #47406

Personnaliser l'interface de connexion selon le FS OIDC source du SSO.

Added by Mikaël Ates over 4 years ago. Updated almost 3 years ago.

Status:
Fermé
Priority:
Normal
Assignee:
Category:
-
Target version:
-
Start date:
06 October 2020
Due date:
01 April 2022
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

Par exemple : un logo, le nom du FS et la couleur pour ce nom. (Comme sur GLC.)


Files


Related issues

Related to Authentic 2 - Support #63086: idp_oidc : simplifier la page de consentementNouveau23 March 2022

Actions
Related to Intégrations graphiques Publik - Développement #63568: intégrer le bloc avec l'image et lien vers le service déclencheur du SSOFermé05 April 2022

Actions
Related to Authentic 2 - 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éfinieFermé28 April 2022

Actions
Related to Authentic 2 - Développement #64672: idp_oidc: utiliser couleur, logo et home_url dans l'affichage de la page de consentementFermé28 April 2022

Actions

Associated revisions

Revision 10366ac2 (diff)
Added by Serghei Mihai almost 3 years ago

misc: add logo and text color for service and OU (#47406)

Revision 3a10736b (diff)
Added by Serghei Mihai almost 3 years ago

display service logo and name on login and registration pages (#47406)

History

#2

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>

#14

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 ».

#15

Updated by Mikaël Ates almost 3 years ago

  • Related to Support #63086: idp_oidc : simplifier la page de consentement added
#17

Updated by Mikaël Ates almost 3 years ago

  • Assignee set to Serghei Mihai
#18

Updated by Serghei Mihai almost 3 years ago

  • Due date set to 01 April 2022
#20

Updated by Serghei Mihai almost 3 years ago

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.

#21

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).

#22

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é.

#23

Updated by Serghei Mihai almost 3 years ago

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.

#24

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).

#25

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.

#26

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.

#27

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_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.

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ète ValueError(('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.

#28

Updated by Serghei Mihai almost 3 years ago

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.

#29

Updated by Serghei Mihai almost 3 years ago

Branche à jour avec l'ajout des nouveaux champs dans l'admin pour l'OU.

#31

Updated by Benjamin Dauvergne (en congé) almost 3 years ago

  • Status changed from Solution proposée to Solution validée
#32

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)
#33

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
#34

Updated by Transition automatique almost 3 years ago

  • Status changed from Résolu (à déployer) to Solution déployée
#35

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
#36

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
#37

Updated by Transition automatique over 2 years ago

Automatic expiration

Also available in: Atom PDF