feat: add create team dialog (WIP)

client/src/components/CreateTeamDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <ModalDialog @close="closeModalDialog" :title="$t('create-team')">
+    <div class="create-team-dialog__description">{{ $t('description') }}</div>
+    <div class="create-team-dialog__form">
+      <label class="create-team-dialog__label">{{ $t('your-name') }}</label>
+      <input id="create-team-dialog-name" class="create-team-dialog__input" v-model="playerName" size="40"/>
+      <label class="create-team-dialog__label">{{ $t('team-name') }}</label>
+      <input class="create-team-dialog__input" v-model="teamName" size="40"/>
+      <label class="create-team-dialog__label">{{ $t('language') }}</label>
+      <select class="create-team-dialog__select" v-model="lang">
+        <option value="en">EN</option>
+        <option value="de">DE</option>
+      </select>
+
+    </div>
+    <template v-slot:footer>
+      <Button class="create-team-dialog__button" :border="true" @click="createTeam">{{ $t('create-team') }}</Button>
+      <Button class="create-team-dialog__button" :border="false" @click="closeModalDialog">{{ $t('cancel') }}</Button>
+    </template>
+  </ModalDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import useI18n from '@/composables/useI18n'
+
+const emit = defineEmits(['close'])
+
+const { $t, getLang } = useI18n({
+  'create-team': { en: 'Create Team', de: 'Team erstellen' },
+  'cancel': { en: 'Cancel', de: 'abbrechen' },
+  'description': { en: 'Create an account for you as a gamemaster and set team name.', de: 'Erstelle einen Useraccount für Dich als Gamemaster und setze den Teamnamen.' },
+  'your-name': { en: 'Your name', de: 'Dein Name' },
+  'team-name': { en: 'Team name', de: 'Teamname' },
+  'language': { en: 'Language', de: 'Sprache' },
+  'names-missing': { en: 'Please enter a user name and a team name.', de: 'Bitte wähle einen Benutzernamen und Teamnamen.' },
+})
+
+const closeModalDialog = () => { emit('close') }
+const playerName = ref('')
+const teamName = ref('')
+const lang = ref(getLang())
+
+const createTeam = () => {
+  if (playerName.value.length == 0 || teamName.value.length == 0) {
+    alert($t('names-missing'))
+    return
+  }
+  alert('not yet implemented')
+}
+
+onMounted(() => {
+  window.setTimeout(() => {
+    document.getElementById('create-team-dialog-name')?.focus()
+  }, 0)
+})
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.create-team-dialog {
+  &__description {
+    font-family: $font-secondary;
+    font-size: 18px;
+  }
+
+  &__form {
+    display: flex;
+    flex-direction: column;
+    margin: 32px 0;
+  }
+
+  &__label {
+    display: block;
+    margin: 16px 0 4px 0;
+  }
+
+  &__input {
+    border: 1px solid white;
+    background-color: $modal-dialog-background-color;
+    color: $modal-dialog-text-color;
+    border-radius: 4px;
+  }
+
+  &__select {
+    margin-right: auto;
+  }
+
+  &__button~&__button {
+    margin-left: 16px;
+  }
+}
+</style>

client/src/composables/useI18n.ts

@@ -12,7 +12,8 @@ const defaultLang: Lang = browserLang === 'de' ? 'de' : 'en'
 let lang: Lang = defaultLang
 
 export interface useI18n {
-  setLang(lang: string): void
+  setLang(lang: Lang): void
+  getLang(): Lang
   $t(key: string): string
 }
 
@@ -21,6 +22,9 @@ export default (map: i18nMap): useI18n => {
     setLang: (_lang: Lang): void => {
       lang = _lang
     },
+    getLang: (): Lang => {
+      return lang
+    },
     $t: (key: string): string => {
       const t = map[key]
       if (!t) {

client/src/pages/index.vue

@@ -8,23 +8,25 @@
       </div>
       <div class="page-index__separator" />
       <div class="page-index__create-team">
-        <Button disabled>{{ $t('create-team') }}</Button>
+        <Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
       </div>
       <div class="page-index__space" />
     </div>
     <div class="page-index__copyright-notice">
       v{{ config.version }}, © 2021-2022, Settel
     </div>
+    <CreateTeamDialog v-if="showCreateTeamDialog" @close="closeCreateTeamDialog" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useRuntimeConfig, navigateTo } from '#app'
+import { ref } from 'vue'
 import useAuth from '@/composables/useAuth'
 import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
-  'create-team': { en: 'Create Team', de: 'Team erstellen' },
+  'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
 })
 
 const config = useRuntimeConfig()
@@ -35,6 +37,10 @@ try {
 } catch (e) {
   // nop
 }
+
+const showCreateTeamDialog = ref(false)
+const createTeam = () => { showCreateTeamDialog.value = true }
+const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
 </script>
 
 <style lang="scss">