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 <[email protected]>
Change-Id: I55fa7052073f87f28c3584b68fd4e84247a4237e

Author: Sukanya Pandey

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,13 +112,17 @@ export default {
     StatusIcon,
     LoadingBar
   },
+  mixins: [BVToastMixin],
   data() {
     return {
       isNavigationOpen: false,
       altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`
     };
   },
   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();

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",

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';
 
@@ -227,14 +226,6 @@ const routes = [
           title: i18n.t('appPageTitle.virtualMedia')
         }
       },
-      {
-        path: '/unauthorized',
-        name: 'unauthorized',
-        component: Unauthorized,
-        meta: {
-          title: i18n.t('appPageTitle.unauthorized')
-        }
-      },
       {
         path: '*',
         name: 'page-not-found',

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);

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 }) {