feat: add avatar to product landing page for logged in users

See: DF-128

Author: marcel-bitfly

frontend/components/bc/DataWrapper.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 // The DataWrapper is for loading the Data that used in the whole app.
 // We can't load the data directly in the app.vue as this would conflict with some providers being initialized there.
-const {
-  getUser,
-} = useUserStore()
 const { networkInfo } = useNetworkStore()
 const { secondsPerSlot } = networkInfo.value
 const { counter } = useInterval(secondsPerSlot)
@@ -12,8 +9,6 @@ const { refreshLatestState } = useLatestStateStore()
 await useAsyncData('latest_state', () => refreshLatestState(), {
   watch: [ counter ],
 })
-
-await useAsyncData('get_user', () => getUser())
 </script>
 
 <template>

frontend/i18n/locales/en.json

@@ -1,5 +1,8 @@
 {
     "base": {
+        "action": {
+            "open_user_menu": "Open user menu"
+        },
         "beaconchain_homepage": "Beaconchain Homepage",
         "common": {
             "close": "Close",

frontend/layers/auth/composables/useUserSession.ts

@@ -0,0 +1,23 @@
+export const useUserSession = () => {
+  const data = useState<Awaited<ReturnType<typeof getUser>>>('user-session')
+  const hasSession = computed(() => !!data.value)
+  const requestFetch = useRequestFetch()
+  const getUser = async () => {
+    const result = await requestFetch('/api/bff/users/me')
+      .catch((error) => {
+        // session_id invalid or expired
+        if (error?.status === 401) return
+        throw createError({
+          statusCode: error?.status || 500,
+          statusMessage: error?.statusMessage || 'Unknown error',
+        })
+      })
+    data.value = result
+    return result
+  }
+  return {
+    data,
+    getUser,
+    hasSession,
+  }
+}

frontend/layers/auth/middleware/01.auth.global.ts

@@ -0,0 +1,11 @@
+export default defineNuxtRouteMiddleware(async () => {
+  const {
+    getUser,
+    hasSession,
+  } = useUserSession()
+  if (!hasSession.value) {
+    await callOnce(async () => {
+      await getUser()
+    })
+  }
+})

frontend/layers/auth/nuxt.config.ts

@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  $meta: {
+    name: 'auth',
+  },
+})

frontend/layers/auth/server/api/bff/users/me.ts

@@ -0,0 +1,25 @@
+import type { FetchError } from 'ofetch'
+import type { InternalGetUserInfoResponse } from '~/types/api/user'
+
+const config = useRuntimeConfig()
+const headers = {
+  'x-ssr-secret': config.private.ssrSecret,
+}
+
+export default defineEventHandler(async (event) => {
+  const hasSessionCookie = getCookie(event, 'session_id')
+  if (!hasSessionCookie) return
+
+  try {
+    return await event.$fetch<InternalGetUserInfoResponse>('/users/me', {
+      baseURL: config.public.apiClient,
+      headers,
+    }).then(({ data }) => data)
+  }
+  catch (error) {
+    throw createError({
+      statusCode: (error as FetchError).statusCode,
+      statusMessage: (error as FetchError).statusMessage,
+    })
+  }
+})

frontend/layers/base/app/components/BaseNavigation.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import type { BaseNavigationItem } from '#layers/base/app/components/BaseNavigationItem.vue'
 
-const { navigateToV1Login } = useV1Login()
+defineProps<{
+  items: BaseNavigationItem[],
+}>()
+const {
+  navigateToV1Login,
+} = useV1Login()
 const { t: $t } = useTranslation()
 const emit = defineEmits<{
   (e: 'open'): void,
 }>()
 const handleClick = () => {
   emit('open')
 }
-defineProps<{
-  items: BaseNavigationItem[],
-}>()
+const { hasSession } = useUserSession()
+const v1Domain = useV1Domain()
 </script>
 
 <template>
@@ -50,11 +54,23 @@ defineProps<{
           />
         </li>
       </ul>
-      <BaseButton
-        @click="navigateToV1Login"
-      >
-        {{ $t('base.common.log_in') }}
-      </BaseButton>
+      <span>
+        <span v-if="hasSession">
+          <BaseButtonIcon
+            variant="secondary"
+            screenreader-text="base.action.open_user_menu"
+            name="user"
+            @click="navigateTo(`${v1Domain}/user/settings`, { external: true })"
+          />
+        </span>
+        <span v-else>
+          <BaseButton
+            @click="navigateToV1Login"
+          >
+            {{ $t('base.common.log_in') }}
+          </BaseButton>
+        </span>
+      </span>
     </div>
   </nav>
 </template>

frontend/stores/useUserStore.ts

@@ -1,38 +1,11 @@
-import type {
-  InternalGetUserInfoResponse, UserInfo,
-} from '~/types/api/user'
-
-const userStore = defineStore('user-store', () => {
-  const data = ref<null | undefined | UserInfo>()
-  return { data }
-})
-
 export function useUserStore() {
+  const { data } = useUserSession()
   const { fetch } = useCustomFetch()
-  const { data } = storeToRefs(userStore())
   const router = useRouter()
 
-  const setUser = (user?: UserInfo) => {
-    data.value = user
-  }
-
-  async function getUser() {
-    try {
-      const res = await fetch<InternalGetUserInfoResponse>(
-        'USER',
-      )
-      setUser(res.data)
-      return res.data
-    }
-    catch {
-      setUser(undefined)
-      return null
-    }
-  }
-
   const doLogout = async () => {
     await fetch('LOGOUT')
-    setUser(undefined)
+    data.value = undefined
     router.replace('/')
   }
 
@@ -52,7 +25,6 @@ export function useUserStore() {
 
   return {
     doLogout,
-    getUser,
     hasV1Notifications,
     isLoggedIn,
     premium_perks,