10795 Implement login page and logout redirects (bcgov#49)

* - implemented login page
- set logout URL in misc pages
- redirect to logout URL after signout
- don't fetch org or load products if account sync timed out
- updated sbc-common-components import
- fixed a header layout issue
- fixed footer hover style
- moved static images
- misc cleanup
- app version = 1.0.10

* - hide component errors

components/AccountsFooter.vue

@@ -27,7 +27,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 
 @Component({})
-export default class SbcHeader extends Vue {
+export default class AccountsFooter extends Vue {
   async smoothScroll (id: string): Promise<void> {
     const element = document.getElementById(id)
     if (element) await element.scrollIntoView({ behavior: 'smooth' })

components/BCRegistriesAccount.vue

@@ -187,26 +187,29 @@
 </template>
 
 <script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
 import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
 import SbcSigninButton from '~/components/SbcSigninButton.vue'
 import { Routes } from '@/enums'
 
-export default {
+@Component({
   components: {
-    SbcSigninButton,
-  },
-  computed: {
-    isLoggedIn (): boolean {
-      const token = sessionStorage.getItem(SessionStorageKeys.KeyCloakToken)
-      return !!token
-    },
-    dashboard (): string {
-      return `${Routes.DASHBOARD}`
-    },
-    pprMarketing (): string {
-      return `${Routes.PPR_MARKETING}`
-    },
-  },
+    SbcSigninButton
+  }
+})
+export default class BCRegistriesAccount extends Vue {
+  get isLoggedIn (): boolean {
+    const token = sessionStorage.getItem(SessionStorageKeys.KeyCloakToken)
+    return !!token
+  }
+
+  get dashboard (): string {
+    return `${Routes.DASHBOARD}`
+  }
+
+  get pprMarketing (): string {
+    return `${Routes.PPR_MARKETING}`
+  }
 }
 </script>
 

components/ContactInfoBcros.vue

@@ -49,14 +49,14 @@
 </template>
 
 <script lang="ts">
-export default {
-  data () {
-    return {
-      BCROS_HREF: 'https://www2.gov.bc.ca/gov/content/governments/organizational-structure/' +
-        'ministries-organizations/ministries/citizens-services/bc-registries-online-services',
-      MAILTO_HREF: 'mailto:[email protected]?subject=BC%20Registries%20Support%20Request',
-    }
-  },
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class ContactInfoBcros extends Vue {
+  readonly BCROS_HREF = 'https://www2.gov.bc.ca/gov/content/governments/organizational-structure/' +
+    'ministries-organizations/ministries/citizens-services/bc-registries-online-services'
+
+  readonly MAILTO_HREF = 'mailto:[email protected]?subject=BC%20Registries%20Support%20Request'
 }
 </script>
 
@@ -80,7 +80,7 @@ export default {
     font-size: $px-20;
   }
 
-  a {
+  a, a:hover {
     color: inherit;
   }
 }

components/ContactInfoPpr.vue

@@ -45,14 +45,14 @@
 </template>
 
 <script lang="ts">
-export default {
-  data () {
-    return {
-      PPR_HREF: 'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/' +
-        'bc-registry-services-personal-property-registry',
-      MAILTO_HREF: 'mailto:[email protected]?subject=Personal%20Property%20Registry%20Support%20Request',
-    }
-  },
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class ContactInfoPpr extends Vue {
+  readonly PPR_HREF = 'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/' +
+    'bc-registry-services-personal-property-registry'
+
+  readonly MAILTO_HREF: 'mailto:[email protected]?subject=Personal%20Property%20Registry%20Support%20Request'
 }
 </script>
 
@@ -76,7 +76,7 @@ export default {
     font-size: $px-20;
   }
 
-  a {
+  a, a:hover {
     color: inherit;
   }
 }

components/SbcSigninButton.vue

@@ -12,22 +12,31 @@
         <v-icon class="mr-n1 pl-2">mdi-menu-down</v-icon>
       </v-btn>
     </template>
-    <!-- TODO: do we need ":fromLogin" and ":redirectOnLoginSuccess" here? -->
-    <SbcAuthMenu />
+    <SbcAuthMenu
+      :from-login="fromLogin"
+      :redirect-on-login-success="redirectOnLoginSuccess"
+    />
   </v-menu>
 </template>
 
 <script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
 import SbcAuthMenu from 'sbc-common-components/src/components/SbcAuthMenu.vue'
 
-export default {
+@Component({
   components: {
-    SbcAuthMenu,
-  },
+    SbcAuthMenu
+  }
+})
+export default class SbcSigninButton extends Vue {
+  @Prop({ default: false })
+  readonly fromLogin: boolean
+
+  @Prop({ default: null })
+  readonly redirectOnLoginSuccess: string
 }
 </script>
 
-
 <style lang="scss" scoped>
 @import '@/assets/scss/theme.scss';
 

components/UserProduct.vue

@@ -21,16 +21,13 @@
 </template>
 
 <script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
 import { ProductI } from '@/interfaces'
 
-export default {
-  name: 'UserProduct',
-  props: {
-    product: {
-      type: Object as () => ProductI,
-      default: null
-    }
-  }
+@Component({})
+export default class UserProduct extends Vue {
+  @Prop({ default: null })
+  readonly product: ProductI
 }
 </script>
 

enums/routes.ts

@@ -4,4 +4,5 @@ export enum Routes {
   PPR_MARKETING = '/ppr-marketing',
   SIGNIN = '/signin',
   SIGNOUT = '/signout',
+  LOGIN = '/login',
 }

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app id="app">
     <SbcHeader class="sbc-header" />
-    <Breadcrumb />
+    <Breadcrumb v-if="isShowBreadcrumb" />
     <nuxt class="app-body" />
     <SbcFooter />
   </v-app>
@@ -11,6 +11,7 @@
 import SbcFooter from 'sbc-common-components/src/components/SbcFooter.vue'
 import SbcHeader from 'sbc-common-components/src/components/SbcHeader.vue'
 import Breadcrumb from '~/components/Breadcrumb.vue'
+import { isLoginRoute } from '@/utils'
 
 export default {
   components: {
@@ -21,11 +22,24 @@ export default {
   // run "syncSession" before rendering any pages
   // NB: cannot be run as a plugin
   middleware: ['syncSession'],
+  computed: {
+    isShowBreadcrumb (): boolean {
+      return !isLoginRoute()
+    }
+  },
 }
 </script>
 
 <style lang="scss">
 // this imports these SCSS file app-wide
 @import '@/assets/scss/base.scss';
 @import '@/assets/scss/layout.scss';
+
+#warning-modal .row {
+  // it looks like the Vuetify used by NUXT sets row margins
+  // to -12px all around, which breaks the SbcHeader layout,
+  // so override top and bottom specifically here
+  margin-top: 0;
+  margin-bottom: 0; 
+}
 </style>

layouts/error.vue

@@ -1,12 +1,15 @@
 <template>
+  <!-- don't display component errors -->
   <v-app dark>
-    <h1 v-if="error.statusCode === 404">
-      {{ pageNotFound }}
-    </h1>
-    <h1 v-else>
-      {{ otherError }}
-    </h1>
-    <NuxtLink to="/"> Home page </NuxtLink>
+    <template v-if="error.statusCode !== 500">
+      <h1 v-if="error.statusCode === 404">
+        {{ pageNotFound }}
+      </h1>
+      <h1 v-else>
+        {{ otherError }}
+      </h1>
+      <NuxtLink to="/"> Home page </NuxtLink>
+    </template>
   </v-app>
 </template>
 
@@ -26,10 +29,10 @@ export default {
     }
   },
   head () {
-    const title =
-      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
-    return {
-      title,
+    switch (this.error.statusCode) {
+      case 404: return { title: this.pageNotFound }
+      case 500: return {}
+      default: return { title: this.otherError }
     }
   },
 }

middleware/syncSession.ts

@@ -8,6 +8,7 @@ import { isSigninRoute, isSignoutRoute } from '@/utils'
  */
 export default async function ({ $config, route }) {
   console.info('Starting Keycloak service...')
+
   await KeycloakService.setKeycloakConfigUrl($config.keycloakConfigPath)
 
   // Auto-authenticate user only if they are not trying a login or logout.

nuxt.config.js

@@ -143,7 +143,9 @@ export default {
       + `?${new Date().getTime()}`,
     appName: JSON.parse(packageJson).name,
     appVersion: JSON.parse(packageJson).version,
+    registryLogin: `${process.env.BCROS_BASE_URL}login`,
     registryDashboard: `${process.env.BCROS_BASE_URL}dashboard`,
+    registryPprMarketing: `${process.env.BCROS_BASE_URL}ppr-marketing`,
     pprDashboard: `${process.env.PPR_URL}/dashboard`,
     businessRegistryStaffDashboard: `${process.env.AUTH_URL}staff/dashboard/active`,
     myBusinessRegistryDashboard: `${process.env.AUTH_URL}account/business`,