feature: fludify login process

src/components/hubl-auto-login.js

@@ -4,7 +4,7 @@ export const HublAutoLogin = {
   name: 'hubl-auto-login',
   created() {
     document
-    .querySelectorAll(".loggedIn")
+    .querySelectorAll(".loggedIn-loader")
     .forEach(el => (el.style.display = "flex"));
     window.dispatchEvent(
       new CustomEvent('requestNavigation', {

src/index.pug

@@ -136,14 +136,13 @@ html(lang="en")
               hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.get.joboffers}current/`)
               include views/page-job-offers.pug
 
-      #login(data-view="login", hidden).segment.full.bg-color-secondary.text-center.index-community
+      #login(data-view="login", hidden).segment.full.bg-color-secondary.text-center.index-community.loggedIn
         .segment.half.sm-full.bg-color-white.text-center
           .segment.half.sm-full
             div.community-logo
               img(src=clientLogo style='max-width:100%;max-height:100%;')
             p.text-xlarge.text-semibold.margin-top-xxlarge.line-xlarge(data-trans="communities.index.youKnow")
-            button.segment.full.sm-three-quarter.button.text-xsmall.text-bold.text-uppercase.color-secondary.bordered.padding-bottom.xlarge.padding-top.xlarge.community-button(
+            button.segment.full.sm-three-quarter.button.text-xsmall.text-bold.text-uppercase.color-secondary.bordered.padding-bottom.xlarge.padding-top.xlarge.community-button#loginButton(
-              onclick="document.querySelector('sib-auth').login();"
               data-trans="communities.index.login"
             )
             p.text-xlarge.text-semibold.margin-top-xxlarge.line-xlarge(data-trans="communities.index.newUser")
@@ -183,7 +182,7 @@ html(lang="en")
               id='hubl-index-community-selector'
             )
 
-      #join-community(data-view="join-community", hidden, no-render).segment.full.bg-color-secondary.text-center.index-community
+      #join-community(data-view="join-community", hidden, no-render).segment.full.bg-color-secondary.text-center.index-community.loggedIn
         .segment.half.sm-full.bg-color-white.text-center
           .segment.half.sm-full
             solid-widget(name="hubl-index-community-join-logo")
@@ -244,7 +243,7 @@ html(lang="en")
               next='dashboard'
             )
 
-      .loggedIn.bg-color-grey(style='position:fixed;width:100%;height:100%;;z-index:999999;top:0;left:0;display:flex;align-items:center;justify-content:center;')
+      .loggedIn-loader.bg-color-grey(style='position:fixed;width:100%;height:100%;;z-index:999999;top:0;left:0;display:flex;align-items:center;justify-content:center;')
         div
           div.loader
             div

src/scripts/login-element-visibility.js

@@ -1,3 +1,4 @@
+window.requestLogin = false;
 document.addEventListener("DOMContentLoaded", function () {
   document
     .querySelector("sib-auth")
@@ -7,20 +8,48 @@ document.addEventListener("DOMContentLoaded", function () {
         document
           .querySelectorAll(".notLoggedIn")
           .forEach(el => (el.style.visibility = "visible"));
-          document
+        document
-            .querySelectorAll(".loggedIn")
+          .querySelectorAll(".loggedIn")
-            .forEach(el => (el.style.display = "none"));
+          .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"
+              route: "login",
+              wanted: true
             }
           }),
         );
         document
-        .querySelectorAll(".loggedIn")
+          .querySelectorAll(".loggedIn-loader")
-        .forEach(el => (el.style.display = "none"));
+          .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();
 });

src/scripts/navigate-event.js

@@ -69,6 +69,22 @@ document.addEventListener("DOMContentLoaded", function() {
       }
       closeLeftMenu();
       closeUserControls();
+      if(e.detail.route.startsWith('login')) {
+        document
+          .querySelector("sib-auth")
+          .getUser()
+          .then(user => {
+            if (user !== null) {
+              window.dispatchEvent(
+                new CustomEvent('requestNavigation', {
+                  detail: {
+                    route: "dashboard"
+                  }
+                }),
+              );
+            }
+          });
+      }
     });
     // Document -> close menu
     document.addEventListener("click", event => {

src/scripts/timeout-goeswrong.js

@@ -1,5 +1,5 @@
 setTimeout(() => {
-  if(document.querySelector('.loggedIn').style.display != 'none') {
+  if(document.querySelector('.loggedIn-loader').style.display != 'none') {
     document.querySelector('#something-goes-wrong').removeAttribute('hidden')
   }
 }, 5000);

src/scripts/user-creation-form.js

@@ -1,13 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelector('#user-creation-form').addEventListener('save', event => {
     if(event.originalTarget.id == 'user-creation-form') {
-      window.dispatchEvent(
-        new CustomEvent('requestNavigation', {
-          detail: {
-            route: "dashboard"
-          }
-        }),
-      );
       document.querySelector("sib-auth").login();
     }
   });