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

See: DF-128

Author: marcel-bitfly

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>