Loading authentication page

3 files changed, 145 insertions, 23 deletions

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)