From c8dc654fc72b24e97cfcd2d6fa69646037005688 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
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 8fa2ac95..cf4a318e 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 08187c86..7c4d43be 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 af9dcc9c..dcf0ea75 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 ff2bd87c..67765d43 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 7b46d041..f1963d7b 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 930a8126..fce7ddb0 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();
}
});
--
GitLab