Merge pull request #4 from turb0c0w/sam/account-page

Sam/account page

strr-web/app.vue

@@ -1,7 +1,3 @@
 <template>
-  <div>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLayout />
 </template>

strr-web/assets/styles/theme.scss

@@ -84,5 +84,5 @@ body {
 
 html, body {
   overflow-x: hidden;
-  overflow-y: hidden;
+  background-color: #F1F3F5;
 }

strr-web/components/bcros/alerts/Message.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="grid grid-cols-12 gap-1 p-4"
+    :class="flavourContainerClass"
+    :role="flavourRole"
+    :data-cy="'alertsMessage:' + flavour"
+  >
+    <div class="py-3 px-0">
+      <slot name="icon">
+        <UIcon
+          v-if="flavourIcon"
+          :class="flavourIconClass"
+          class="mt-[2px] text-2xl float-right"
+          :name="flavourIcon"
+        />
+      </slot>
+    </div>
+    <div class="p-2 col-span-11">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ref } from 'vue'
+import { AlertsFlavourE } from '~/enums/alerts-e'
+
+const props = defineProps<{
+  flavour: AlertsFlavourE
+}>()
+
+const flavourIcon: Ref<string | null> = ref(null)
+const flavourContainerClass = ref('')
+const flavourIconClass = ref('')
+const flavourRole = ref('none')
+
+switch (props.flavour) {
+  case AlertsFlavourE.ALERT:
+    flavourIcon.value = 'i-mdi-alert'
+    flavourIconClass.value = 'text-red-500'
+    flavourContainerClass.value = 'border-2 border-red-500 bg-red-100'
+    flavourRole.value = 'alert'
+    break
+  case AlertsFlavourE.SUCCESS:
+    flavourIcon.value = 'i-mdi-success-circle'
+    flavourContainerClass.value = 'border-2 border-green-500 bg-green-100'
+    flavourRole.value = 'alert'
+    break
+  case AlertsFlavourE.WARNING:
+    flavourIcon.value = 'i-mdi-alert'
+    flavourIconClass.value = 'text-orange-500'
+    flavourContainerClass.value = 'border-2 border-orange-500 bg-orange-100'
+    flavourRole.value = 'alert'
+    break
+  case AlertsFlavourE.INFO:
+    flavourIcon.value = 'i-mdi-alert'
+    flavourIconClass.value = 'text-orange-500'
+    flavourContainerClass.value = 'border-2 border-yellow-500 bg-yellow-50'
+    flavourRole.value = 'note'
+    break
+  case AlertsFlavourE.MESSAGE:
+    flavourIcon.value = null
+    flavourContainerClass.value = 'border-2 border-solid border-black'
+    break
+}
+
+</script>

strr-web/components/bcros/buttons/Primary.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex">
+    <slot>
+      <UButton
+        :class="classWithDefaultSpacing"
+        :color="color || 'primary'"
+        :icon="icon"
+        :label="label"
+        :loading="loading"
+        :text="text"
+        :trailing="trailing"
+        :variant="variant"
+        @click="action()"
+      >
+        {{ text }}
+      </UButton>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ButtonVariant } from '@nuxt/ui/dist/runtime/types'
+
+const { action, color, className, icon, label, loading, text, trailing, variant } = defineProps<{
+  action: Function,
+  className?: string,
+  color?: string,
+  icon: string,
+  loading?: boolean,
+  label: string,
+  text: string,
+  trailing?: boolean,
+  variant?: ButtonVariant
+}>()
+
+const classWithDefaultSpacing = `${className} text-[16px] px-[28px] py-[10px]`
+
+</script>

strr-web/components/bcros/container/Container.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="flex h-full justify-center">
+    <div class="w-[848px]">
+      <NuxtPage />
+    </div>
+  </div>
+</template>

strr-web/components/bcros/existing-accounts-list/ExistingAccountsList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex flex-col justify-center mb-[32px]">
+    <div v-for="account in accounts" class="bg-white shadow-md">
+      <div :key="account.id" class="items-center h-[52px] flex flex-row justify-space-between mx-[32px] my-[24px] border-b border-bcGovColor-hairlinesOnWhite">
+        <div><BcrosLetterIcon letter="E" /></div>
+        <div class="grow pl-[20px]">
+          <div class="text-[18px] font-bold">
+            {{ account.label }}
+          </div>
+          <div class="text-[14px]">
+            {{ account.address }}
+          </div>
+        </div>
+        <div>
+          <BcrosButtonsPrimary
+            :action="buttonAction"
+            icon="i-mdi-chevron-right"
+            :label="buttonText"
+            :text="buttonText"
+            :trailing="true"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-center">
+      <BcrosButtonsPrimary
+        :action="buttonAction"
+        icon="i-mdi-chevron-right"
+        :label="buttonText"
+        :text="createAccountButtonText"
+        :trailing="true"
+        variant="outline"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { accounts } = defineProps<{ accounts: AccountI[] }>()
+const t = useNuxtApp().$i18n.t
+
+const buttonText = t('account.existing-account-section.use-account-button')
+const buttonAction = () => console.log('CLICKED')
+
+const createAccountButtonText = t('account.existing-account-section.create-account-button')
+
+</script>

strr-web/components/Footer.vue → strr-web/components/bcros/footer/Footer.vue

@@ -1,7 +1,7 @@
 <template>
   <footer
     id="bcros-main-footer"
-    class="flex flex-initial items-center border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer text-sm"
+    class="h-[54px] grow flex items-center border-t-2 border-bcGovColor-navDivider bg-bcGovColor-footer text-sm"
     data-cy="footer"
   >
     <div class="m-auto px-4 w-full max-w-[1360px]">
@@ -52,6 +52,3 @@ const links = [
   { text: 'copyright', href: 'https://www2.gov.bc.ca/gov/content/home/copyright', newTab: true }
 ]
 </script>
-
-<style scoped>
-</style>

strr-web/components/Header.vue → strr-web/components/bcros/header/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">
-            <HeaderMenu data-cy="logged-in-menu" :menu-lists="loggedInMenuOptions">
+            <BcrosHeaderMenu data-cy="logged-in-menu" :menu-lists="loggedInMenuOptions">
               <template #menu-button-text>
-                <HeaderAccountLabel
+                <BcrosHeaderAccountLabel
                   :account-name="!personMode ? currentAccountName : ''"
                   :username="userFullName"
                 />
               </template>
               <template #menu-list-header-0>
                 <div class="flex px-4 mb-3">
-                  <HeaderAccountLabel
+                  <BcrosHeaderAccountLabel
                     :avatar-classes="'text-white'"
                     :account-name="!personMode ? currentAccountName : ''"
                     :username="userFullName"
                   />
                 </div>
               </template>
-            </HeaderMenu>
+            </BcrosHeaderMenu>
           </div>
           <div v-else class="flex flex-wrap self-center text-sm h-[36px]">
-            <HeaderMenu
+            <BcrosHeaderMenu
               data-cy="logged-out-menu"
               :menu-button-text="'Log in'"
               :menu-lists="loggedOutMenuOptions"

strr-web/components/header/Menu.vue → strr-web/components/bcros/header/Menu.vue

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

strr-web/components/bcros/letter-icon/LetterIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <UButton
+    :label="letter"
+    color="primary"
+    class="pointer-events-none bg-blue-350 h-[32px] w-[32px] flex font-bold justify-center"
+    :inactive="true"
+  />
+</template>
+
+<script setup lang="ts">
+const { letter } = defineProps<{ letter: string }>()
+</script>

strr-web/components/bcros/typography/H1.vue

@@ -0,0 +1,10 @@
+<template>
+  <h1 class="font-bold text-[32px] pb-[25px]" :data-cy="dataCy">
+    {{ t(text) }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+const t = useNuxtApp().$i18n.t
+const { text, dataCy } = defineProps<{ text: string, dataCy: string }>()
+</script>

strr-web/components/bcros/typography/H2.vue

@@ -0,0 +1,10 @@
+<template>
+  <h2 class="font-bold text-[24px] py-[25px]" :data-cy="dataCy">
+    {{ t(text) }}
+  </h2>
+</template>
+
+<script setup lang="ts">
+const t = useNuxtApp().$i18n.t
+const { text, dataCy } = defineProps<{ text: string, dataCy: string }>()
+</script>

strr-web/composables/useBcrosAuth.ts

@@ -35,29 +35,29 @@ export const useBcrosAuth = () => {
   /** Setup keycloak / user auth pieces */
   async function setupAuth (kcConfig: KeycloakConfig, currentAccountId?: string) {
     if (!keycloak.kc.authenticated) {
-      console.info('Initializing auth setup...') // eslint-disable-line no-console
+      console.info('Initializing auth setup...')
       // initialize keycloak with user token
-      console.info('Initializing Keycloak...') // eslint-disable-line no-console
+      console.info('Initializing Keycloak...')
       try {
         await keycloak.initKeyCloak(kcConfig)
         if (keycloak.kc.authenticated) {
           // successfully initialized so setup other pieces
           keycloak.syncSessionStorage()
           keycloak.scheduleRefreshToken()
           // set user info
-          console.info('Setting user name...') // eslint-disable-line no-console
+          console.info('Setting user name...')
           await account.setUserName()
           // set account info
-          console.info('Setting user account information...') // eslint-disable-line no-console
+          console.info('Setting user account information...')
           await account.setAccountInfo(currentAccountId)
           // check account status
-          console.info('Checking account status...') // eslint-disable-line no-console
+          console.info('Checking account status...')
           // verify account status
           verifyAccountStatus()
-          console.info('Auth setup complete.') // eslint-disable-line no-console
+          console.info('Auth setup complete.')
         }
       } catch (error) {
-        console.warn('Keycloak initialization failed:', error) // eslint-disable-line no-console
+        console.warn('Keycloak initialization failed:', error)
       }
     }
   }

strr-web/composables/useBcrosNavigate.ts

@@ -3,7 +3,7 @@ export const useBcrosNavigate = () => {
   const account = useBcrosAccount()
 
   /** Redirect to the given URL with necessary BCROS args */
-  function redirect (url: string) {
+  function redirect(url: string) {
     // get account id and set in params
     const redirectURL = new URL(url)
     const accountId = account.currentAccount.id
@@ -14,27 +14,29 @@ export const useBcrosNavigate = () => {
     window.location.assign(redirectURL.href)
   }
 
+  console.log(config.public.authWebURL);
+
   // common redirects
-  function goToBcrosHome () { redirect(config.public.registryHomeURL) }
-  function goToBcrosLogin (idpHint: string) {
+  function goToBcrosHome() { redirect(config.public.registryHomeURL) }
+  function goToBcrosLogin(idpHint: string) {
     // 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 () {
+  function goToEditProfile() { redirect(config.public.authWebURL + 'userprofile') }
+  function goToAccountInfo() {
     redirect(config.public.authWebURL + `account/${account.currentAccount.id}/settings/account-info`)
   }
-  function goToTeamMembers () {
+  function goToTeamMembers() {
     redirect(config.public.authWebURL + `account/${account.currentAccount.id}/settings/team-members`)
   }
-  function goToTransactions () {
+  function goToTransactions() {
     redirect(config.public.authWebURL + `account/${account.currentAccount.id}/settings/transactions`)
   }
-  function goToCreateAccount () {
+  function goToCreateAccount() {
     redirect(config.public.authWebURL + 'choose-authentication-method')
   }
-  function goToSetupAccount () {
+  function goToSetupAccount() {
     redirect(config.public.authWebURL + 'setup-account')
   }
 

strr-web/interfaces/account-i.ts

@@ -11,6 +11,7 @@ export interface AccountI {
   type: UserSettingsTypeE.ACCOUNT
   urlpath: string
   urlorigin: string
+  address: string
   mailingAddress?: AddressI
 }
 

strr-web/lang/en.json

@@ -1,5 +1,15 @@
 {
-  "header" :{
+  "account": {
+    "title": "Existing Account Found",
+    "existing-account-warning": "Note: It looks like you already have an account with BC Registries and Online Services. You can use an existing account to proceed or create a new one.",
+    "existing-account-section": {
+      "title": "Your Existing Accounts",
+      "sub-title": "Select an account below or create a new one",
+      "use-account-button": "Use this account",
+      "create-account-button": "Create account"
+    }
+  },
+  "header": {
     "title": "STRR",
     "buttons": {
       "createAccount": "Create Account"
@@ -36,4 +46,4 @@
       "idir": "IDIR"
     }
   }
-}
+}