Host/Strata/Platform - UI: Login stuff (#385)

* update base login page, add bceid to hosts * update login screen for platform and strata * middleware update
bcgov · Dec 12, 2024 · 33dec6b · 33dec6b
1 parent 707ad5e
commit 33dec6b
Show file tree

Hide file tree

Showing 15 changed files with 187 additions and 67 deletions.
diff --git a/strr-base-web/app/app.config.ts b/strr-base-web/app/app.config.ts
@@ -6,7 +6,10 @@ export default defineAppConfig({
         redirectPath: '',
         options: {
           createAccount: true,
-          idps: ['bcsc', 'bceid', 'idir']
+          idps: ['bcsc', 'bceid', 'idir'],
+          bcscSubtext: undefined,
+          bceidSubtext: undefined,
+          idirSubtext: undefined
         }
       }
     }
@@ -95,19 +98,3 @@ export default defineAppConfig({
     }
   }
 })
-
-declare module 'nuxt/schema' {
-  interface AppConfig {
-    strrBaseLayer: {
-      page: {
-        login: {
-          redirectPath: string,
-          options: {
-            createAccount: boolean,
-            idps: Array<'bcsc' | 'bceid' | 'idir'>
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/strr-base-web/app/locales/en-CA.ts b/strr-base-web/app/locales/en-CA.ts
@@ -253,9 +253,9 @@ export default {
     platAppStepLabel: 'Platform Application Step Navigation',
     stepUnfinished: 'This step is unfinished.',
     returnStepToFinish: 'Return to this step to finish it',
-    loginBceid: 'Log in with BCeID',
-    loginBcsc: 'Log in with BC Services Card',
-    loginIdir: 'Log in with IDIR',
+    continueBceid: 'Continue with BCeID',
+    continueBcsc: 'Continue with BC Services Card',
+    continueIdir: 'Continue with IDIR',
     // Each app could overwrite this if they wanted
     login: 'Login',
     selectAccount: 'Select Account',
@@ -364,7 +364,7 @@ export default {
     },
     login: {
       // Each app could overwrite this if they wanted. Default would be different
-      h1: 'Log In to Short-Term Rental Registry'
+      h1: 'Short-Term Rental Registry'
     },
     tos: {
       title: 'Terms of Use - Short Term Rental Registry',

diff --git a/strr-base-web/app/pages/auth/login.vue b/strr-base-web/app/pages/auth/login.vue
@@ -11,17 +11,20 @@ const redirectUrl = loginConfig.redirectPath
 
 const loginOptionsMap = {
   bcsc: {
-    label: t('label.loginBcsc'),
+    label: t('label.continueBcsc'),
+    subtext: loginConfig.options.bcscSubtext,
     icon: 'i-mdi-account-card-details-outline',
     click: () => keycloak.login(IdpHint.BCSC, redirectUrl)
   },
   bceid: {
-    label: t('label.loginBceid'),
+    label: t('label.continueBceid'),
+    subtext: loginConfig.options.bceidSubtext,
     icon: 'i-mdi-two-factor-authentication',
     click: () => keycloak.login(IdpHint.BCEID, redirectUrl)
   },
   idir: {
-    label: t('label.loginIdir'),
+    label: t('label.continueIdir'),
+    subtext: loginConfig.options.idirSubtext,
     icon: 'i-mdi-account-group-outline',
     click: () => keycloak.login(IdpHint.IDIR, redirectUrl)
   }
@@ -51,37 +54,49 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div class="flex grow justify-center py-10">
-    <UCard class="my-auto max-w-md">
+  <div class="flex grow flex-col items-center justify-center py-10">
+    <div class="flex flex-col items-center gap-4">
       <h1>
         {{ $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
-          v-for="(option, i) in options"
-          :key="option.label"
-          :color="i === 0 ? 'primary' : 'gray'"
-          block
-          :icon="option.icon"
-          :label="option.label"
-          :ui="{
-            gap: { sm: 'gap-x-2.5' }
-          }"
-          @click="option.click"
-        />
-        <UDivider
-          v-if="loginConfig.options.createAccount"
-          :label="$t('word.OR')"
-        />
-        <UButton
-          v-if="loginConfig.options.createAccount"
-          :label="$t('btn.createAnAccount')"
-          block
-          color="gray"
-          :to="createAccountUrl()"
-        />
-      </div>
-    </UCard>
+      <UCard class="my-auto max-w-md">
+        <img src="/img/BCReg_Generic_Login_image.jpg" class="pb-4" :alt="$t('imageAlt.genericLogin')">
+        <div class="space-y-4 pt-2.5">
+          <div
+            v-for="(option, i) in options"
+            :key="option.label"
+            class="flex flex-col items-center gap-1"
+          >
+            <UButton
+              :color="i === 0 ? 'primary' : 'gray'"
+              block
+              :icon="option.icon"
+              :label="option.label"
+              :ui="{
+                gap: { sm: 'gap-x-2.5' }
+              }"
+              @click="option.click"
+            />
+            <span
+              v-if="option.subtext"
+              class="text-xs"
+            >
+              {{ $t(option.subtext) }}
+            </span>
+          </div>
+          <UDivider
+            v-if="loginConfig.options.createAccount"
+            :label="$t('word.OR')"
+          />
+          <UButton
+            v-if="loginConfig.options.createAccount"
+            :label="$t('btn.createAnAccount')"
+            block
+            color="gray"
+            :to="createAccountUrl()"
+          />
+        </div>
+      </UCard>
+    </div>
   </div>
 </template>
diff --git a/strr-base-web/app/types/strr-base-app-config.d.ts b/strr-base-web/app/types/strr-base-app-config.d.ts
@@ -0,0 +1,39 @@
+declare module 'nuxt/schema' {
+  interface AppConfigInput {
+    strrBaseLayer: {
+      page: {
+        login: {
+          redirectPath: string,
+          options: {
+            createAccount: boolean,
+            idps: Array<'bcsc' | 'bceid' | 'idir'>,
+            bcscSubtext: string | undefined,
+            bceidSubtext: string | undefined,
+            idirSubtext: string | undefined
+          }
+        }
+      }
+    }
+  }
+}
+
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    strrBaseLayer: {
+      page: {
+        login: {
+          redirectPath: string,
+          options: {
+            createAccount: boolean,
+            idps: Array<'bcsc' | 'bceid' | 'idir'>,
+            bcscSubtext: string | undefined,
+            bceidSubtext: string | undefined,
+            idirSubtext: string | undefined
+          }
+        }
+      }
+    }
+  }
+}
+
+export {}
diff --git a/strr-host-pm-web/app/app.config.ts b/strr-host-pm-web/app/app.config.ts
@@ -1,11 +1,34 @@
 export default defineAppConfig({
+  connect: {
+    core: {
+      login: {
+        redirectPath: '',
+        idps: () => []
+      },
+      header: {
+        options: {
+          localeSelect: false,
+          unauthenticated: {
+            whatsNew: false,
+            loginMenu: false,
+            createAccount: false
+          },
+          authenticated: {
+            notifications: true,
+            accountOptionsMenu: true
+          }
+        }
+      }
+    }
+  },
   strrBaseLayer: {
     page: {
       login: {
         redirectPath: '/auth/account/choose-existing',
         options: {
-          createAccount: true,
-          idps: () => ['bcsc'] // function required to overwrite default value, will merge if no function
+          createAccount: false,
+          idps: () => ['bcsc', 'bceid'], // function required to overwrite default value, will merge if no function
+          bceidSubtext: 'text.bceidSubtext'
         }
       }
     }

diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
@@ -365,7 +365,8 @@ export default {
     unitAddressIntro: 'Include the Residential Address of your short-term rental by looking up the address, or if the address cannot be found in the lookup, you can enter the address manually.',
     unitAddressIntroNote: 'Note: the address cannot be a Mailing Address (e.g., PO Box, etc.).',
     unitAddressUnitNumberInfo: 'Unit Number is required if the short-term rental unit has a Unit Number. Enter a Site Name if the address does not have a Street Number and Name.',
-    noDocsUploaded: 'No supporting documentation uploaded.'
+    noDocsUploaded: 'No supporting documentation uploaded.',
+    bceidSubtext: 'Requires an existing BCeID login account'
   },
   hint: {
     strataRefCode: 'This is a unique code for each registered strata hotel. Ask the strata hotel management for this code.',

diff --git a/strr-host-pm-web/app/middleware/choose-account-page.ts b/strr-host-pm-web/app/middleware/choose-account-page.ts
@@ -1,8 +1,9 @@
 export default defineNuxtRouteMiddleware(() => {
   const accountStore = useConnectAccountStore()
   const localePath = useLocalePath()
+  const { kcUser } = useKeycloak()
 
-  if (accountStore.userAccounts.length === 0) {
+  if (accountStore.userAccounts.length === 0 && kcUser.value.loginSource === LoginSource.BCSC) {
     return navigateTo({ path: localePath('/auth/account/create-new') }) // TODO: add return url param for redirect?
   }
 })
diff --git a/strr-host-pm-web/app/middleware/create-account-page.ts b/strr-host-pm-web/app/middleware/create-account-page.ts
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware(() => {
+  const { kcUser } = useKeycloak()
+
+  if (kcUser.value.loginSource !== LoginSource.BCSC) {
+    const localePath = useLocalePath()
+    return navigateTo({ path: localePath('/auth/account/choose-existing') })
+  }
+})
diff --git a/strr-host-pm-web/app/pages/auth/account/choose-existing.vue b/strr-host-pm-web/app/pages/auth/account/choose-existing.vue
@@ -137,7 +137,9 @@ function handleAccountSwitch (id: string) {
         icon="i-mdi-chevron-right"
         trailing
         :block="isSmallScreen"
-        :to="localePath('/auth/account/create-new')"
+        :to="$keycloak.tokenParsed.loginSource === LoginSource.BCSC ? localePath('/auth/account/create-new') : useConnectNav().createAccountUrl()"
+        :external="$keycloak.tokenParsed.loginSource !== LoginSource.BCSC"
+        :target="$keycloak.tokenParsed.loginSource === LoginSource.BCSC ? '_self' : '_blank'"
       />
     </div>
   </div>

diff --git a/strr-host-pm-web/app/pages/auth/account/create-new.vue b/strr-host-pm-web/app/pages/auth/account/create-new.vue
@@ -91,7 +91,7 @@ useHead({
 })
 
 definePageMeta({
-  middleware: ['auth', 'check-tos'],
+  middleware: ['auth', 'check-tos', 'create-account-page'],
   hideBreadcrumbs: true
 })
 </script>

diff --git a/strr-host-pm-web/package.json b/strr-host-pm-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

diff --git a/strr-platform-web/app/app.config.ts b/strr-platform-web/app/app.config.ts
@@ -1,4 +1,26 @@
 export default defineAppConfig({
+  connect: {
+    core: {
+      login: {
+        redirectPath: '',
+        idps: () => []
+      },
+      header: {
+        options: {
+          localeSelect: false,
+          unauthenticated: {
+            whatsNew: false,
+            loginMenu: false,
+            createAccount: false
+          },
+          authenticated: {
+            notifications: true,
+            accountOptionsMenu: true
+          }
+        }
+      }
+    }
+  },
   strrBaseLayer: {
     page: {
       login: {

diff --git a/strr-platform-web/package.json b/strr-platform-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-platform-web",
   "private": true,
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

diff --git a/strr-strata-web/app/app.config.ts b/strr-strata-web/app/app.config.ts
@@ -1,12 +1,34 @@
 export default defineAppConfig({
+  connect: {
+    core: {
+      login: {
+        redirectPath: '',
+        idps: () => []
+      },
+      header: {
+        options: {
+          localeSelect: false,
+          unauthenticated: {
+            whatsNew: false,
+            loginMenu: false,
+            createAccount: false
+          },
+          authenticated: {
+            notifications: true,
+            accountOptionsMenu: true
+          }
+        }
+      }
+    }
+  },
   strrBaseLayer: {
     page: {
       login: {
-        redirectPath: '/auth/account/choose-existing'
-        // options: { // allow all options?
-        //   createAccount: false,
-        //   idps: () => ['bceid', 'bcsc'] // function required to overwrite default value, will merge if no function
-        // }
+        redirectPath: '/auth/account/choose-existing',
+        options: {
+          createAccount: false,
+          idps: () => ['bcsc', 'bceid', 'idir'] // function required to overwrite default value, will merge if no function
+        }
       }
     }
   },

diff --git a/strr-strata-web/package.json b/strr-strata-web/package.json
@@ -2,7 +2,7 @@
   "name": "strr-strata-web",
   "private": true,
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",