Merge branch 'redmine-issues/18905' into 'develop'

REDMINE_ISSUE-18905 | Gestion du signin/signout erronée

See merge request !858

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/components/MessageInfoList.vue

@@ -41,12 +41,19 @@ export default {
   z-index: 99;
   opacity: 0.95;
   width: calc(100% - 4em); /* 4em is #content left + right paddings */
-  top: calc(61px + 1em); /* 61px is #app-header height */
+  top: calc(40px + 1em); /* 40px is #app-header height */
   right: 2em; /* 2em is #content left paddings */
 }
 .message-list{
-    list-style: none;
-    padding-left: 0;
-    margin-top: 0;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+}
+@media screen and (max-width: 725px) {
+  .row.over-content {
+    top: calc(80px + 1em); /* 90px is #app-header height in mobile display */
+    width: calc(100% - 2em);
+    right: 1em;
+  } 
 }
 </style>
\ No newline at end of file

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.`
+              });
+              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: `Vous avez été déconnecté du service d'authentification.
+                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);