refactor: simplify usage of authenticateAndLoadUserInfo()

This commit is contained in:
Settel 2022-09-11 20:02:24 +02:00
parent c6f09831e3
commit 449f64e703
6 changed files with 71 additions and 38 deletions

View File

@ -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;
}

View File

@ -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> => {

View File

@ -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>

View File

@ -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">

View File

@ -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 }

View File

@ -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())