refactor: simplify usage of authenticateAndLoadUserInfo()

client/src/components/TopBar.vue

@@ -12,7 +12,7 @@
         <GameControls />
       </div>
       <div v-else class="topbar__actionbar__player">
-        {{ game.name }}
+        {{ game?.name }}
       </div>
     </div>
     <div class="topbar__separator" />
@@ -29,7 +29,7 @@ import useI18n from '@/composables/useI18n';
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
-const { $t, setLang } = useI18n({
+const { $t } = useI18n({
   'logout': { en: 'Logout', de: 'abmelden' },
 })
 
@@ -69,7 +69,8 @@ const actionLogout = async () => {
   &__actionbar {
     flex-grow: 1;
     
-    &__player {
+    &__player, 
+    &__admin {
       font-size: 24px;
       text-align: center;
     }

client/src/composables/useAuth.ts

@@ -1,19 +1,37 @@
-import { useUserinfoStore } from "@/stores/UserinfoStore"
+import { navigateTo } from "#app"
+import { useUserinfoStore, Userinfo } from "@/stores/UserinfoStore"
 import { $fetch } from 'ohmyfetch'
 
+export type AllowRole = '' | 'player' | 'gamemaster' | 'admin'
+export type AllowRoles = Array<AllowRole>
+
 export interface useAuth {
   login(authCode: string): Promise<void>
   logout(): Promise<void>
-  authenticateAndLoadUserInfo(): Promise<void>
+  authenticateAndLoadUserInfo(allowRoles: AllowRoles): Promise<void>
 }
 
 export default (): useAuth => {
-  const userInfoStore = useUserinfoStore()
+  const user = useUserinfoStore()
 
   return {
-    authenticateAndLoadUserInfo: async (): Promise<void> => {
-      const userInfo = await $fetch('/api/userinfo')
-      userInfoStore.setUserInfo(userInfo)
+    authenticateAndLoadUserInfo: async (allowRoles: AllowRoles): Promise<void> => {
+      try {
+        const userInfo = await $fetch('/api/userinfo') as Userinfo
+        user.setUserInfo(userInfo)
+        if (allowRoles.indexOf(userInfo.role) >= 0 ) {
+          return
+        }
+        if (user.isAdmin) {
+          navigateTo('/admin', { replace: true })
+        } else {
+          navigateTo('/play', { replace: true })
+        }
+      } catch (e) {
+        if (allowRoles.indexOf('') == -1 ) {
+          navigateTo('/', { replace: true })
+        }
+      }
     },
 
     login: async (authCode: string): Promise<void> => {

client/src/pages/admin.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="admin__container">
+    <TopBar />
+    Admin page
+  </div>
+</template>
+
+<script setup lang="ts">
+import useAuth from '@/composables/useAuth'
+  
+await useAuth().authenticateAndLoadUserInfo(['admin'])
+
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.admin {
+  &__container {
+    color: $text-primary-color;
+  }
+}
+</style>

client/src/pages/gamemaster.vue

@@ -2,32 +2,35 @@
   <div class="gamemaster__container">
     <TopBar />
     <div class="gamemaster__tiles">
-      <AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" />
-      <AdminPlayersTile :gameinfo="gameinfo" @update="updateGameinfo" />
+      <AdminGameInfoTile v-if="gameinfo" :gameinfo="gameinfo" @update="updateGameinfo" />
+      <AdminPlayersTile v-if="gameinfo" :gameinfo="gameinfo" @update="updateGameinfo" />
       <div class="gamemaster__tiles-spacer" />
     </div>
 </div>
 </template>
 
 <script setup lang="ts">
-import { navigateTo } from '#app'
 import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useEngine from '@/composables/useEngine'
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+import type { GameInfo } from '@/composables/engine.d'
 
-// ensure user is authenticated
-const { authenticateAndLoadUserInfo } = useAuth()
-try {
-  await authenticateAndLoadUserInfo()
-} catch (e) {
-  navigateTo('/', { replace: true })
-}
+await useAuth().authenticateAndLoadUserInfo(['gamemaster'])
 
 const { fetchGameInfo } = useEngine()
-const gameinfo = ref(await fetchGameInfo())
+const gameinfo = ref(null as null | GameInfo)
 const updateGameinfo = async (): Promise<void> => {
+  const userInfoStore = useUserinfoStore()
+  if (userInfoStore.gameId) {
     gameinfo.value = await fetchGameInfo()
+  } else {
+    gameinfo.value = null
+  }
 }
+
+updateGameinfo()
+
 </script>
 
 <style lang="scss">

client/src/pages/index.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig, navigateTo } from '#app'
+import { useRuntimeConfig } from '#app'
 import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useI18n from '@/composables/useI18n'
@@ -31,12 +31,7 @@ const { $t } = useI18n({
 
 const config = useRuntimeConfig()
 
-try {
-  await useAuth().authenticateAndLoadUserInfo()
-  navigateTo('/play', { replace: true })
-} catch (e) {
-  // nop
-}
+await useAuth().authenticateAndLoadUserInfo([''])
 
 const showCreateTeamDialog = ref(false)
 const createTeam = () => { showCreateTeamDialog.value = true }

client/src/pages/play.vue

@@ -15,20 +15,13 @@
 </template>
 
 <script setup lang="ts">
-import { navigateTo, useRoute } from '#app'
-import { computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { useRoute } from '#app'
+import { computed, onMounted, onBeforeUnmount } from 'vue';
 import useAuth from '@/composables/useAuth';
 import useEngine from '@/composables/useEngine';
-import useI18n from '@/composables/useI18n'
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
-// ensure user is authenticated
-const { authenticateAndLoadUserInfo } = useAuth()
-try {
-  await authenticateAndLoadUserInfo()
-} catch (e) {
-  navigateTo('/', { replace: true })
-}
+await useAuth().authenticateAndLoadUserInfo(['player', 'gamemaster'])
 
 const { start: startEngine, stop: stopEngine } = useEngine()
 onMounted(() => startEngine())