From 914e412a516cee61164fe63e6d0f4a6c7a04af9f Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Wed, 4 Aug 2021 23:35:41 +0200
Subject: [PATCH] refactoring, logout

---
 client/src/components/PlayButton.vue | 149 +++++++++++++++++++++++++++
 client/src/layouts/default.vue       |   4 +
 client/src/pages/index.vue           | 126 +---------------------
 3 files changed, 154 insertions(+), 125 deletions(-)
 create mode 100644 client/src/components/PlayButton.vue

diff --git a/client/src/components/PlayButton.vue b/client/src/components/PlayButton.vue
new file mode 100644
index 0000000..6aacdf5
--- /dev/null
+++ b/client/src/components/PlayButton.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div v-if="!$fetchState.pending" class="playbutton">
+      <template v-if="user && user.name">
+        <NuxtLink class="playbutton__playbutton" to="/play">
+          Play!
+        </NuxtLink>
+        <div class="playbutton__logout" @click="logout">
+          Logout
+        </div>
+      </template>
+      <form v-else v-on:submit="login">
+        <input
+          v-model="authCode"
+          class="playbutton__authinput"
+          type="text"
+          size="6"
+          maxlength="6"
+          placeholder="code"
+        />
+        <input
+          type="submit"
+          value="Go"
+          :class="[ 'playbutton__authbutton', { disabled: loginDisabled }]"
+        />
+        <div class="playbutton__errormessage" v-if="errorMessage">
+          {{ errorMessage }}
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      user: {},
+      authCode: '',
+      errorMessage: '',
+    }
+  },
+  async fetch() {
+    try {
+      this.user = await this.$axios.$get('/api/userinfo')
+    } catch(e) {
+      // nop
+    }
+  },
+  computed: {
+    loginDisabled() {
+      return this.authCode.length < 6
+    },
+  },
+  methods: {
+    async login(e) {
+      e.preventDefault()
+      try {
+        await this.$axios.$get(`/api/login?code=${this.authCode}`)
+        this.$fetch()
+      } catch(e) {
+        this.errorMessage = 'login failed'
+      }
+      this.authCode = ''
+    },
+    async logout() {
+      this.authCode = ''
+      try {
+        await this.$axios.$get('/api/logout')
+        window.location.reload()
+      } catch(e) {
+        this.errorMessage = 'logout failed'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.playbutton {
+  font-family: Dosis;
+  font-weight: 800;
+  font-size: 36px;
+  text-align: center;
+
+  &__playbutton {
+    width: 200px;
+    height: 48px;
+    padding: 16px 24px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    background-color: #40a020;
+    color: #ffff80;
+
+    &:hover {
+      border-color: #ffffc0;
+      background-color: #60c040;
+      color: #ffffc0;
+    }
+  }
+
+  &__logout {
+    margin-top: 36px;
+    font-size: 24px;
+    cursor: pointer;
+
+    &:hover {
+      color: #c0c080;
+    }
+  }
+
+  &__authinput {
+    display: inline;
+    height: 36px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    font-family: Dosis;
+    font-weight: 800;
+    font-size: 24px;
+  }
+
+  &__authbutton {
+    display: inline;
+    width: 80px;
+    height: 48px;
+    border: 4px solid #c0c060;
+    border-radius: 8px;
+    background-color: #40a020;
+    color: #ffff80;
+    font-size: 24px;
+
+    &.disabled,
+    &:hover.disabled {
+      border-color: #808030;
+      background-color: #406020;
+      color: #808060;
+    }
+    &:hover {
+      background-color: #60c040;
+      color: #ffffc0;
+    }
+  }
+
+  &__errormessage {
+    padding: 8px;
+    color: #ff8080;
+  }
+}
+</style>
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
index 9b40473..aaf04a5 100644
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@@ -38,4 +38,8 @@ html, body {
 body {
   background-color: #402080;
 }
+
+a {
+  text-decoration: none;
+}
 </style>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 05913fb..7b9fea3 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -2,32 +2,7 @@
   <div class="startpage">
     <TitleBox />
     <div class="startpage__buttonline">
-      <template v-if="!$fetchState.pending">
-        <template v-if="user && user.name">
-          <NuxtLink class="startpage__playbutton" to="/play">
-            Play!
-          </NuxtLink>
-        </template>
-        <form v-else v-on:submit="login">
-          <input
-            v-model="authCode"
-            class="startpage__authinput"
-            type="text"
-            value=""
-            size="6"
-            maxlength="6"
-            placeholder="code"
-          />
-          <input
-            type="submit"
-            value="Go"
-            :class="[ 'startpage__authbutton', { disabled: loginDisabled }]"
-          />
-          <div class="startpage__errormessage" v-if="errorMessage">
-            {{ errorMessage }}
-          </div>
-        </form>
-      </template>
+      <PlayButton />
     </div>
     <div class="startpage__copyright">
       © 2021, Settel
@@ -35,111 +10,12 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      user: {},
-      authCode: '',
-      errorMessage: '',
-    }
-  },
-  async fetch() {
-    try {
-      this.user = await this.$axios.$get('/api/userinfo')
-    } catch(e) {
-      // nop
-    }
-  },
-  computed: {
-    loginDisabled() {
-      return this.authCode.length < 6
-    },
-  },
-  methods: {
-    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'
-      }
-    },
-  },
-}
-</script>
-
 <style lang="scss">
 .startpage {
   &__buttonline {
     display: flex;
     justify-content: center;
   }
-  &__playbutton {
-    width: 200px;
-    height: 48px;
-    padding: 16px 24px;
-    border: 4px solid #c0c060;
-    border-radius: 8px;
-    background-color: #40a020;
-    color: #ffff80;
-    font-family: Dosis;
-    font-weight: 800;
-    font-size: 36px;
-    text-align: center;
-    text-decoration: none;
-
-    &:hover {
-      border-color: #ffffc0;
-      background-color: #60c040;
-      color: #ffffc0;
-    }
-  }
-
-  &__authinput {
-    display: inline;
-    height: 36px;
-    border: 4px solid #c0c060;
-    border-radius: 8px;
-    font-family: Dosis;
-    font-weight: 800;
-    font-size: 24px;
-  }
-
-  &__authbutton {
-    display: inline;
-    width: 80px;
-    height: 48px;
-    border: 4px solid #c0c060;
-    border-radius: 8px;
-    background-color: #40a020;
-    color: #ffff80;
-    font-family: Dosis;
-    font-weight: 800;
-    font-size: 24px;
-    text-align: center;
-    text-decoration: none;
-    &.disabled,
-    &:hover.disabled {
-      border-color: #808030;
-      background-color: #406020;
-      color: #808060;
-    }
-    &:hover {
-      background-color: #60c040;
-      color: #ffffc0;
-    }
-  }
-
-  &__errormessage {
-    padding: 8px;
-    font-family: Dosis;
-    font-weight: 800;
-    color: #ff8080;
-  }
-
   &__copyright {
     position: absolute;
     right: 1em;