Add Login link toggle to demo frontend

quick stab on a toggle link:

<template>
    <ul style="list-style: none;">
      <li v-if="useDrupalCe().getPage().value['local_tasks'].primary">
        <nuxt-link to="/user/login?destination=/">Login</nuxt-link>
      </li>
      <li v-else>
        <nuxt-link to="/user/logout">Logout</nuxt-link>
      </li>
    </ul>
</template>

<script setup>
</script>

but just going with the local task links is not a reliable indicator. We need to improve things to send session information with response to have a better experience. Meanwhile, let's do it with an additional http request to drupal's login status api:

curl \
--header "Content-type: application/json" \
--request GET "http://drupal.d8/user/login_status?_format=json"

I think the frontend should do this only client-side to avoid postponing rendering. Thus, best do this in a client-only component. For now, let's only add this component in the demo-repository for a better evaluation experience.

Latest PR: https://github.com/drunomics/lupus-decoupled-nuxt3-demo/pull/45

- Current status of this issue:
Did some testing to make sure the login button effectively handles its function (running Gitpod backend and localhost frontend):

• Clicking login now changes the link to "/user/login?destination=/"
• After inputting correct credentials, the user gets redirected to the corresponding frontend link, e.g.: "https://3000-drunomics-lupusdecouple-7nuq88broxm.ws-eu116.gitpod.io"

- Comments from Alexandru: "Also tested and it doesn't seem to work, I'm logged in and it still says "Login" "

Will have to look further into this, since the Logout button is not being displayed even after logging in, therefore the login status isn't being properly handled. Currently investigating.

As posted at 🐛 User logout confirmation form is not supported (d10.3+) Active we can workaround the issue with the user logout route by simply showing the content of the "account" menu. Thus, instead of making a request to check the user-login state, we could simply make a request to load the "account" menu and it will give us the right links for login + logout already!

One small glitch: once logged in, it will also include the link to "my account" which redirects to the backend atm. While this is not very nice, I think it's ok and good enough. We can open a follow-up for improving the /user route redirection in the backend.

Update on latest PR. Followed the previous suggestion and made changes:

- Got rid of the initial NavigationLink component and created an entirely new SiteLoginLink component
- The new component works just the same way and the links show up properly. In order to see them, follow these steps:
1. Click Login and enter default username & password
2. User gets redirected to the backend
3. Go back one page on the browser
4. Menu items correctly show up (My account & Logout)

'My account' correctly links to the backend user account. 'Logout' isn't functional, but when clicked it shows the correct redirect URL.

testing via link →

ok, worked over it and fixed a couple of things. the token was missing from the link, what I fixed. Still, the login link works now, but the logout link dose not work even when the token is used. It seems the token provided by the menu api is somehow not valid. investigating

opened 🐛 Wrong user logout CSRF token Active

ended up patching core in 🐛 Menu APIs provide invalid CSRF tokens Active . With that I've seen the link working, so testing it now.

Works all good! Thus, I added the patch to the project template, that makes the user logout work.

Given that, this works! The redirection logic needs love, but this can be optimized in a followup. Thus both PRs merged!

Automatically closed - issue fixed for 2 weeks with no activity.