feat: check user status at intervals with SSO

src/components/AppHeader.vue

@@ -169,7 +169,7 @@
         <div class="desktop flex push-right-desktop">
           <div
             v-if="!isOnline"
-            class="item"
+            class="item network-icon"
           >
             <span
               data-tooltip="Vous êtes hors-ligne,
@@ -362,6 +362,10 @@ export default {
   text-align: center;
 }
 
+.network-icon {
+  padding: .5rem !important;
+}
+
 .crossed-out {
   position: relative;
   padding: .2em;

src/main.js

@@ -101,6 +101,44 @@ const updateOnlineStatus = () => {
   }, 2000);
 };
 
+/**
+ * Regularly updates the user status if using external auth to keep the frontend updated with backend.
+ */
+const updateUserStatus = () => {
+  setInterval(() => {
+    if (navigator.onLine) {
+      axios
+        .get(`${store.state.configuration.VUE_APP_DJANGO_API_BASE}user_info/`)
+        .then((response) => {
+          if (response && response.status === 200) {
+            const user = response.data.user;
+            if (!store.state.user && user) {
+              store.commit('SET_USER', user);
+              store.commit('DISPLAY_MESSAGE', {
+                level: 'positive',
+                comment: `Bienvenue à nouveau ! Vous êtes reconnecté au service d'authentification (SSO).`
+              });
+              store.dispatch('GET_USER_LEVEL_PERMISSIONS');
+              store.dispatch('GET_USER_LEVEL_PROJECTS');
+            }
+          }
+        })
+        .catch(() => {
+          if (store.state.user) {
+            store.commit('SET_USER', false);
+            store.commit('DISPLAY_MESSAGE', {
+              level: 'negative',
+              comment: `Oups ! Vous avez été déconnecté du service d'authentification (SSO).
+                Reconnectez-vous ou continuez en mode anonyme.`
+            });
+            store.dispatch('GET_USER_LEVEL_PERMISSIONS');
+            store.dispatch('GET_USER_LEVEL_PROJECTS');
+          }
+        })
+    }
+  }, 10000);
+};
+
 /**
  * Fetches initial data for the application and initializes the Vue instance.
  */
@@ -131,6 +169,11 @@ const onConfigLoaded = async (config) => {
   // Update the online status at regular intervals.
   updateOnlineStatus();
 
+  // Update the user status at regular intervals if using external auth.
+  if (config.VUE_APP_LOGIN_URL && config.VUE_APP_DISABLE_LOGIN_BUTTON) {
+    updateUserStatus();
+  }
+
   // Set the document title and favicon from the configuration.
   document.title = `${config.VUE_APP_APPLICATION_NAME} ${config.VUE_APP_APPLICATION_ABSTRACT}`;
   setFavicon(config.VUE_APP_APPLICATION_FAVICO);