Add logout button to top menu

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 Adding "+ 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.

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

4 Likes

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 Like

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

3 Likes

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 Like

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>
10 Likes

WTH Jay,

I put that script in and got a

Summary

a working button!
image

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

Thanks for sharing :sunglasses:

4 Likes

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 Like

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