add loader

Author: marcoAntonioNina

resources/js/app-layout.js

@@ -138,6 +138,7 @@ window.ProcessMaker.navbar = new Vue({
       sessionMessage: "",
       sessionTime: "",
       sessionWarnSeconds: "",
+      sessionIsRenewing: false,
       taskTitle: "",
       isMobile: false,
       isMobileDevice: window.ProcessMaker.mobileApp,
@@ -288,6 +289,7 @@ window.ProcessMaker.sessionModal = function (title, message, time, warnSeconds)
 
 window.ProcessMaker.closeSessionModal = function () {
   ProcessMaker.navbar.sessionShow = false;
+  ProcessMaker.navbar.sessionIsRenewing = false;
 };
 
 // Set out own specific confirm modal.

resources/js/bootstrap.js

@@ -355,6 +355,8 @@ if (userID) {
   const sessionLeaderKey = "pm:session:leader";
   const sessionStateKey = "pm:session:state";
   const sessionWarningKey = "pm:session:warning";
+  // Track keep-alive progress across tabs.
+  const sessionRenewingKey = "pm:session:renewing";
   const sessionMessageKey = "pm:session:message";
   const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
   const leaderHeartbeatMs = 4000;
@@ -438,6 +440,7 @@ if (userID) {
   };
 
   let warningState = readStorageJson(sessionWarningKey);
+  let renewingState = readStorageJson(sessionRenewingKey);
 
   const refreshWarningStateFromStorage = () => {
     const storedWarningState = readStorageJson(sessionWarningKey);
@@ -465,6 +468,34 @@ if (userID) {
     sessionDebugLog("warning-state:clear");
   };
 
+  const syncRenewingUi = () => {
+    // Only update if the navbar component exists in this layout.
+    if (window.ProcessMaker.navbar) {
+      window.ProcessMaker.navbar.sessionIsRenewing = !!renewingState;
+    }
+  };
+
+  const refreshRenewingStateFromStorage = () => {
+    const storedRenewingState = readStorageJson(sessionRenewingKey);
+    renewingState = storedRenewingState?.isRenewing ? storedRenewingState : null;
+    syncRenewingUi();
+    return renewingState;
+  };
+
+  const setRenewingState = (isRenewing) => {
+    if (isRenewing) {
+      renewingState = {
+        isRenewing: true,
+        ts: Date.now(),
+      };
+      writeStorageJson(sessionRenewingKey, renewingState);
+    } else {
+      renewingState = null;
+      removeStorageKey(sessionRenewingKey);
+    }
+    syncRenewingUi();
+  };
+
   const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
 
   const broadcastSessionEvent = (type, data = {}) => {
@@ -577,9 +608,15 @@ if (userID) {
       return;
     }
 
+    if (message.type === "renewing") {
+      setRenewingState(!!message.data?.isRenewing);
+      return;
+    }
+
     if (message.type === "renewed" || message.type === "started" || message.type === "activity") {
       const timeout = Number(message.data?.timeout) || window.ProcessMaker.AccountTimeoutLength;
       clearWarningState();
+      setRenewingState(false);
       setSessionState(timeout);
       if (window.ProcessMaker.closeSessionModal) {
         window.ProcessMaker.closeSessionModal();
@@ -592,6 +629,7 @@ if (userID) {
 
     if (message.type === "expired") {
       clearWarningState();
+      setRenewingState(false);
       window.location = "/logout?timeout=true";
     }
   };
@@ -654,8 +692,10 @@ if (userID) {
     if (remainingTime <= 0) {
       sessionDebugLog("warning:skip", { remainingTime });
       clearWarningState();
+      setRenewingState(false);
       return;
     }
+    refreshRenewingStateFromStorage();
     sessionDebugLog("warning:show", { remainingTime });
     // Guard for layouts that don't include the session modal.
     if (typeof window.ProcessMaker.sessionModal === "function") {

resources/js/components/Session.vue

@@ -11,32 +11,46 @@
     <template #modal-header>
       <h5>{{ title }}</h5>
     </template>
-    <span v-html="message" />
-    <div class="progress">
-      <div
-        class="progress-bar progress-bar-striped"
-        role="progressbar"
-        :style="{width: percentage + '%'}"
-      >
-        <span
-          align="left"
-          class="pl-2"
-        >{{ moment().startOf('day').seconds(time).format('mm:ss') }}</span>
+    <div v-if="!isProcessing">
+      <span v-html="message" />
+      <div class="progress">
+        <div
+          class="progress-bar progress-bar-striped"
+          role="progressbar"
+          :style="{width: percentage + '%'}"
+        >
+          <span
+            align="left"
+            class="pl-2"
+          >{{ moment().startOf('day').seconds(time).format('mm:ss') }}</span>
+        </div>
       </div>
     </div>
+    <div
+      v-else
+      class="d-flex align-items-center justify-content-center py-3"
+    >
+      <output
+        class="spinner-border spinner-border-sm mr-2"
+        aria-live="polite"
+      />
+      <span>{{ ("Processing...") }}</span>
+    </div>
     <template #modal-footer>
       <button
+        v-if="!isProcessing"
         type="button"
         class="btn btn-outline-secondary ml-2"
-        :disabled="disabled"
+        :disabled="isBusy"
         @click="logoutNow"
       >
         {{ ('LogOut') }}
       </button>
       <button
+        v-if="!isProcessing"
         type="button"
         class="btn btn-secondary ml-2"
-        :disabled="disabled"
+        :disabled="isBusy"
         @click="keepAlive"
       >
         {{ ('Stay Connected') }}
@@ -48,14 +62,24 @@
 <script>
 
 export default {
-  props: ["title", "message", "time", "warnSeconds", "shown"],
+  props: ["title", "message", "time", "warnSeconds", "shown", "isRenewing"],
   data() {
     return {
       errors: {},
       disabled: false,
+      localRenewing: false,
     };
   },
   computed: {
+    isRenewingEffective() {
+      return this.localRenewing || this.isRenewing;
+    },
+    isProcessing() {
+      return this.isRenewingEffective;
+    },
+    isBusy() {
+      return this.disabled || this.isRenewingEffective;
+    },
     percentage() {
       if (this.time === "" || this.warnSeconds === "") {
         return 0;
@@ -81,11 +105,13 @@ export default {
     },
     keepAlive() {
       this.disabled = true;
+      this.setRenewingState(true);
 
       ProcessMaker.apiClient
         .post("/keep-alive", {}, { baseURL: "" })
         .then(() => {
           this.disabled = false;
+          this.setRenewingState(false);
           const timeout = window.ProcessMaker.AccountTimeoutLength;
           if (window.ProcessMaker.sessionSync?.setSessionState) {
             window.ProcessMaker.sessionSync.setSessionState(timeout);
@@ -113,14 +139,23 @@ export default {
           const status = error?.response?.status;
           if (status === 401 || status === 419) {
             // Session expired server-side; broadcast and redirect.
+            this.setRenewingState(false);
             this.broadcastExpired();
             window.location.href = "/logout";
             return;
           }
           this.disabled = false;
+          this.setRenewingState(false);
           this.errors = error.response.data.errors;
         });
     },
+    setRenewingState(isRenewing) {
+      this.localRenewing = isRenewing;
+      // Broadcast renewal status so other tabs show the spinner.
+      if (window.ProcessMaker.sessionSync?.broadcast) {
+        window.ProcessMaker.sessionSync.broadcast("renewing", { isRenewing });
+      }
+    },
     broadcastExpired() {
       // Sync logout state across tabs.
       if (window.ProcessMaker.sessionSync?.clearWarningState) {
@@ -133,6 +168,7 @@ export default {
     logoutNow() {
       // Ensure other tabs close warning before redirect.
       this.disabled = true;
+      this.setRenewingState(true);
       this.broadcastExpired();
       window.location.href = "/logout";
     },

resources/js/next/layout/navbar.js

@@ -63,6 +63,7 @@ const sessionModal = function (title, message, time, warnSeconds) {
 
 const closeSessionModal = function () {
   ProcessMaker.navbar.sessionShow = false;
+  ProcessMaker.navbar.sessionIsRenewing = false;
 };
 
 // Set out own specific confirm modal.
@@ -137,6 +138,7 @@ const navbar = new Vue({
       sessionMessage: "",
       sessionTime: "",
       sessionWarnSeconds: "",
+      sessionIsRenewing: false,
       taskTitle: "",
       isMobile: false,
       isMobileDevice: mobileApp,

resources/views/layouts/navbar.blade.php

@@ -30,7 +30,7 @@
                             :variant="messageVariant" :callback="messageCallback"
                             @close="messageShow=false">
         </message-modal>
-        <session-modal id="sessionModal" :shown="sessionShow" :title="sessionTitle" :message="sessionMessage" :time="sessionTime" :warn-seconds="sessionWarnSeconds"
+        <session-modal id="sessionModal" :shown="sessionShow" :title="sessionTitle" :message="sessionMessage" :time="sessionTime" :warn-seconds="sessionWarnSeconds" :is-renewing="sessionIsRenewing"
                 @close="sessionShow=false">
         </session-modal>
         <div v-if="alerts.length > 0" class="alert-wrapper">