Bouton d'authentification combiné

[Lilly (Lillian)]

	Résumé	Remplace les boutons d’authentification par défaut par un bouton combiné qui ouvre un menu déroulant ou une modale avec des liens
	Dépôt	https://github.com/Lillinator/combined-auth-button
	Guide d’installation	Comment installer un thème ou un composant de thème

Installer ce composant de thème

Aperçu

Ce composant de thème combine les boutons d’inscription et de connexion en un seul bouton avec des options déroulantes, pour un espace d’en-tête plus épuré et une expérience utilisateur améliorée (en particulier pour les utilisateurs mobiles).

En particulier, la vue mobile par défaut de Discourse masque le bouton « S’inscrire » et affiche uniquement le bouton « Se connecter » existant ; cela peut être source de confusion et peu intuitif pour les nouveaux visiteurs des forums Discourse (vue anonyme). De plus, le bouton de connexion de la vue mobile par défaut redirige vers la page de connexion qui contient à son tour un lien vers la page d’inscription ; cela crée une friction inutile pour les nouveaux utilisateurs sur les appareils mobiles.

Vue mobile par défaut sans le composant :

Ce simple composant de thème Discourse remplace le bouton « Se connecter » existant par un bouton combiné avec une étiquette plus claire - la valeur par défaut est « S’inscrire / Se connecter ». Lorsqu’il est cliqué ou tapé, il ouvre un menu déroulant ou une modale mobile avec des liens vers les pages d’inscription ou de connexion respectives.

Bouton mobile et modale avec les paramètres par défaut du composant :

Bouton desktop et menu déroulant avec les paramètres par défaut du composant :

---

Paramètres et traductions de thème

Il existe des paramètres administrateur permettant d’activer le bouton sur desktop, de masquer l’icône du bouton combiné pour plus d’espace dans l’en-tête en vue mobile, ainsi que de modifier toutes les icônes et les étiquettes des boutons.

Paramètre	Description
enable_on_desktop	Activer le bouton d’authentification combiné sur toutes les tailles de viewport
hide_mobile_combined_button_icon	Masque l’icône du bouton d’authentification combiné en vue mobile pour économiser de l’espace dans l’en-tête
combined_button_icon	Icône SVG pour le bouton déroulant d’authentification combiné
login_button_icon	Icône SVG pour le bouton Se connecter
signup_button_icon	Icône SVG pour le bouton S’inscrire
button_labels.auth	Chaîne de texte du bouton combiné pour les traductions de thème
button_labels.log_in	Chaîne de texte du bouton Se connecter pour les traductions de thème
button_labels.sign_up	Chaîne de texte du bouton S’inscrire pour les traductions de thème

---

Plus de captures d’écran

Page des paramètres

Avec hide_mobile_combined_button_icon activé

Étiquettes et icônes de boutons modifiées

Mobile :

Desktop :

Personnalisez pour votre forum pour le plaisir

---

Remarques

• Ce composant est compatible avec le menu hamburger à gauche sur mobile, mais centrer le logo du site peut causer des problèmes de surcharge dans l’en-tête.

---

Découvrez mes autres créations Discourse

[Lilly (Lillian)]

Je viens de publier une mise à jour qui améliore l’expérience en ouvrant une fenêtre modale mobile redirigeant vers les pages d’inscription ou de connexion. J’ai également mis à jour l’OP. Merci à @Moin pour l’idée !

captures d'écran

Boutons par défaut de la fenêtre modale du composant :

Étiquettes de boutons modifiables :

[eisammy (Sammy)]

Merci beaucoup @Lilly, je vais tester bientôt.

[Lilly (Lillian)]

ok j’ai apporté quelques modifications à ce composant à nouveau - on peut maintenant l’activer sur le bureau et changer toutes les icônes.

[Lilly (Lillian)]

J’ai appliqué un correctif pour ce composant aujourd’hui : le bouton s’affichait à l’intérieur du titre de l’en-tête dans les sujets défilants lors de l’utilisation du composant hamburger sur le côté gauche. Les composants sont désormais entièrement compatibles entre eux.