update: add countdown timer to token expiration warning dialog (#1096)

- add a countdown timer to the token expiration warning dialog - wrote unit tests for the frontend changes - added multi lang to the new components created
bcgov · Oct 20, 2023 · e14f09f · e14f09f
1 parent 3b3cd06
commit e14f09f
Show file tree

Hide file tree

Showing 26 changed files with 480 additions and 26 deletions.
diff --git a/app/frontend/src/components/base/BaseDialog.vue b/app/frontend/src/components/base/BaseDialog.vue
@@ -3,8 +3,8 @@
     :max-width="width"
     persistent
     v-bind:value="value"
-    @click:outside="closeDialog"
-    @keydown.esc="closeDialog"
+    @click:outside="isClickOutsideDisabled ? null : closeDialog"
+    @keydown.esc="isClickOutsideDisabled ? null : closeDialog"
   >
     <v-card>
       <div class="dialog-body" :class="{ 'dir-rtl': isRTL }">
@@ -136,6 +136,10 @@ export default {
       default: false,
       type: Boolean,
     },
+    isClickOutsideDisabled: {
+      default: false,
+      type: Boolean,
+    },
     type: {
       default: null,
       type: String,

diff --git a/app/frontend/src/components/base/BaseTime.vue b/app/frontend/src/components/base/BaseTime.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="d-flex flex-row">
+    <div class="d-flex flex-row">
+      <div>{{ minutes }}</div>
+      <div class="ml-1" :lang="lang" :class="{ 'dir-rtl': isRTL }">
+        {{ $t('trans.baseTime.minutes') }}
+      </div>
+    </div>
+    <div class="d-flex flex-row ml-2">
+      <div>{{ seconds }}</div>
+      <div class="ml-1" :lang="lang" :class="{ 'dir-rtl': isRTL }">
+        {{ $t('trans.baseTime.seconds') }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import moment from 'moment';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'BaseTime',
+  props: {
+    action: { type: String, default: '' },
+  },
+  data() {
+    return {
+      timerDate: moment().add(15, 'minutes'),
+      now: moment(),
+      timerInterval: null,
+    };
+  },
+  computed: {
+    ...mapGetters('form', ['isRTL', 'lang']),
+    seconds() {
+      let sec = Math.trunc(this.timerDate.diff(this.now, 'seconds') % 60);
+      if (this.minutes === 0 && sec === 28) {
+        this.$emit('timer-stopped');
+      }
+      return sec;
+    },
+    minutes() {
+      return this.timerDate.diff(this.now, 'minutes');
+    },
+  },
+  watch: {
+    action: {
+      immediate: true,
+      handler() {
+        if (this.action === 'start') {
+          clearInterval(this.timerInterval);
+          this.timerInterval = window.setInterval(() => {
+            this.now = moment();
+          }, 1000);
+        } else if (this.action === 'stop') {
+          clearInterval(this.timerInterval);
+          this.timerDate = '';
+          this.now = '';
+          this.timerInterval = null;
+        }
+      },
+    },
+  },
+  beforeUnmount() {
+    clearInterval(this.timerInterval);
+  },
+};
+</script>
+<style lang="scss" scoped>
+.v-text-field > .v-input__control > .v-input__slot:before {
+  border-style: none !important;
+}
+</style>
diff --git a/app/frontend/src/components/base/BaseWarningDialog.vue b/app/frontend/src/components/base/BaseWarningDialog.vue
@@ -1,17 +1,10 @@
 <template>
   <BaseDialog
     type="CONTINUE"
-    :showCloseButton="true"
+    :isClickOutsideDisabled="true"
     :width="'50%'"
     :value="showTokenExpiredWarningMSg"
-    @close-dialog="
-      () => {
-        setTokenExpirationWarningDialog({
-          showTokenExpiredWarningMSg: false,
-          resetToken: false,
-        });
-      }
-    "
+    @close-dialog="onClose"
     @continue-dialog="
       () => {
         setTokenExpirationWarningDialog({
@@ -21,28 +14,71 @@
       }
     "
   >
-    <template #title><span>Session expiring</span></template>
+    <template #title
+      ><span :lang="lang">{{
+        $t('trans.baseWarningDialog.sessionExpiring')
+      }}</span></template
+    >
     <template #text>
-      <div class="text-display-4">
-        Your session will expire soon and you will be signed out automatically.
+      <div class="text-display-4 d-flex flex-row" :class="{ 'dir-rtl': isRTL }">
+        <span :lang="lang">{{
+          $t('trans.baseWarningDialog.sessionExpireIn')
+        }}</span>
+        <span class="ml-2">
+          <BaseTime
+            @timer-stopped="onClose"
+            :action="showTokenExpiredWarningMSg ? 'start' : 'stop'"
+          /> </span
+        ><span class="mr-2">.</span>
+        <span :lang="lang">{{
+          $t('trans.baseWarningDialog.signedOutAutomatically')
+        }}</span>
+      </div>
+
+      <div class="text-display-3 mt-3" :class="{ 'dir-rtl': isRTL }">
+        {{ $t('trans.baseWarningDialog.wantStaySignedIn') }}
       </div>
-      <div class="text-display-3 mt-3">Do you want to stay signed in?</div>
     </template>
     <template #button-text-continue>
-      <span>Confirm</span>
+      <span :lang="lang" :class="{ 'dir-rtl': isRTL }">{{
+        $t('trans.baseWarningDialog.staySignedIn')
+      }}</span>
+    </template>
+    <template #button-text-cancel>
+      <span :lang="lang" :class="{ 'dir-rtl': isRTL }">
+        {{ $t('trans.baseWarningDialog.logout') }}</span
+      >
     </template>
   </BaseDialog>
 </template>
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { ref } from 'vue';
 
 export default {
   name: 'BaseWarningDialog',
+  data() {
+    return {
+      action: ref('start'),
+      now: Math.trunc(new Date().getTime() / 1000),
+    };
+  },
   computed: {
     ...mapGetters('auth', ['showTokenExpiredWarningMSg']),
+    ...mapGetters('form', ['isRTL', 'lang']),
   },
   methods: {
     ...mapActions('auth', ['setTokenExpirationWarningDialog']),
+    onClose() {
+      this.setTokenExpirationWarningDialog({
+        showTokenExpiredWarningMSg: false,
+        resetToken: false,
+      });
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    clearInterval(this.showTokenExpiredWarningMSg);
+    next();
   },
 };
 </script>
diff --git a/app/frontend/src/internationalization/trans/chefs/ar/ar.json b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "خطأ في حفظ إعدادات الاشتراك للنموذج {formId}: {error}"
     }
   },
+  "baseTime":{
+    "minutes": "دقائق",
+    "seconds": "ثواني"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "انتهاء الجلسة",
+    "sessionExpireIn": "ستنتهي جلستك في",
+    "signedOutAutomatically": "سيتم تسجيل خروجك تلقائيًا.",
+    "wantStaySignedIn": "هل تريد البقاء مسجل الدخول؟",
+    "staySignedIn": "البقاء مسجل الدخول",
+    "logout": "تسجيل خروج"
+  },
   "admin": {
     "root": {
       "admin": "مسؤل"

diff --git a/app/frontend/src/internationalization/trans/chefs/de/de.json b/app/frontend/src/internationalization/trans/chefs/de/de.json
@@ -867,6 +867,18 @@
     "about": "Um",
     "pageNotFound": "404 Seite nicht gefunden. :("
   },
+  "baseTime":{
+    "minutes": "Protokoll",
+    "seconds": "Sekunden"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "Sitzung läuft ab",
+    "sessionExpireIn": "Ihre Sitzung läuft in ab",
+    "signedOutAutomatically": "Sie werden automatisch abgemeldet.",
+    "wantStaySignedIn": "Möchten Sie angemeldet bleiben?",
+    "staySignedIn": "Bleiben Sie angemeldet",
+    "logout": "Ausloggen"
+  },
   "store": {
     "admin": {
       "addFormOwnerRole": "Die Besitzerrolle für dieses Formular wurde zu {fullName} hinzugefügt.",

diff --git a/app/frontend/src/internationalization/trans/chefs/en/en.json b/app/frontend/src/internationalization/trans/chefs/en/en.json
@@ -988,5 +988,17 @@
       "history": "HISTORY",
       "user": "User"
     }
+  },
+  "baseTime":{
+    "minutes": "Minutes",
+    "seconds": "Seconds"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "Session expiring",
+    "sessionExpireIn": "Your session will expire in",
+    "signedOutAutomatically": "You will be signed out automatically.",
+    "wantStaySignedIn": "Do you want to stay signed in?",
+    "staySignedIn": "Stay Signed In",
+    "logout": "Logout"
   }
 }
diff --git a/app/frontend/src/internationalization/trans/chefs/es/es.json b/app/frontend/src/internationalization/trans/chefs/es/es.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "Error al guardar la configuración de suscripción para el formulario {formId}: {error}"
     }
   },
+  "baseTime":{
+    "minutes": "Minutos",
+    "seconds": "Segundos"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "La sesión expira",
+    "sessionExpireIn": "Su sesión caducará en",
+    "signedOutAutomatically": "Se cerrará tu sesión automáticamente.",
+    "wantStaySignedIn": "¿Quieres permanecer registrado?",
+    "staySignedIn": "Stay Signed In",
+    "logout": "Logout"
+  },
   "admin": {
     "root": {
       "admin": "Administración"

diff --git a/app/frontend/src/internationalization/trans/chefs/fa/fa.json b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "خطا در ذخیره تنظیمات اشتراک برای فرم {formId}: {error}"
     }
   },
+  "baseTime":{
+    "minutes": "دقایق",
+    "seconds": "ثانیه ها"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "جلسه در حال انقضا است",
+    "sessionExpireIn": "جلسه شما به پایان می رسد",
+    "signedOutAutomatically": "شما به طور خودکار از سیستم خارج خواهید شد.",
+    "wantStaySignedIn": "آیا می خواهید وارد سیستم شوید؟",
+    "staySignedIn": "وارد سیستم بمانید",
+    "logout": "خروج"
+  },
   "admin": {
     "root": {
       "admin": "مدیر"

diff --git a/app/frontend/src/internationalization/trans/chefs/fr/fr.json b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "Erreur lors de l'enregistrement des paramètres d'abonnement pour le formulaire {formId} : {error}"
     }
   },
+  "baseTime":{
+    "minutes": "Minutes",
+    "seconds": "Seconds"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "Session expirant",
+    "sessionExpireIn": "Votre session expirera dans",
+    "signedOutAutomatically": "Vous serez déconnecté automatiquement.",
+    "wantStaySignedIn": "Voulez-vous rester connecté ?",
+    "staySignedIn": "Rester connecté",
+    "logout": "Se déconnecter"
+  },
   "admin": {
     "root": {
       "admin": "Administrateur"

diff --git a/app/frontend/src/internationalization/trans/chefs/hi/hi.json b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "फ़ॉर्म {formId} के लिए सदस्यता सेटिंग सहेजने में त्रुटि: {त्रुटि}"
     }
   },
+  "baseTime":{
+    "minutes": "मिनट",
+    "seconds": "सेकंड"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "सत्र समाप्त हो रहा है",
+    "sessionExpireIn": "आपका सत्र समाप्त हो जाएगा",
+    "signedOutAutomatically": "आप स्वचालित रूप से साइन आउट हो जाएंगे.",
+    "wantStaySignedIn": "क्या आप साइन इन रहना चाहते हैं?",
+    "staySignedIn": "साइन इन रहें",
+    "logout": "लॉग आउट"
+  },
   "admin": {
     "root": {
       "admin": "व्यवस्थापक"

diff --git a/app/frontend/src/internationalization/trans/chefs/it/it.json b/app/frontend/src/internationalization/trans/chefs/it/it.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "Errore durante il salvataggio delle impostazioni di sottoscrizione per il modulo {formId}: {error}"
     }
   },
+  "baseTime":{
+    "minutes": "Minuti",
+    "seconds": "Secondi"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "Sessione in scadenza",
+    "sessionExpireIn": "La tua sessione scadrà tra",
+    "signedOutAutomatically": "Verrai disconnesso automaticamente.",
+    "wantStaySignedIn": "Vuoi rimanere connesso?",
+    "staySignedIn": "Stay Signed In",
+    "logout": "Logout"
+  },
   "admin": {
     "root": {
       "admin": "Amministratore"

diff --git a/app/frontend/src/internationalization/trans/chefs/ja/ja.json b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
@@ -971,6 +971,18 @@
       "saveSubscriptionSettingsConsErrMsg": "フォーム {formId} のサブスクリプション設定を保存中にエラーが発生しました: {error}"
     }
   },
+  "baseTime":{
+    "minutes": "分",
+    "seconds": "秒"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "セッションが期限切れになります",
+    "sessionExpireIn": "セッションの有効期限は次のとおりです",
+    "signedOutAutomatically": "自動的にサインアウトされます。",
+    "wantStaySignedIn": "サインインしたままにしますか?",
+    "staySignedIn": "Stay Signed In",
+    "logout": "Logout"
+  },
   "admin": {
     "root": {
       "admin": "管理者"

diff --git a/app/frontend/src/internationalization/trans/chefs/ko/ko.json b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
@@ -867,6 +867,18 @@
     "about": "에 대한",
     "pageNotFound": "404 페이지를 찾을 수 없습니다. :("
   },
+  "baseTime":{
+    "minutes": "분",
+    "seconds": "초"
+  },
+  "baseWarningDialog": {
+    "sessionExpiring": "세션 만료",
+    "sessionExpireIn": "세션이 만료됩니다.",
+    "signedOutAutomatically": "자동으로 로그아웃됩니다.",
+    "wantStaySignedIn": "로그인 상태를 유지하시겠습니까?",
+    "staySignedIn": "로그인 상태 유지",
+    "logout": "로그 아웃"
+  },
   "store": {
     "admin": {
       "addFormOwnerRole": "이 양식의 소유자 역할을 {fullName}에 추가했습니다.",