Adicionar botão de logout ao menu superior

Dev
1

Tenho um cliente com uma comunidade cujos membros frequentemente usam computadores de acesso público; em seus testes, eles estão constatando que muitos usuários têm dificuldade em encontrar o link de sair no menu hambúrguer. Infelizmente, não acho que haja uma boa maneira de ensinar a todos \u003ckbd\u003eZZ\u003c/kbd\u003e.

Portanto: estou tentando adicionar um botão \u003ckbd\u003esair\u003c/kbd\u003e ao menu superior.

Parece que eu deveria ser capaz de usar (Superseded) Add a "+ New Topic" button on every page para, em vez de criar um novo tópico, fazer logout, e que seria “fácil” alterar esse createTopic para logout e, assim, estaria resolvido.

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

Pesquisei por uma hora ou mais e não consegui descobrir exatamente como fazer isso.

2

Ficarei feliz em usar o que você criar,

você poderia imitar a função da API do botão inicial?

image

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

Eu já tenho o botão OK, é a API de logout que não consigo encontrar.

4

Desculpe, eu gosto do plano e esperava poder ajudar. O que o $0 se refere e faz parte do document.querySelector que poderia ajudar?

5

Entendi! Não prometo que funcionará para você, mas isso pode resolver.

Este é o 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 = 'Sair', // texto do botão!
        logout_title = 'Sair',
        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

O que foi, Jay,

Eu coloquei esse script e obtive um

Resumo

um botão funcionando!
image

image
image870×335 53.2 KB

Vou precisar ajustar um pouco a aparência, mas funciona, ótimo trabalho!

Obrigado por compartilhar :sunglasses:

8

Olá Jay,
seu código funciona perfeitamente!
Tenho um menu personalizado abaixo do cabeçalho padrão. Como posso mover esse botão para lá? Screenshot by Lightshot
Para criar minha navegação personalizada, adicionei HTML na seção comum → cabeçalho.

Obrigado antecipadamente.