Merge pull request #9 from bcgov/auth-jwt-front-backend-integration

Auth and jwt integration with front/backend.

frontend/package.json

@@ -13,6 +13,7 @@
     "@bcgov/bc-sans": "^2.0.0",
     "@js-joda/core": "^5.5.3",
     "axios": "^1.4.0",
+    "http-status-codes": "^2.2.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "pinia": "^2.1.6",

frontend/src/App.vue

@@ -21,6 +21,7 @@ import NavBar from '@/components/util/NavBar.vue'
 import SnackBar from '@/components/util/SnackBar.vue'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
+import HttpStatus from 'http-status-codes'
 
 export default {
   name: 'App',
@@ -60,9 +61,18 @@ export default {
     this.handleWebSocket()
   },
   async created() {
-    /*TODO: uncomment when integrating with backend...
-    await this.getConfig();
-    */
+    //this.setLoading(true);
+    this.getJwtToken().then(() =>
+      Promise.all([this.getConfig()])
+    ).catch(e => {
+      if(! e.response || e.response.status !== HttpStatus.UNAUTHORIZED) {
+        this.logout();
+        this.$router.replace({name: 'error', query: { message: `500_${e.data || 'ServerError'}` } });
+      }
+    }).finally(() => {
+      //this.setLoading(false);
+    });
+    //this.setLoading(false);
   },
   methods: {
     ...mapActions(useAppStore, ['getConfig']),

frontend/src/components/Header.vue

@@ -3,28 +3,16 @@
   <v-app-bar absolute color="rgb(0, 51, 102)" class="sysBar pl-10 pr-10" style="z-index: 1002">
     <!-- Navbar content -->
     <a tabindex="-1" href="/">
-      <img
-        tabindex="-1"
-        src="@/assets/images/bc-gov-logo.svg"
-        width="155"
-        class="logo"
-        alt="B.C. Government Logo"
-      />
+      <img tabindex="-1" src="@/assets/images/bc-gov-logo.svg" class="logo" alt="B.C. Government Logo" />
     </a>
-    <!-- TODO: during auth/backend integration, replace true with authStore().isAuthenticated to following v-if -->
-    <a v-if="true" tabindex="-1" href="/">
-      <v-toolbar-title
-        ><h3 style="color: white">{{ secureAppTitle }}</h3></v-toolbar-title
-      >
-    </a>
-    <a v-else tabindex="-1" href="/">
-      <v-toolbar-title
-        ><h3 style="color: white">{{ appTitle }}</h3></v-toolbar-title
-      >
+    <a tabindex="-1" href="/">
+      <img class="verticalLine" />
     </a>
-    <v-spacer />
-    <!-- TODO: replace true with authStore().isAuthenticated && user to following v-if -->
-    <div v-if="true">
+    <v-toolbar-title style="margin-left: 0px;">
+      <h3>{{ appTitle }}</h3>
+    </v-toolbar-title>
+    <v-spacer></v-spacer>
+    <div v-if="isAuthenticated && user">
       <v-menu name="user_options" offset-y>
         <template #activator="{ props }">
           <v-chip v-bind="props" tabindex="0" pill color="#003366" dark>
@@ -35,12 +23,7 @@
           </v-chip>
         </template>
         <v-list dark style="background-color: #003366; color: white">
-          <v-list-item
-            :href="routes.LOGOUT"
-            id="logout_button"
-            style="min-height: 4vh"
-            title="Logout"
-          />
+          <v-list-item :href="routes.LOGOUT" id="logout_button" style="min-height: 4vh" title="Logout" />
         </v-list>
       </v-menu>
     </div>
@@ -56,22 +39,21 @@ export default {
   data() {
     return {
       appTitle: import.meta.env.VITE_APP_TITLE,
-      secureAppTitle: import.meta.env.VITE_APP_TITLE,
       routes: Routes,
-      //user: null
-      user: { userName: 'John Smith' }
+      user: null
     }
   },
   created() {
-    //  this.getUserInfo().then(()=> {
-    //    this.user = this.userInfo;
-    //  });
+    useAuthStore().getUserInfo().then(() => {
+      this.user = this.userInfo;
+    });
   },
   computed: {
     ...mapState(useAuthStore, ['userInfo', 'isAuthenticated'])
   },
   methods: {
-    ...mapActions(useAuthStore, ['getUserInfo'])
+    ...mapActions(useAuthStore, ['getUserInfo']),
+    useAuthStore
   }
 }
 </script>
@@ -87,6 +69,17 @@ a {
 
 .logo {
   padding-right: 15px;
+  padding-top: 4px;
+  width: 205px;
+  height: 77px;
+}
+
+.verticalLine {
+  border-left: 1px solid #DFB433;
+  height: 50px;
+  margin-left: 12px;
+  padding-left: 24px;
+  margin-top: 4px;
 }
 
 .gov-header .title {
@@ -123,4 +116,8 @@ a {
   padding-top: 20px;
   height: 80%;
 }
+
+.mainTitle {
+  font-size: 1.0rem;
+}
 </style>

frontend/src/components/Home.vue

@@ -1,4 +1,9 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <v-card title="OFM" subtitle="Temp Home Screen" text="..." style="height: 100%"></v-card>
+  <v-card
+    title="OFM"
+    subtitle="Temp Home Screen"
+    text="..."
+    style="height:100%;"
+  ></v-card>
 </template>

frontend/src/components/ModalIdle.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { Routes } from '@/utils/constants'
-// TODO... import ApiService from '@/common/apiService';
+import ApiService from '@/common/apiService';
 import { mapState } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
 
@@ -26,7 +26,6 @@ export default {
     async checkAndLogoutUserOnSessionExpiry() {
       if (this.isAuthenticated) {
         try {
-          /* TODO...
           const response = await ApiService.apiAxios.get(Routes.SESSION_REMAINING_TIME);
           if (response.data > 0) {
             const timeOutValue = parseInt(response.data) + 200; // add 200 ms
@@ -36,7 +35,6 @@ export default {
           } else {
             window.location = document.getElementById('logout_href').href;
           }
-          */
         } catch (e) {
           window.location = document.getElementById('logout_href').href
         }

frontend/src/components/util/NavBar.vue

@@ -72,6 +72,7 @@
       style="z-index: 1001"
       :dark="true"
       class="pl-12 pr-8"
+      density="compact"
     >
       <v-app-bar-nav-icon
         id="menuBtn"
@@ -86,14 +87,15 @@
         {{ title }}
       </v-toolbar-title>
       <v-spacer />
-      <SetNavigation />
+      <SetNavigation/>
     </v-app-bar>
-    <v-app-bar
-      v-if="bannerColor"
-      style="color: white; z-index: 1000"
-      :color="bannerColor"
-      absolute
-      density="compact"
+    <v-app-bar v-if="bannerColor !== ''"
+               style="color:white;"
+               :color="bannerColor"
+               sticky
+               dense
+               height="20rem"
+               clipped-left
     >
       <div>
         <h3 class="envBanner pl-5">{{ bannerEnvironment }} Environment</h3>
@@ -123,12 +125,12 @@ export default {
   data() {
     return {
       drawer: null,
-      bannerEnvironment: '{tbd}', //TODO: replace value with null during integration with backend
-      bannerColor: 'blue' //TODO: replace value with null during integration with backend
+      bannerEnvironment: 'DEV', //TODO: replace value with null when we've sorted out loading it from configuration
+      bannerColor: '#8D28D7' //TODO: replace value with null when we've sorted out loading it from configuration
     }
   },
   async created() {
-    /* TODO: uncomment during integration with backend...
+    /* TODO: Uncomment if we are loading bannerEvn and banner cole from configuration
     appStore().getConfig().then(() => {
       this.bannerEnvironment = this.config.BANNER_ENVIRONMENT;
       this.bannerColor = this.config.BANNER_COLOR;

frontend/src/main.js

@@ -18,10 +18,6 @@ import webSocketService from '@/services/web-socket-service'
 import App from './App.vue'
 import router from './router'
 
-/*TODO: uncomment when integrating with backend
-import ApiService from '@/common/apiService';
-*/
-
 const myCustomLightTheme = {
   dark: false,
   colors: {
@@ -52,9 +48,6 @@ const app = createApp(App)
 
 const pinia = createPinia()
 
-/*TODO: uncomment when integrating with backend
-const config = await ApiService.getConfig();
-*/
 
 app.provide('$moment', moment)
 app