hubl/src/scripts/login-element-visibility.js

window.requestLogin = false;
document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector("sib-auth")
    .getUser()
    .then(user => {
      if (user !== null) {
        document
          .querySelectorAll(".notLoggedIn")
          .forEach(el => (el.style.visibility = "visible"));
        document
          .querySelectorAll(".loggedIn")
          .forEach(el => (el.style.display = "none"));
        document
          .querySelectorAll(".loggedIn-loader")
          .forEach(el => (el.style.display = "none"));
      } else {
        window.requestLogin = true;
        window.dispatchEvent(
          new CustomEvent('requestNavigation', {
            detail: {
              route: "login",
              wanted: true
            }
          }),
        );
        document
          .querySelectorAll(".loggedIn-loader")
          .forEach(el => (el.style.display = "none"));
      }
    });
});
window.addEventListener("navigate", e => {
  if (e.detail.route == "login" && !window.requestLogin) {
    window.dispatchEvent(
      new CustomEvent('requestNavigation', {
        detail: {
          route: "dashboard"
        }
      }),
    );
  }
});
document.querySelector('#loginButton').addEventListener('click', () => {
  document
    .querySelectorAll(".loggedIn")
    .forEach(el => (el.style.display = "none"));
  document
    .querySelectorAll(".loggedIn-loader")
    .forEach(el => (el.style.display = "flex"));
  setTimeout(() => {
    document.querySelector('#something-goes-wrong').removeAttribute('hidden');
  }, 5000);
  document.querySelector('sib-auth').login();
});