FOUR-15298: [37189] Session Inactivity Option

resources/js/bootstrap.js

@@ -32,7 +32,7 @@ import DataTreeToggle from "./components/common/data-tree-toggle.vue";
 import TreeView from "./components/TreeView.vue";
 import FilterTable from "./components/shared/FilterTable.vue";
 import PaginationTable from "./components/shared/PaginationTable.vue";
-import PMDropdownSuggest from './components/PMDropdownSuggest';
+import PMDropdownSuggest from "./components/PMDropdownSuggest";
 import "@processmaker/screen-builder/dist/vue-form-builder.css";
 
 window.__ = translator;
@@ -345,7 +345,14 @@ if (userID) {
   window.ProcessMaker.AccountTimeoutWarnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
   window.ProcessMaker.AccountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
   window.ProcessMaker.AccountTimeoutWorker = new Worker(timeoutScript);
-  window.ProcessMaker.AccountTimeoutWorker.addEventListener("message", (e) => {
+
+  const payloadAccountTimeoutWorker = {
+    timeout: window.ProcessMaker.AccountTimeoutLength,
+    warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
+    enabled: window.ProcessMaker.AccountTimeoutEnabled,
+  };
+
+  window.ProcessMaker.AccountTimeoutWorker.onmessage = (e) => {
     if (e.data.method === "countdown") {
       window.ProcessMaker.sessionModal(
         "Session Warning",
@@ -357,18 +364,27 @@ if (userID) {
     if (e.data.method === "timedOut") {
       window.location = "/logout?timeout=true";
     }
-  });
+  };
 
   // in some cases it's necessary to start manually
   window.ProcessMaker.AccountTimeoutWorker.postMessage({
     method: "start",
-    data: {
-      timeout: window.ProcessMaker.AccountTimeoutLength,
-      warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
-      enabled: window.ProcessMaker.AccountTimeoutEnabled,
-    },
+    data: payloadAccountTimeoutWorker,
   });
 
+  // Restart the timeout worker (when the user interacts with the page)
+  const eventsTimeoutWorker = ["click", "keypress"];
+
+  eventsTimeoutWorker.forEach((event) => {
+    document.addEventListener(event, () => {
+      window.ProcessMaker.AccountTimeoutWorker.postMessage({
+        method: "restart",
+      });
+    });
+  });
+
+  // End -> Restart the timeout worker (when the user interacts with the page)
+
   const isSameDevice = (e) => {
     const localDeviceId = Vue.$cookies.get(e.device_variable);
     const remoteDeviceId = e.device_id;

resources/js/components/Session.vue

@@ -1,75 +1,98 @@
 <template>
-    <b-modal
-        id="sessionModal"
-        ref="sessionModal"
-        :title="title"
-        footer-class="pm-modal-footer"
-        no-close-on-backdrop
-        centered
-    >
-        <span v-html="message"></span>
-        <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>
-        <template #modal-footer>
-            <a role="button" class="btn btn-outline-secondary ml-2" href="/logout" :disabled="disabled">{{('LogOut')}}</a>
-            <button type="button" class="btn btn-secondary ml-2" @click="keepAlive" :disabled="disabled">{{('Stay Connected')}}</button>
-        </template>
-    </b-modal>
+  <b-modal
+    id="sessionModal"
+    ref="sessionModal"
+    :title="title"
+    footer-class="pm-modal-footer"
+    no-close-on-backdrop
+    centered
+    no-close-button
+  >
+    <template #modal-header="{ close }">
+      <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>
+    </div>
+    <template #modal-footer>
+      <a
+        role="button"
+        class="btn btn-outline-secondary ml-2"
+        href="/logout"
+        :disabled="disabled"
+      >{{ ('LogOut') }}</a>
+      <button
+        type="button"
+        class="btn btn-secondary ml-2"
+        :disabled="disabled"
+        @click="keepAlive"
+      >
+        {{ ('Stay Connected') }}
+      </button>
+    </template>
+  </b-modal>
 </template>
 
-
 <script>
 
-    export default {
-        props: ["title", "message", "time", "warnSeconds", "shown"],
-        data() {
-            return {
-              errors: {},
-              disabled: false
-            }
-        },
-        watch: {
-            shown(value) {
-                if (value) {
-                    this.$refs.sessionModal.show();
-                } else {
-                    this.$refs.sessionModal.hide();
-                }
-            }
-        },
-        computed: {
-            percentage() {
-                if (this.time === "" || this.warnSeconds === "") {
-                    return 0;
-                }
-                return Math.round((this.time / this.warnSeconds) * 100);
-            }
-        },
-        methods: {
-            onClose() {
-                this.$emit('close');
-            },
-            keepAlive() {
-                this.disabled = true;
-                ProcessMaker.apiClient
-                  .post("/keep-alive", {}, {baseURL: ''})
-                  .then(() => {
-                    this.disabled = false;
-                    this.onClose();
-                  })
-                  .catch(error => {
-                    this.disabled = false;
-                    this.errors = error.response.data.errors;
-                  });
-            }
-        },
-        mounted() {
-            this.$emit("show");
-        }
-    }
+export default {
+  props: ["title", "message", "time", "warnSeconds", "shown"],
+  data() {
+    return {
+      errors: {},
+      disabled: false,
+    };
+  },
+  computed: {
+    percentage() {
+      if (this.time === "" || this.warnSeconds === "") {
+        return 0;
+      }
+      return Math.round((this.time / this.warnSeconds) * 100);
+    },
+  },
+  watch: {
+    shown(value) {
+      if (value) {
+        this.$refs.sessionModal.show();
+      } else {
+        this.$refs.sessionModal.hide();
+      }
+    },
+  },
+  mounted() {
+    this.$emit("show");
+  },
+  methods: {
+    onClose() {
+      this.$emit("close");
+    },
+    keepAlive() {
+      this.disabled = true;
+
+      ProcessMaker.apiClient
+        .post("/keep-alive", {}, { baseURL: "" })
+        .then(() => {
+          this.disabled = false;
+          this.onClose();
+        })
+        .catch((error) => {
+          this.disabled = false;
+          this.errors = error.response.data.errors;
+        });
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -81,5 +104,4 @@
         display: flex;
     }
 
-
 </style>

resources/js/timeout.js

@@ -1,5 +1,6 @@
 self.time = 0;
 self.interval = null;
+self.restartWorker = false;
 
 self.addEventListener("message", (e) => {
   if (self.hasOwnProperty(e.data.method)) {
@@ -18,15 +19,24 @@ self.start = function (data) {
   const timestampAtStart = Math.floor(Date.now() / 1000);
   const timeoutAt = timestampAtStart + (data.timeout * 60);
 
+  self.restartWorker = false;
+
   clearInterval(self.interval);
-  self.interval = setInterval(function () {
+  self.interval = setInterval(() => {
     const currentTimestamp = Math.floor(Date.now() / 1000);
     const timeRemaining = timeoutAt - currentTimestamp;
 
     if (timeRemaining < data.warnSeconds && timeRemaining > 0) {
       self.postMessage({ method: "countdown", data: { time: timeRemaining } });
     }
 
+    if (timeRemaining > data.warnSeconds && self.restartWorker) {
+      clearInterval(self.interval);
+      self.start(data);
+      self.restartWorker = false;
+      return;
+    }
+
     if (timeRemaining < 1) {
       clearInterval(self.interval);
       self.postMessage({ method: "timedOut", data: { time: timeRemaining } });
@@ -35,5 +45,10 @@ self.start = function (data) {
 };
 
 self.stop = function () {
+  self.restartWorker = false;
   clearInterval(self.interval);
 };
+
+self.restart = function (data) {
+  self.restartWorker = true;
+};