identity-keycloak-auth.js Logout injection

Start with extension-jwt/src/main/resources/META-INF/resources/webjars/operaton/app/identity-keycloak/scripts/identity-keycloak-auth.js and compare its logout element lookup with the JWT Example's actual DOM. Run the JWT Example, log in, use the profile dropdown, and verify that clicking Logout visits the Keycloak Logout URL and remains logged out after refresh.

Describe the bug
Logout override in 'identity-keycloak-auth.js' is not working due to wrong HTML DOM expectations.

To Reproduce
Steps to reproduce the behavior:

1. Run the JWT Example
2. Log in
3. In the Nav Menu open the propfile dropdown
4. Click on Logout
5. See that you land on the Operaton Web-App Login Screen
6. Refresh the page, see you have not actually logged out.
   Expected behavior
   Keycloak Logout URL should be visited.

Desktop (please complete the following information):

• OS: Windows
• Browser Firefox
• Operaton-Version v2.1.0
• Operaton-Keycloak Version v2.1.0

Additional context
The error resides in:

/extension-jwt/src/main/resources/META-INF/resources/webjars/operaton/app/identity-keycloak/scripts/identity-keycloak-auth.js

That script expects the Profile dropdown logout button to be an item of type li with a child a, when it is actually directly the a element.

Fix (use 'a' directly)

const observer = new MutationObserver(() => {
    const oldLogoutLink = document.querySelector("li.account a.logout");
    if (oldLogoutLink) {
        observer.disconnect();

        const logoutLink = oldLogoutLink.cloneNode(true);
        logoutLink.href = '#'
        logoutLink.onclick = () => operatonIdentityKeycloak && operatonIdentityKeycloak.logout();
        oldLogoutLink.parentElement.replaceChild(logoutLink, oldLogoutLink);
    }
});
observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });

Similarly the SSO Example logout button script could be fixed:

/**
 * CUSTOM LOGOUT BUTTON FOR OPERATON BPM WEBAPPS
 */
let observer = new MutationObserver(() => {
  // find the logout button
  const logoutButton = document.querySelectorAll("a.logout")[0];
  // once the button is present replace it with new functionality
  if (logoutButton) {
    const clone = logoutButton.cloneNode(true);
    clone.setAttribute('href', 'logout'); // call server side logout handler
    logoutButton.replaceWith(clone);
    observer.disconnect();
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});