@sbc-connect/nuxt-auth 0.0.0-test-ld-20260520212549

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 ?? 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
+  }
+}, 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
+    :label="$t('connect.page.createAccount.accountNameLabel')"
+    orientation="horizontal"
+    :error
+    padding-class="pt-6 pb-4 px-4 sm:pb-4 sm:pt-8 sm:px-8"
+  >
+    <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,148 @@
+<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 accountStore = useConnectAccountStore()
+const { accountFormState, userFullName } = storeToRefs(accountStore)
+const { submitCreateAccount } = accountStore
+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(fieldName?: keyof AccountProfileSchema) {
+  return formRef.value?.validate({
+    name: fieldName as never,
+    silent: true
+  })
+}
+
+watch(() => statusCode.value, async () => {
+  if (statusCode.value !== undefined) {
+    await nextTick()
+    await validate('accountName')
+  }
+})
+</script>
+
+<template>
+  <ConnectPageSection
+    :heading="{
+      label: $t('connect.label.accountInformation'),
+      labelClass: 'font-bold md:ml-4',
+    }"
+    ui-body="p-0 sm:p-0"
+  >
+    <UForm
+      id="account-create-form"
+      ref="account-create-form"
+      no-validate
+      :validate-on="['input', 'change']"
+      :schema="accountProfileSchema"
+      :state="accountFormState"
+      @error="onFormSubmitError"
+      @submit="submitCreateAccount()"
+    >
+      <!-- Legal Name -->
+      <ConnectFormFieldWrapper
+        :label="$t('connect.page.createAccount.contactLabel')"
+        orientation="horizontal"
+        class="py-6 sm:py-8"
+      >
+        <p class="font-bold">
+          {{ userFullName }}
+        </p>
+        <p class="mt-3">
+          {{ $t('connect.page.createAccount.yourNameHelp') }}
+        </p>
+      </ConnectFormFieldWrapper>
+
+      <USeparator orientation="horizontal" />
+
+      <!-- Account Name -->
+      <ConnectAccountCreateName
+        v-model:status-code="statusCode"
+        :error="formErrors.accountName"
+      />
+
+      <!-- Account Email -->
+      <ConnectFormFieldWrapper
+        :label="$t('connect.page.createAccount.emailLabel')"
+        orientation="horizontal"
+        :error="formErrors.emailAddress"
+        padding-class="py-1 px-4 sm:py-2 sm:px-8"
+      >
+        <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"
+        padding-class="py-1 px-4 sm:py-2 sm:px-8"
+      >
+        <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
+        :label="$t('connect.page.createAccount.addressLabel')"
+        orientation="horizontal"
+        :error="formErrors.address"
+        padding-class="py-1 px-4 sm:pt-2 sm:pb-4 sm:px-8"
+      >
+        <ConnectFormAddress
+          id="account-address"
+          v-model="accountFormState.address"
+          name="address"
+          schema-prefix="address"
+          @should-validate="validate"
+        />
+      </ConnectFieldset>
+    </UForm>
+  </ConnectPageSection>
+</template>

package/app/components/Connect/Account/Existing/Alert.vue

@@ -0,0 +1,10 @@
+<template>
+  <UAlert
+    color="warning"
+    variant="subtle"
+  >
+    <template #description>
+      <ConnectI18nHelper translation-path="connect.text.alertExistingAccountFound" />
+    </template>
+  </UAlert>
+</template>

package/app/components/Connect/Account/Existing/List/Item.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+defineProps<{
+  account: ConnectAccount
+}>()
+
+defineEmits<{
+  select: [id: number]
+}>()
+</script>
+
+<template>
+  <li class="flex flex-col items-start justify-between gap-4 py-8 first:pt-0 last:pb-0 sm:flex-row sm:items-center">
+    <div
+      class="flex flex-row items-center gap-4 sm:gap-6"
+      :class="{
+        'opacity-50': account.accountStatus !== AccountStatus.ACTIVE,
+      }"
+    >
+      <UAvatar
+        :alt="account.label[0]"
+        :ui="{
+          root: 'bg-blue-300 rounded-sm',
+          fallback: 'text-white font-bold text-xl',
+        }"
+      />
+      <div class="flex w-full flex-col text-left">
+        <span class="text-lg font-bold text-neutral-highlighted">
+          {{ account.label }}
+        </span>
+      </div>
+    </div>
+    <div class="flex w-full flex-col gap-4 sm:w-fit sm:flex-row">
+      <div class="my-auto flex gap-2">
+        <UBadge
+          v-if="account.accountStatus !== AccountStatus.ACTIVE"
+          :label="$t('badge.inactiveAccount')"
+          class="bg-[#fff7e3] px-3 text-center font-bold text-neutral"
+        />
+      </div>
+
+      <UButton
+        :label="$t('connect.label.useThisAccount')"
+        :aria-label="$t('connect.label.useThisAccountAria', { name: account.label })"
+        :icon="'i-mdi-chevron-right'"
+        trailing
+        :disabled="account.accountStatus !== AccountStatus.ACTIVE"
+        size="xl"
+        data-testid="choose-existing-account-button"
+        class="w-full justify-center sm:w-min sm:justify-normal"
+        @click="$emit('select', account.id)"
+      />
+    </div>
+  </li>
+</template>

package/app/components/Connect/Account/Existing/List/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  accounts: ConnectAccount[]
+}>()
+
+defineEmits<{
+  select: [id: number]
+}>()
+</script>
+
+<template>
+  <section class="space-y-4">
+    <ConnectI18nHelper
+      as="h2"
+      class="font-normal"
+      translation-path="connect.label.yourExistingAccounts"
+      :count="accounts.length"
+    />
+    <ul
+      class="bg-white flex flex-col divide-y divide-line-muted rounded p-8 max-h-[50dvh] overflow-y-auto"
+    >
+      <ConnectAccountExistingListItem
+        v-for="account in accounts"
+        :key="account.id"
+        :account
+        @select="$emit('select', $event)"
+      />
+    </ul>
+  </section>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const {
+  accountName = 'N/A',
+  username = 'N/A',
+  theme = 'header'
+} = defineProps<{
+  accountName?: string
+  username?: string
+  theme?: 'header' | 'dropdown'
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-1">
+    <UAvatar
+      :text="username[0] ? username[0].toLocaleUpperCase($i18n.locale) : 'U'"
+      size="md"
+      class="text-inverted self-start sm:self-center"
+      :ui="{ root: 'bg-blue-300 rounded-none text-lg', fallback: 'text-inverted font-bold' }"
+    />
+    <div class="mx-2 flex flex-col text-left font-normal tracking-wide">
+      <span
+        class="text-sm"
+        :class="{
+          'line-clamp-1 overflow-hidden text-ellipsis text-inverted max-w-64': theme === 'header',
+          'text-neutral-highlighted max-w-80': theme === 'dropdown',
+        }"
+      >
+        {{ username }}
+      </span>
+      <span
+        class="line-clamp-1 overflow-hidden text-ellipsis text-xs opacity-75"
+        :class="{ 'text-line-muted': theme === 'header', 'text-neutral': theme === 'dropdown' }"
+      >
+        {{ accountName }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const { loggedInUserOptions } = useConnectHeaderOptions()
+const { authUser } = useConnectAuth()
+const accountStore = useConnectAccountStore()
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+</script>
+
+<template>
+  <UDropdownMenu
+    id="account-options-menu"
+    :items="loggedInUserOptions"
+    :ui="{
+      content: 'max-w-[90dvw] account-options-menu-pw-selector',
+    }"
+  >
+    <UButton
+      id="account-options-button"
+      color="secondary"
+      variant="ghost"
+      :aria-label="$t('connect.label.accountOptionsMenu')"
+      :icon="isLargeScreen ? 'i-mdi-caret-down' : ''"
+      trailing
+      class="px-2 py-1"
+    >
+      <ConnectHeaderAccountLabel
+        v-if="isLargeScreen"
+        :username="parseSpecialCharacters(authUser.fullName, 'USER')"
+        :account-name="accountStore.currentAccount.label
+          ? parseSpecialCharacters(accountStore.currentAccount.label, 'ACCOUNT')
+          : ''
+        "
+      />
+
+      <UAvatar
+        v-if="!isLargeScreen"
+        :text="parseSpecialCharacters(authUser.fullName, 'U')[0]!.toUpperCase()"
+        size="md"
+        :ui="{ root: 'bg-blue-300 rounded-none text-lg', fallback: 'text-inverted font-bold' }"
+      />
+    </UButton>
+    <template #account>
+      <ConnectHeaderAccountLabel
+        :username="parseSpecialCharacters(authUser.fullName, 'USER')"
+        :account-name="accountStore.currentAccount.label
+          ? parseSpecialCharacters(accountStore.currentAccount.label, 'ACCOUNT')
+          : ''
+        "
+        theme="dropdown"
+      />
+    </template>
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const ac = useAppConfig().connect.header
+const { isAuthenticated } = useConnectAuth()
+</script>
+
+<template>
+  <ConnectHeader>
+    <div class="flex gap-4">
+      <ConnectHeaderAuthenticatedOptions v-if="isAuthenticated" />
+      <ConnectHeaderUnauthenticatedOptions v-else />
+      <ConnectLocaleSelect v-if="ac.localeSelect" />
+    </div>
+  </ConnectHeader>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const ac = useAppConfig().connect.header
+</script>
+
+<template>
+  <div
+    id="connect-header-authenticated-options"
+    class="flex gap-4"
+  >
+    <ConnectHeaderNotifications v-if="ac.notifications" />
+    <ConnectHeaderAccountOptionsMenu v-if="ac.accountOptionsMenu" />
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { createAccountUrl } = useConnectHeaderOptions()
+</script>
+
+<template>
+  <UButton
+    variant="ghost"
+    color="secondary"
+    class="px-2 py-1 text-sm"
+    :label="$t('connect.label.createAccount')"
+    :to="createAccountUrl()"
+  />
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+
+const { loggedOutUserOptions, loggedOutUserOptionsMobile } = useConnectHeaderOptions()
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+const whatsNew = useStorage<ConnectWhatsNewState>('connect-whats-new', { viewed: false, items: [] })
+</script>
+
+<template>
+  <UDropdownMenu
+    id="login-menu"
+    :items="isLargeScreen ? loggedOutUserOptions : loggedOutUserOptionsMobile"
+  >
+    <UButton
+      variant="ghost"
+      color="secondary"
+      :label="isLargeScreen ? $t('connect.label.login') : undefined"
+      :aria-label="isLargeScreen ? $t('connect.label.selectLoginMethod') : $t('connect.label.mainMenu')"
+      :icon="isLargeScreen ? 'i-mdi-caret-down' : 'i-mdi-menu'"
+      trailing
+      class="px-2 py-1 text-sm"
+    />
+    <template #whatsnew-trailing>
+      <span v-if="!whatsNew.viewed && whatsNew.items.length > 0" class="size-2 rounded-full bg-error" />
+    </template>
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { notificationsOptions } = useConnectHeaderOptions()
+const accountStore = useConnectAccountStore()
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+</script>
+
+<template>
+  <UDropdownMenu :items="notificationsOptions">
+    <UChip
+      color="error"
+      position="top-left"
+      inset
+      :show="accountStore.pendingApprovalCount > 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
+        class="px-2 py-1 text-sm"
+      >
+        <template #leading>
+          <UIcon name="i-mdi-bell-outline" class="size-6 shrink-0" />
+        </template>
+      </UButton>
+    </UChip>
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const ac = useAppConfig().connect.header
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+</script>
+
+<template>
+  <div
+    id="connect-header-unauthenticated-options"
+    class="flex gap-4"
+  >
+    <ConnectHeaderWhatsNew v-if="ac.whatsNew && isLargeScreen" />
+    <ConnectHeaderLoginMenu v-if="ac.loginMenu" />
+    <ConnectHeaderCreateAccountButton v-if="ac.createAccount && isLargeScreen" />
+  </div>
+</template>

package/app/components/Connect/Layout/Auth.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const accountStore = useConnectAccountStore()
+</script>
+
+<template>
+  <ConnectLayout>
+    <template #header>
+      <ConnectHeaderAuth />
+    </template>
+    <template #breadcrumb>
+      <ConnectBreadcrumb
+        :account-id="accountStore.currentAccount.id
+          ? String(accountStore.currentAccount.id)
+          : undefined"
+      />
+    </template>
+    <slot />
+  </ConnectLayout>
+</template>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+defineProps<{
+  currentIdp: ConnectLoginSource
+  redirectUrl: string
+}>()
+
+const { t, locale } = useI18n()
+
+const formattedIdps = computed(() => {
+  const allowedIdps = useAppConfig().connect.login.idps
+  const labels = allowedIdps.map(idp => t(`connect.label.${idp}`))
+
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat#using_format
+  const formatter = new Intl.ListFormat(locale.value, {
+    style: 'long',
+    type: 'disjunction'
+  })
+
+  return formatter.format(labels)
+})
+</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', { idp: currentIdp }) }}
+          </h2>
+        </div>
+        <div>
+          <div role="alert">
+            <span>{{ $t('connect.invalidIdp.content', { allowedIdps: formattedIdps }) }}</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <UButton
+            :label="$t('connect.label.logout')"
+            size="xl"
+            class="font-bold"
+            @click="useConnectAuth().logout(redirectUrl)"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>