feat: set up start page layout

client/src/components/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="button__button" :class="{ disabled, border }">
+  <button :type="type" class="button__button" :class="{ disabled, border }">
     <slot />
   </button>
 </template>
@@ -10,6 +10,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  type: {
+    type: String,
+    default: 'button',
+  },
   border: {
     type: Boolean,
     default: true,
@@ -23,7 +27,6 @@ defineProps({
 .button {
   &__button {
     display: inline-block;
-    margin: auto;
     padding: 4px 24px;
     background-color: inherit;
     color: $text-secondary-color;

client/src/components/LoginBox.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="login-box__container">
-    <input v-model="authCode" class="login-box__authinput" type="text" size="6" maxlength="6" placeholder="Code" />
-    <Button @click="login">Go!</Button>
+<div class="login-box__container-outer">
+  <form class="login-box__container-inner" @submit.prevent="login">
+    <input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
+      placeholder="Code" />
+    <Button type="submit">Go!</Button>
     <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
-  </div>
+  </form>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +16,10 @@ import { watch, ref, Ref } from 'vue'
 const authCode: Ref<string> = ref('')
 const errorMessage: Ref<string> = ref('')
 
+const vFocus = {
+  mounted: (el: HTMLElement) => el.focus()
+}
+
 const login = (): void => {
   errorMessage.value = ''
 
@@ -22,6 +29,8 @@ const login = (): void => {
     if (!newVal && data.value === 'ok') {
       const router = useRouter()
       router.push('/play')
+    } else if (!newVal) {
+      errorMessage.value = 'login failed'
     }
   })
 }
@@ -31,34 +40,35 @@ const login = (): void => {
 @import '~/assets/css/components';
 
 .login-box {
-  &__container {
+  &__container-outer {
     display: flex;
     width: 240px;
-
-    // justify-content: center;
+  }
+  &__container-inner {
+    margin: 0 0 0 auto;
   }
 
   &__authinput {
     display: inline;
+    position: relative;
     height: 36px;
-    // border: $input-inactive-border;
-    // border-radius: 8px;
-    // background-color: $input-inactive-background-color;
-    // color: $input-inactive-text-color;
+    margin: 0 16px;
     background: transparent;
     border: none;
-    border-bottom: 1px solid white;
-    color: white;
+    border-bottom: $box-primary-border;
+    color: $text-primary-color;
     font-family: $secondary-font;
     font-weight: 800;
     font-size: 24px;
     outline: none;
+  }
 
-    // &:focus {
-    //   border: 1px solid $input-border-color;
-    //   background-color: $input-background-color;
-    //   color: $input-text-color;
-    // }
+  &__error {
+    position: absolute;
+    width: 240px;
+    text-align: center;
+    margin: 8px;
+    color: $text-error-color;
   }
 }
 </style>

client/src/pages/index.vue

@@ -1,7 +1,17 @@
 <template>
   <div>
     <TitleBox />
-    <LoginBox />
+    <div class="page-index__action-box">
+      <div class="page-index__space" />
+      <div class="page-index__login">
+        <LoginBox />
+      </div>
+      <div class="page-index__separator" />
+      <div class="page-index__create-team">
+        <Button disabled>Create Team</Button>
+      </div>
+      <div class="page-index__space" />
+    </div>
   </div>
 </template>
 
@@ -11,7 +21,31 @@
 body {
   background-color: $background-primary-color;
   color: $text-primary-color;
-  
+
   margin: 0;
 }
+
+.page-index {
+  &__action-box {
+    display: flex;
+    width: 100%;
+    height: 120px;
+  }
+
+  &__login, 
+  &__create-team {
+    width: 240px;
+    align-self: center;
+  }
+
+  &__separator {
+    width: 1px;
+    margin: 0 48px;
+    border-left: $box-primary-border;
+  }
+
+  &__space {
+    flex-grow: 1;
+  }
+}
 </style>