Improve login

src/components/pages/Login.vue

@@ -69,7 +69,10 @@
             {{ $t('login.login') }}
           </a>
         </p>
-        <p class="control error" v-if="isTooMuchLoginFailedAttemps">
+        <p class="control error" v-if="isServerError">
+          {{ $t('login.login_server_failed') }}
+        </p>
+        <p class="control error" v-else-if="isTooMuchLoginFailedAttemps">
           {{ $t('login.too_many_failed_login_attemps') }}
         </p>
         <p
@@ -111,6 +114,7 @@ export default {
       isTooMuchLoginFailedAttemps: false,
       isWrongOTP: false,
       isMissingOTP: false,
+      isServerError: false,
       preferredTwoFA: '',
       TwoFAsEnabled: [],
       fadeAway: false
@@ -142,6 +146,7 @@ export default {
       this.isTooMuchLoginFailedAttemps = false
       this.isWrongOTP = false
       this.isMissingOTP = false
+      this.isServerError = false
       this.logIn({
         twoFactorPayload: twoFactorPayload,
         callback: (err, success) => {
@@ -159,6 +164,8 @@ export default {
               this.isMissingOTP = true
               this.preferredTwoFA = err.preferred_two_factor_authentication
               this.TwoFAsEnabled = err.two_factor_authentication_enabled
+            } else if (err.server_error) {
+              this.isServerError = true
             } else {
               console.error(err)
             }
@@ -236,6 +243,10 @@ export default {
   padding: 0.25em;
 }
 
+.error {
+  text-align: center;
+}
+
 @media (max-width: 1600px) {
   .box {
     margin-top: 4em;

src/components/pages/ServerDown.vue

@@ -11,21 +11,18 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import auth from '@/lib/auth'
 
 export default {
   name: 'server-down',
   computed: {
     ...mapGetters(['isAuthenticated', 'user'])
   },
-  methods: {
-    ...mapActions([])
-  },
   mounted() {
     auth.isServerLoggedIn(err => {
-      const target = this.$store.state.route.query.redirect
       if (!err) {
+        const target = this.$store.state.route.query.redirect || '/'
         this.$router.push(target)
       }
     })

src/components/pages/WrongBrowser.vue

@@ -8,18 +8,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
-
 export default {
-  name: 'server-down',
-  computed: {
-    ...mapGetters([])
-  },
-  methods: {
-    ...mapActions([])
-  },
-  mounted() {}
+  name: 'wrong-browser'
 }
 </script>
-
-<style lang="scss" scoped></style>

src/lib/auth.js

@@ -15,28 +15,33 @@ const auth = {
       .send(payload)
       .end((err, res) => {
         if (err) {
-          if (res.body.default_password) {
-            err.default_password = res.body.default_password
-            err.token = res.body.token
+          if (res?.body) {
+            if (res.body.default_password) {
+              err.default_password = res.body.default_password
+              err.token = res.body.token
+            }
+            if (res.body.too_many_failed_login_attemps) {
+              err.too_many_failed_login_attemps = true
+            }
+            if (res.body.wrong_OTP) {
+              err.wrong_OTP = true
+            }
+            if (res.body.missing_OTP) {
+              err.missing_OTP = true
+              err.preferred_two_factor_authentication =
+                res.body.preferred_two_factor_authentication
+              err.two_factor_authentication_enabled =
+                res.body.two_factor_authentication_enabled
+            }
           }
-          if (res.body.too_many_failed_login_attemps) {
-            err.too_many_failed_login_attemps = true
-          }
-          if (res.body.wrong_OTP) {
-            err.wrong_OTP = true
-          }
-          if (res.body.missing_OTP) {
-            err.missing_OTP = true
-            err.preferred_two_factor_authentication =
-              res.body.preferred_two_factor_authentication
-            err.two_factor_authentication_enabled =
-              res.body.two_factor_authentication_enabled
+          if (!res || err.status >= 500) {
+            err.server_error = true
           }
           callback(err)
         } else {
           if (res.body.login) {
             const user = res.body.user
-            store.commit(DATA_LOADING_START, {})
+            store.commit(DATA_LOADING_START)
             callback(null, user)
           } else {
             store.commit(USER_LOGIN_FAIL)
@@ -117,21 +122,17 @@ const auth = {
       if (!store.state.user.isAuthenticated) {
         store
           .dispatch('getOrganisation')
-          .then(() => {
-            next({
-              path: '/login',
-              query: { redirect: to.fullPath }
-            })
-          })
           .catch(err => {
             console.error(err)
+          })
+          .finally(() => {
             next({
-              path: '/login',
+              name: 'login',
               query: { redirect: to.fullPath }
             })
           })
       } else {
-        store.commit(DATA_LOADING_START, {})
+        store.commit(DATA_LOADING_START)
         next()
       }
     }
@@ -140,7 +141,7 @@ const auth = {
       auth.isServerLoggedIn(err => {
         if (err) {
           next({
-            path: '/server-down',
+            name: 'server-down',
             query: { redirect: to.fullPath }
           })
         } else {

src/locales/en.js

@@ -323,6 +323,7 @@ export default {
     information_recovery_code: 'If you are unable to use any other two-factor authentication, enter one of your recovery codes to verify your identity.',
     login: 'Log in',
     login_failed: 'Login failed, please verify your credentials.',
+    login_server_failed: 'A server error occurred while logging in.',
     login_page: 'Cancel',
     redirecting: 'Redirecting in {secondsLeft} seconds...',
     reset_change_password: 'Change password',

src/store/modules/login.js

@@ -108,30 +108,30 @@ const mutations = {
     state.isLoginError = false
   },
 
-  [LOGIN_SUCCESS](state, email) {
+  [LOGIN_SUCCESS](state) {
     state.isLoginLoading = false
     state.isLoginError = false
   },
 
-  [LOGIN_FAILURE](state, email) {
+  [LOGIN_FAILURE](state) {
     state.isLoginLoading = false
     state.isLoginError = true
   },
 
-  [LOGOUT_SUCCESS](state, email) {
+  [LOGOUT_SUCCESS](state) {
     state.isLoginLoading = false
     state.isLoginError = false
   },
 
-  [DATA_LOADING_START](state, payload) {
+  [DATA_LOADING_START](state) {
     state.isDataLoading = true
   },
 
   [DATA_LOADING_END](state) {
     state.isDataLoading = false
   },
 
-  [RESET_ALL](state, email) {
+  [RESET_ALL](state) {
     Object.assign(state, { ...initialState })
   }
 }