Ajouter un bouton de déconnexion au menu supérieur

Dev
1

J’ai un client avec une communauté dont les membres utilisent souvent des ordinateurs à accès public ; lors de leurs tests, ils constatent que de nombreux utilisateurs ont du mal à trouver le lien de déconnexion dans le menu hamburger. Malheureusement, je ne pense pas qu’il existe une bonne façon de leur apprendre à tous ZZ.

Par conséquent : j’essaie d’ajouter un bouton déconnexion dans le menu supérieur.

Il semble que je devrais pouvoir utiliser (Superseded) Add a "+ New Topic" button on every page pour créer un nouveau sujet afin de me déconnecter, et que cela devrait être « facile » de modifier ce createTopic en logout, puis ce serait fait.

https://github.com/discourse/discourse-new-topic-button-theme-component/blob/master/common/header.html#L39

J’ai fouillé pendant une heure ou deux et je n’arrive pas tout à fait à comprendre comment faire.

2

Je serai ravi d’utiliser ce que vous proposerez,

pourriez-vous imiter la fonction de l’API du bouton d’accueil ?

image

<script type="text/discourse-plugin" version="0.4">
  api.changeWidgetSetting('home-logo', 'href' , 'xxx')
</script>
3

J’ai bien le bouton OK, c’est l’API de déconnexion que je ne parviens pas à trouver.

4

Désolé, j’aime bien le plan et j’espérais pouvoir aider. À quoi correspond le $0 et fait-il partie de document.querySelector, ce qui pourrait aider ?

image
image371×113 3.78 KB

5

J’ai compris ! Je ne peux pas garantir que cela fonctionnera pour vous, mais cela pourrait le faire.

Voici common/header.html

<script type="text/discourse-plugin" version="0.8">    
    const { iconNode } = require("discourse-common/lib/icon-library");
    const { logout } = require("discourse/lib/logout");

    api.decorateWidget("header-buttons:before", helper => {
        if (!Discourse.User.current()) return;
        currentUser = Discourse.User.current();


        let container = api.container,
        logout_text = 'Se déconnecter', // texte du bouton !
        logout_title = 'Se déconnecter',
        logout_icon = 'sign-out-alt',
        logout_button_class = "btn btn-default btn btn-icon-text",
        logout_button_helper = "button#logout",
        logout_label_helper = "span.d-button-label",
        composerModal = require("discourse/models/composer").default,
        composerController = container.lookup("controller:composer");

        const myLogout = function () {
            if (currentUser) {
                currentUser.destroySession();
            }
        };
 

        let currentUser = Discourse.User.current();
        let currentUsername = Discourse.User.current().username;
        return helper.h("span.header-links", [

        helper.h(
            logout_button_helper,
            {
              className: logout_button_class,
              title: logout_title,
              onclick: myLogout
            },
            [iconNode(logout_icon), helper.h(logout_label_helper, logout_text)]
          )        
      ])
    });
    </script>
6

WTH Jay,

J’ai intégré ce script et j’ai obtenu un

Résumé

un bouton fonctionnel !
image

image
image870×335 53.2 KB

Je devrai ajuster un peu le style, mais cela fonctionne, excellent travail !

Merci pour le partage :sunglasses:

8

Bonjour Jay,
votre code fonctionne à merveille !
J’ai un menu personnalisé sous l’en-tête standard. Comment puis-je déplacer ce bouton là-bas ? Screenshot by Lightshot
Pour créer ma navigation personnalisée, j’ai ajouté du HTML dans la section common → header.

Merci d’avance.