@sbc-connect/nuxt-auth 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @sbc-connect/nuxt-auth
 
+## 0.9.1
+
+### Patch Changes
+
+- [#149](https://github.com/bcgov/connect-nuxt/pull/149) [`467e679`](https://github.com/bcgov/connect-nuxt/commit/467e679f8bf4b2f3b9ec2294fd28a2a6c5ef3dba) Thanks [@deetz99](https://github.com/deetz99)! - Update dependencies
+
+- Updated dependencies [[`467e679`](https://github.com/bcgov/connect-nuxt/commit/467e679f8bf4b2f3b9ec2294fd28a2a6c5ef3dba)]:
+  - @sbc-connect/nuxt-forms@0.7.1
+  - @sbc-connect/nuxt-base@0.7.2
+
+## 0.9.0
+
+### Minor Changes
+
+- [#147](https://github.com/bcgov/connect-nuxt/pull/147) [`d96fef6`](https://github.com/bcgov/connect-nuxt/commit/d96fef61258f7749b8097aad9f1ae73bca3a0702) Thanks [@deetz99](https://github.com/deetz99)! - Fix IDP Enforcement modal being hidden by loading spinner
+
+- [#146](https://github.com/bcgov/connect-nuxt/pull/146) [`32f2375`](https://github.com/bcgov/connect-nuxt/commit/32f23755ab656239730599f02d9802b491469d7e) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Minor text and layout changes to Auth Login, Select and Create
+
 ## 0.8.1
 
 ### Patch Changes

package/app/components/Connect/Account/Create/index.vue

@@ -5,7 +5,9 @@ import { getAccountCreateSchema } from '#auth/app/utils/schemas/account'
 
 const statusCode = ref<number | undefined>(undefined)
 
-const { accountFormState, submitCreateAccount, userFullName } = useConnectAccountStore()
+const accountStore = useConnectAccountStore()
+const { accountFormState, userFullName } = storeToRefs(accountStore)
+const { submitCreateAccount } = accountStore
 const accountProfileSchema = computed(() => getAccountCreateSchema(statusCode.value))
 const formRef = useTemplateRef<Form<AccountProfileSchema>>('account-create-form')
 
@@ -59,7 +61,7 @@ watch(() => statusCode.value, async () => {
     >
       <!-- Legal Name -->
       <ConnectFormFieldWrapper
-        :label="$t('connect.page.createAccount.yourNameLabel')"
+        :label="$t('connect.page.createAccount.contactLabel')"
         orientation="horizontal"
         class="py-6 sm:py-8"
       >

package/app/components/Connect/Modal/InvalidIdp.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 const props = defineProps<{
   currentIdp: ConnectLoginSource
+  redirectUrl: string
 }>()
-const emit = defineEmits<{ close: [] }>()
-
-function closeModal() {
-  emit('close')
-}
 </script>
 
 <template>
@@ -36,7 +32,7 @@ function closeModal() {
             :aria-label="$t('connect.label.logout')"
             size="xl"
             class="font-bold"
-            @click="closeModal"
+            @click="useConnectAuth().logout(redirectUrl)"
           />
         </div>
       </div>

package/app/middleware/03.app-config-presets.global.ts

@@ -1,6 +1,3 @@
-import { useAppConfig } from '#imports'
-import { useConnectAppConfig } from '#auth/app/composables/useConnectAppConfig'
-
 export default defineNuxtRouteMiddleware((to) => {
   const appConfig = useAppConfig()
   const { mergeAppConfigOverrides } = useConnectAppConfig()

package/app/middleware/04.idp-enforcement.global.ts

@@ -1,40 +1,30 @@
-import { useConnectAuth } from '#auth/app/composables/useConnectAuth'
 import { withQuery } from 'ufo'
-import type { ConnectIdpHint } from '#imports'
-import { useAppConfig } from '#imports'
-// import { ConnectModalInvalidIdp } from '#components'
+import { ConnectModalInvalidIdp } from '#components'
 
 export default defineNuxtRouteMiddleware(async (to) => {
   const localePath = useLocalePath()
   const appConfig = useAppConfig()
-  const { authUser, logout } = useConnectAuth()
+  const { authUser } = useConnectAuth()
 
   // IDP Enforcement Config
   const connectConfig = appConfig.connect as ConnectConfig
   const idpEnforcement = connectConfig?.login?.idpEnforcement
   const allowedIdps = connectConfig?.login?.idps
 
-  // Idp overlay
-  // const overlay = useOverlay()
-  // const modal = overlay.create(ConnectModalInvalidIdp)
-
-  /** Show Invalid IDP Modal and Logout on modal close */
-  async function showInvalidIdpModal() {
-    // Prompt user with invalid IDP modal
-    // FUTURE: Fix this in #32610. Currently it doesn't work - loading overlay covers it.
-    // await modal.open({ currentIdp: authUser.value?.loginSource })
-
-    // Logout and Preserve any query param
-    const pathWithQuery = withQuery(localePath('/auth/login'), to.query)
-
-    const url = `${window.location.origin}${pathWithQuery}`
-    return await logout(url)
-  }
-
   if (idpEnforcement && authUser.value?.loginSource) {
-    // User's IDP is not allowed, log them out and redirect to login page
+    // User's IDP is not allowed, display idp enforcement modal
     if (!allowedIdps?.includes(authUser.value?.loginSource.toLowerCase() as unknown as ConnectIdpHint)) {
-      await showInvalidIdpModal()
+      // Pass redirect url to preserve any query params
+      const pathWithQuery = withQuery(localePath('/auth/login'), to.query)
+      const url = `${window.location.origin}${pathWithQuery}`
+
+      const overlay = useOverlay()
+      const modal = overlay.create(ConnectModalInvalidIdp)
+
+      modal.open({
+        currentIdp: authUser.value?.loginSource,
+        redirectUrl: url
+      })
     }
   }
 })

package/app/middleware/connect-auth.ts

@@ -29,6 +29,9 @@ export default defineNuxtRouteMiddleware(async (to) => {
     const hasAccepted = data.value?.userTerms.isTermsOfUseAccepted
     if (!hasAccepted && !isTosPage) {
       const query = { ...to.query }
+      if (!query.return) {
+        query.return = `${rtc.baseUrl}${to.fullPath.slice(1)}`
+      }
       return navigateTo({ path: localePath('/auth/terms-of-use'), query })
     } else if (hasAccepted && (isTosPage || isLoginPage)) {
       return finalRedirect(to, true)

package/app/pages/auth/account/select.vue

@@ -46,9 +46,6 @@ const toggleCreateNewAccount = () => {
     <ConnectTransitionFade>
       <div class="space-y-6 sm:space-y-10">
         <h1>{{ !addNew ? $t('connect.label.existingAccountFound') : $t('connect.label.sbcAccountCreation') }}</h1>
-        <p v-if="addNew">
-          {{ $t('connect.label.createNewAccountCont') }}
-        </p>
         <ConnectAccountExistingAlert v-if="!addNew" />
       </div>
     </ConnectTransitionFade>

package/app/pages/auth/login.vue

@@ -46,7 +46,7 @@ const loginOptions = computed(() => {
 
 <template>
   <div class="flex grow flex-col items-center justify-center py-10">
-    <div class="flex flex-col items-center gap-10">
+    <div class="flex flex-col items-center gap-4">
       <!-- Alert message from app config -->
       <UAlert
         v-if="ac.alert"
@@ -64,6 +64,9 @@ const loginOptions = computed(() => {
       <h1>
         {{ $t('connect.page.login.h1') }}
       </h1>
+      <p class="max-w-[40rem]">
+        {{ $t('connect.page.login.description') }}
+      </p>
       <UAlert
         v-if="isSessionExpired"
         color="warning"
@@ -73,7 +76,7 @@ const loginOptions = computed(() => {
         icon="i-mdi-alert"
       />
       <UCard
-        class="my-auto max-w-md"
+        class="mt-[12px] max-w-md"
         data-testid="login-card"
       >
         <img

package/app/stores/connect-account.ts

@@ -14,6 +14,7 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
   const currentAccountName = computed<string>(() => currentAccount.value?.label || '')
   const pendingApprovalCount = ref<number>(0)
   const user = computed(() => authUser.value)
+  const userEmail = ref<string>('')
   const userFirstName = ref<string>(user.value?.firstName || '-')
   const userLastName = ref<string>(user.value?.lastName || '')
   const userFullName = computed(() => `${userFirstName.value} ${userLastName.value}`)
@@ -113,17 +114,26 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     }
   }
 
-  /** Set user name information */
+  /** Set user name and default email from profile */
   async function setUserName() {
     const { data, refresh } = await getAuthUserProfile()
     await refresh()
     if (data.value?.firstname && data.value?.lastname) {
       userFirstName.value = data.value.firstname
       userLastName.value = data.value.lastname
-      return
+    } else {
+      userFirstName.value = user.value?.firstName || '-'
+      userLastName.value = user.value?.lastName || ''
+    }
+
+    // Pre-populate email from the user's existing contact if available
+    const contactEmail = data.value?.contacts?.[0]?.email
+    if (contactEmail) {
+      userEmail.value = contactEmail
+      if (!accountFormState.emailAddress) {
+        accountFormState.emailAddress = contactEmail
+      }
     }
-    userFirstName.value = user.value?.firstName || '-'
-    userLastName.value = user.value?.lastName || ''
   }
 
   /** Get the user's account list */
@@ -229,6 +239,9 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
 
   function clearAccountState() {
     Object.assign(accountFormState, createAccountProfileSchema.parse({}))
+    if (userEmail.value) {
+      accountFormState.emailAddress = userEmail.value
+    }
   }
 
   return {

package/i18n/locales/en-CA.ts

@@ -13,11 +13,10 @@ export default {
       bcsc: 'BC Services Card',
       createAccount: 'Create Account',
       createNewAccount: 'Create New Account',
-      createNewAccountCont: 'Create a new account to continue',
       decline: 'Decline',
       declineTermsOfUse: 'Decline Terms of Use',
       editProfile: 'Edit Profile',
-      existingAccountFound: 'Existing Account Found',
+      existingAccountFound: 'Select Your Account or Create a New One',
       idir: 'IDIR',
       logout: 'Log out',
       login: 'Log in',
@@ -38,9 +37,10 @@ export default {
       login: {
         h1: 'SBC Connect Account Login',
         title: 'Log in - SBC Connect',
-        loginBCSC: 'Login with BC Services Card',
-        loginBCEID: 'Login with BCeID',
-        loginIDIR: 'Login with IDIR',
+        description: '',
+        loginBCSC: 'Continue with BC Services Card',
+        loginBCEID: 'Continue with BCeID',
+        loginIDIR: 'Continue with IDIR',
         sessionExpiredAlert: {
           title: 'Session Expired',
           description: 'Your session has expired. Please log in again to continue.'
@@ -51,10 +51,10 @@ export default {
         title: 'Terms of Use - Service BC Connect'
       },
       createAccount: {
-        yourNameLabel: 'Your Name',
+        contactLabel: 'Primary Contact',
         yourNameHelp: 'This is your legal name as it appears on your BC Services Card.',
         accountNameLabel: 'Account Name',
-        accountNameHelp: 'This is your default login name.',
+        accountNameHelp: 'Create a unique name for your account e.g., Andy’s Business',
         emailLabel: 'Email',
         emailPlaceholder: 'Enter email address',
         phoneLabel: 'Phone',

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
-    "@axe-core/playwright": "4.11.0",
-    "dotenv": "17.2.3",
+    "@axe-core/playwright": "4.11.1",
+    "dotenv": "17.3.1",
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "vue-tsc": "3.2.1",
+    "vue-tsc": "3.2.5",
     "@sbc-connect/eslint-config": "0.0.8",
     "@sbc-connect/playwright-config": "0.1.1",
-    "@sbc-connect/vitest-config": "0.1.0"
+    "@sbc-connect/vitest-config": "0.1.1"
   },
   "dependencies": {
-    "@pinia/colada": "0.20.0",
-    "@pinia/colada-nuxt": "0.3.0",
+    "@pinia/colada": "1.0.0",
+    "@pinia/colada-nuxt": "0.3.2",
     "@pinia/nuxt": "0.11.3",
-    "keycloak-js": "26.2.2",
+    "keycloak-js": "26.2.3",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate": "4.7.1",
-    "@sbc-connect/nuxt-base": "0.7.1",
-    "@sbc-connect/nuxt-forms": "0.7.0"
+    "@sbc-connect/nuxt-base": "0.7.2",
+    "@sbc-connect/nuxt-forms": "0.7.1"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",