Aggiungi pulsante di disconnessione al menu superiore

Sviluppatore
1

Ho un cliente con una community i cui membri utilizzano spesso computer ad accesso pubblico; durante i test hanno riscontrato che molti utenti faticano a trovare il link di disconnessione nel menu hamburger. Purtroppo, non credo esista un modo efficace per insegnare a tutti a premere ZZ.

Pertanto: sto cercando di aggiungere un pulsante logout al menu in alto.

Sembra che dovrei poter utilizzare (Superseded) Add a "+ New Topic" button on every page per creare non un nuovo argomento, ma per effettuare il logout, e che dovrebbe essere “facile” modificare questo createTopic in logout, dopodiché sarebbe tutto risolto.

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

Ho dato un’occhiata per un’ora o più, ma non riesco proprio a capire come fare.

2

Sarò felice di usare ciò che proponi,

potresti imitare la funzione API del pulsante home?

image

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

Ho trovato il pulsante OK, ma non riesco a trovare l’API di disconnessione.

4

Scusa, mi piace il piano e speravo di poter aiutare. Cosa indica il $0 e fa parte di document.querySelector? Questo potrebbe essere d’aiuto?

image
image371×113 3.78 KB

5

L’ho capito! Non prometto che funzionerà per te, ma potrebbe farlo.

Questo è 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 = 'Esci', // testo del pulsante!
        logout_title = 'Esci',
        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

Cavolo Jay,

ho inserito quello script e ho ottenuto

Riepilogo

un pulsante funzionante!
image

image
image870×335 53.2 KB

Dovrò affinare un po’ l’aspetto, ma funziona, ottimo lavoro!

Grazie per averlo condiviso :sunglasses:

8

Ciao Jay,
il tuo codice funziona alla perfezione!
Ho un menu personalizzato sotto l’intestazione standard. Come posso spostare questo pulsante lì? Screenshot by Lightshot
Per creare la mia navigazione personalizzata, ho aggiunto HTML alla sezione common → header

Grazie in anticipo