Platform - UI: Platform minor updates (#272)

* fix i18n and badge colours

* update login to redirect to choose account page

* manage account changes on dashboard page

* manage account changes on application page

* update login page to be configurable

* reset extends option

* remove close button on ualert on choose-account page

* update dashboard to redirect to reg dashboard on any account changes

* update change account watch on application page

strr-base-web/app/app.config.ts

@@ -1,4 +1,15 @@
 export default defineAppConfig({
+  strrBaseLayer: {
+    page: {
+      login: {
+        redirectPath: '',
+        options: {
+          createAccount: true,
+          idps: ['bcsc', 'bceid', 'idir']
+        }
+      }
+    }
+  },
   ui: {
     strategy: 'merge',
     button: {
@@ -64,3 +75,19 @@ export default defineAppConfig({
     }
   }
 })
+
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    strrBaseLayer: {
+      page: {
+        login: {
+          redirectPath: string,
+          options: {
+            createAccount: boolean,
+            idps: Array<'bcsc' | 'bceid' | 'idir'>
+          }
+        }
+      }
+    }
+  }
+}

strr-base-web/app/components/modal/Base.vue

@@ -5,33 +5,46 @@ const isSmallScreen = useMediaQuery('(max-width: 640px)')
 defineProps<{
   title?: string
   content?: string
-  actions?: { label: string, handler:() => void, color?: string, variant?: string }[]
+  actions?: { label: string, handler:() => void, color?: string, variant?: string }[],
+  closeFn?: () => void
   error?: {
     title: string
     description: string
     showContactInfo?: boolean
   },
-  fullscreen?: boolean
+  fullscreen?: boolean,
+  persist?: boolean
 }>()
 
 defineEmits<{
-  modalClosed: [void]
+  afterLeave: [void]
 }>()
 </script>
 <template>
   <UModal
     v-model="modalModel"
     :fullscreen
+    :prevent-close="!!persist"
     :ui="{
       width: 'w-full sm:max-w-lg md:min-w-min'
     }"
-    @after-leave="$emit('modalClosed')"
+    @after-leave="$emit('afterLeave')"
   >
     <UCard
       :ui="{
         divide: '',
         rounded: fullscreen ? 'rounded-none' : 'rounded-lg',
-        base: fullscreen ? 'h-screen' : ''
+        base: fullscreen ? 'h-screen' : '',
+        body: {
+          base: '',
+          background: '',
+          padding: 'px-4 py-4 sm:p-6'
+        },
+        header: {
+          base: '',
+          background: '',
+          padding: 'px-4 py-4 sm:px-6'
+        },
       }"
     >
       <template #header>
@@ -44,7 +57,7 @@ defineEmits<{
             :aria-label="$t('btn.close')"
             square
             variant="ghost"
-            @click="modalModel = false"
+            @click="closeFn ? closeFn() : (modalModel = false)"
           />
         </div>
       </template>

strr-base-web/app/composables/useNavigate.ts

@@ -0,0 +1,18 @@
+export const useNavigate = () => {
+  const accountStore = useConnectAccountStore()
+  function redirect (url: string, params?: { [key: string]: string }, target = '_self') {
+    // get account id and set in params
+    const redirectURL = new URL(url)
+    const accountId = accountStore.currentAccount.id
+    if (accountId) {
+      redirectURL.searchParams.append('accountid', accountId.toString())
+    }
+    for (const [key, value] of Object.entries(params ?? {})) {
+      redirectURL.searchParams.append(key, value)
+    }
+    // assume URL is always reachable
+    window.open(redirectURL, target)
+  }
+
+  return { redirect }
+}

strr-base-web/app/composables/useStrrModals.ts

@@ -5,6 +5,8 @@ export const useStrrModals = () => {
   const modal = useModal()
   const { t } = useI18n()
   const connectNav = useConnectNav()
+  const { redirect } = useNavigate()
+  const accountStore = useConnectAccountStore()
   const config = useRuntimeConfig().public
 
   function openAppSubmitError (e: any) {
@@ -21,7 +23,7 @@ export const useStrrModals = () => {
   function openCreateAccountModal () {
     modal.open(ModalBase, {
       title: t('label.createNewAccount'),
-      content: t('platform.text.onlyPremiumAccountModalContent'),
+      content: t('strr.text.onlyPremiumAccountModalContent'),
       actions: [
         { label: t('btn.cancel'), variant: 'outline', handler: () => close() },
         {
@@ -65,6 +67,32 @@ export const useStrrModals = () => {
     })
   }
 
+  function openConfirmSwitchAccountModal (oldAccountId: string) {
+    modal.open(ModalBase, {
+      title: t('modal.changeAccountConfirm.title'),
+      content: t('modal.changeAccountConfirm.content'),
+      persist: true,
+      closeFn: () => {
+        accountStore.switchCurrentAccount(oldAccountId)
+        modal.close()
+      },
+      actions: [
+        {
+          label: t('modal.changeAccountConfirm.leaveBtn'),
+          handler: () => redirect(config.registryHomeURL + 'dashboard')
+        },
+        {
+          label: t('btn.cancel'),
+          variant: 'outline',
+          handler: () => {
+            accountStore.switchCurrentAccount(oldAccountId)
+            modal.close()
+          }
+        }
+      ]
+    })
+  }
+
   function close () {
     modal.close()
   }
@@ -74,6 +102,7 @@ export const useStrrModals = () => {
     openCreateAccountModal,
     openConfirmDeclineTosModal,
     openPatchTosErrorModal,
+    openConfirmSwitchAccountModal,
     close
   }
 }

strr-base-web/app/locales/en-CA.ts

@@ -54,7 +54,8 @@ export default {
     acceptTos: {
       main: 'Accept Terms of Use',
       aria: 'Accept Terms of Use (scroll and check the box before)'
-    }
+    },
+    createAnAccount: 'Create an Account'
   },
   contactInfo: {
     bcRegGeneral: {
@@ -219,6 +220,11 @@ export default {
       title: 'Decline Terms of Use?',
       content: 'By declining the Terms of Use, you won’t be able to access this service. Do you wish to proceed?',
       declineBtn: 'Decline Terms of Use'
+    },
+    changeAccountConfirm: {
+      title: 'Leave Site?',
+      content: 'Changes you made may not be saved.',
+      leaveBtn: 'Leave'
     }
   },
   word: {
@@ -231,6 +237,7 @@ export default {
     none: 'None',
     or: 'or',
     Or: 'Or',
+    OR: 'OR',
     error: 'error',
     Error: 'Error',
     OK: 'OK',
@@ -243,7 +250,8 @@ export default {
     Edit: 'Edit',
     Save: 'Save',
     Receipt: 'Receipt',
-    Certify: 'Certify'
+    Certify: 'Certify',
+    Leave: 'Leave'
   },
   page: {
     notFound: {

strr-base-web/app/pages/auth/login.vue

@@ -1,10 +1,40 @@
 <script setup lang="ts">
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const keycloak = useKeycloak()
+const { createAccountUrl } = useConnectNav()
+const runtimeConfig = useRuntimeConfig()
+const loginConfig = useAppConfig().strrBaseLayer.page.login
+
+const redirectUrl = loginConfig.redirectPath
+  ? runtimeConfig.public.baseUrl + locale.value + loginConfig.redirectPath
+  : undefined
+
+const loginOptionsMap = {
+  bcsc: {
+    label: t('label.loginBcsc'),
+    icon: 'i-mdi-account-card-details-outline',
+    click: () => keycloak.login(IdpHint.BCSC, redirectUrl)
+  },
+  bceid: {
+    label: t('label.loginBceid'),
+    icon: 'i-mdi-two-factor-authentication',
+    click: () => keycloak.login(IdpHint.BCEID, redirectUrl)
+  },
+  idir: {
+    label: t('label.loginIdir'),
+    icon: 'i-mdi-account-group-outline',
+    click: () => keycloak.login(IdpHint.IDIR, redirectUrl)
+  }
+}
+
+const options = computed(() => {
+  const items = loginConfig.options.idps
+  return items.map(key => loginOptionsMap[key]) // order by idps array
+})
 
 // page stuff
 useHead({
-  title: t('login.h1.login')
+  title: t('page.login.h1')
 })
 
 definePageMeta({
@@ -20,29 +50,32 @@ setBreadcrumbs([
   <div class="flex grow justify-center py-10">
     <UCard class="my-auto max-w-md">
       <h1>
-        {{ $t('login.h1.login') }}
+        {{ $t('page.login.h1') }}
       </h1>
       <img src="/img/BCReg_Generic_Login_image.jpg" class="py-4" :alt="$t('imageAlt.genericLogin')">
       <div class="space-y-4 pt-2.5">
         <UButton
-          :label="$t('label.loginBceid')"
-          icon="i-mdi-two-factor-authentication"
+          v-for="(option, i) in options"
+          :key="option.label"
+          :color="i === 0 ? 'primary' : 'gray'"
           block
-          @click="keycloak.login(IdpHint.BCEID)"
+          :icon="option.icon"
+          :label="option.label"
+          :ui="{
+            gap: { sm: 'gap-x-2.5' }
+          }"
+          @click="option.click"
         />
-        <UButton
-          :label="$t('label.loginBcsc')"
-          icon="i-mdi-account-card-details-outline"
-          color="gray"
-          block
-          @click="keycloak.login(IdpHint.BCSC)"
+        <UDivider
+          v-if="loginConfig.options.createAccount"
+          :label="$t('word.OR')"
         />
         <UButton
-          :label="$t('label.loginIdir')"
-          icon="i-mdi-account-group-outline"
-          color="gray"
+          v-if="loginConfig.options.createAccount"
+          :label="$t('btn.createAnAccount')"
           block
-          @click="keycloak.login(IdpHint.IDIR)"
+          color="gray"
+          :to="createAccountUrl()"
         />
       </div>
     </UCard>

strr-platform-web/app/app.config.ts

@@ -1,4 +1,15 @@
 export default defineAppConfig({
+  strrBaseLayer: {
+    page: {
+      login: {
+        redirectPath: '/auth/account/choose-existing',
+        options: {
+          createAccount: false,
+          idps: () => ['bceid', 'bcsc'] // function required to overwrite default value, will merge if no function
+        }
+      }
+    }
+  },
   ui: {
     strategy: 'merge',
     button: {

strr-platform-web/app/locales/en-CA.ts

@@ -1,5 +1,9 @@
 /* eslint-disable max-len */
 export default {
+  badge: {
+    basicAccount: 'BASIC ACCOUNT',
+    inactiveAccount: 'INACTIVE ACCOUNT'
+  },
   feeSummary: {
     itemLabels: {
       PLATREG_SM: 'Platform Application Fee',
@@ -81,7 +85,7 @@ export default {
       thousandOrMore: '1000 or more',
       selectAccountForStrr: 'Select the account you wish to use to register your Short-term rental platform.',
       onlyPremiumAccountWarning: '{boldStart}Note:{boldEnd} Only Premium accounts using Pre-authorized Debit (PAD) can be used to register Short-term Rental Registry Platforms.',
-      onlyPremiumAccountModalContent: 'Note: You must create a BC Registries Premium Account that uses a Pre-authorized Debit (PAD) payment method.'
+      onlyPremiumAccountModalContent: 'You must create a BC Registries Premium Account that uses a Pre-authorized Debit (PAD) payment method.'
     },
     review: {
       platInfo: {