Login button

client/src/pages/index.vue

@@ -8,13 +8,11 @@
             Play!
           </NuxtLink>
         </template>
-        <div v-else>
+        <form v-else v-on:submit="login">
           <input
             v-model="authCode"
             class="startpage__authinput"
             type="text"
-            id="authcode"
-            name="authcode"
             value=""
             size="6"
             maxlength="6"
@@ -25,7 +23,10 @@
             value="Go"
             :class="[ 'startpage__authbutton', { disabled: loginDisabled }]"
           />
-        </div>
+          <div class="startpage__errormessage" v-if="errorMessage">
+            {{ errorMessage }}
+          </div>
+        </form>
       </template>
     </div>
     <div class="startpage__copyright">
@@ -40,6 +41,7 @@ export default {
     return {
       user: {},
       authCode: '',
+      errorMessage: '',
     }
   },
   async fetch() {
@@ -55,8 +57,15 @@ export default {
     },
   },
   methods: {
-    login() {
-      console.log('log in')
+    async login(e) {
+      e.preventDefault()
+      try {
+        await this.$axios.$get(`/api/login?code=${this.authCode}`)
+        this.$fetch()
+      } catch(e) {
+        this.authCode = ''
+        this.errorMessage = 'login failed'
+      }
     },
   },
 }
@@ -124,6 +133,13 @@ export default {
     }
   }
 
+  &__errormessage {
+    padding: 8px;
+    font-family: Dosis;
+    font-weight: 800;
+    color: #ff8080;
+  }
+
   &__copyright {
     position: absolute;
     right: 1em;