fixed functionality on landing page

src/pages/index.vue

@@ -1,33 +1,46 @@
 <template>
   <v-sheet class="w-100 h-100 d-flex flex-column justify-center align-center" color="transparent">
     <h1 id="main-title">Tik Tak Blow</h1>
-    <v-btn
-      class="mt-12"
-      color="yellow"
-      height="5rem"
+    <v-sheet color="transparent" width="25rem">
+      <v-text-field
+        v-model="username"
+        class="mt-12 mb-6"
+        placeholder="Username"
         rounded
-      variant="tonal"
-      width="20rem"
-      @click="createGame">
-      Create Game
-    </v-btn>
-    <v-sheet class="mt-6 d-flex justify-center" color="transparent" height="3.5rem">
+        style="height: 3.5rem"
+        type="username"
+        variant="outlined"
+        width="100%" />
+
+      <v-sheet class="mb-6 d-flex justify-center" color="transparent" height="3.5rem">
         <v-text-field
           v-model="lobbyId"
           placeholder="Lobby ID"
           rounded
           style="margin-right: 1rem; height: 3.5rem"
           variant="outlined"
-        width="9rem" />
+          width="14rem" />
         <v-btn
-        :disabled="!lobbyId"
+          :disabled="!(username && lobbyId)"
           color="yellow"
           height="3.5rem"
           rounded
           variant="tonal"
           width="10rem"
           @click="joinGame">
-        Join Game
+          Spiel beitreten
+        </v-btn>
+      </v-sheet>
+
+      <v-btn
+        :disabled="!(username && !lobbyId)"
+        color="yellow"
+        height="5rem"
+        rounded
+        variant="tonal"
+        width="100%"
+        @click="createGame">
+        Spiel erstellen
       </v-btn>
     </v-sheet>
   </v-sheet>
@@ -37,7 +50,9 @@
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+const username = ref('')
 const lobbyId = ref('')
+const password = ref('')
 
 const createGame = () => {
   // TODO Request to Server for new Game Lobby ID