@sbc-connect/nuxt-auth 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @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
+
+- [#108](https://github.com/bcgov/connect-nuxt/pull/108) [`8571754`](https://github.com/bcgov/connect-nuxt/commit/8571754160242c3233838fc039fd1a01ff9d7a82) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Implements account creation in Auth and Country Code/Country Flag components in Forms
+
+### Patch Changes
+
+- Updated dependencies [[`8571754`](https://github.com/bcgov/connect-nuxt/commit/8571754160242c3233838fc039fd1a01ff9d7a82), [`d9d6356`](https://github.com/bcgov/connect-nuxt/commit/d9d63560e27117c43b9e8e54d363c3fdbb620049), [`dd17349`](https://github.com/bcgov/connect-nuxt/commit/dd173497255f35415b468e17f7192722f604d3c8)]:
+  - @sbc-connect/nuxt-forms@0.3.0
+  - @sbc-connect/nuxt-base@0.5.0
+
 ## 0.2.1
 
 ### Patch 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

@@ -0,0 +1,134 @@
+<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'
+
+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<{
+  accountName: FormError<string> | undefined
+  emailAddress: FormError<string> | undefined
+  phone: FormError<string> | undefined
+  address: FormError<string> | undefined
+}>(() => {
+  const errors = formRef.value?.getErrors()
+  return {
+    accountName: errors?.find(e => e.name === 'accountName'),
+    emailAddress: errors?.find(e => e.name?.startsWith('emailAddress')),
+    phone: errors?.find(e => e.name?.startsWith('phone')),
+    address: errors?.find(e => e.name?.startsWith('address'))
+  }
+})
+
+async function validate() {
+  return formRef.value?.validate({ silent: true })
+}
+</script>
+
+<template>
+  <ConnectPageSection
+    :heading="{
+      label: $t('connect.label.accountInformation'),
+      labelClass: 'font-bold md:ml-4',
+    }"
+  >
+    <UForm
+      id="account-create-form"
+      ref="account-create-form"
+      class="p-8"
+      no-validate
+      :validate-on="['input', 'change']"
+      :schema="accountProfileSchema"
+      :state="accountFormState"
+      @error="onFormSubmitError"
+      @submit="submitCreateAccount()"
+    >
+      <!-- Legal Name -->
+      <ConnectFormFieldWrapper
+        :label="$t('connect.page.createAccount.yourNameLabel')"
+        orientation="horizontal"
+      >
+        <p class="font-bold">
+          {{ userFullName }}
+        </p>
+        <p class="mt-3">
+          {{ $t('connect.page.createAccount.yourNameHelp') }}
+        </p>
+      </ConnectFormFieldWrapper>
+
+      <USeparator orientation="horizontal" class="my-8" />
+
+      <!-- Account Name -->
+      <ConnectAccountCreateName
+        v-model:status-code="statusCode"
+        :error="formErrors.accountName"
+      />
+
+      <!-- Account Email -->
+      <ConnectFormFieldWrapper
+        class="my-6"
+        :label="$t('connect.page.createAccount.emailLabel')"
+        orientation="horizontal"
+        :error="formErrors.emailAddress"
+      >
+        <ConnectFormInput
+          v-model="accountFormState.emailAddress"
+          name="emailAddress"
+          input-id="email-input"
+          :label="$t('connect.page.createAccount.emailPlaceholder')"
+        />
+      </ConnectFormFieldWrapper>
+
+      <!-- Account Phone -->
+      <ConnectFieldset
+        :label="$t('connect.page.createAccount.phoneLabel')"
+        orientation="horizontal"
+        :error="formErrors.phone"
+      >
+        <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" -->
+          <!-- 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="(###) ###-####"
+          />
+          <ConnectFormInput
+            v-model="accountFormState.phone.ext"
+            name="phone.ext"
+            input-id="phone-ext-input"
+            :label="$t('connect.page.createAccount.phoneExtensionLabel')"
+          />
+        </div>
+      </ConnectFieldset>
+
+      <!-- Account Address -->
+      <ConnectFieldset
+        class="my-6"
+        :label="$t('connect.page.createAccount.addressLabel')"
+        orientation="horizontal"
+        :error="formErrors.address"
+      >
+        <ConnectFormAddress
+          id="account-address"
+          v-model="accountFormState.address"
+          name="address"
+          schema-prefix="address"
+          @should-validate="validate"
+        />
+      </ConnectFieldset>
+    </UForm>
+  </ConnectPageSection>
+</template>

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
+  )
+})