Show error toast notification on unauthorized access

 -When 403 status code which is an unauthorized access occured
 -show error toast notification.

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: I55fa7052073f87f28c3584b68fd4e84247a4237e

7 files changed, 34 insertions, 40 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 8f004762..4eba7522 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -94,6 +94,7 @@
 </template>
 
 <script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
@@ -111,6 +112,7 @@ export default {
     StatusIcon,
     LoadingBar
   },
+  mixins: [BVToastMixin],
   data() {
     return {
       isNavigationOpen: false,
@@ -118,6 +120,9 @@ export default {
     };
   },
   computed: {
+    isAuthorized() {
+      return this.$store.getters['global/isAuthorized'];
+    },
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
     },
@@ -153,6 +158,16 @@ export default {
       return this.$store.getters['global/username'];
     }
   },
+  watch: {
+    isAuthorized(value) {
+      if (value === false) {
+        this.errorToast(
+          this.$t('global.toast.unAuthDescription'),
+          this.$t('global.toast.unAuthTitle')
+        );
+      }
+    }
+  },
   created() {
     this.getHostInfo();
     this.getEvents();
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 7803cac9..7a4672d6 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -72,6 +72,10 @@
       "selectedItems":"%{filterCount} of %{count} items",
       "toDate": "To date",
       "viewAll": "View all"
+    },
+    "toast": {
+      "unAuthTitle": "Unauthorized",
+      "unAuthDescription": "The attempted action is not accessible from the logged in account. Contact your system administrator to check your privilege role."
     }
   },
   "appHeader": {
@@ -134,7 +138,6 @@
     "serverPowerOperations": "Server power operations",
     "snmpSettings": "SNMP settings",
     "sslCertificates": "SSL certificates",
-    "unauthorized": "Unauthorized",
     "virtualMedia": "Virtual media"
   },
   "pageChangePassword": {
@@ -645,9 +648,6 @@
       "successReplaceCertificate": "Successfully replaced %{certificate}."
     }
   },
-  "pageUnauthorized": {
-    "description": "The attempted action is not accessible from the logged in account. Contact your system administrator to check your privilege role."
-  },
   "pageVirtualMedia": {
     "configureConnection": "Configure Connection",
     "defaultDeviceName": "Virtual media device",
diff --git a/src/router/routes.js b/src/router/routes.js
index 1a86510c..968a5ea7 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -23,7 +23,6 @@ import SerialOverLanConsole from '@/views/Control/SerialOverLan/SerialOverLanCon
 import ServerLed from '@/views/Control/ServerLed';
 import ServerPowerOperations from '@/views/Control/ServerPowerOperations';
 import SslCertificates from '@/views/AccessControl/SslCertificates';
-import Unauthorized from '@/views/Unauthorized';
 import VirtualMedia from '@/views/Control/VirtualMedia';
 import i18n from '@/i18n';
 
@@ -228,14 +227,6 @@ const routes = [
         }
       },
       {
-        path: '/unauthorized',
-        name: 'unauthorized',
-        component: Unauthorized,
-        meta: {
-          title: i18n.t('appPageTitle.unauthorized')
-        }
-      },
-      {
         path: '*',
         name: 'page-not-found',
         component: PageNotFound,
diff --git a/src/store/api.js b/src/store/api.js
index ac1b2e36..77d94329 100644
--- a/src/store/api.js
+++ b/src/store/api.js
@@ -1,6 +1,4 @@
 import Axios from 'axios';
-import router from '@/router';
-
 //Do not change store import.
 //Exact match alias set to support
 //dotenv customizations.
@@ -23,14 +21,10 @@ api.interceptors.response.use(undefined, error => {
   }
 
   if (response.status == 403) {
-    if (router.history.current.name === 'unauthorized') {
-      // Check if current router location is unauthorized
-      // to avoid NavigationDuplicated errors.
-      // The router throws an error if trying to push to the
-      // same/current router location.
-      return;
-    }
-    router.push({ name: 'unauthorized' });
+    // Check if action is unauthorized.
+    // Toast error message will appear on screen
+    // when the action is unauthorized.
+    store.commit('global/setUnauthorized');
   }
 
   return Promise.reject(error);
diff --git a/src/store/modules/GlobalStore.js b/src/store/modules/GlobalStore.js
index 03301538..5af5dfe6 100644
--- a/src/store/modules/GlobalStore.js
+++ b/src/store/modules/GlobalStore.js
@@ -35,14 +35,16 @@ const GlobalStore = {
     isUtcDisplay: localStorage.getItem('storedUtcDisplay')
       ? JSON.parse(localStorage.getItem('storedUtcDisplay'))
       : true,
-    username: localStorage.getItem('storedUsername')
+    username: localStorage.getItem('storedUsername'),
+    isAuthorized: true
   },
   getters: {
     hostStatus: state => state.hostStatus,
     bmcTime: state => state.bmcTime,
     languagePreference: state => state.languagePreference,
     isUtcDisplay: state => state.isUtcDisplay,
-    username: state => state.username
+    username: state => state.username,
+    isAuthorized: state => state.isAuthorized
   },
   mutations: {
     setBmcTime: (state, bmcTime) => (state.bmcTime = bmcTime),
@@ -51,7 +53,13 @@ const GlobalStore = {
     setLanguagePreference: (state, language) =>
       (state.languagePreference = language),
     setUsername: (state, username) => (state.username = username),
-    setUtcTime: (state, isUtcDisplay) => (state.isUtcDisplay = isUtcDisplay)
+    setUtcTime: (state, isUtcDisplay) => (state.isUtcDisplay = isUtcDisplay),
+    setUnauthorized: state => {
+      state.isAuthorized = false;
+      window.setTimeout(() => {
+        state.isAuthorized = true;
+      }, 100);
+    }
   },
   actions: {
     async getBmcTime({ commit }) {
diff --git a/src/views/Unauthorized/Unauthorized.vue b/src/views/Unauthorized/Unauthorized.vue
deleted file mode 100644
index 6ec513f8..00000000
--- a/src/views/Unauthorized/Unauthorized.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <b-container fluid="xl">
-    <page-title :description="$t('pageUnauthorized.description')" />
-  </b-container>
-</template>
-<script>
-import PageTitle from '@/components/Global/PageTitle';
-export default {
-  name: 'Unauthorized',
-  components: { PageTitle }
-};
-</script>
diff --git a/src/views/Unauthorized/index.js b/src/views/Unauthorized/index.js
deleted file mode 100644
index 4b4364bf..00000000
--- a/src/views/Unauthorized/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Unauthorized from './Unauthorized.vue';
-export default Unauthorized;