feat: add play page and topbar with logout button

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;

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'
   })

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>

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')
+    },
   }
 }

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">

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>