Merge pull request #3386 from modoboa/qol/display-loading-on-loading

Display text when login on new-admin
modoboa · Dec 20, 2024 · 049b24f · 049b24f
2 parents 97e2cf2 + 52c31a2
commit 049b24f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 11 deletions.
diff --git a/docker/Dockerfile.dev b/docker/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM python:3.12-alpine AS base
+FROM python:3.12-alpine3.20 AS base
 
 LABEL org.opencontainers.image.authors="Antoine Nguyen <tonio@ngyn.org>"
 ENV VIRTUAL_ENV=/opt/venv

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -280,15 +280,21 @@ router.beforeEach(async (to, from, next) => {
     if (!authStore.authUser) {
       await authStore.initialize()
     }
-    authStore.validateAccess()
-    if (to.meta.allowedRoles !== undefined) {
-      if (to.meta.allowedRoles.indexOf(authStore.authUser.role) === -1) {
+    const isAuth = await authStore.validateAccess()
+    if (isAuth) {
+      if (to.meta.allowedRoles !== undefined) {
+        if (to.meta.allowedRoles.indexOf(authStore.authUser.role) === -1) {
+          next({ name: 'Dashboard' })
+          return
+        }
+      }
+      if (to.meta.requiresMailbox && !authStore.authUser.mailbox) {
         next({ name: 'Dashboard' })
         return
       }
-    }
-    if (to.meta.requiresMailbox && !authStore.authUser.mailbox) {
-      next({ name: 'Dashboard' })
+    } else {
+      next({ name: 'Login' })
+      return
     }
   }
   next()

diff --git a/frontend/src/stores/auth.store.js b/frontend/src/stores/auth.store.js
@@ -115,11 +115,11 @@ export const useAuthStore = defineStore('auth', () => {
   async function validateAccess() {
     const user = await manager.getUser()
     if (!user || user.expired) {
-      manager.signinRedirect()
-      return
+      return false
     }
     repository.defaults.headers.common.Authorization = `Bearer ${user.access_token}`
     repository.defaults.headers.post['Content-Type'] = 'application/json'
+    return true
   }
 
   async function login() {
@@ -145,6 +145,8 @@ export const useAuthStore = defineStore('auth', () => {
       return user
     } catch (error) {
       console.error('Error completing login:', error)
+      // Redirect to Dashboard so the router will attempt again login
+      router.push({ name: 'Dashboard' })
       return null
     }
   }

diff --git a/frontend/src/views/login/LoginCallbackView.vue b/frontend/src/views/login/LoginCallbackView.vue
@@ -9,4 +9,18 @@ onMounted(() => {
 </script>
 
 <template>
+  <v-container class="fill-height" fluid>
+    <v-row align="center" justify="center">
+      <v-col cols="auto" class="text-center">
+      <h1 class="ma-5">{{ $gettext('Attempting to log you in.') }}</h1>
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        :size="128"
+        :width="12"
+        align-self="center"
+      ></v-progress-circular>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
diff --git a/frontend/src/views/login/LoginView.vue b/frontend/src/views/login/LoginView.vue
@@ -13,8 +13,15 @@ onMounted(() => authStore.login())
 <template>
   <v-container class="fill-height" fluid>
     <v-row align="center" justify="center">
-      <v-col>
-        <h1>{{ $gettext('Attempting to log you in.') }}</h1>
+      <v-col cols="auto" class="text-center">
+      <h1 class="ma-5">{{ $gettext('Attempting to log you in.') }}</h1>
+      <v-progress-circular
+        color="primary"
+        indeterminate
+        :size="128"
+        :width="12"
+        align-self="center"
+      ></v-progress-circular>
       </v-col>
     </v-row>
   </v-container>