From 8b3601248deb7f45d5bb5cb2d35d9a7ebaac1ab1 Mon Sep 17 00:00:00 2001 From: guillaume Date: Wed, 24 Apr 2019 12:28:11 +0200 Subject: Loading authentication page --- client/components/main/layouts.jade | 37 ++++++++----- client/components/main/layouts.js | 27 +++++++--- client/components/main/layouts.styl | 104 +++++++++++++++++++++++++++++++++++- 3 files changed, 145 insertions(+), 23 deletions(-) (limited to 'client/components') diff --git a/client/components/main/layouts.jade b/client/components/main/layouts.jade index 7fd0492e..9543c5c5 100644 --- a/client/components/main/layouts.jade +++ b/client/components/main/layouts.jade @@ -13,20 +13,20 @@ head template(name="userFormsLayout") section.auth-layout - h1 - br - br section.auth-dialog - +Template.dynamic(template=content) - if currentSetting.displayAuthenticationMethod - +connectionMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod) - div.at-form-lang - select.select-lang.js-userform-set-language - each languages - if isCurrentLanguage - option(value="{{tag}}" selected="selected") {{name}} - else - option(value="{{tag}}") {{name}} + if isLoading + +loader + else + +Template.dynamic(template=content) + if currentSetting.displayAuthenticationMethod + +connectionMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod) + div.at-form-lang + select.select-lang.js-userform-set-language + each languages + if isCurrentLanguage + option(value="{{tag}}" selected="selected") {{name}} + else + option(value="{{tag}}") {{name}} template(name="defaultLayout") +header @@ -59,3 +59,14 @@ template(name="message") unless currentUser with(pathFor route='atSignIn') p {{{_ 'page-maybe-private' this}}} + +template(name="loader") + h1.loadingText {{_ 'loading'}} + .lds-roller + div + div + div + div + div + div + div diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js index 6f7c914a..9d2e7ae2 100644 --- a/client/components/main/layouts.js +++ b/client/components/main/layouts.js @@ -23,6 +23,7 @@ const validator = { Template.userFormsLayout.onCreated(function() { const instance = this; instance.currentSetting = new ReactiveVar(); + instance.isLoading = new ReactiveVar(false); Meteor.subscribe('setting', { onReady() { @@ -47,6 +48,10 @@ Template.userFormsLayout.helpers({ return Template.instance().currentSetting.get(); }, + isLoading() { + return Template.instance().isLoading.get(); + }, + afterBodyStart() { return currentSetting.customHTMLafterBodyStart; }, @@ -89,7 +94,11 @@ Template.userFormsLayout.events({ }, 'click #at-btn'(event, instance) { if (FlowRouter.getRouteName() === 'atSignIn') { - authentication(event, instance); + instance.isLoading.set(true); + authentication(event, instance) + .then(() => { + instance.isLoading.set(false); + }); } }, }); @@ -116,19 +125,21 @@ async function authentication(event, instance) { switch (result) { case 'ldap': - Meteor.loginWithLDAP(match, password, function() { - FlowRouter.go('/'); + return new Promise((resolve) => { + Meteor.loginWithLDAP(match, password, function() { + resolve(FlowRouter.go('/')); + }); }); - break; case 'cas': - Meteor.loginWithCas(function() { - FlowRouter.go('/'); + return new Promise((resolve) => { + Meteor.loginWithCas(match, password, function() { + resolve(FlowRouter.go('/')); + }); }); - break; default: - break; + return; } } diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl index edbf759b..46ee720c 100644 --- a/client/components/main/layouts.styl +++ b/client/components/main/layouts.styl @@ -61,7 +61,7 @@ body display: block float: right font-size: 24px - + .modal-content-wide width: 800px min-height: 0px @@ -290,7 +290,7 @@ kbd // Implement a thiner close icon as suggested in // https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950 .fa.fa-times-thin:before - content: '\00d7'; + content: '\00d7' .fa.fa-globe.colorful, .fa.fa-bell.colorful color: #4caf50 @@ -399,3 +399,103 @@ a height: 37px margin: 8px 10px 0 0 width: 50px + +.select-authentication + width: 100% + +.auth-layout + display: flex + flex-direction: column + align-items: center + justify-content: center + height: 100% + + .auth-dialog + margin: 0 !important + +.loadingText + text-align: center + +.lds-roller + display: block + margin: auto + position: relative + width: 64px + height: 64px + + div + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite + transform-origin: 32px 32px + + div:after + content: " " + display: block + position: absolute + width: 6px + height: 6px + border-radius: 50% + background: #dedede + margin: -3px 0 0 -3px + + div:nth-child(1) + animation-delay: -0.036s + + div:nth-child(1):after + top: 50px + left: 50px + + div:nth-child(2) + animation-delay: -0.072s + + div:nth-child(2):after + top: 54px + left: 45px + + div:nth-child(3) + animation-delay: -0.108s + + div:nth-child(3):after + top: 57px + left: 39px + + div:nth-child(4) + animation-delay: -0.144s + + div:nth-child(4):after + top: 58px + left: 32px + + div:nth-child(5) + animation-delay: -0.18s + + div:nth-child(5):after + top: 57px + left: 25px + + div:nth-child(6) + animation-delay: -0.216s + + div:nth-child(6):after + top: 54px + left: 19px + + div:nth-child(7) + animation-delay: -0.252s + + div:nth-child(7):after + top: 50px + left: 14px + + div:nth-child(8) + animation-delay: -0.288s + + div:nth-child(8):after + top: 45px + left: 10px + +@keyframes lds-roller + 0% + transform: rotate(0deg) + + 100% + transform: rotate(360deg) -- cgit v1.2.3-1-g7c22 From 259ff3436f3eecf78b748e238e98bfda6817cc44 Mon Sep 17 00:00:00 2001 From: guillaume Date: Wed, 24 Apr 2019 12:35:00 +0200 Subject: fix lints --- client/components/main/layouts.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'client/components') diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js index 9d2e7ae2..d5113a25 100644 --- a/client/components/main/layouts.js +++ b/client/components/main/layouts.js @@ -113,11 +113,11 @@ async function authentication(event, instance) { const match = $('#at-field-username_and_email').val(); const password = $('#at-field-password').val(); - if (!match || !password) return; + if (!match || !password) return undefined; const result = await getAuthenticationMethod(instance.currentSetting.get(), match); - if (result === 'password') return; + if (result === 'password') return undefined; // Stop submit #at-pwd-form event.preventDefault(); @@ -139,7 +139,7 @@ async function authentication(event, instance) { }); default: - return; + return undefined; } } -- cgit v1.2.3-1-g7c22