initial auth scaffold and what sam needs to begin with

strr-web/README.md

@@ -0,0 +1,40 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# pnpm
+pnpm install
+
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# pnpm
+pnpm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# pnpm
+pnpm run build
+```
+
+Locally preview production build:
+
+```bash
+# pnpm
+pnpm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

strr-web/components/Footer.vue

@@ -20,10 +20,10 @@
           </li>
         </ul>
         <div class="flex flex-auto justify-end">
-          <BcrosTooltip
+          <Tooltip
             id="footer-tooltip"
             class="mt-1"
-            :text="`BTR UI v${appVersion}`"
+            :text="`BTR UI v${version}`"
             :popper="{
               placement: 'left',
               arrow: true
@@ -32,17 +32,17 @@
             <div class="icon-container" role="img" aria-label="information">
               <UIcon class="text-2xl text-white" name="i-mdi-information-outline" />
             </div>
-          </BcrosTooltip>
+          </Tooltip>
         </div>
       </nav>
     </div>
   </footer>
 </template>
 
 <script setup lang="ts">
-defineProps<{appVersion: string}>()
 
 const t = useNuxtApp().$i18n.t
+const version = useRuntimeConfig().public.version
 
 const links = [
   { text: 'home', href: '/', newTab: false },

strr-web/components/Header.vue

@@ -26,26 +26,26 @@
           class="flex flex-auto justify-end h-full text-white"
         >
           <div v-if="authenticated" class="flex flex-wrap self-center text-sm">
-            <BcrosHeaderMenu data-cy="logged-in-menu" :menu-lists="loggedInMenuOptions">
+            <HeaderMenu data-cy="logged-in-menu" :menu-lists="loggedInMenuOptions">
               <template #menu-button-text>
-                <BcrosHeaderAccountLabel
+                <HeaderAccountLabel
                   :account-name="!personMode ? currentAccountName : ''"
                   :username="userFullName"
                 />
               </template>
               <template #menu-list-header-0>
                 <div class="flex px-4 mb-3">
-                  <BcrosHeaderAccountLabel
+                  <HeaderAccountLabel
                     :avatar-classes="'text-white'"
                     :account-name="!personMode ? currentAccountName : ''"
                     :username="userFullName"
                   />
                 </div>
               </template>
-            </BcrosHeaderMenu>
+            </HeaderMenu>
           </div>
           <div v-else class="flex flex-wrap self-center text-sm h-[36px]">
-            <BcrosHeaderMenu
+            <HeaderMenu
               data-cy="logged-out-menu"
               :menu-button-text="'Log in'"
               :menu-lists="loggedOutMenuOptions"
@@ -73,7 +73,6 @@ import { useBcrosKeycloak } from '~/stores/keycloak'
 
 const props = defineProps<{ personMode?: boolean }>()
 
-const config = useRuntimeConfig()
 const t = useNuxtApp().$i18n.t
 const {
   goToAccountInfo,
@@ -138,7 +137,7 @@ const basicAccountOptions = computed(() => {
     label: t('header.menus.labels.logOut'),
     icon: 'i-mdi-logout-variant',
     action: logout,
-    args: config.public.registryHomeURL
+    args: window.location.href
   })
   return options
 })

strr-web/components/header/Menu.vue

@@ -24,7 +24,7 @@
                 {{ menuList.header }}
               </h3>
             </slot>
-            <BcrosHeaderMenuItem
+            <HeaderMenuItem
               v-for="menuItem in menuList.items"
               :key="menuItem.label"
               :item-info="menuItem"

strr-web/components/tooltip/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <UTooltip
+    ref="tooltipRef"
+    :text="text"
+    :popper="popper"
+    tabindex="0"
+    @focus="showTooltipPopup"
+    @blur="closeTooltipPopup"
+  >
+    <slot />
+    <template #text>
+      <slot name="tooltip-text" />
+    </template>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+import { PopperOptions } from '#ui/types'
+
+defineProps<{
+  text?: string
+  popper: PopperOptions
+}>()
+
+const tooltipRef = ref()
+const showTooltipPopup = () => {
+  if (tooltipRef.value) {
+    tooltipRef.value.onMouseEnter()
+  }
+}
+
+const closeTooltipPopup = () => {
+  if (tooltipRef.value) {
+    tooltipRef.value.onMouseLeave()
+  }
+}
+</script>

strr-web/composables/useBcrosNavigate.ts

@@ -17,8 +17,9 @@ export const useBcrosNavigate = () => {
   // common redirects
   function goToBcrosHome () { redirect(config.public.registryHomeURL) }
   function goToBcrosLogin (idpHint: string) {
-    /** Redirect to bcros login page given the login type. */
-    window.location.assign(`${config.public.registryHomeURL}signin/${idpHint}`)
+    // using current window location as redirect for now
+    // TODO: TC - review this once test deploy for redirects is complete
+    window.location.assign(`${config.public.authWebURL}signin/${idpHint}/${window.location.href}`)
   }
   function goToEditProfile () { redirect(config.public.authWebURL + 'userprofile') }
   function goToAccountInfo () {

strr-web/enums/route-name-e.ts

@@ -0,0 +1,5 @@
+export enum RouteNameE {
+  BEN_OWNR_CHNG = 'beneficial-owner-change',
+  MY_REG_DETAILS = 'my-registries-details',
+  REVIEW_CONFIRM = 'review-confirm'
+}

strr-web/interfaces/account-i.ts

@@ -11,4 +11,14 @@
   type: UserSettingsTypeE.ACCOUNT
   urlpath: string
   urlorigin: string
+  mailingAddress?: AddressI
+}
+
+export interface AddressI {
+  city: string
+  country: string
+  postalCode: string
+  region: string
+  street: string
+  streetAdditional: string
 }

strr-web/interfaces/header-menu-item-i.ts

@@ -0,0 +1,7 @@
+export interface HeaderMenuItemI {
+  label: string,
+  action?: () => any
+  args?: any
+  icon?: string
+  setActive?: boolean
+}

strr-web/interfaces/user-settings-i.ts

@@ -0,0 +1,14 @@
+import { AccountTypeE } from '~/enums/account-type-e'
+import { AccountStatusE } from '~/enums/account-status-e'
+import { UserSettingsTypeE } from '~/enums/user-settings-type-e'
+
+export interface UserSettingsI {
+  id: string
+  type: UserSettingsTypeE
+  urlpath: string
+  urlorigin: string
+  accountType?: AccountTypeE
+  accountStatus?: AccountStatusE
+  additionalLabel?: string
+  label?: string
+}

strr-web/lang/en.json

@@ -3,6 +3,21 @@
     "title": "STRR",
     "buttons": {
       "createAccount": "Create Account"
+    },
+    "menus": {
+      "headers": {
+        "accountSettings": "Account Settings",
+        "selectLogin": "Select log in method",
+        "switchAccount": "Switch Account"
+      },
+      "labels": {
+        "accountInfo": "Account Info",
+        "createAccount": "Create Account",
+        "editProfile": "Edit Profile",
+        "logOut": "Log Out",
+        "teamMembers": "Team Members",
+        "transactions": "Transactions"
+      }
     }
   },
   "footer": {
@@ -13,5 +28,12 @@
       "accessibility": "Accessibility",
       "copyright": "Copyright"
     }
+  },
+  "labels": {
+    "services": {
+      "bcsc": "BC Services Card",
+      "bceid": "BCeID",
+      "idir": "IDIR"
+    }
   }
 }

strr-web/layouts/default.vue

@@ -1,8 +1,9 @@
 <template>
-    <div data-cy="default-layout">
-        <div class="flex justify-between flex-col h-screen">
-            <Header></Header>
-            <Footer></Footer>
-        </div>
+  <div data-cy="default-layout">
+    <div class="flex justify-between flex-col h-screen">
+      <Header />
+      <slot />
+      <Footer />
     </div>
+  </div>
 </template>

strr-web/middleware/setupAuth.global.ts

@@ -0,0 +1,42 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  // setup auth
+  if ((!to.query.error) && !process.env.VITEST_WORKER_ID) {
+    // keycloak redirects with the error param when not logged in (nuxt/keycloak issue)
+    //   - removing ^ condition will cause an infinite loop of keycloak redirects when not authenticated
+    const { kcURL, kcRealm, kcClient } = useRuntimeConfig().public
+    await useBcrosAuth().setupAuth(
+      { url: kcURL, realm: kcRealm, clientId: kcClient },
+      to.params.currentAccountId as string || to.query.currentAccountId as string
+    )
+
+  //   if (process.client && sessionStorage?.getItem('FAKE_LOGIN')) {
+  //     const { kc } = useBcrosKeycloak()
+  //     // set test kc values
+  //     kc.tokenParsed = {
+  //       firstname: 'TestFirst',
+  //       lastname: 'TestLast',
+  //       name: 'TestFirst TestLast',
+  //       username: 'testUsername',
+  //       email: 'testEmail@test.com',
+  //       sub: 'testSub',
+  //       loginSource: 'IDIR',
+  //       realm_access: { roles: ['basic'] }
+  //     }
+  //     kc.authenticated = true
+  //     const account = useBcrosAccount()
+  //     await account.setUserName()
+  //     await account.setAccountInfo()
+  //   }
+  }
+  // // initialize ldarkly
+  // useBcrosLaunchdarkly().init()
+  // remove query params in url added by keycloak
+  if (to.query) {
+    const params = new URLSearchParams(to.fullPath.split('?')[1])
+    params.delete('state')
+    params.delete('session_state')
+    params.delete('code')
+    params.delete('error')
+    to.fullPath = to.path + (params.size > 0 ? `?${params}` : '') + to.hash
+  }
+})

strr-web/nuxt.config.ts

@@ -15,7 +15,7 @@
   app: {
     head: {
       meta: [
         { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, initial-scale=1' }
       ]
     }
   },
@@ -59,7 +59,8 @@
       payApiURL: `${process.env.VUE_APP_PAY_API_URL || ''}${process.env.VUE_APP_PAY_API_VERSION || ''}`,
       btrApiURL: `${process.env.VUE_APP_BTR_API_URL || ''}${process.env.VUE_APP_BTR_API_VERSION || ''}`,
       registryHomeURL: process.env.VUE_APP_REGISTRY_HOME_URL || '',
-      appEnv: `${process.env.VUE_APP_POD_NAMESPACE || 'unknown'}`
+      appEnv: `${process.env.VUE_APP_POD_NAMESPACE || 'unknown'}`,
+      version: `0.1.0`,
     }
   },
   css: ['~/./assets/scss/global.scss'],

strr-web/pages/accountselect.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div v-if="userAccounts && authenticated">
+      <ul>
+        <li v-for="userAccount in userAccounts" :key="userAccount.id">
+          {{ userAccount.label }}-
+          {{ userAccount.accountType }}-
+          {{ userAccount.mailingAddress?.street }}
+          {{ userAccount.mailingAddress?.city }}
+          {{ userAccount.mailingAddress?.region }}
+        </li>
+      </ul>
+      <div>Create an Account</div>
+    </div>
+    <div v-if="!userAccounts && authenticated">
+      You have no accounts, please Create Account
+    </div>
+    <div v-if="!authenticated">
+      Please login
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { useBcrosAccount } from '@/stores/account'
+import { useBcrosKeycloak } from '@/stores/keycloak'
+
+const account = useBcrosAccount()
+const { userAccounts } = storeToRefs(account)
+const keycloak = useBcrosKeycloak()
+const authenticated = computed(() => keycloak.kc.authenticated)
+
+</script>

strr-web/pages/index.vue

@@ -1,6 +1,7 @@
 <template>
-    <div data-cy="test-page">
-        <h1>Page content</h1>
-        <Button>Login</Button>
-    </div>
+  <div>Welcome!</div>
 </template>
+
+<script setup lang="ts">
+
+</script>