Añadir botón de cerrar sesión en el menú superior

[pfaffman (Jay Pfaffman)]

Tengo un cliente con una comunidad cuyos miembros a menudo utilizan computadoras de acceso público; en sus pruebas, están descubriendo que muchos usuarios tienen dificultades para encontrar el enlace de cerrar sesión en el menú hamburguesa. Lamentablemente, no creo que exista una buena manera de enseñárselo a todos con ZZ.

Por lo tanto: estoy intentando agregar un botón de cerrar sesión al menú superior.

Parece que debería poder utilizar (Superseded) Add a "+ New Topic" button on every page en lugar de crear un nuevo tema para cerrar sesión, y que debería ser “fácil” cambiar este createTopic a logout y así quedar listo.

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

He estado investigando durante una hora o más y no logro averiguar cómo hacerlo.

[anon48433008]

Usaré con gusto lo que propongas.

¿Podrías imitar la función de la API del botón de inicio?

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

[pfaffman (Jay Pfaffman)]

Tengo el botón de Aceptar, pero no puedo encontrar la API de cierre de sesión.

[anon48433008]

Lo siento, me gusta el plan y esperaba poder ayudar. ¿A qué se refiere el $0 y forma parte de document.querySelector? Eso podría ayudar.

[pfaffman (Jay Pfaffman)]

¡Lo entendí! No prometo que funcione para ti, pero esto podría hacerlo por ti.

Este es 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 = 'Cerrar sesión', // texto del botón!
        logout_title = 'Cerrar sesión',
        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

no prometo que funcione para ti

¿Qué pasa, Jay,

Puse ese script y obtuve un

Resumen

¡un botón que funciona!

Tendré que ajustar un poco el aspecto, pero funciona, ¡gran trabajo!

Gracias por compartir

[Yana_Nepyivoda]

Hola Jay,
¡tu código funciona de maravilla!
Tengo un menú personalizado debajo del encabezado estándar. ¿Cómo puedo trasladar este botón allí? Screenshot by Lightshot
Para crear mi navegación personalizada, agregué HTML a la sección común → encabezado.

Gracias de antemano.