feat: load userinfo and show username in topbar

client/src/components/TopBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="topbar__container">
     <div class="topbar__username">
-      &lt;username&gt;
+      {{ userInfo.name }}
     </div>
     <div class="topbar__separator" />
     <div class="topbar__actionbar">
@@ -17,13 +17,15 @@
 <script setup lang="ts">
 import { useRouter } from '#app'
 import useAuth from '@/composables/useAuth';
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+
+const { userInfo } = useUserinfoStore()
 
 const actionLogout = async () => {
   await useAuth().logout()
   useRouter().push('/')
 }
 
-
 </script>
 
 <style lang="scss">
@@ -58,6 +60,7 @@ const actionLogout = async () => {
 
   &__logout-button {
     color: $text-primary-color;
+    font-size: 16px;
 
     &:hover {
       color: $text-primary-hover-color;

client/src/composables/useAuth.ts

@@ -1,11 +1,15 @@
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+
 export interface useAuth {
   login(authCode: string): Promise<void>
   logout(): Promise<void>
   isAuthenticated(): Promise<boolean>
+  loadUserInfo(): Promise<boolean>
 }
 
-
 export default () => {
+  const userInfoStore = useUserinfoStore()
+
   return {
     isAuthenticated: async (): Promise<boolean> => {
       return $fetch('/api/userinfo')
@@ -13,6 +17,11 @@ export default () => {
         .catch(() => false)
     },
 
+    loadUserInfo: async (): Promise<void> => {
+      const userInfo = await $fetch('/api/userinfo')
+      userInfoStore.setUserInfo(userInfo)
+    },
+
     login: async (authCode: string): Promise<void> => {
       if (authCode.length != 6) {
         throw Error('login failed')

client/src/pages/play.vue

@@ -9,11 +9,14 @@
 import { useRouter } from '#app'
 import useAuth from '@/composables/useAuth';
 
-const { isAuthenticated } = useAuth()
+const { isAuthenticated, loadUserInfo } = useAuth()
 const router = useRouter()
 if (!await isAuthenticated()) {
   router.push('/')
 }
+
+await loadUserInfo()
+
 </script>
 
 <style lang="scss">

client/src/stores/UserinfoStore.ts

@@ -3,6 +3,12 @@ import { defineStore } from 'pinia'
 export const useUserinfoStore = defineStore('UserinfoStore', {
   state: () => {
     return {
+      userInfo: null,
     }
   },
+  actions: {
+    setUserInfo(userInfo: unknown): void {
+     this.userInfo = userInfo 
+    },
+  },
 })