Projet

Général

Profil

Development #47406

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

Ajouté par Mikaël Ates (de retour le 29 avril) il y a plus de 3 ans. Mis à jour il y a environ 2 ans.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Catégorie:
-
Version cible:
-
Début:
06 octobre 2020
Echéance:
01 avril 2022
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

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


Fichiers


Demandes liées

Lié à Authentic 2 - Support #63086: idp_oidc : simplifier la page de consentementNouveau23 mars 2022

Actions
Lié à Intégrations graphiques Publik - Development #63568: intégrer le bloc avec l'image et lien vers le service déclencheur du SSOFermé05 avril 2022

Actions
Lié à Authentic 2 - Development #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 avril 2022

Actions
Lié à Authentic 2 - Development #64672: idp_oidc: utiliser couleur, logo et home_url dans l'affichage de la page de consentementFermé28 avril 2022

Actions

Révisions associées

Révision 10366ac2 (diff)
Ajouté par Serghei Mihai il y a environ 2 ans

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

Révision 3a10736b (diff)
Ajouté par Serghei Mihai il y a environ 2 ans

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

Historique

#2

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a plus de 3 ans

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

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a environ 2 ans

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

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a environ 2 ans

  • Lié à Support #63086: idp_oidc : simplifier la page de consentement ajouté
#17

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a environ 2 ans

  • Assigné à mis à Serghei Mihai
#18

Mis à jour par Serghei Mihai il y a environ 2 ans

  • Echéance mis à 01 avril 2022
#20

Mis à jour par Serghei Mihai il y a environ 2 ans

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

Mis à jour par Frédéric Péters il y a environ 2 ans

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

Mis à jour par Thomas Noël il y a environ 2 ans

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

Mis à jour par Serghei Mihai il y a environ 2 ans

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

Mis à jour par Benjamin Dauvergne il y a environ 2 ans

  • Statut changé de Solution proposée à 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

Mis à jour par Frédéric Péters il y a environ 2 ans

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

Mis à jour par Serghei Mihai il y a environ 2 ans

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

Mis à jour par Benjamin Dauvergne il y a environ 2 ans

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

Mis à jour par Serghei Mihai il y a environ 2 ans

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

Mis à jour par Serghei Mihai il y a environ 2 ans

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

#30

Mis à jour par Benjamin Dauvergne il y a environ 2 ans

Go.

#31

Mis à jour par Benjamin Dauvergne il y a environ 2 ans

  • Statut changé de Solution proposée à Solution validée
#32

Mis à jour par Serghei Mihai il y a environ 2 ans

  • Statut changé de Solution validée à 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

Mis à jour par Serghei Mihai il y a environ 2 ans

  • Lié à Development #63568: intégrer le bloc avec l'image et lien vers le service déclencheur du SSO ajouté
#34

Mis à jour par Transition automatique il y a environ 2 ans

  • Statut changé de Résolu (à déployer) à Solution déployée
#35

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a presque 2 ans

  • Lié à Development #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 ajouté
#36

Mis à jour par Mikaël Ates (de retour le 29 avril) il y a presque 2 ans

  • Lié à Development #64672: idp_oidc: utiliser couleur, logo et home_url dans l'affichage de la page de consentement ajouté
#37

Mis à jour par Transition automatique il y a presque 2 ans

Automatic expiration

Formats disponibles : Atom PDF