@sbc-connect/nuxt-auth 0.11.1 → 0.12.0

package/.env.example

@@ -30,6 +30,5 @@ NUXT_PUBLIC_TOKEN_MIN_VALIDITY=120000
 NUXT_PUBLIC_SESSION_INACTIVITY_TIMEOUT=1800000
 NUXT_PUBLIC_SESSION_MODAL_TIMEOUT=120000
 
-# Playwright Testing
-PLAYWRIGHT_TEST_BCSC_USERNAME=""
-PLAYWRIGHT_TEST_BCSC_PASSWORD=""
+# Canada Post
+NUXT_PUBLIC_ADDRESS_COMPLETE_KEY=""

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sbc-connect/nuxt-auth
 
+## 0.12.0
+
+### Minor Changes
+
+- [#170](https://github.com/bcgov/connect-nuxt/pull/170) [`d91712d`](https://github.com/bcgov/connect-nuxt/commit/d91712db74c2e0c6b39f6fd38955fd60e82ce691) Thanks [@deetz99](https://github.com/deetz99)! - - BREAKING CHANGE: remove useAuthApi, replaced with useConnectAuthService
+  - refactor account creation implementation (remove from store, update components/page)
+  - refactor account store methods to be more streamlined
+  - refactor account and user initialization into a global bootstrap plugin, reducing redundant network requests
+  - refactor header notifications to use useQuery - removes unnecessary blocker for app mount
+  - remove setup accounts middleware (now handled by global bootstrap plugin) and update naming (order prefix) of other middleware
+
 ## 0.11.1
 
 ### Patch Changes

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

@@ -5,31 +5,33 @@ defineProps<{
   error?: FormError<string>
 }>()
 
-const authApi = useAuthApi()
-const { accountFormState } = useConnectAccountStore()
+const statusCode = defineModel<number | undefined>('statusCode')
+const name = defineModel<string>('name')
+
+const service = useConnectAuthService()
 
 const isLoading = ref(false)
-const statusCode = defineModel<number | undefined>('statusCode')
 
-/** Validate accountName and trigger validation API call */
-const validateName = useDebounceFn(async (accountName: string) => {
-  if (accountName.length) {
-    isLoading.value = true
-    try {
-      const { refetch } = authApi.verifyAccountName(accountName)
-      const { data } = await refetch()
-      statusCode.value = data?.status ?? 500 // fallback as undefined is not considered an exception
-    } catch (err: unknown) {
-      statusCode.value = getErrorStatus(err) ?? 500
-    } finally {
-      isLoading.value = false
+/* Validate accountName and trigger validation API call */
+watchDebounced(
+  name,
+  async (v) => {
+    if (v?.length) {
+      isLoading.value = true
+      try {
+        const { status } = await service.verifyAccountName(v).catch(() => ({ status: undefined }))
+        statusCode.value = status ?? 500 // fallback as undefined is not considered an exception
+      } catch (err: unknown) {
+        statusCode.value = getErrorStatus(err) ?? 500
+      } finally {
+        isLoading.value = false
+      }
+    } else {
+      statusCode.value = undefined
     }
-  } else {
-    statusCode.value = undefined
-  }
-}, 1000)
-
-watch(() => accountFormState.accountName, validateName)
+  },
+  { debounce: 1000 }
+)
 
 // Compute UInput props based on loading state and status code
 const uInputProps = computed<InputProps>(() => {
@@ -63,7 +65,7 @@ provide('UInput-props-account-name-input', uInputProps)
     padding-class="pt-6 pb-4 px-4 sm:pb-4 sm:pt-8 sm:px-8"
   >
     <ConnectFormInput
-      v-model="accountFormState.accountName"
+      v-model="name"
       name="accountName"
       input-id="account-name-input"
       :label="$t('connect.page.createAccount.accountNameLabel')"

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

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { Form, FormError } from '@nuxt/ui'
-import type { AccountProfileSchema } from '#auth/app/utils/schemas/account'
-import { getAccountCreateSchema } from '#auth/app/utils/schemas/account'
+import type { Form, FormError, FormSubmitEvent } from '@nuxt/ui'
+import type { AccountProfileSchema } from '#imports'
 
-const statusCode = ref<number | undefined>(undefined)
+defineEmits<{
+  submit: [event: FormSubmitEvent<AccountProfileSchema>]
+}>()
 
-const accountStore = useConnectAccountStore()
-const { accountFormState, userFullName } = storeToRefs(accountStore)
-const { submitCreateAccount } = accountStore
-const accountProfileSchema = computed(() => getAccountCreateSchema(statusCode.value))
+const store = useConnectAccountStore()
 const formRef = useTemplateRef<Form<AccountProfileSchema>>('account-create-form')
+const statusCode = ref<number | undefined>(undefined)
+const schema = computed(() => getAccountCreateSchema(statusCode.value))
+const state = reactive<AccountProfileSchema>(schema.value.parse({}))
 
 const formErrors = computed<{
   accountName: FormError<string> | undefined
@@ -33,12 +34,18 @@ async function validate(fieldName?: keyof AccountProfileSchema) {
   })
 }
 
-watch(() => statusCode.value, async () => {
-  if (statusCode.value !== undefined) {
+watch(statusCode, async (v) => {
+  if (v !== undefined) {
     await nextTick()
     await validate('accountName')
   }
 })
+
+onMounted(() => {
+  if (store.userEmail) {
+    state.emailAddress = store.userEmail
+  }
+})
 </script>
 
 <template>
@@ -54,10 +61,10 @@ watch(() => statusCode.value, async () => {
       ref="account-create-form"
       no-validate
       :validate-on="['input', 'change']"
-      :schema="accountProfileSchema"
-      :state="accountFormState"
+      :schema
+      :state
       @error="onFormSubmitError"
-      @submit="submitCreateAccount()"
+      @submit="$emit('submit', $event)"
     >
       <!-- Legal Name -->
       <ConnectFormFieldWrapper
@@ -66,7 +73,7 @@ watch(() => statusCode.value, async () => {
         class="py-6 sm:py-8"
       >
         <p class="font-bold">
-          {{ userFullName }}
+          {{ store.userFullName }}
         </p>
         <p class="mt-3">
           {{ $t('connect.page.createAccount.yourNameHelp') }}
@@ -78,6 +85,7 @@ watch(() => statusCode.value, async () => {
       <!-- Account Name -->
       <ConnectAccountCreateName
         v-model:status-code="statusCode"
+        v-model:name="state.accountName"
         :error="formErrors.accountName"
       />
 
@@ -89,7 +97,7 @@ watch(() => statusCode.value, async () => {
         padding-class="py-1 px-4 sm:py-2 sm:px-8"
       >
         <ConnectFormInput
-          v-model="accountFormState.emailAddress"
+          v-model="state.emailAddress"
           name="emailAddress"
           input-id="email-input"
           :label="$t('connect.page.createAccount.emailPlaceholder')"
@@ -106,13 +114,13 @@ watch(() => statusCode.value, async () => {
         <div class="flex flex-row gap-2">
           <!-- Disabling country code selection until Auth Model Supports individual property -->
           <!-- <ConnectFormPhoneCountryCode -->
-          <!-- v-model:country-calling-code="accountFormState.phone.countryCode" -->
-          <!-- v-model:country-iso2="accountFormState.phone.countryIso2" -->
-          <!-- :is-invalid="!accountFormState.phone.countryIso2" -->
+          <!-- v-model:country-calling-code="state.phone.countryCode" -->
+          <!-- v-model:country-iso2="state.phone.countryIso2" -->
+          <!-- :is-invalid="!state.phone.countryIso2" -->
           <!-- class="w-40 mt-[-20px]" -->
           <!-- /> -->
           <ConnectFormInput
-            v-model="accountFormState.phone.phoneNumber"
+            v-model="state.phone.phoneNumber"
             name="phone.phoneNumber"
             input-id="phone-number-input"
             class="flex-2"
@@ -120,7 +128,7 @@ watch(() => statusCode.value, async () => {
             mask="(###) ###-####"
           />
           <ConnectFormInput
-            v-model="accountFormState.phone.ext"
+            v-model="state.phone.ext"
             name="phone.ext"
             input-id="phone-ext-input"
             :label="$t('connect.page.createAccount.phoneExtensionLabel')"
@@ -137,7 +145,7 @@ watch(() => statusCode.value, async () => {
       >
         <ConnectFormAddress
           id="account-address"
-          v-model="accountFormState.address"
+          v-model="state.address"
           name="address"
           schema-prefix="address"
           @should-validate="validate"

package/app/components/Connect/Header/Notifications.vue

@@ -1,30 +1,45 @@
 <script setup lang="ts">
-const { notificationsOptions } = useConnectHeaderOptions()
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+const { t } = useI18n()
+const authWebUrl = useRuntimeConfig().public.authWebUrl
 const accountStore = useConnectAccountStore()
 const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+const query = useConnectAuthQuery()
+const { data } = query.pendingApprovals()
+const count = computed(() => data.value?.count || 0)
+
+const dropdownItems = computed<DropdownMenuItem[]>(() => {
+  let options: DropdownMenuItem[] = [{ label: t('connect.text.notifications.none') }]
+  if (count.value > 0) {
+    options = [{
+      to: authWebUrl + `account/${accountStore.currentAccount.id}/settings/team-members`,
+      label: t('connect.text.notifications.teamMemberApproval', { count: count.value }, count.value)
+    }]
+  }
+  return options
+})
 </script>
 
 <template>
-  <UDropdownMenu :items="notificationsOptions">
+  <UDropdownMenu :items="dropdownItems">
     <UChip
       color="error"
       position="top-left"
       inset
-      :show="accountStore.pendingApprovalCount > 0"
+      :show="count > 0"
     >
       <UButton
         variant="ghost"
         color="secondary"
         :label="isLargeScreen ? $t('connect.label.notifications') : undefined"
-        :aria-label="$t('connect.label.notificationsAria', { count: accountStore.pendingApprovalCount })"
-        :icon="isLargeScreen ? 'i-mdi-caret-down' : ''"
-        trailing
+        :aria-label="$t('connect.label.notificationsAria', { count })"
+        :trailing-icon="isLargeScreen ? 'i-mdi-caret-down' : ''"
+        leading-icon="i-mdi-bell-outline"
         class="px-2 py-1 text-sm"
-      >
-        <template #leading>
-          <UIcon name="i-mdi-bell-outline" class="size-6 shrink-0" />
-        </template>
-      </UButton>
+        :ui="{ leadingIcon: 'size-6 shrink-0' }"
+      />
     </UChip>
   </UDropdownMenu>
 </template>

package/app/composables/useConnectHeaderOptions.ts

@@ -90,10 +90,10 @@ export function useConnectHeaderOptions() {
               if (route.meta.onAccountChange) {
                 const allowAccountChange = route.meta.onAccountChange(accountStore.currentAccount, account)
                 if (allowAccountChange) {
-                  await accountStore.switchCurrentAccount(account.id)
+                  accountStore.switchCurrentAccount(account.id)
                 }
               } else {
-                await accountStore.switchCurrentAccount(account.id)
+                accountStore.switchCurrentAccount(account.id)
               }
             }
           },
@@ -205,23 +205,6 @@ export function useConnectHeaderOptions() {
     return options
   })
 
-  const notificationsOptions = computed<DropdownMenuItem[][]>(() => {
-    const count = accountStore.pendingApprovalCount
-    const options = []
-    if (count > 0) {
-      options.push([{
-        to: authWebUrl + `account/${accountStore.currentAccount.id}/settings/team-members`,
-        label: t('connect.text.notifications.teamMemberApproval', {
-          count: accountStore.pendingApprovalCount
-        }, accountStore.pendingApprovalCount
-        )
-      }])
-    } else {
-      options.push([{ label: t('connect.text.notifications.none') }])
-    }
-    return options
-  })
-
   return {
     basicAccountOptions,
     accountSettingsOptions,
@@ -230,7 +213,6 @@ export function useConnectHeaderOptions() {
     loggedInUserOptions,
     loggedOutUserOptions,
     loggedOutUserOptionsMobile,
-    notificationsOptions,
     createAccountUrl
   }
 }

package/app/middleware/connect-auth.ts

@@ -2,7 +2,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const { isAuthenticated } = useConnectAuth()
   const rtc = useRuntimeConfig().public
   const localePath = useLocalePath()
-  const authApi = useAuthApi()
+  const service = useConnectAuthService()
   const { finalRedirect } = useConnectAccountFlowRedirect()
 
   const isLoginPage = to.meta.connectLogin === true
@@ -24,9 +24,8 @@ export default defineNuxtRouteMiddleware(async (to) => {
   }
 
   if (isAuthenticated.value) {
-    const { data, refresh } = await authApi.getAuthUserProfile()
-    await refresh()
-    const hasAccepted = data.value?.userTerms.isTermsOfUseAccepted
+    const res = await service.getAuthUserProfile().catch(() => undefined)
+    const hasAccepted = res?.userTerms.isTermsOfUseAccepted
     if (!hasAccepted && !isTosPage) {
       const query = { ...to.query }
       if (!query.return) {
@@ -56,7 +55,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
     if (rtc.playwrightFetchTestAccount) {
       // allows each test to mock the account information with its own data
-      await useConnectAccountStore().setAccountInfo()
+      await useConnectAccountStore().loadUserAccounts(true)
     } else {
       currentAccount.value = {
         id: 1,

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui'
+
 definePageMeta({
   layout: 'connect-auth',
   alias: ['/auth/account/create'],
@@ -7,65 +9,88 @@ definePageMeta({
 
 const route = useRoute()
 const rtc = useRuntimeConfig().public
-const accountStore = useConnectAccountStore()
+const store = useConnectAccountStore()
 const { authUser } = useConnectAuth()
 const { finalRedirect } = useConnectAccountFlowRedirect()
-const { clearAccountState } = useConnectAccountStore()
-const { isLoading } = storeToRefs(useConnectAccountStore())
-const isAccountCreateRoute = computed(() => route.path.includes('create'))
+const mutate = useConnectAuthMutation()
+const { mutateAsync: createAccount } = mutate.createAccount()
+const { mutateAsync: updateContact } = mutate.updateOrCreateUserContact()
 
+const isSubmitting = ref(false)
 const addNew = ref(false)
+
+const showAccountList = computed(() => !addNew.value)
 const pageTitle = computed(() =>
-  !addNew.value ? $t('connect.label.existingAccountFound') : $t('connect.label.sbcAccountCreation')
+  showAccountList.value
+    ? $t('connect.label.existingAccountFound')
+    : $t('connect.label.sbcAccountCreation')
 )
 
 useHead({
   title: pageTitle
 })
 
-async function selectAndRedirect(id: number) {
-  await accountStore.switchCurrentAccount(id)
-  finalRedirect(useRoute())
+function selectAndRedirect(id: number) {
+  store.switchCurrentAccount(id)
+  return finalRedirect(route)
+}
+
+async function onSubmitCreateAccount(e: FormSubmitEvent<AccountProfileSchema>) {
+  const isFirstAccount = store.userAccounts.length === 0
+  const contactMethod = isFirstAccount ? 'POST' : 'PUT' // if 0 accounts the contact is new
+
+  try {
+    isSubmitting.value = true
+    const { accountPayload, contactPayload } = formatCreateAccountPayload(e.data)
+    const res = await createAccount({ payload: accountPayload, silent: true })
+    await store.loadUserAccounts(true)
+    await updateContact({
+      payload: contactPayload,
+      silent: true,
+      method: contactMethod
+    }).catch() // swallow errors from contact update, account was created and user can proceed
+    return selectAndRedirect(res.id)
+  } catch {
+    useConnectAuthModals().openCreateAccountModal()
+    isSubmitting.value = false
+  }
 }
 
 onBeforeMount(() => {
-  if ((accountStore.userAccounts.length === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC)
-    || isAccountCreateRoute.value) {
+  const isBcscNoAccounts = store.userAccounts.length === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC
+  const isCreatePath = route.path.includes('create')
+
+  if (isBcscNoAccounts || isCreatePath) {
     addNew.value = true
   }
 })
-
-const toggleCreateNewAccount = () => {
-  addNew.value = !addNew.value
-  clearAccountState()
-}
 </script>
 
 <template>
   <UContainer class="max-w-6xl">
     <ConnectTransitionFade>
       <div class="space-y-6 sm:space-y-10">
-        <h1>{{ !addNew ? $t('connect.label.existingAccountFound') : $t('connect.label.sbcAccountCreation') }}</h1>
-        <ConnectAccountExistingAlert v-if="!addNew" />
+        <h1>{{ pageTitle }}</h1>
+        <ConnectAccountExistingAlert v-if="showAccountList" />
       </div>
     </ConnectTransitionFade>
 
     <ConnectTransitionFade>
       <ConnectAccountExistingList
-        v-if="addNew === false"
-        :accounts="accountStore.userAccounts"
+        v-if="showAccountList"
+        :accounts="store.userAccounts"
         @select="selectAndRedirect"
       />
 
       <ConnectAccountCreate
         v-else
-        ref="account-create-form-ref"
+        @submit="onSubmitCreateAccount"
       />
     </ConnectTransitionFade>
 
     <!-- Select Account Actions -->
     <div
-      v-if="!addNew"
+      v-if="showAccountList"
       class="flex justify-center"
       data-testid="select-account-button-wrapper"
     >
@@ -77,7 +102,7 @@ const toggleCreateNewAccount = () => {
         trailing
         size="xl"
         class="w-full justify-center sm:w-min sm:justify-normal"
-        @click="toggleCreateNewAccount"
+        @click="addNew = true"
       />
       <UButton
         v-else
@@ -94,22 +119,22 @@ const toggleCreateNewAccount = () => {
 
     <!-- Create Account Actions -->
     <div
-      v-if="addNew"
+      v-if="!showAccountList"
       class="flex justify-end gap-x-3"
       data-testid="create-account-button-wrapper"
     >
       <UButton
         variant="outline"
         :label="$t('connect.label.back')"
-        :disabled="isLoading"
+        :disabled="isSubmitting"
         trailing
         size="xl"
         class="w-full justify-center sm:w-min sm:justify-normal"
-        @click="toggleCreateNewAccount"
+        @click="addNew = false"
       />
       <UButton
         :label="$t('connect.label.saveAndContinue')"
-        :loading="isLoading"
+        :loading="isSubmitting"
         form="account-create-form"
         class="w-full justify-center sm:w-min sm:justify-normal"
         trailing

package/app/pages/auth/terms-of-use.vue

@@ -2,7 +2,6 @@
 import { ConnectTermsOfUseContent, ConnectTermsOfUseForm } from '#components'
 
 const { t } = useI18n()
-const authApi = useAuthApi()
 const { finalRedirect } = useConnectAccountFlowRedirect()
 
 definePageMeta({
@@ -16,8 +15,8 @@ useHead({
   title: t('connect.page.termsOfUse.title')
 })
 
-const { data, status } = await authApi.getTermsOfUse()
-const { patchTermsOfUse, isLoading } = authApi.usePatchTermsOfUse()
+const { data, status } = useConnectAuthQuery().termsOfUse()
+const { mutate, isLoading } = useConnectAuthMutation().updateTermsOfUse()
 
 const formRef = useTemplateRef<InstanceType<typeof ConnectTermsOfUseForm>>('form-ref')
 const contentRef = useTemplateRef<InstanceType<typeof ConnectTermsOfUseContent>>('content-ref')
@@ -30,8 +29,6 @@ const hasReachedBottom = computed(() => formTop.value >= tosBottom.value)
 const disableButtons = computed<boolean>(() => {
   return isLoading.value || status.value === 'pending' || status.value === 'error' || !data.value?.content
 })
-
-// TODO: - FUTURE - add help/contact info to alert?
 </script>
 
 <template>
@@ -67,10 +64,13 @@ const disableButtons = computed<boolean>(() => {
       :disable-buttons="disableButtons"
       :has-reached-bottom="hasReachedBottom"
       :loading="isLoading"
-      @submit="patchTermsOfUse({
-        accepted: true,
-        version: data!.versionId,
-        successCb: async () => await finalRedirect(useRoute(), true),
+      @submit="mutate({
+        payload: {
+          accepted: true,
+          version: data!.versionId,
+        },
+        silent: false,
+        successCb: () => finalRedirect(useRoute(), true),
       })"
     />
   </UContainer>

package/app/plugins/auth-api.ts

@@ -1,28 +1,33 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  const rtc = nuxtApp.$config.public
-  const authApiUrl = rtc.authApiUrl + rtc.authApiVersion
-  const appName = rtc.appName
-  const xApiKey = rtc.xApiKey
+export default defineNuxtPlugin({
+  name: 'auth-api',
+  order: -20,
+  parallel: true,
+  setup(nuxtApp) {
+    const rtc = nuxtApp.$config.public
+    const authApiUrl = rtc.authApiUrl + rtc.authApiVersion
+    const appName = rtc.appName
+    const xApiKey = rtc.xApiKey
 
-  const api = $fetch.create({
-    baseURL: authApiUrl,
-    async onRequest({ options }) {
-      const auth = useConnectAuth()
-      const accountStore = useConnectAccountStore()
+    const api = $fetch.create({
+      baseURL: authApiUrl,
+      async onRequest({ options }) {
+        const auth = useConnectAuth()
+        const accountStore = useConnectAccountStore()
 
-      const token = await auth.getToken()
-      const accountId = accountStore.currentAccount.id
+        const token = await auth.getToken()
+        const accountId = accountStore.currentAccount.id
 
-      options.headers.set('Authorization', `Bearer ${token}`)
-      options.headers.set('App-Name', appName)
-      options.headers.set('X-Apikey', xApiKey)
-      options.headers.set('Account-Id', String(accountId))
-    }
-  })
+        options.headers.set('Authorization', `Bearer ${token}`)
+        options.headers.set('App-Name', appName)
+        options.headers.set('X-Apikey', xApiKey)
+        options.headers.set('Account-Id', String(accountId))
+      }
+    })
 
-  return {
-    provide: {
-      authApi: api
+    return {
+      provide: {
+        authApi: api
+      }
     }
   }
 })

package/app/plugins/connect-account-bootstrap.client.ts

@@ -0,0 +1,33 @@
+export default defineNuxtPlugin({
+  name: 'connect-account-bootstrap',
+  order: -10,
+  dependsOn: ['connect-auth', 'auth-api'],
+  parallel: true,
+  async setup(nuxtApp) {
+    const { isAuthenticated } = useConnectAuth()
+    const store = useConnectAccountStore()
+
+    if (isAuthenticated.value) {
+      // initialize user accounts and user profile on app mount
+      await Promise.all([
+        store.initAccountStore(),
+        store.syncUserProfile()
+      ])
+    }
+
+    // sync user profile whenever the token is updated
+    nuxtApp.hook('connect:auth:refresh', async () => {
+      if (isAuthenticated.value) {
+        await store.syncUserProfile()
+      }
+    })
+
+    addRouteMiddleware('set-account-from-url-param', (to) => {
+      if (to.query.accountid) {
+        store.switchCurrentAccount(parseInt(to.query.accountid as string))
+      }
+    },
+    { global: true }
+    )
+  }
+})