@sbc-connect/nuxt-auth 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @sbc-connect/nuxt-auth
 
+## 0.4.0
+
+### Minor Changes
+
+- [#118](https://github.com/bcgov/connect-nuxt/pull/118) [`41e58f4`](https://github.com/bcgov/connect-nuxt/commit/41e58f44e6d216e7de568bccb2e240b2d89b8408) Thanks [@deetz99](https://github.com/deetz99)! - Remove now unnecessary css module workaround.
+
+- [#120](https://github.com/bcgov/connect-nuxt/pull/120) [`9f42868`](https://github.com/bcgov/connect-nuxt/commit/9f428681207188292d52cf6d370035f54bdb6ab4) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Idp Enforcement Modal and bcsc user welcome msg
+
+- [#117](https://github.com/bcgov/connect-nuxt/pull/117) [`e3da105`](https://github.com/bcgov/connect-nuxt/commit/e3da1056247f5c502578dc70f95375e66e3cc1da) Thanks [@deetz99](https://github.com/deetz99)! - Update all dependencies
+
+- [#119](https://github.com/bcgov/connect-nuxt/pull/119) [`ee5ba9e`](https://github.com/bcgov/connect-nuxt/commit/ee5ba9e6f7302e8ea11fd0ebfa887c4f6269b0ee) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - implements Dynamic app.config and idp enforcement
+
+- [#114](https://github.com/bcgov/connect-nuxt/pull/114) [`fe3eef1`](https://github.com/bcgov/connect-nuxt/commit/fe3eef1b39cc5883cc5e8560efe0dd89d04d0455) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Implements Acct Creation submissions, contact updates and name lookup
+
+### Patch Changes
+
+- Updated dependencies [[`41e58f4`](https://github.com/bcgov/connect-nuxt/commit/41e58f44e6d216e7de568bccb2e240b2d89b8408), [`e3da105`](https://github.com/bcgov/connect-nuxt/commit/e3da1056247f5c502578dc70f95375e66e3cc1da), [`fe3eef1`](https://github.com/bcgov/connect-nuxt/commit/fe3eef1b39cc5883cc5e8560efe0dd89d04d0455)]:
+  - @sbc-connect/nuxt-forms@0.4.0
+  - @sbc-connect/nuxt-base@0.6.0
+
 ## 0.3.0
 
 ### Minor Changes

package/app/app.config.ts

@@ -1,12 +1,13 @@
 import { ConnectIdpHint } from '#auth/app/enums/connect-idp-hint'
+import type { AppConfigInput } from 'nuxt/schema'
 
 export default defineAppConfig({
   connect: {
     login: {
       redirect: '/',
       idps: [ConnectIdpHint.BCSC, ConnectIdpHint.BCEID, ConnectIdpHint.IDIR],
-      skipAccountRedirect: false
-      // idpEnforcement: 'strict' - future potentially
+      skipAccountRedirect: false,
+      idpEnforcement: false
     },
     logout: {
       redirect: ''
@@ -18,4 +19,4 @@ export default defineAppConfig({
       accountOptionsMenu: true
     }
   }
-})
+} satisfies AppConfigInput) // validates input shape without losing inference

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { FormError, InputProps } from '@nuxt/ui'
+
+defineProps<{
+  error?: FormError<string>
+}>()
+
+const authApi = useAuthApi()
+const { accountFormState } = useConnectAccountStore()
+
+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
+    } catch (err: unknown) {
+      statusCode.value = err?.response?.status || 500
+    } finally {
+      isLoading.value = false
+    }
+  } else {
+    statusCode.value = undefined
+  }
+}, 1000)
+
+watch(() => accountFormState.accountName, validateName)
+
+// Compute UInput props based on loading state and status code
+const uInputProps = computed<InputProps>(() => {
+  const iconMap: Record<number, { class: string, name: string }> = {
+    204: { class: 'text-success size-7', name: 'i-mdi-check' },
+    200: { class: 'text-error size-7', name: 'i-mdi-close' },
+    500: { class: 'text-error size-7', name: 'i-mdi-close' }
+  }
+
+  const icon = statusCode.value ? iconMap[statusCode.value] : null
+
+  return {
+    loading: isLoading.value,
+    trailing: true,
+    ui: {
+      trailingIcon: icon?.class || 'text-primary size-7'
+    },
+    trailingIcon: icon?.name
+  }
+})
+
+// Provide custom props for UInput
+provide('UInput-props-account-name-input', uInputProps)
+</script>
+
+<template>
+  <ConnectFormFieldWrapper
+    class="pt-2 my-6"
+    :label="$t('connect.page.createAccount.accountNameLabel')"
+    orientation="horizontal"
+    :error
+  >
+    <ConnectFormInput
+      v-model="accountFormState.accountName"
+      name="accountName"
+      input-id="account-name-input"
+      :label="$t('connect.page.createAccount.accountNameLabel')"
+      :help="$t('connect.page.createAccount.accountNameHelp')"
+    />
+  </ConnectFormFieldWrapper>
+</template>

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

@@ -3,9 +3,10 @@ import type { Form, FormError } from '@nuxt/ui'
 import type { AccountProfileSchema } from '#auth/app/utils/schemas/account'
 import { getAccountCreateSchema } from '#auth/app/utils/schemas/account'
 
-const { accountFormState, userFullName } = useConnectAccountStore()
-const accountProfileSchema = getAccountCreateSchema()
+const statusCode = ref<number | undefined>(undefined)
 
+const { accountFormState, submitCreateAccount, userFullName } = useConnectAccountStore()
+const accountProfileSchema = computed(() => getAccountCreateSchema(statusCode.value))
 const formRef = useTemplateRef<Form<AccountProfileSchema>>('account-create-form')
 
 const formErrors = computed<{
@@ -44,6 +45,7 @@ async function validate() {
       :schema="accountProfileSchema"
       :state="accountFormState"
       @error="onFormSubmitError"
+      @submit="submitCreateAccount()"
     >
       <!-- Legal Name -->
       <ConnectFormFieldWrapper
@@ -61,20 +63,10 @@ async function validate() {
       <USeparator orientation="horizontal" class="my-8" />
 
       <!-- Account Name -->
-      <ConnectFormFieldWrapper
-        class="pt-2 my-6"
-        :label="$t('connect.page.createAccount.accountNameLabel')"
-        orientation="horizontal"
+      <ConnectAccountCreateName
+        v-model:status-code="statusCode"
         :error="formErrors.accountName"
-      >
-        <ConnectFormInput
-          v-model="accountFormState.accountName"
-          name="accountName"
-          input-id="account-name-input"
-          :label="$t('connect.page.createAccount.accountNameLabel')"
-          :help="$t('connect.page.createAccount.accountNameHelp')"
-        />
-      </ConnectFormFieldWrapper>
+      />
 
       <!-- Account Email -->
       <ConnectFormFieldWrapper
@@ -98,16 +90,18 @@ async function validate() {
         :error="formErrors.phone"
       >
         <div class="flex flex-row gap-2">
-          <ConnectFormPhoneCountryCode
-            v-model:country-calling-code="accountFormState.phone.countryCode"
-            v-model:country-iso2="accountFormState.phone.countryIso2"
-            :is-invalid="!accountFormState.phone.countryIso2"
-            class="w-40 mt-[-20px]"
-          />
+          <!-- 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" -->
+          <!-- class="w-40 mt-[-20px]" -->
+          <!-- /> -->
           <ConnectFormInput
             v-model="accountFormState.phone.phoneNumber"
             name="phone.phoneNumber"
             input-id="phone-number-input"
+            class="flex-2"
             :label="$t('connect.page.createAccount.phonePlaceholder')"
             mask="(###) ###-####"
           />

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{
+  currentIdp: ConnectLoginSource
+}>()
+const emit = defineEmits<{ close: [] }>()
+
+function closeModal() {
+  emit('close')
+}
+</script>
+
+<template>
+  <UModal
+    id="invalid-idp-dialog"
+    overlay
+    :dismissible="false"
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <div role="alert">
+          <h2
+            id="invalid-idp-title"
+            class="text-xl font-bold text-neutral-highlighted"
+          >
+            {{ $t('connect.invalidIdp.title') }} {{ props.currentIdp }}
+          </h2>
+        </div>
+        <div>
+          <div role="alert">
+            <span>{{ $t('connect.invalidIdp.content') }}</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <UButton
+            :label="$t('connect.label.logout')"
+            :aria-label="$t('connect.label.logout')"
+            size="xl"
+            class="font-bold"
+            @click="closeModal"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/Connect/TermsOfUse/Form.vue

@@ -3,7 +3,7 @@ import { z } from 'zod'
 import type { FormErrorEvent, Form } from '@nuxt/ui'
 
 const { t } = useI18n()
-const { openDeclineTosModal } = useConnectTosModals()
+const { openDeclineTosModal } = useConnectAuthModals()
 
 const props = defineProps<{
   hasReachedBottom: boolean

package/app/composables/useAuthApi.ts

@@ -1,3 +1,5 @@
+import type { ConnectCreateAccount } from '#auth/app/interfaces/connect-account'
+
 export const useAuthApi = () => {
   const { $authApi } = useNuxtApp()
   const queryCache = useQueryCache()
@@ -13,6 +15,95 @@ export const useAuthApi = () => {
     return query()
   }
 
+  /**
+   * Validates whether an account name is available by sending a request to the AUTH service.
+   * @param {string} accountName - The account name to validate for uniqueness.
+   */
+  function verifyAccountName(accountName: string) {
+    const query = defineQuery({
+      key: ['auth-account-name', accountName],
+      query: () => $authApi.raw(`/orgs?validateName=true&name=${encodeURIComponent(accountName)}`),
+      staleTime: 300000
+    })
+    return query()
+  }
+
+  /**
+   * Creates an account by POSTing the given payload to `/orgs`.
+   * @returns Object containing mutation state and `createAccount` function.
+   */
+  const useCreateAccount = defineMutation(() => {
+    const { mutateAsync, ...mutation } = useMutation({
+      mutation: (vars: { payload: ConnectCreateAccount, successCb?: () => Promise<unknown> }) => {
+        return $authApi<ConnectAuthProfile>('/orgs', {
+          method: 'POST',
+          body: vars.payload
+        })
+      },
+      onError: (error) => {
+        // TODO: FUTURE - add api error message to modal content - remove console.error
+        console.error('ERROR: ', error)
+        useConnectAuthModals().openCreateAccountModal()
+      },
+      onSuccess: async (_, _vars) => {
+        await queryCache.invalidateQueries({ key: ['auth-user-profile'], exact: true })
+        if (_vars.successCb) {
+          await _vars.successCb()
+        }
+      }
+    })
+
+    return {
+      ...mutation,
+      createAccount: mutateAsync
+    }
+  })
+
+  /**
+   * Updates a users contact by PUTing the given payload to `/users/contacts`.
+   * @returns Object containing mutation state and `updateUserContact` function.
+   */
+  const useUpdateUserContact = defineMutation(() => {
+    const { mutateAsync, ...mutation } = useMutation({
+      mutation: (vars: {
+        email: string
+        phone: string
+        phoneExtension: string | undefined
+        successCb?: () => Promise<unknown>
+        errorCb?: (error: unknown) => Promise<unknown>
+      }) => {
+        return $authApi<ConnectAuthProfile>('/users/contacts', {
+          method: 'PUT',
+          body: {
+            email: vars.email,
+            phone: vars.phone,
+            phoneExtension: vars.phoneExtension
+          }
+        })
+      },
+      onError: async (error, _vars) => {
+        // TODO: FUTURE - add api error message to modal content - remove console.error
+        console.error('ERROR: ', error)
+        await useConnectAuthModals().openUpdateUserContactModal()
+
+        if (_vars.errorCb) {
+          await queryCache.invalidateQueries({ key: ['auth-user-profile'], exact: true })
+          await _vars.errorCb(error)
+        }
+      },
+      onSuccess: async (_, _vars) => {
+        if (_vars.successCb) {
+          await _vars.successCb()
+        }
+      }
+    })
+
+    return {
+      ...mutation,
+      updateUserContact: mutateAsync
+    }
+  })
+
   async function getTermsOfUse() {
     const query = defineQuery({
       key: ['auth-terms-of-use'],
@@ -36,7 +127,7 @@ export const useAuthApi = () => {
       onError: (error) => {
         // TODO: FUTURE - add api error message to modal content - remove console.error
         console.error('ERROR: ', error)
-        useConnectTosModals().openPatchTosErrorModal()
+        useConnectAuthModals().openPatchTosErrorModal()
       },
       onSuccess: async (_, _vars) => {
         await queryCache.invalidateQueries({ key: ['auth-user-profile'], exact: true })
@@ -55,6 +146,9 @@ export const useAuthApi = () => {
   return {
     getAuthUserProfile,
     getTermsOfUse,
-    usePatchTermsOfUse
+    useCreateAccount,
+    usePatchTermsOfUse,
+    useUpdateUserContact,
+    verifyAccountName
   }
 }

package/app/composables/useConnectAccountFlowRedirect.ts

@@ -13,10 +13,6 @@ export const useConnectAccountFlowRedirect = () => {
       delete query.return
     }
 
-    if (query.allowedIdps) {
-      delete query.allowedIdps
-    }
-
     if (externalRedirectUrl) {
       return navigateTo(
         {

package/app/composables/useConnectAppConfig.ts

@@ -0,0 +1,31 @@
+import { useAppConfig } from '#imports'
+
+export const useConnectAppConfig = () => {
+  /**
+   * Merge preset overrides (from app.config.connectOverrides) into the provided baseConfig.
+   * If no override for the preset is found, baseConfig is returned unchanged.
+   */
+  function mergeAppConfigOverrides(
+    baseConfig: ConnectConfig,
+    presetName: ConnectPresetType
+  ): ConnectConfig {
+    const appConfig = useAppConfig()
+    const overrides = appConfig.connectOverrides?.[presetName] ?? null
+
+    return {
+      ...baseConfig,
+      // Apply shallow merge for each subtree when present
+      ...(overrides?.login
+        ? { login: { ...baseConfig.login, ...overrides?.login } }
+        : { login: baseConfig.login }),
+      ...(overrides?.header
+        ? { header: { ...baseConfig.header, ...overrides?.header } }
+        : { header: baseConfig.header }),
+      logout: baseConfig.logout
+    }
+  }
+
+  return {
+    mergeAppConfigOverrides
+  }
+}

package/app/composables/useConnectAuthModals.ts

@@ -0,0 +1,76 @@
+export const useConnectAuthModals = () => {
+  const { baseModal } = useConnectModal()
+  const { logout } = useConnectAuth()
+  const t = useNuxtApp().$i18n.t
+
+  function openDeclineTosModal() {
+    baseModal.open({
+      title: `${t('connect.label.declineTermsOfUse')}?`,
+      description: t('connect.text.declineTOSCantAccessService'),
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.declineTermsOfUse'),
+          onClick: async () => await logout()
+        },
+        {
+          label: t('connect.label.cancel'),
+          shouldClose: true,
+          variant: 'outline'
+        }
+      ]
+    })
+  }
+
+  // TODO: better error text
+  function openPatchTosErrorModal() {
+    baseModal.open({
+      title: `${t('connect.text.patchTosError.title')}`,
+      description: t('connect.text.patchTosError.description'),
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.close'),
+          shouldClose: true
+        }
+      ]
+      // contact info ???
+      // include api error message?
+    })
+  }
+
+  function openCreateAccountModal() {
+    baseModal.open({
+      title: `${t('connect.text.accountCreationError.title')}`,
+      description: t('connect.text.accountCreationError.description'),
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.close'),
+          shouldClose: true
+        }
+      ]
+    })
+  }
+
+  function openUpdateUserContactModal() {
+    baseModal.open({
+      title: `${t('connect.text.userContactUpdateError.title')}`,
+      description: t('connect.text.userContactUpdateError.description'),
+      dismissible: true,
+      buttons: [
+        {
+          label: t('connect.label.close'),
+          shouldClose: true
+        }
+      ]
+    })
+  }
+
+  return {
+    openCreateAccountModal,
+    openDeclineTosModal,
+    openPatchTosErrorModal,
+    openUpdateUserContactModal
+  }
+}

package/app/enums/connect-access-type.ts

@@ -0,0 +1,3 @@
+export enum ConnectAccessType {
+  REGULAR = 'REGULAR'
+}

package/app/enums/connect-payment-method.ts

@@ -0,0 +1,3 @@
+export enum ConnectPaymentMethod {
+  DIRECT_PAY = 'DIRECT_PAY'
+}

package/app/enums/connect-preset-type.ts

@@ -0,0 +1,4 @@
+export enum ConnectPresetType {
+  DEFAULT = 'default',
+  BCSC_USER = 'bcscUser'
+}

package/app/enums/connect-product-code.ts

@@ -0,0 +1,3 @@
+export enum ConnectProductCode {
+  BUSINESS = 'BUSINESS'
+}

package/app/enums/connect-product-type.ts

@@ -0,0 +1,3 @@
+export enum ConnectProductTypeCode {
+  PREMIUM = 'PREMIUM'
+}

package/app/interfaces/app-config-shapes.ts

@@ -0,0 +1,33 @@
+export interface ConnectLoginConfig {
+  redirect: string
+  idps: ConnectIdpHint[]
+  skipAccountRedirect: boolean
+  idpEnforcement: boolean
+  alert?: {
+    title?: string
+    message?: string
+  }
+}
+
+export interface ConnectLogoutConfig {
+  redirect: string
+}
+
+export interface ConnectHeaderConfig {
+  loginMenu: boolean
+  createAccount: boolean
+  notifications: boolean
+  accountOptionsMenu: boolean
+}
+
+export interface ConnectConfig {
+  login: ConnectLoginConfig
+  logout: ConnectLogoutConfig
+  header: ConnectHeaderConfig
+}
+
+export interface ConnectPresetOverrides {
+  login?: Partial<ConnectLoginConfig>
+  header?: Partial<ConnectHeaderConfig>
+  logout?: Partial<ConnectLogoutConfig>
+}

package/app/interfaces/connect-account-address.ts

@@ -0,0 +1 @@
+export type ConnectAccountAddress = Pick<ConnectAddress, Exclude<keyof ConnectAddress, 'locationDescription'>>

package/app/interfaces/connect-account.ts

@@ -8,3 +8,16 @@ export interface ConnectAccount {
   urlpath: string
   urlorigin: string
 }
+
+export interface ConnectCreateAccount {
+  accessType: ConnectAccessType
+  isBusinessAccount: boolean
+  mailingAddress: ConnectAccountAddress
+  name: string
+  paymentInfo: {
+    paymentMethod: ConnectPaymentMethod
+  }
+  productSubscriptions: Array<{
+    productCode: ConnectProductCode
+  }>
+}

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

@@ -0,0 +1,13 @@
+import { useAppConfig } from '#imports'
+import { useConnectAppConfig } from '#auth/app/composables/useConnectAppConfig'
+
+export default defineNuxtRouteMiddleware((to) => {
+  const appConfig = useAppConfig()
+  const { mergeAppConfigOverrides } = useConnectAppConfig()
+
+  // Build and assign app.config presets
+  appConfig.connect = mergeAppConfigOverrides(
+    appConfig.connect as ConnectConfig,
+    to.query.preset as ConnectPresetType
+  )
+})

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

@@ -0,0 +1,39 @@
+import { useConnectAuth } from '#auth/app/composables/useConnectAuth'
+import { withQuery } from 'ufo'
+import type { ConnectIdpHint } from '#imports'
+import { useAppConfig } from '#imports'
+import { ConnectModalInvalidIdp } from '#components'
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const localePath = useLocalePath()
+  const appConfig = useAppConfig()
+  const { authUser, logout } = 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
+    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
+    if (!allowedIdps?.includes(authUser.value?.loginSource.toLowerCase() as unknown as ConnectIdpHint)) {
+      showInvalidIdpModal()
+    }
+  }
+})

package/app/middleware/connect-auth.ts

@@ -6,7 +6,14 @@ export default defineNuxtRouteMiddleware(async (to) => {
   const { finalRedirect } = useConnectAccountFlowRedirect()
 
   if (!isAuthenticated.value && !rtc.playwright) {
-    return navigateTo(localePath(`/auth/login?return=${rtc.baseUrl}${to.fullPath.slice(1)}`))
+    return navigateTo({
+      path: localePath('/auth/login'),
+      query: {
+        // include preset when present
+        ...(to.query.preset ? { preset: String(to.query.preset) } : {}),
+        return: `${rtc.baseUrl}${to.fullPath.slice(1)}`
+      }
+    })
   }
 
   if (isAuthenticated.value) {

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

@@ -5,11 +5,14 @@ definePageMeta({
   middleware: 'connect-auth'
 })
 
+const route = useRoute()
 const rtc = useRuntimeConfig().public
 const accountStore = useConnectAccountStore()
 const { authUser } = useConnectAuth()
 const { finalRedirect } = useConnectAccountFlowRedirect()
 const { clearAccountState } = useConnectAccountStore()
+const { isLoading } = storeToRefs(useConnectAccountStore())
+const isAccountCreateRoute = computed(() => route.path.includes('create'))
 
 const addNew = ref(false)
 const pageTitle = computed(() =>
@@ -26,7 +29,8 @@ function selectAndRedirect(id: number) {
 }
 
 onBeforeMount(() => {
-  if (accountStore.userAccounts.length === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC) {
+  if ((accountStore.userAccounts.length === 0 && authUser.value.loginSource === ConnectLoginSource.BCSC)
+    || isAccountCreateRoute.value) {
     addNew.value = true
   }
 })
@@ -63,7 +67,11 @@ const toggleCreateNewAccount = () => {
     </ConnectTransitionFade>
 
     <!-- Select Account Actions -->
-    <div v-if="!addNew" class="flex justify-center">
+    <div
+      v-if="!addNew"
+      class="flex justify-center"
+      data-testid="select-account-button-wrapper"
+    >
       <UButton
         v-if="authUser.loginSource === ConnectLoginSource.BCSC"
         variant="outline"
@@ -88,10 +96,15 @@ const toggleCreateNewAccount = () => {
     </div>
 
     <!-- Create Account Actions -->
-    <div v-if="addNew" class="flex justify-end gap-x-3">
+    <div
+      v-if="addNew"
+      class="flex justify-end gap-x-3"
+      data-testid="create-account-button-wrapper"
+    >
       <UButton
         variant="outline"
         :label="$t('connect.label.back')"
+        :disabled="isLoading"
         trailing
         size="xl"
         class="w-full justify-center sm:w-min sm:justify-normal"
@@ -99,6 +112,7 @@ const toggleCreateNewAccount = () => {
       />
       <UButton
         :label="$t('connect.label.saveAndContinue')"
+        :loading="isLoading"
         form="account-create-form"
         class="w-full justify-center sm:w-min sm:justify-normal"
         trailing

package/app/pages/auth/login.vue

@@ -46,6 +46,20 @@ 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">
+      <!-- Alert message from app config -->
+      <UAlert
+        v-if="ac.alert"
+        class="max-w-[35em]"
+        color="warning"
+        variant="subtle"
+        data-testid="login-alert"
+        :title="ac.alert.title"
+        :description="ac.alert.message"
+        icon="i-mdi-check-circle"
+        :ui="{
+          icon: 'text-success',
+        }"
+      />
       <h1>
         {{ $t('connect.page.login.h1') }}
       </h1>
@@ -57,7 +71,10 @@ const loginOptions = computed(() => {
         :description="$t('connect.page.login.sessionExpiredAlert.description')"
         icon="i-mdi-alert"
       />
-      <UCard class="my-auto max-w-md">
+      <UCard
+        class="my-auto max-w-md"
+        data-testid="login-card"
+      >
         <img
           :src="loginImage"
           class="pb-4"

package/app/stores/connect-account.ts

@@ -1,11 +1,14 @@
 import { getAccountCreateSchema } from '#auth/app/utils/schemas/account'
 import type { AccountProfileSchema } from '#auth/app/utils/schemas/account'
+import type { ConnectCreateAccount } from '#auth/app/interfaces/connect-account'
 
 export const useConnectAccountStore = defineStore('connect-auth-account-store', () => {
   const { $authApi } = useNuxtApp()
-  const authApi = useAuthApi()
   const rtc = useRuntimeConfig().public
   const { authUser } = useConnectAuth()
+  const { useCreateAccount, useUpdateUserContact, getAuthUserProfile } = useAuthApi()
+  const { finalRedirect } = useConnectAccountFlowRedirect()
+
   // selected user account
   const currentAccount = ref<ConnectAccount>({} as ConnectAccount)
   const userAccounts = ref<ConnectAccount[]>([])
@@ -15,9 +18,13 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
   const userFirstName = ref<string>(user.value?.firstName || '-')
   const userLastName = ref<string>(user.value?.lastName || '')
   const userFullName = computed(() => `${userFirstName.value} ${userLastName.value}`)
+
+  // Create account
+  const isLoading = ref<boolean>(false)
+  const { createAccount } = useCreateAccount()
+  const { updateUserContact } = useUpdateUserContact()
   const createAccountProfileSchema = getAccountCreateSchema()
   const accountFormState = reactive<AccountProfileSchema>(createAccountProfileSchema.parse({}))
-
   /**
    * Checks if the current account or the Keycloak user has any of the specified roles.
    *
@@ -53,9 +60,53 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
     })
   }
 
+  /** Map AccountFormState -> CreateAccountPayload */
+  function createAccountPayload(): ConnectCreateAccount {
+    return {
+      accessType: ConnectAccessType.REGULAR,
+      mailingAddress: {
+        city: accountFormState.address.city,
+        country: accountFormState.address.country,
+        region: accountFormState.address.region,
+        postalCode: accountFormState.address.postalCode,
+        street: accountFormState.address.street,
+        streetAdditional: accountFormState.address.streetAdditional || '',
+        deliveryInstructions: accountFormState.address.locationDescription || ''
+      },
+      name: accountFormState.accountName,
+      paymentInfo: { paymentMethod: ConnectPaymentMethod.DIRECT_PAY },
+      productSubscriptions: [{ productCode: ConnectProductCode.BUSINESS }]
+    }
+  }
+
+  /** Submit create account and user contact update requests */
+  async function submitCreateAccount(): Promise<void> {
+    try {
+      isLoading.value = true
+      // Create Account
+      const payload = createAccountPayload()
+      await createAccount({
+        payload,
+        // Update User Contact Info on create account success
+        successCb: async () => await updateUserContact({
+          email: accountFormState.emailAddress,
+          phone: accountFormState.phone.phoneNumber,
+          phoneExtension: accountFormState.phone.ext,
+          successCb: async () => await finalRedirect(useRoute()),
+          errorCb: async () => await finalRedirect(useRoute())
+        })
+      })
+    } catch (error) {
+      // Error handled in useAuthApi
+      console.error('Account Create Submission Error: ', error)
+    } finally {
+      isLoading.value = false
+    }
+  }
+
   /** Set user name information */
   async function setUserName() {
-    const { data, refresh } = await authApi.getAuthUserProfile()
+    const { data, refresh } = await getAuthUserProfile()
     await refresh()
     if (data.value?.firstname && data.value?.lastname) {
       userFirstName.value = data.value.firstname
@@ -172,21 +223,23 @@ export const useConnectAccountStore = defineStore('connect-auth-account-store',
 
   return {
     accountFormState,
+    checkAccountStatus,
     clearAccountState,
+    submitCreateAccount,
+    isLoading,
     currentAccount,
     currentAccountName,
-    userAccounts,
-    pendingApprovalCount,
-    userFullName,
-    checkAccountStatus,
-    setUserName,
+    getPendingApprovalCount,
+    getUserAccounts,
     hasRoles,
+    initAccountStore,
     isCurrentAccount,
+    pendingApprovalCount,
     setAccountInfo,
-    getUserAccounts,
+    setUserName,
     switchCurrentAccount,
-    getPendingApprovalCount,
-    initAccountStore,
+    userAccounts,
+    userFullName,
     $reset
   }
 },

package/app/types/auth-app-config.d.ts

@@ -1,23 +1,16 @@
-declare module '@nuxt/schema' {
+declare module 'nuxt/schema' {
+  /** What users can write in app.config.ts */
   interface AppConfigInput {
-    connect?: {
-      login?: {
-        redirect?: string
-        idps?: ConnectValidIdps
-        skipAccountRedirect?: boolean
-        // idpEnforcement: 'strict' | 'none' - future potentially
-      }
-      logout?: {
-        redirect?: string
-      }
-      header?: {
-        loginMenu?: boolean
-        createAccount?: boolean
-        notifications?: boolean
-        accountOptionsMenu?: boolean
-      }
-    }
+    connect?: Partial<ConnectConfig>
+    connectOverrides?: Record<string, ConnectPresetOverrides | null>
   }
+
+  /** What useAppConfig() returns */
+  interface AppConfig {
+    connect: ConnectConfig
+    connectOverrides?: Record<string, ConnectPresetOverrides | null>
+  }
+
 }
 
 export {}

package/app/utils/schemas/account.ts

@@ -1,6 +1,30 @@
 import { z } from 'zod'
 import { getRequiredAddressSchema } from '#forms/app/utils'
 
+export function getAccountNameSchema(status?: number | undefined) {
+  const t = useNuxtApp().$i18n.t
+
+  return z.string().min(1, t('connect.validation.requiredAccountName'))
+    .superRefine((val, ctx) => {
+      // Only run if we have a value and a statusCode
+      if (val && status !== undefined) {
+        if (status === 200) {
+          ctx.addIssue({
+            code: 'custom',
+            message: t('connect.validation.duplicateAccountName')
+          })
+        }
+        if (status === 500) {
+          ctx.addIssue({
+            code: 'custom',
+            message: t('connect.validation.requestError')
+          })
+        }
+      // 204 (No Content) => valid -> no issue
+      }
+    })
+}
+
 /**
  * Phone schema: country dialing code + local phone + optional extension.
  * - countryCode: E.164 dialing code (e.g., "+1", "+44").
@@ -27,9 +51,7 @@ export function getPhoneSchema() {
  * Account create schema — single address + name + email + phone
  * Mirrors your .default(...) pattern.
  */
-export function getAccountCreateSchema() {
-  const t = useNuxtApp().$i18n.t
-
+export function getAccountCreateSchema(status: number | undefined = undefined) {
   return z.object({
     address: getRequiredAddressSchema().default({
       street: '',
@@ -40,7 +62,7 @@ export function getAccountCreateSchema() {
       country: 'CA',
       locationDescription: ''
     }),
-    accountName: z.string().min(1, t('connect.validation.requiredAccountName')).default(''),
+    accountName: getAccountNameSchema(status).default(''),
     emailAddress: z.string().email().default(''),
     phone: getPhoneSchema().default({
       countryIso2: 'CA',

package/i18n/locales/en-CA.ts

@@ -73,6 +73,10 @@ export default {
         aria: 'Your session is about to expire, press any key to continue your session.'
       }
     },
+    invalidIdp: {
+      title: 'You\'re logged in with your',
+      content: 'To continue, you must sign in with your BC Services Card. Please log out and sign in again using your BC Services Card credentials.'
+    },
     text: {
       alertExistingAccountFound: '{boldStart}Note:{boldEnd} It looks like you already have an account with Service BC Connect. You can use an existing account to proceed or create a new one.',
       alertUnableToLoadTermsOfUse: 'Unable to load Terms of Use, please try again later.',
@@ -82,10 +86,24 @@ export default {
       notifications: {
         none: 'No Notifications',
         teamMemberApproval: '{count} team member requires approval to access this account. | {count} team members require approval to access this account.'
+      },
+      patchTosError: {
+        title: 'Terms of Use Update Error',
+        description: 'Unable to update Terms of Use at this time. Please try again later.'
+      },
+      accountCreationError: {
+        title: 'Account Creation Error',
+        description: 'Unable to create your account at this time. Please try again later.'
+      },
+      userContactUpdateError: {
+        title: 'User Contact Update Error',
+        description: 'Unable to update your contact information at this time. Please try again later.'
       }
     },
     validation: {
       acceptTermsOfUse: 'Please accept the Terms of Use.',
+      duplicateAccountName: 'An account with this name already exists.',
+      requestError: 'Request error, please try again.',
       termsOfUseScrollToBottom: 'Please scroll to the bottom of the page to accept the Terms of Use.',
       phoneNumberFormat: 'Phone must be in the format (123) 123-1231',
       phoneExtFormat: 'Extension must be digits only',

package/package.json

@@ -1,30 +1,29 @@
 {
   "name": "@sbc-connect/nuxt-auth",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "devDependencies": {
     "@axe-core/playwright": "4.11.0",
-    "@vitest/coverage-v8": "3.2.4",
     "dotenv": "17.2.3",
-    "nuxt": "4.1.3",
+    "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "vue-tsc": "3.1.2",
-    "@sbc-connect/eslint-config": "0.0.8",
-    "@sbc-connect/playwright-config": "0.0.8",
-    "@sbc-connect/vitest-config": "0.0.6"
+    "vue-tsc": "3.2.1",
+    "@sbc-connect/playwright-config": "0.1.0",
+    "@sbc-connect/vitest-config": "0.1.0",
+    "@sbc-connect/eslint-config": "0.0.8"
   },
   "dependencies": {
-    "@pinia/colada": "^0.17.9",
-    "@pinia/colada-nuxt": "^0.2.4",
-    "@pinia/nuxt": "^0.11.2",
-    "keycloak-js": "^26.2.1",
-    "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.5.0",
-    "@sbc-connect/nuxt-base": "0.5.0",
-    "@sbc-connect/nuxt-forms": "0.3.0"
+    "@pinia/colada": "0.20.0",
+    "@pinia/colada-nuxt": "0.3.0",
+    "@pinia/nuxt": "0.11.3",
+    "keycloak-js": "26.2.2",
+    "pinia": "3.0.4",
+    "pinia-plugin-persistedstate": "4.7.1",
+    "@sbc-connect/nuxt-base": "0.6.0",
+    "@sbc-connect/nuxt-forms": "0.4.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/app/composables/useConnectTosModals.ts

@@ -1,46 +0,0 @@
-export const useConnectTosModals = () => {
-  const { baseModal } = useConnectModal()
-  const { logout } = useConnectAuth()
-  const t = useNuxtApp().$i18n.t
-
-  function openDeclineTosModal() {
-    baseModal.open({
-      title: `${t('connect.label.declineTermsOfUse')}?`,
-      description: t('connect.text.declineTOSCantAccessService'),
-      dismissible: true,
-      buttons: [
-        {
-          label: t('connect.label.declineTermsOfUse'),
-          onClick: async () => await logout()
-        },
-        {
-          label: t('connect.label.cancel'),
-          shouldClose: true,
-          variant: 'outline'
-        }
-      ]
-    })
-  }
-
-  // TODO: better error text
-  function openPatchTosErrorModal() {
-    baseModal.open({
-      title: "Can't update TOS at this time",
-      description: 'Please try again later',
-      dismissible: true,
-      buttons: [
-        {
-          label: t('connect.label.close'),
-          shouldClose: true
-        }
-      ]
-      // contact info ???
-      // include api error message?
-    })
-  }
-
-  return {
-    openDeclineTosModal,
-    openPatchTosErrorModal
-  }
-}

package/app/middleware/03.allowed-idps.global.ts

@@ -1,20 +0,0 @@
-export default defineNuxtRouteMiddleware((to) => {
-  const ac = useAppConfig().connect.login
-  const validIdps = getValidIdps()
-  const allowedIdps = to.query.allowedIdps as string | undefined
-
-  if (allowedIdps) {
-    const idpArray = allowedIdps
-      .split(',')
-      .filter(idp =>
-        validIdps.includes(idp as ConnectValidIdpOption)
-      ) as ConnectValidIdps
-
-    if (idpArray.length) {
-      // updateAppConfig util doesn't seem to be updating correctly
-      // https://nuxt.com/docs/4.x/api/utils/update-app-config
-      // assign directly
-      ac.idps = idpArray
-    }
-  }
-})

package/modules/auth-assets/index.ts

@@ -1,15 +0,0 @@
-import { defineNuxtModule, createResolver } from 'nuxt/kit'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'auth-assets',
-    configKey: 'authAssets'
-  },
-  defaults: {},
-  async setup(_options, _nuxt) {
-    console.info('Setting up **auth** assets module')
-    const resolver = createResolver(import.meta.url)
-
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-auth-tw.css'))
-  }
-})

package/modules/auth-assets/runtime/assets/connect-auth-tw.css

@@ -1,2 +0,0 @@
-@import "#connect-theme";
-@source "../../../../app";