Improved: code by adding loader when logging out(#60)

src/App.vue

@@ -9,7 +9,7 @@ import { createAnimation, IonApp, IonRouterOutlet, loadingController } from '@io
 import { useAuthStore } from "@/store/auth";
 import { useRouter } from "vue-router";
 import { defineComponent } from 'vue';
-import { initialise } from '@/adapter';
+import { initialise, resetConfig } from '@/adapter';
 import emitter from "@/event-bus"
 
 export default defineComponent({
@@ -25,13 +25,16 @@ export default defineComponent({
     }
   },
   methods: {
-    async presentLoader() {
+    async presentLoader(options = { message: '', backdropDismiss: true } as any) {
+      // When having a custom message remove already existing loader
+      if(options.message && this.loader) this.dismissLoader();
+
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: this.$t("Click the backdrop to dismiss."),
+            message: options.message ? this.$t(options.message) : this.$t("Click the backdrop to dismiss."),
             translucent: true,
-            backdropDismiss: true
+            backdropDismiss: options.backdropDismiss
           });
       }
       this.loader.present();
@@ -87,6 +90,21 @@ export default defineComponent({
       }
     })
   },
+  async mounted() {
+    this.loader = await loadingController
+      .create({
+        message: this.$t("Click the backdrop to dismiss."),
+        translucent: true,
+        backdropDismiss: true
+      });
+    emitter.on('presentLoader', this.presentLoader);
+    emitter.on('dismissLoader', this.dismissLoader);
+  },
+  unmounted() {
+    emitter.off('presentLoader', this.presentLoader);
+    emitter.off('dismissLoader', this.dismissLoader);
+    resetConfig()
+  },
   setup () {
     const router = useRouter();
     const authStore = useAuthStore();

src/locales/en.json

@@ -4,6 +4,7 @@
   "Launch Pad": "Launch Pad",
   "Login": "Login",
   "Logout": "Logout",
+  "Logging out...": "Logging out...",
   "Next": "Next",
   "OMS": "OMS",
   "Password": "Password",

src/store/auth.ts

@@ -4,6 +4,7 @@
 import { hasError, logout, updateInstanceUrl, updateToken } from '@/adapter';
 import { showToast } from '@/util';
 import { translate } from '@/i18n'
+import emitter from "@/event-bus";
 
 export const useAuthStore = defineStore('authStore', {
   state: () => ({
@@ -45,7 +46,7 @@
         const resp = await UserService.login(username, password);
         if (hasError(resp)) {
           showToast(translate('Sorry, your username or password is incorrect. Please try again.'));
           console.error("error", resp.data._ERROR_MESSAGE_);
           return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
         }
 
@@ -65,7 +66,7 @@
         // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
         // TODO Check if handling of specific status codes is required.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },
@@ -82,7 +83,7 @@
         // If any of the API call in try block has status code other than 2xx it will be handled in common catch block.
         // TODO Check if handling of specific status codes is required.
         showToast(translate('Something went wrong while login. Please contact administrator.'));
         console.error("error: ", error);
         return Promise.reject(new Error(error))
       }
     },
@@ -90,6 +91,7 @@
       // Calling the logout api to flag the user as logged out, only when user is authorised
       // if the user is already unauthorised then not calling the logout api as it returns 401 again that results in a loop, thus there is no need to call logout api if the user is unauthorised
       if(!payload?.isUserUnauthorised) {
+        emitter.emit("presentLoader",{ message: "Logging out...", backdropDismiss: false });
         await logout();
       }
 
@@ -102,6 +104,7 @@
       }
       this.redirectUrl = ''
       updateToken('');
+      emitter.emit('dismissLoader')
     },
     async setToken(token: any, expirationTime: any) {
       this.token = {