From dad320794469ec0169f6debe593e619cce717d76 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 29 Jul 2022 21:11:09 +0200
Subject: [PATCH] feat: add play page and topbar with logout button

---
 client/src/assets/css/colors.scss  |  7 +++-
 client/src/components/LoginBox.vue | 11 +----
 client/src/components/TopBar.vue   | 67 ++++++++++++++++++++++++++++++
 client/src/composables/useAuth.ts  |  9 +++-
 client/src/pages/index.vue         |  8 +++-
 client/src/pages/play.vue          | 26 ++++++++++++
 6 files changed, 115 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/TopBar.vue
 create mode 100644 client/src/pages/play.vue

diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index a740b96..63ad8f1 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -1,7 +1,7 @@
 // Basics
 $background-primary-color: #282838;
 $text-primary-color: #ffffff;
-$text-primary-hover-color: #ffffc0;
+$text-primary-hover-color: #d0d0b0;
 
 $text-secondary-color: #a0a0a0;
 $text-secondary-hover-color: #e0e0e0;
@@ -29,3 +29,8 @@ $button-hover-border: 4px solid #00a0c0;
 $button-disabled-background-color: #006080;
 $button-disabled-text-color: #102028;
 $button-disabled-border: 4px solid #004060;
+
+
+// Topbar
+$topbar-background-color: #006898;
+$topbar-separator-color: #ffffff;
\ No newline at end of file
diff --git a/client/src/components/LoginBox.vue b/client/src/components/LoginBox.vue
index 48574e4..64512d2 100644
--- a/client/src/components/LoginBox.vue
+++ b/client/src/components/LoginBox.vue
@@ -14,23 +14,16 @@ import { useRouter } from '#app'
 import { ref, Ref } from 'vue'
 import useAuth from '@/composables/useAuth';
 
-const { authenticate, isAuthenticated } = useAuth()
-const router = useRouter()
-
 const vFocus = { mounted: (el: HTMLElement) => el.focus() }
 
 const authCode: Ref<string> = ref('')
 const errorMessage: Ref<string> = ref('')
 
-if (await isAuthenticated()) {
-  router.push('/play')
-}
-
 const login = (): void => {
   errorMessage.value = ''
 
-  authenticate(authCode.value).then(() => {
-    router.push('/play')
+  useAuth().login(authCode.value).then(() => {
+    useRouter().push('/play')
   }).catch(() => {
     errorMessage.value = 'login failed'
   })
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
new file mode 100644
index 0000000..b8877e1
--- /dev/null
+++ b/client/src/components/TopBar.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="topbar__container">
+    <div class="topbar__username">
+      &lt;username&gt;
+    </div>
+    <div class="topbar__separator" />
+    <div class="topbar__actionbar">
+      Topbar
+    </div>
+    <div class="topbar__separator" />
+    <div class="topbar__logout-button-container">
+      <Button class="topbar__logout-button" :border="false" @click="actionLogout">Logout</Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from '#app'
+import useAuth from '@/composables/useAuth';
+
+const actionLogout = async () => {
+  await useAuth().logout()
+  useRouter().push('/')
+}
+
+
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.topbar {
+  &__container {
+    display: flex;
+    width: 100%;
+    height: 64px;
+    align-items: center;
+    background-color: $topbar-background-color;
+  }
+
+  &__username,
+  &__logout-button-container {
+    width: 128px;
+    padding: 0 16px;
+    text-align: center;
+    color: $text-primary-color;
+  }
+  &__actionbar {
+    flex-grow: 1;
+  }
+
+  &__separator {
+    width: 1px;
+    height: calc(64px - 2 * 16px);
+    margin: 16px 0;
+    background-color: $topbar-separator-color;
+  }
+
+  &__logout-button {
+    color: $text-primary-color;
+
+    &:hover {
+      color: $text-primary-hover-color;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/src/composables/useAuth.ts b/client/src/composables/useAuth.ts
index d94d947..1cb1088 100644
--- a/client/src/composables/useAuth.ts
+++ b/client/src/composables/useAuth.ts
@@ -1,5 +1,6 @@
 export interface useAuth {
-  authenticate(authCode: string): Promise<void>
+  login(authCode: string): Promise<void>
+  logout(): Promise<void>
   isAuthenticated(): Promise<boolean>
 }
 
@@ -12,7 +13,7 @@ export default () => {
         .catch(() => false)
     },
 
-    authenticate: async (authCode: string): Promise<void> => {
+    login: async (authCode: string): Promise<void> => {
       if (authCode.length != 6) {
         throw Error('login failed')
       }
@@ -21,5 +22,9 @@ export default () => {
         throw Error('login failed')
       }
     },
+
+    logout: async (): Promise<void> => {
+      await $fetch('/api/logout')
+    },
   }
 }
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index e2418c7..752b237 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -19,8 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig } from '#app'
+import { useRuntimeConfig, useRouter } from '#app'
+import useAuth from '@/composables/useAuth'
+
 const config = useRuntimeConfig()
+
+if (await useAuth().isAuthenticated()) {
+  useRouter().push('/play')
+}
 </script>
 
 <style lang="scss">
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
new file mode 100644
index 0000000..db5cbc1
--- /dev/null
+++ b/client/src/pages/play.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="page-play__container">
+    <TopBar />
+    wohoo!
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from '#app'
+import useAuth from '@/composables/useAuth';
+
+const { isAuthenticated } = useAuth()
+const router = useRouter()
+if (!await isAuthenticated()) {
+  router.push('/')
+}
+</script>
+
+<style lang="scss">
+.page-play {
+  &__container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file