show logout button

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/components/Header.vue

@@ -5,13 +5,18 @@
     <div @click="() => toggleDark()">
       <IconLightDark class="h-6 w-6 cursor-pointer" />
     </div>
-    <!-- <div><IconMenu class="h-8 w-8 cursor-pointer"></IconMenu></div> -->
+    <div v-if="isAuthenticated" @click="() => setToken('')">
+      <IconLogout class="h-6 w-6 cursor-pointer"></IconLogout>
+    </div>
   </header>
 </template>
 
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
-import { IconLightDark, IconMenu } from '@/components/icons'
+import { IconLightDark, IconLogout } from '@/components/icons'
+import { useAuth } from '@/composables/'
+
+const { isAuthenticated, setToken } = useAuth()
 
 const toggleDark = useToggle(useDark())
 </script>

src/components/icons/IconLogout.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M16 17v-3H9v-4h7V7l5 5l-5 5M14 2a2 2 0 0 1 2 2v2h-2V4H5v16h9v-2h2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

src/components/icons/IconMenu.vue

@@ -1,8 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>

src/components/icons/index.ts

@@ -5,5 +5,5 @@ export { default as IconLink } from './IconLink.vue'
 export { default as IconSpinner } from './IconSpinner.vue'
 export { default as IconNoGift } from './IconNoGift.vue'
 export { default as IconLightDark } from './IconLightDark.vue'
-export { default as IconMenu } from './IconMenu.vue'
+export { default as IconLogout } from './IconLogout.vue'
 export { default as IconCloudQuestion } from './IconCloudQuestion.vue'

src/composables/index.ts

@@ -1,3 +1,5 @@
 export * from './useWishlistsStore'
 export * from './useWishlistStore'
 export * from './useModal'
+export * from './useAxios'
+export * from './useAuth'

src/composables/useAuth.ts

@@ -1,4 +1,4 @@
-import { readonly } from 'vue'
+import { computed, readonly } from 'vue'
 import { useStorage } from '@vueuse/core'
 
 const state = useStorage('auth-token', '')
@@ -7,9 +7,14 @@ const setToken = (token: string): void => {
   state.value = token
 }
 
-export default () => {
+const isAuthenticated = computed(() => {
+  return state.value !== ''
+})
+
+export const useAuth = () => {
   return {
     setToken,
+    isAuthenticated,
     token: readonly(state),
   }
 }

src/composables/useAxios.ts

@@ -7,7 +7,7 @@ import axios, {
 import { apiConfig } from '@/config'
 import { ref } from 'vue'
 import router from '../router'
-import useAuth from './useAuth'
+import { useAuth } from './useAuth'
 
 export interface CustomAxiosError extends AxiosError {
   ignore: boolean

src/views/LoginView.vue

@@ -3,7 +3,7 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Form } from 'vee-validate'
 import { object, string } from 'yup'
-import useAuth from '@/composables/useAuth'
+import { useAuth } from '@/composables'
 import BaseButton from '@/components/BaseButton.vue'
 import TextInput from '@/components/TextInput.vue'