Add logout button to top menu

[pfaffman (Jay Pfaffman)]

I have a client with a community whose members often use public access computers; in their testing they are finding that many users have a hard time finding the logout link on the hamburger menu. Sadly, I don’t think there is a good way to teach them all ZZ

Therefore: I am trying to add a logout button to the top menu.

It seems like I should be able to use the (Superseded) Add a "+ New Topic" button on every page to instead of create a new topic to log out and that it should be “easy” to change this createTopic to logout and then it’d be done.

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

I’ve poked around for an hour or so and can’t quite figure that out.

[anon48433008]

I’ll happily use what you come up with,

could you mimic the home button api function?

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

[pfaffman (Jay Pfaffman)]

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

[anon48433008]

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?

[pfaffman (Jay Pfaffman)]

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>

[anon48433008]

@pfaffman

won’t promise that it’ll work for you

WTH Jay,

I put that script in and got a

Summary

a working button!

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

Thanks for sharing

[Yana_Nepyivoda]

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