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.

4 curtidas
2

I’ll happily use what you come up with,

could you mimic the home button api function?

image

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

I’ve got the button OK, it’s the logout API that I can’t find.

3 curtidas
4

sorry, I do like the plan and hoped I could help, what does the $0 refer to and is it part of document.querySelector that may help?

image

1 curtida
5

I got it! I won’t promise that it’ll work for you, but this might do it for you.

This is 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 = 'Log Out', // button text!
        logout_title = 'Log Out',
        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>
14 curtidas
6

WTH Jay,

I put that script in and got a

Summary

a working button!
image

image
image870×335 53.2 KB

I’ll need to tune the look a bit but it works, great job!

Thanks for sharing :sunglasses:

4 curtidas
8

Hello Jay,
your code works like a charm!
I have a custom menu below the standard header. How can I relocate this button there? Screenshot by Lightshot
in order to create my custom navigation, I added HTML to section common -> header

thanks in advance

1 curtida
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.