autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: fludify login process

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2021-02-17 19:22:22 +01:00
parent 1fb9c6bc8f
commit c8dc654fc7
6 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/hubl-auto-login.js
View File

@ -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', {

9
src/index.pug
View File

@ -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

41
src/scripts/login-element-visibility.js
View File

@ -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();
});

16
src/scripts/navigate-event.js
View File

@ -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 => {

2
src/scripts/timeout-goeswrong.js
View File

@ -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);

7
src/scripts/user-creation-form.js
View File

@ -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();
}
});