Show login and logout menu items dynamically

Support
1

Hello,
New to Grav, love what I’m seeing so far.

I’m having issues showing a dynamic login / logout menu item.

When I’m logged into the site, I see a logout menu button automatically added to the menu list.

This functionality seems to exist in the user/plugins/login/templates/partials/login-status.html.twig file. Here is the code:

<span class="login-status">
    {% if grav.user.authenticated %}
        <a class="logout" href="{{ url(uri.addNonce((uri.path)|trim('/') ~ '/task' ~ config.system.param_sep ~ 'login.logout', 'logout-form', 'logout-nonce'))|e }}">{{ 'PLUGIN_LOGIN.BTN_LOGOUT'|t }}</a>
    {% endif %}
</span>

If a user isn’t logged in, I’d like to see a menu item for “Login”. This doesn’t happen.

Does anyone know what I have to add to the above code to accomplish this?

2

What theme are you using?. This depends if theme has implemented it. For example, Future2021 has implemented it.

3

Oh that’s helpful! I’m using darkquark. It must not have it.

4

Seems like there’s more to it than I would expect. I’ll keep digging, but if anyone has tips on how to do this with the darkquark theme please help :).

Weirdly, even if I change the login-status.html.twig to the following, I don’t see anything when I’m logged out.

<span class="login-status">
    {% if not grav.user.authenticated %}
  		<a class="logout" href="{{ url(uri.addNonce((uri.path)|trim('/') ~ '/task' ~ config.system.param_sep ~ 'login.logout', 'logout-form', 'logout-nonce'))|e }}">{{ 'PLUGIN_LOGIN.BTN_LOGOUT'|t }}</a>
    {% else %}
  		<a class="logout" href="{{ url(uri.addNonce((uri.path)|trim('/') ~ '/task' ~ config.system.param_sep ~ 'login.logout', 'logout-form', 'logout-nonce'))|e }}">{{ 'PLUGIN_LOGIN.BTN_LOGOUT'|t }}</a>
</span>

To me the above says:
if I’m not logged in, show the logout button.
if i am logged in, show the logout button.

I did this just to test, but I don’t see anything when logged out.

5

Why don’t you try to adapt this code to your purposes (from Future2021):

{% if config.plugins.login.enabled %}
  <!-- Login button -->
    <div>
      <ul class="actions stacked">
      {% if not grav.user.authenticated %}
        <li><a href="{{ base_url_absolute }}{{config.plugins.login.route}}" class="button large fit">{{ 'PLUGIN_LOGIN.BTN_LOGIN'|t }}</a></li>
      {% else %}
        <li>Logged as: <strong>{{ grav.user.fullname ?: grav.user.username }}</strong></li>
        <li><a class="button large fit" href="{{ url(uri.addNonce((uri.path)|trim('/') ~ '/task' ~ config.system.param_sep ~ 'login.logout', 'logout-form', 'logout-nonce'))|e }}">{{ 'PLUGIN_LOGIN.BTN_LOGOUT'|t }}</a></li>
      {% endif %}
      </ul>
    </div>
  {% endif %}

Put this code into the section you prefer to show the login button, set appropriate classes for DarkQuark theme, and translate it.

1 Like
6

That’s exactly what I wanted, thank you! This solution helped me a lot. I hope it helps others. I saw a few questions like mine from previous years that were unanswered, so I really apprecaite this quick solution!

1 Like
7

Just don’t change the code in the darkquark theme or login plugin itself. Use your own theme. Unless you want to lose this change with every theme or plugin update, depending where you put it

1 Like
8

Exact @Karmalakas. Sometimes I forget to mention that these modifications must be made on a child theme. :pensive: