add new page /setup

client/src/composables/useAuth.ts

@@ -6,7 +6,7 @@ import { useRoundStore } from '@/stores/RoundStore'
 import useI18n from './useI18n'
 import { $fetch } from 'ohmyfetch'
 
-export type AllowRole = '' | 'player' | 'gamemaster' | 'admin'
+export type AllowRole = '' | 'player' | 'gamemaster' | 'admin' | 'setup'
 export type AllowRoles = Array<AllowRole>
 
 export interface useAuth {
@@ -29,6 +29,12 @@ export default (): useAuth => {
           return
         }
 
+        // game is not initialized yet, needs setup
+        if (userInfo.role === 'setup') {
+          document.location.pathname = '/setup'
+          return
+        }
+        
         // user is authenticated but not authorized for this page
         if (user.isAdmin) {
           document.location.pathname = '/admin'

client/src/pages/index.vue

@@ -21,7 +21,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'

client/src/pages/setup.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <TitleBox />
+    <p>
+      needs setup
+    </p>
+    <div class="page-setup__copyright-notice" @click="openInfoModal">
+      v{{ config.version }}, © 2021-2022, Settel
+    </div>
+    <InfoModal v-if="showInfoModal" @close="closeInfoModal" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRuntimeConfig } from '#app'
+import { ref } from 'vue'
+import useAuth from '@/composables/useAuth'
+
+const config = useRuntimeConfig()
+
+await useAuth().authenticateAndLoadUserInfo(['setup'])
+
+const showInfoModal = ref(false)
+const openInfoModal = () => { showInfoModal.value = true }
+const closeInfoModal = () => { showInfoModal.value = false }
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.page-setup {
+  &__copyright-notice {
+    position: absolute;
+    right: 1em;
+    bottom: 0;
+    color: #606060;
+    cursor: pointer;
+
+    &:hover {
+      color: #c0c0c0;
+    }
+  }
+}
+</style>

client/src/stores/UserinfoStore.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 export type Userinfo = {
   id: string
   name: string
-  role: '' | 'player' | 'gamemaster' | 'admin'
+  role: '' | 'player' | 'gamemaster' | 'admin' | 'setup'
   game: string
   lang: 'de' | 'en'
   isCameo: string