feat: enter PIN

client/src/components/LoginBox.vue

@@ -1,15 +1,64 @@
 <template>
   <div class="login-box__container">
-    <Button>123456</Button>
-    <Button>646162</Button>
+    <input v-model="authCode" class="login-box__authinput" type="text" size="6" maxlength="6" placeholder="Code" />
+    <Button @click="login">Go!</Button>
+    <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { useFetch, useRouter } from '#app'
+import { watch, ref, Ref } from 'vue'
+
+const authCode: Ref<string> = ref('')
+const errorMessage: Ref<string> = ref('')
+
+const login = (): void => {
+  errorMessage.value = ''
+
+  const { data, pending, error } = useFetch(`/api/login?code=${authCode.value}`)
+
+  watch(pending, (newVal) => {
+    if (!newVal && data.value === 'ok') {
+      const router = useRouter()
+      router.push('/play')
+    }
+  })
+}
+</script>
+
 <style lang="scss">
+@import '~/assets/css/components';
+
 .login-box {
   &__container {
     display: flex;
-    justify-content: center;
+    width: 240px;
+
+    // justify-content: center;
+  }
+
+  &__authinput {
+    display: inline;
+    height: 36px;
+    // border: $input-inactive-border;
+    // border-radius: 8px;
+    // background-color: $input-inactive-background-color;
+    // color: $input-inactive-text-color;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid white;
+    color: white;
+    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;
+    // }
   }
 }
 </style>