From c8dc654fc72b24e97cfcd2d6fa69646037005688 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 17 Feb 2021 19:22:22 +0100 Subject: [PATCH] feature: fludify login process --- src/components/hubl-auto-login.js | 2 +- src/index.pug | 9 +++--- src/scripts/login-element-visibility.js | 41 +++++++++++++++++++++---- src/scripts/navigate-event.js | 16 ++++++++++ src/scripts/timeout-goeswrong.js | 2 +- src/scripts/user-creation-form.js | 7 ----- 6 files changed, 57 insertions(+), 20 deletions(-) diff --git a/src/components/hubl-auto-login.js b/src/components/hubl-auto-login.js index 8fa2ac9..cf4a318 100644 --- a/src/components/hubl-auto-login.js +++ b/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', { diff --git a/src/index.pug b/src/index.pug index 08187c8..7c4d43b 100644 --- a/src/index.pug +++ b/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( - onclick="document.querySelector('sib-auth').login();" + 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( 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 diff --git a/src/scripts/login-element-visibility.js b/src/scripts/login-element-visibility.js index af9dcc9..dcf0ea7 100644 --- a/src/scripts/login-element-visibility.js +++ b/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 - .querySelectorAll(".loggedIn") - .forEach(el => (el.style.display = "none")); + 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" + route: "login", + wanted: true } }), ); document - .querySelectorAll(".loggedIn") - .forEach(el => (el.style.display = "none")); + .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(); }); \ No newline at end of file diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index ff2bd87..67765d4 100644 --- a/src/scripts/navigate-event.js +++ b/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 => { diff --git a/src/scripts/timeout-goeswrong.js b/src/scripts/timeout-goeswrong.js index 7b46d04..f1963d7 100644 --- a/src/scripts/timeout-goeswrong.js +++ b/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); \ No newline at end of file diff --git a/src/scripts/user-creation-form.js b/src/scripts/user-creation-form.js index 930a812..fce7ddb 100644 --- a/src/scripts/user-creation-form.js +++ b/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(); } });