From 1fb623ffe3d1a7c66502fb687616257b4c1975a4 Mon Sep 17 00:00:00 2001 From: deetz99 Date: Fri, 20 Sep 2024 12:56:34 -0700 Subject: [PATCH 01/14] update header menus to match btr styling --- nuxt/layers/core/app/app.config.ts | 19 +++++++ .../AuthenticatedOptions/AccountLabel.vue | 10 ++-- .../Header/AuthenticatedOptions/index.vue | 17 +----- .../Header/UnauthenticatedOptions/index.vue | 14 +++-- .../app/components/Connect/LocaleSelect.vue | 4 +- .../core/app/composables/useConnectNav.ts | 57 ++++++++++++------- .../app/composables/useConnectNavigate.ts | 56 ++++++++++++++++++ .../layers/core/app/interfaces/header-menu.ts | 12 ++++ nuxt/layers/core/app/locales/en-CA.ts | 2 +- nuxt/layers/core/app/locales/fr-CA.ts | 2 +- .../layers/core/app/stores/connect-account.ts | 5 ++ nuxt/layers/core/nuxt.config.ts | 4 +- 12 files changed, 153 insertions(+), 49 deletions(-) create mode 100644 nuxt/layers/core/app/composables/useConnectNavigate.ts create mode 100644 nuxt/layers/core/app/interfaces/header-menu.ts diff --git a/nuxt/layers/core/app/app.config.ts b/nuxt/layers/core/app/app.config.ts index 134bec1..3ace37e 100644 --- a/nuxt/layers/core/app/app.config.ts +++ b/nuxt/layers/core/app/app.config.ts @@ -40,6 +40,25 @@ export default defineAppConfig({ }, chip: { base: 'absolute rounded-full ring-0 dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap' + }, + dropdown: { + container: 'overflow-clip rounded-md shadow-md', + rounded: 'rounded-md', + padding: 'py-0 px-0', + width: 'min-w-[250px]', + height: 'max-h-[75dvh]', + item: { + rounded: 'rounded-none', + base: 'flex items-center gap-2 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1', + padding: 'px-4 py-3', + disabled: 'cursor-default font-semibold opacity-100 hover:bg-white pt-0', + active: 'bg-bcGovColor-gray1 text-bcGovColor-activeBlue', + icon: { + base: 'flex-shrink-0 size-4 text-bcGovColor-activeBlue', + active: 'text-bcGovColor-activeBlue', + inactive: 'text-bcGovColor-midGray' + } + } } } }) diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue index 2a980fd..ed54571 100644 --- a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue +++ b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/AccountLabel.vue @@ -14,21 +14,21 @@ defineProps({ background: 'bg-blue-300 dark:bg-[#E0E7ED]', text: 'font-semibold leading-none text-white dark:text-bcGovColor-darkGray truncate', placeholder: 'font-semibold leading-none text-white truncate dark:text-bcGovColor-darkGray text-xl', - rounded: 'rounded-sm' + rounded: 'rounded-none' }" />
- {{ username.toLocaleUpperCase($i18n.locale) }} + {{ username }} - {{ accountName.toLocaleUpperCase($i18n.locale) }} + {{ accountName }}
diff --git a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue index 10264d3..5b61b8e 100644 --- a/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue +++ b/nuxt/layers/core/app/components/Connect/Header/AuthenticatedOptions/index.vue @@ -15,18 +15,7 @@ const accountStore = useConnectAccountStore() id="account-options-dropdown" :items="loggedInUserOptions" :ui="{ - container: 'z-20 group rounded-md overflow-clip', - width: 'min-w-fit', - height: 'max-h-[75vh]', - item: { - base: 'group flex items-center gap-4 w-full', - disabled: 'cursor-default opacity-100 font-semibold', - icon: { - base: 'flex-shrink-0 size-6', - active: 'text-gray-500 dark:text-gray-400', - inactive: 'text-bcGovColor-midGray' - }, - } + padding: 'py-3 px-0' }" > @@ -73,12 +62,12 @@ const accountStore = useConnectAccountStore() diff --git a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue index 18817e6..6ed8acd 100644 --- a/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue +++ b/nuxt/layers/core/app/components/Connect/Header/UnauthenticatedOptions/index.vue @@ -16,12 +16,16 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)') id="logged-out-options-dropdown" :items="isLargeScreen ? loggedOutUserOptions : loggedOutUserOptionsMobile" :ui="{ + container: 'min-w-[300px]', + padding: 'py-2 px-0', item: { - base: 'group flex items-center gap-4 w-full', - disabled: 'cursor-default opacity-100', + rounded: 'rounded-none', + base: 'flex items-center gap-4 w-full hover:text-bcGovColor-activeBlue hover:bg-bcGovColor-gray1', + padding: 'px-4 py-3', + disabled: 'cursor-default opacity-100 hover:bg-white', icon: { - base: 'flex-shrink-0 size-6', - active: 'text-gray-500 dark:text-gray-400', + base: 'flex-shrink-0 size-5 text-bcGovColor-activeBlue', + active: 'text-bcGovColor-activeBlue', inactive: 'text-bcGovColor-midGray', }, } @@ -48,7 +52,7 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)') /> diff --git a/nuxt/layers/core/app/components/Connect/LocaleSelect.vue b/nuxt/layers/core/app/components/Connect/LocaleSelect.vue index 290ed4f..e3307cd 100644 --- a/nuxt/layers/core/app/components/Connect/LocaleSelect.vue +++ b/nuxt/layers/core/app/components/Connect/LocaleSelect.vue @@ -9,7 +9,9 @@ const items = computed(() => { return { label: loc.name || 'N/A', icon: isCurrentLocal ? 'i-mdi-check' : '', - click: () => setLocale(loc.code) + click: () => setLocale(loc.code), + class: isCurrentLocal ? 'bg-bcGovGray-100 text-bcGovColor-activeBlue' : '', + iconClass: isCurrentLocal ? 'text-bcGovColor-activeBlue' : '' } }) return [options] diff --git a/nuxt/layers/core/app/composables/useConnectNav.ts b/nuxt/layers/core/app/composables/useConnectNav.ts index f5b8c17..c541dd8 100644 --- a/nuxt/layers/core/app/composables/useConnectNav.ts +++ b/nuxt/layers/core/app/composables/useConnectNav.ts @@ -70,21 +70,28 @@ export function useConnectNav () { }) const switchAccountOptions = computed(() => { - const options: DropdownItem[] = [ - { label: 'n/a', slot: 'accounts', disabled: true } - ] - accountStore.userAccounts.forEach((account) => { - const isActive = accountStore.currentAccount.id === account.id - options.push({ - label: account.label, - click: () => { - if (!isActive && account.id) { - accountStore.switchCurrentAccount(account.id) - } - }, - icon: isActive ? 'i-mdi-check' : '' + const options: DropdownItem[] = [] + + if (accountStore.userAccounts.length > 1) { + options.push({ label: 'n/a', slot: 'accounts', disabled: true }) + + accountStore.userAccounts.forEach((account) => { + const isActive = accountStore.currentAccount.id === account.id + options.push({ + label: account.label, + click: () => { + if (!isActive && account.id) { + accountStore.switchCurrentAccount(account.id) + } + }, + icon: isActive ? 'i-mdi-check' : '', + class: isActive ? 'bg-bcGovGray-100 text-bcGovColor-activeBlue' : '', + labelClass: isActive ? 'pl-0' : 'pl-6', + iconClass: isActive ? 'text-bcGovColor-activeBlue' : '' + }) }) - }) + } + return options }) @@ -95,12 +102,22 @@ export function useConnectNav () { return [{ label: t('btn.createAccount'), icon: 'i-mdi-plus', to: createAccountUrl() }] }) - const loggedInUserOptions = computed(() => [ - basicAccountOptions.value, - accountSettingsOptions.value, - switchAccountOptions.value, - createAccountOptions.value - ]) + const loggedInUserOptions = computed(() => { + const options: DropdownItem[][] = [ + 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 loggedOutUserOptions = computed(() => [ [ diff --git a/nuxt/layers/core/app/composables/useConnectNavigate.ts b/nuxt/layers/core/app/composables/useConnectNavigate.ts new file mode 100644 index 0000000..546c6c9 --- /dev/null +++ b/nuxt/layers/core/app/composables/useConnectNavigate.ts @@ -0,0 +1,56 @@ +export const useBcrosNavigate = () => { + const config = useRuntimeConfig() + const accountStore = useConnectAccountStore() + + /** Redirect to the given URL with necessary BCROS args */ + function redirect (url: string, params?: { [key: string]: string }, target = '_self') { + // get account id and set in params + const redirectURL = new URL(url) + const accountId = accountStore.currentAccount.id + if (accountId) { + redirectURL.searchParams.append('accountid', accountId.toString()) + } + for (const [key, value] of Object.entries(params ?? {})) { + redirectURL.searchParams.append(key, value) + } + // assume URL is always reachable + window.open(redirectURL, target) + } + + // common redirects + function goToBcrosHome () { redirect(config.public.registryHomeURL) } + function goToBcrosDashboard () { redirect(config.public.registryHomeURL + 'dashboard') } + function goToBcrosLogin (idpHint: string) { + /** Redirect to bcros login page given the login type. */ + window.location.assign(`${config.public.registryHomeURL}signin/${idpHint}`) + } + function goToEditProfile () { redirect(config.public.authWebURL + 'userprofile') } + function goToAccountInfo () { + redirect(config.public.authWebURL + `account/${accountStore.currentAccount.id}/settings/account-info`) + } + function goToTeamMembers () { + redirect(config.public.authWebURL + `account/${accountStore.currentAccount.id}/settings/team-members`) + } + function goToTransactions () { + redirect(config.public.authWebURL + `account/${accountStore.currentAccount.id}/settings/transactions`) + } + function goToCreateAccount () { + redirect(config.public.authWebURL + 'choose-authentication-method') + } + function goToSetupAccount () { + redirect(config.public.authWebURL + 'setup-account') + } + + return { + redirect, + goToBcrosDashboard, + goToBcrosHome, + goToBcrosLogin, + goToAccountInfo, + goToCreateAccount, + goToEditProfile, + goToSetupAccount, + goToTeamMembers, + goToTransactions + } +} diff --git a/nuxt/layers/core/app/interfaces/header-menu.ts b/nuxt/layers/core/app/interfaces/header-menu.ts new file mode 100644 index 0000000..cfd83d6 --- /dev/null +++ b/nuxt/layers/core/app/interfaces/header-menu.ts @@ -0,0 +1,12 @@ +export interface HeaderMenuItem { + label: string, + action?: any + args?: any + icon?: string + setActive?: boolean +} + +export interface HeaderMenuOptions { + header?: string, + items?: HeaderMenuItem[] +} diff --git a/nuxt/layers/core/app/locales/en-CA.ts b/nuxt/layers/core/app/locales/en-CA.ts index 1d44fa7..510e3d2 100644 --- a/nuxt/layers/core/app/locales/en-CA.ts +++ b/nuxt/layers/core/app/locales/en-CA.ts @@ -20,7 +20,7 @@ export default { accountSettings: 'Account Settings', bcRegOLServices: 'BC Registries and Online Services', switchAccount: 'Switch Account', - selectLoginMethod: 'Select Login Method', + selectLoginMethod: 'Select log in method', bcsc: 'BC Services Card', bceid: 'BCeID', idir: 'IDIR' diff --git a/nuxt/layers/core/app/locales/fr-CA.ts b/nuxt/layers/core/app/locales/fr-CA.ts index 6332bb6..cc86668 100644 --- a/nuxt/layers/core/app/locales/fr-CA.ts +++ b/nuxt/layers/core/app/locales/fr-CA.ts @@ -20,7 +20,7 @@ export default { accountSettings: 'Paramètres Compte', bcRegOLServices: 'Registres et Services en ligne de la CB', switchAccount: 'Changer de Compte', - selectLoginMethod: 'Sélectionnez la Méthode de Connexion', + selectLoginMethod: 'Sélectionnez la méthode de connexion', bcsc: 'BC Services Card', bceid: 'BCeID', idir: 'IDIR' diff --git a/nuxt/layers/core/app/stores/connect-account.ts b/nuxt/layers/core/app/stores/connect-account.ts index 95df324..711501c 100644 --- a/nuxt/layers/core/app/stores/connect-account.ts +++ b/nuxt/layers/core/app/stores/connect-account.ts @@ -8,6 +8,10 @@ export const useConnectAccountStore = defineStore('nuxt-core-connect-account-sto const userAccounts = ref([]) const currentAccountName = computed(() => currentAccount.value?.label || '') const pendingApprovalCount = ref(0) + const user = computed(() => kcUser.value) + const userFirstName: Ref = ref(user.value?.firstName || '-') + const userLastName: Ref = ref(user.value?.lastName || '') + const userFullName = computed(() => `${userFirstName.value} ${userLastName.value}`) const errors = ref([]) // TODO: implement @@ -135,6 +139,7 @@ export const useConnectAccountStore = defineStore('nuxt-core-connect-account-sto userAccounts, pendingApprovalCount, errors, + userFullName, // updateAuthUserInfo, setAccountInfo, getUserAccounts, diff --git a/nuxt/layers/core/nuxt.config.ts b/nuxt/layers/core/nuxt.config.ts index 13062bd..fa41881 100644 --- a/nuxt/layers/core/nuxt.config.ts +++ b/nuxt/layers/core/nuxt.config.ts @@ -69,8 +69,8 @@ export default defineNuxtConfig({ authWebURL: process.env.NUXT_AUTH_WEB_URL, authApiURL: `${process.env.NUXT_AUTH_API_URL || ''}${process.env.NUXT_AUTH_API_VERSION || ''}`, ldClientId: process.env.NUXT_LD_CLIENT_ID || '', - appName: process.env.npm_package_name || '' - // registryHomeURL: process.env.NUXT_REGISTRY_HOME_URL + appName: process.env.npm_package_name || '', + registryHomeURL: process.env.NUXT_REGISTRY_HOME_URL // appBaseUrl: process.env.NUXT_APP_BASE_URL } }, From 639c8ce962e8804168a9fc06864550c060f7d23a Mon Sep 17 00:00:00 2001 From: deetz99 Date: Fri, 20 Sep 2024 14:31:53 -0700 Subject: [PATCH 02/14] add app version to footer --- .../core/app/components/Connect/Footer.vue | 45 ++++++++++++------ .../core/app/components/Connect/Toggletip.vue | 46 +++++++++++++++++++ nuxt/layers/core/app/locales/en-CA.ts | 5 ++ nuxt/layers/core/app/locales/fr-CA.ts | 5 ++ nuxt/layers/core/nuxt.config.ts | 4 +- 5 files changed, 90 insertions(+), 15 deletions(-) create mode 100644 nuxt/layers/core/app/components/Connect/Toggletip.vue diff --git a/nuxt/layers/core/app/components/Connect/Footer.vue b/nuxt/layers/core/app/components/Connect/Footer.vue index 9938df4..0d0f83f 100644 --- a/nuxt/layers/core/app/components/Connect/Footer.vue +++ b/nuxt/layers/core/app/components/Connect/Footer.vue @@ -1,10 +1,16 @@ + diff --git a/nuxt/layers/core/app/locales/en-CA.ts b/nuxt/layers/core/app/locales/en-CA.ts index 510e3d2..eea861c 100644 --- a/nuxt/layers/core/app/locales/en-CA.ts +++ b/nuxt/layers/core/app/locales/en-CA.ts @@ -1,5 +1,9 @@ export default { btn: { + appVersion: { + show: 'Show App Version', + hide: 'Hide App Version' + }, bcRegHome: 'BC Registries Home', createAccount: 'Create Account', editProfile: 'Edit Profile', @@ -32,6 +36,7 @@ export default { ConnectFooter: { navLabel: 'Useful Links', //