Loading authentication page

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 isLoading
-      if currentSetting.displayAuthenticationMethod
+        +loader
-        +connectionMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod)
+      else
-      div.at-form-lang
+        +Template.dynamic(template=content)
-        select.select-lang.js-userform-set-language
+        if currentSetting.displayAuthenticationMethod
-          each languages
+          +connectionMethod(authenticationMethod=currentSetting.defaultAuthenticationMethod)
-            if isCurrentLanguage
+        div.at-form-lang
-              option(value="{{tag}}" selected="selected") {{name}}
+          select.select-lang.js-userform-set-language
-            else
+            each languages
-              option(value="{{tag}}") {{name}}
+              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

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() {
+    return new Promise((resolve) => {
-      FlowRouter.go('/');
+      Meteor.loginWithLDAP(match, password, function() {
+        resolve(FlowRouter.go('/'));
+      });
     });
-    break;
 
   case 'cas':
-    Meteor.loginWithCas(function() {
+    return new Promise((resolve) => {
-      FlowRouter.go('/');
+      Meteor.loginWithCas(match, password, function() {
+        resolve(FlowRouter.go('/'));
+      });
     });
-    break;
 
   default:
-    break;
+    return;
   }
 }
 

client/components/main/layouts.styl

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

i18n/en.i18n.json

@@ -691,5 +691,6 @@
     "swimlaneDeletePopup-title": "Delete Swimlane ?",
     "swimlane-delete-pop": "All actions will be removed from the activity feed and you won't be able to recover the swimlane. There is no undo.",
     "restore-all": "Restore all",
-    "delete-all": "Delete all"
+    "delete-all": "Delete all",
+    "loading": "Loading, please wait."
 }

i18n/fr.i18n.json

@@ -688,5 +688,6 @@
     "swimlaneDeletePopup-title": "Supprimer le couloir ?",
     "swimlane-delete-pop": "Toutes les actions vont être supprimées du suivi d'activités et vous ne pourrez plus utiliser ce couloir. Cette action est irréversible.",
     "restore-all": "Tout supprimer",
-    "delete-all": "Tout restaurer"
+    "delete-all": "Tout restaurer",
+    "loading": "Chargement, merci de patienter."
 }