@sbc-connect/nuxt-auth 0.1.4 → 0.1.6

package/.env.example

@@ -1 +1,25 @@
-NUXT_BASE_URL="http://localhost:3000/"
+# Web Urls
+NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+NUXT_PUBLIC_AUTH_WEB_URL="https://dev.account.bcregistry.gov.bc.ca/"
+
+# API Key
+NUXT_PUBLIC_X_API_KEY=""
+
+# API Urls
+# Status API
+NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
+NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
+
+# Auth API
+NUXT_PUBLIC_AUTH_API_URL="https://test.api.connect.gov.bc.ca/auth-dev"
+NUXT_PUBLIC_AUTH_API_VERSION="/api/v1"
+
+# LaunchDarkly
+NUXT_PUBLIC_LD_CLIENT_ID=""
+
+# Identity Provider
+NUXT_PUBLIC_IDP_URL="https://dev.loginproxy.gov.bc.ca/auth"
+NUXT_PUBLIC_IDP_REALM="bcregistry"
+NUXT_PUBLIC_IDP_CLIENTID="connect-web"
+NUXT_PUBLIC_SITEMINDER_LOGOUT_URL="https://logontest7.gov.bc.ca/clp-cgi/logoff.cgi"

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @sbc-connect/nuxt-auth
 
+## 0.1.6
+
+### Patch Changes
+
+- [#21](https://github.com/bcgov/connect-nuxt/pull/21) [`db2159e`](https://github.com/bcgov/connect-nuxt/commit/db2159ebc4b310c1c24986ca8ef85b5435fd50c8) Thanks [@deetz99](https://github.com/deetz99)! - Init auth plugin
+
+- [#26](https://github.com/bcgov/connect-nuxt/pull/26) [`65ae301`](https://github.com/bcgov/connect-nuxt/commit/65ae301972b39cfed8550e49c1209133674528a4) Thanks [@deetz99](https://github.com/deetz99)! - Update CSS variables to match Nuxt UI naming convention. Issue: bcgov/entity#29335
+
+- [#23](https://github.com/bcgov/connect-nuxt/pull/23) [`b257d0c`](https://github.com/bcgov/connect-nuxt/commit/b257d0c874138e56ae0b5d79ec6e5a7b30acec8b) Thanks [@deetz99](https://github.com/deetz99)! - - begin initial account store
+
+  - auth composable
+  - clear keycloak params in url
+  - init account in middleware
+  - several enums/types to support accounts
+  - update nuxt config with auto imports and pinia plugin module
+
+  issue: bcgov/entity#29335
+
+- [#25](https://github.com/bcgov/connect-nuxt/pull/25) [`aba11d1`](https://github.com/bcgov/connect-nuxt/commit/aba11d1303ab1b19b3a51c27959766c4ee0cd5d8) Thanks [@deetz99](https://github.com/deetz99)! - - create auth header components
+
+  - connect-auth layout
+
+  issue: bcgov/entity#29335
+
+- Updated dependencies [[`65ae301`](https://github.com/bcgov/connect-nuxt/commit/65ae301972b39cfed8550e49c1209133674528a4), [`09fa4f1`](https://github.com/bcgov/connect-nuxt/commit/09fa4f1b4b2c65d189a6477c9c5f2d44607b543d), [`aba11d1`](https://github.com/bcgov/connect-nuxt/commit/aba11d1303ab1b19b3a51c27959766c4ee0cd5d8)]:
+  - @sbc-connect/nuxt-base@0.1.6
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [[`4231254`](https://github.com/bcgov/connect-nuxt/commit/42312540f5eec65f5d3979d5492bdfaa9bb0b079)]:
+  - @sbc-connect/nuxt-base@0.1.5
+
 ## 0.1.4
 
 ### Patch Changes

package/app/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  connect: {
+    login: {
+      redirectPath: '',
+      idps: ['bcsc', 'bceid', 'idir']
+    },
+    header: {
+      loginMenu: true,
+      createAccount: true,
+      notifications: true,
+      accountOptionsMenu: true
+    }
+  }
+})

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps({
+  accountName: { default: 'N/A', type: String },
+  username: { default: 'N/A', type: String },
+  theme: { default: 'header', type: String } // header or 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': 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]',
+    }"
+  >
+    <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/HelloWorld/Auth.vue

@@ -5,8 +5,8 @@
     <h3 class="text-red-700">
       Auth - should be red-700
     </h3>
-    <p class="text-brandLight">
-      Auth - should be brandLight
+    <p class="text-brand-inverted text-xl lg:text-3xl">
+      Auth - should be brand-inverted
     </p>
   </div>
 </template>

package/app/composables/useConnectAuth.ts

@@ -0,0 +1,111 @@
+export const useConnectAuth = () => {
+  const { $connectAuth } = useNuxtApp()
+  const rtc = useRuntimeConfig().public
+
+  /**
+   * Logs the user in using the idpHint 'bcsc', 'idir' or 'bceid' and an optional redirect URL.
+   * @param idpHint - The identity provider hint to use for login.
+   * @param redirect - An optional URL to redirect to after login. Defaults to location.origin + the current locale
+   * @returns A promise that resolves when login is complete.
+   */
+  function login(idpHint: ConnectIdpHint, redirect?: string): Promise<void> {
+    const loginRedirectUrl = sessionStorage.getItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL)
+    const redirectUri = redirect ?? loginRedirectUrl ?? window.location.href
+
+    return $connectAuth.login(
+      {
+        idpHint,
+        redirectUri
+      }
+    )
+  }
+
+  /**
+   * Logs the user out with an optional redirect URL.
+   * @param redirect - An optional URL to redirect to after logout. Defaults to location.origin + the current locale
+   * @returns A promise that resolves when logout is complete.
+   */
+  function logout(redirect?: string): Promise<void> {
+    const siteminderUrl = rtc.siteminderLogoutUrl
+    const logoutRedirectUrl = sessionStorage.getItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL)
+    let redirectUri = redirect ?? logoutRedirectUrl ?? window.location.href
+
+    if (siteminderUrl) {
+      redirectUri = `${siteminderUrl}?returl=${redirectUri.replace(/(https?:\/\/)|(\/)+/g, '$1$2')}&retnow=1`
+    }
+
+    // resetPiniaStores()
+    return $connectAuth.logout({
+      redirectUri
+    })
+  }
+
+  const isAuthenticated = computed<boolean | undefined>(() => {
+    if (!$connectAuth) {
+      return false
+    }
+    return $connectAuth.authenticated
+  })
+
+  const authUser = computed<ConnectAuthUser>(() => {
+    if ($connectAuth && $connectAuth.tokenParsed) {
+      return {
+        firstName: $connectAuth.tokenParsed.firstname,
+        lastName: $connectAuth.tokenParsed.lastname,
+        fullName: $connectAuth.tokenParsed.name,
+        userName: $connectAuth.tokenParsed.username,
+        email: $connectAuth.tokenParsed.email,
+        keycloakGuid: $connectAuth.tokenParsed.sub || '',
+        loginSource: $connectAuth.tokenParsed.loginSource,
+        roles: $connectAuth.tokenParsed.realm_access?.roles || []
+      }
+    }
+    return {} as ConnectAuthUser
+  })
+
+  /**
+   * Retrieves the current session token, with an optional force refresh.
+   * @param forceRefresh - A boolean to force a token refresh.
+   * @returns The session token or undefined if the token can't be retrieved.
+   */
+  async function getToken(forceRefresh = false): Promise<string | undefined> {
+    const minValidity = forceRefresh ? -1 : 30
+    return await $connectAuth
+      .updateToken(minValidity)
+      .then((_refreshed) => {
+        return $connectAuth.token
+      })
+      .catch((error) => {
+        console.error(`Failed to get session token: ${error}`)
+        return undefined
+      })
+  }
+
+  function setLoginRedirectUrl(url: string) {
+    sessionStorage.setItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL, url)
+  }
+
+  function setLogoutRedirectUrl(url: string) {
+    sessionStorage.setItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL, url)
+  }
+
+  function clearLoginRedirectUrl() {
+    sessionStorage.removeItem(ConnectAuthStorageKeys.LOGIN_REDIRECT_URL)
+  }
+
+  function clearLogoutRedirectUrl() {
+    sessionStorage.removeItem(ConnectAuthStorageKeys.LOGOUT_REDIRECT_URL)
+  }
+
+  return {
+    login,
+    logout,
+    getToken,
+    clearLoginRedirectUrl,
+    clearLogoutRedirectUrl,
+    setLoginRedirectUrl,
+    setLogoutRedirectUrl,
+    isAuthenticated,
+    authUser
+  }
+}

package/app/composables/useConnectHeaderOptions.ts

@@ -0,0 +1,233 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+import { useStorage } from '@vueuse/core'
+import { ConnectSlideoverWhatsNew } from '#components'
+
+// handle navigation items and functionality
+export function useConnectHeaderOptions() {
+  const rtc = useRuntimeConfig().public
+  const authWebUrl = rtc.authWebUrl
+  const appBaseUrl = rtc.baseUrl
+  const ac = useAppConfig().connect
+  const route = useRoute()
+  const overlay = useOverlay()
+  const { t, locale: { value: locale } } = useNuxtApp().$i18n
+  const { login, logout, isAuthenticated, authUser } = useConnectAuth()
+  const accountStore = useConnectAccountStore()
+
+  const whatsNew = useStorage<ConnectWhatsNewState>('connect-whats-new', { viewed: false, items: [] })
+  const slideover = overlay.create(ConnectSlideoverWhatsNew)
+
+  /** return the correct account creation link based on auth state */
+  function createAccountUrl(): string {
+    if (isAuthenticated.value) {
+      return authWebUrl + 'setup-account'
+    } else {
+      return authWebUrl + 'choose-authentication-method'
+    }
+  }
+
+  const basicAccountOptions = computed<DropdownMenuItem[]>(() => {
+    const options: DropdownMenuItem[] = [{ slot: 'account', type: 'label' }]
+    if ([ConnectLoginSource.BCEID, ConnectLoginSource.BCSC].includes(authUser?.value.loginSource)) {
+      options.push({
+        label: t('connect.label.editProfile'),
+        icon: 'i-mdi-account-outline',
+        to: authWebUrl + 'userprofile'
+      })
+    }
+    options.push({
+      label: t('connect.label.logout'),
+      icon: 'i-mdi-logout-variant',
+      onSelect: () => logout()
+    })
+    return options
+  })
+
+  const accountSettingsOptions = computed<DropdownMenuItem[]>(() => {
+    const accountId = accountStore.currentAccount.id
+    const options: DropdownMenuItem[] = [
+      {
+        label: t('connect.label.accountSettings'),
+        type: 'label'
+      },
+      {
+        label: t('connect.label.accountInfo'),
+        icon: 'i-mdi-information-outline',
+        to: authWebUrl + `account/${accountId}/settings/account-info`
+      },
+      {
+        label: t('connect.label.teamMembers'),
+        icon: 'i-mdi-account-group-outline',
+        to: authWebUrl + `account/${accountId}/settings/team-members`
+      }
+    ]
+    // TODO: remove staff checks?
+    if (
+      [AccountType.PREMIUM, AccountType.SBC_STAFF, AccountType.STAFF].includes(accountStore.currentAccount.accountType)
+    ) {
+      options.push({
+        label: t('connect.label.transactions'),
+        icon: 'i-mdi-file-document-outline',
+        to: authWebUrl + `account/${accountId}/settings/transactions`
+      })
+    }
+    return options
+  })
+
+  const switchAccountOptions = computed<DropdownMenuItem[]>(() => {
+    const options: DropdownMenuItem[] = []
+
+    if (accountStore.userAccounts.length > 1) {
+      options.push({ label: t('connect.label.switchAccount'), type: 'label' })
+
+      accountStore.userAccounts.forEach((account) => {
+        const isActive = accountStore.currentAccount.id === account.id
+        options.push({
+          label: account.label,
+          onSelect: () => {
+            if (!isActive && account.id) {
+              if (route.meta.onAccountChange) {
+                // TODO: add route meta option
+                const allowAccountChange = true
+                // const allowAccountChange = route.meta.onAccountChange(accountStore.currentAccount, account)
+                if (allowAccountChange) {
+                  accountStore.switchCurrentAccount(account.id)
+                }
+              } else {
+                accountStore.switchCurrentAccount(account.id)
+              }
+            }
+          },
+          slot: 'account-item',
+          icon: isActive ? 'i-mdi-check' : '',
+          class: isActive ? 'bg-shade text-primary' : '',
+          ui: {
+            itemLabel: isActive ? '' : 'pl-6',
+            itemLeadingIcon: isActive ? 'size-5 text-primary shrink-0' : ''
+          }
+        })
+      })
+    }
+
+    return options
+  })
+
+  const createAccountOptions = computed<DropdownMenuItem[]>(() => {
+    if ([ConnectLoginSource.BCROS, ConnectLoginSource.IDIR].includes(authUser?.value.loginSource)) {
+      return []
+    }
+    return [{ label: t('connect.label.createAccount'), icon: 'i-mdi-plus', to: createAccountUrl() }]
+  })
+
+  const loggedInUserOptions = computed<DropdownMenuItem[][]>(() => {
+    const options = [
+      basicAccountOptions.value,
+      accountSettingsOptions.value
+    ]
+
+    if (switchAccountOptions.value.length > 0) {
+      options.push(switchAccountOptions.value)
+    }
+
+    if (createAccountOptions.value.length > 0) {
+      options.push(createAccountOptions.value)
+    }
+
+    return options
+  })
+
+  const loginRedirectUrl = ac.login.redirectPath
+    ? appBaseUrl + locale + ac.login.redirectPath
+    : undefined
+
+  const loginOptionsMap: Record<'bcsc' | 'bceid' | 'idir',
+    { label: string, icon: string, onSelect: () => Promise<void> }
+  > = {
+    bcsc: {
+      label: t('connect.label.bcsc'),
+      icon: 'i-mdi-account-card-details-outline',
+      onSelect: () => login(ConnectIdpHint.BCSC, loginRedirectUrl)
+    },
+    bceid: {
+      label: t('connect.label.bceid'),
+      icon: 'i-mdi-two-factor-authentication',
+      onSelect: () => login(ConnectIdpHint.BCEID, loginRedirectUrl)
+    },
+    idir: {
+      label: t('connect.label.idir'),
+      icon: 'i-mdi-account-group-outline',
+      onSelect: () => login(ConnectIdpHint.IDIR, loginRedirectUrl)
+    }
+  }
+
+  const loggedOutUserOptions = computed<DropdownMenuItem[][]>(() => {
+    const options: DropdownMenuItem[][] = [[{ label: t('connect.label.selectLoginMethod'), type: 'label' }]]
+
+    const idps = ac.login.idps.map(key => loginOptionsMap[key as keyof typeof loginOptionsMap])
+
+    options.push(idps)
+
+    return options
+  })
+
+  const loggedOutUserOptionsMobile = computed<DropdownMenuItem[][]>(() => {
+    const config = ac.header
+    const options: DropdownMenuItem[][] = []
+
+    if (config.loginMenu) {
+      options.push(...loggedOutUserOptions.value)
+    }
+    if (config.whatsNew) {
+      options.push([
+        {
+          'label': t('connect.label.whatsNew'),
+          'aria-label': t('connect.label.whatsNewAria', {
+            count: whatsNew.value.viewed ? 0 : whatsNew.value.items.length }
+          ),
+          'slot': 'whatsnew' as const,
+          'icon': 'i-mdi-new-box',
+          'onSelect': () => {
+            slideover.open({
+              items: whatsNew.value.items
+            })
+            whatsNew.value.viewed = true
+          }
+        }
+      ])
+    }
+    if (config.createAccount) {
+      options.push([{ label: t('connect.label.createAccount'), icon: 'i-mdi-plus', to: createAccountUrl() }])
+    }
+
+    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,
+    switchAccountOptions,
+    createAccountOptions,
+    loggedInUserOptions,
+    loggedOutUserOptions,
+    loggedOutUserOptionsMobile,
+    notificationsOptions,
+    createAccountUrl
+  }
+}

package/app/enums/account-status.ts

@@ -0,0 +1,9 @@
+export enum AccountStatus {
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+  NSF_SUSPENDED = 'NSF_SUSPENDED',
+  PENDING_STAFF_REVIEW = 'PENDING_STAFF_REVIEW',
+  PENDING_ACTIVATION = 'PENDING_ACTIVATION',
+  REJECTED = 'REJECTED',
+  SUSPENDED = 'SUSPENDED'
+}

package/app/enums/account-type.ts

@@ -0,0 +1,6 @@
+export enum AccountType {
+  BASIC = 'BASIC',
+  PREMIUM = 'PREMIUM',
+  SBC_STAFF = 'SBC_STAFF',
+  STAFF = 'STAFF'
+}

package/app/enums/connect-auth-storage-keys.ts

@@ -0,0 +1,5 @@
+export enum ConnectAuthStorageKeys {
+  LOGIN_REDIRECT_URL = 'sbc-connect-login-redirect-url',
+  LOGOUT_REDIRECT_URL = 'sbc-connect-logout-redirect-url',
+  CONNECT_SESSION_EXPIRED = 'connect-session-expired'
+}

package/app/enums/connect-error-category.ts

@@ -0,0 +1,6 @@
+export enum ConnectErrorCategory {
+  USER_ACCOUNTS = 'user-accounts',
+  ACCOUNT_LIST = 'account-list',
+  PENDING_APPROVAL_COUNT = 'pending-approval-count',
+  USER_INFO = 'user-info'
+}