Merge pull request #104 from kodaline/issue_93

add: user dropdown

components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     HeroiconsAdjustmentsVertical: typeof import('~icons/heroicons/adjustments-vertical')['default']
     HeroiconsArrowDown20Solid: typeof import('~icons/heroicons/arrow-down20-solid')['default']
     HeroiconsArrowPath: typeof import('~icons/heroicons/arrow-path')['default']
+    HeroiconsArrowRightOnRectangle: typeof import('~icons/heroicons/arrow-right-on-rectangle')['default']
     HeroiconsBars3Solid: typeof import('~icons/heroicons/bars3-solid')['default']
     HeroiconsBoltSolid: typeof import('~icons/heroicons/bolt-solid')['default']
     HeroiconsChevronUpDown20Solid: typeof import('~icons/heroicons/chevron-up-down20-solid')['default']
@@ -28,12 +29,15 @@ declare module 'vue' {
     HeroiconsHome20Solid: typeof import('~icons/heroicons/home20-solid')['default']
     HeroiconsInformationCircleSolid: typeof import('~icons/heroicons/information-circle-solid')['default']
     HeroiconsLink20Solid: typeof import('~icons/heroicons/link20-solid')['default']
+    HeroiconsLogout: typeof import('~icons/heroicons/logout')['default']
+    HeroiconsLogoutSolid: typeof import('~icons/heroicons/logout-solid')['default']
     HeroiconsMagnifyingGlass20Solid: typeof import('~icons/heroicons/magnifying-glass20-solid')['default']
     HeroiconsMicrophoneSolid: typeof import('~icons/heroicons/microphone-solid')['default']
     HeroiconsMoonSolid: typeof import('~icons/heroicons/moon-solid')['default']
     HeroiconsPaperAirplaneSolid: typeof import('~icons/heroicons/paper-airplane-solid')['default']
     HeroiconsSunSolid: typeof import('~icons/heroicons/sun-solid')['default']
     HeroiconsTrashSolid: typeof import('~icons/heroicons/trash-solid')['default']
+    HeroiconsUserSolid: typeof import('~icons/heroicons/user-solid')['default']
     HeroiconsXMark20Solid: typeof import('~icons/heroicons/x-mark20-solid')['default']
     InputBox: typeof import('./src/components/InputBox.vue')['default']
     Listbox: typeof import('@headlessui/vue')['Listbox']
@@ -76,9 +80,9 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SelectBox: typeof import('./src/components/SelectBox.vue')['default']
     SidePanel: typeof import('./src/components/SidePanel.vue')['default']
-    ThemeButton: typeof import('./src/components/ThemeButton.vue')['default']
     TransitionChild: typeof import('@headlessui/vue')['TransitionChild']
     TransitionRoot: typeof import('@headlessui/vue')['TransitionRoot']
     UseImage: typeof import('@vueuse/components')['UseImage']
+    UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
   }
 }

src/components/Header.vue

@@ -81,7 +81,7 @@ const showSettings = computed(
 			</ul>
 		</div>
 		<div class="navbar-end">
-			<ThemeButton />
+			<UserDropdown />
 		</div>
 	</div>
 </template>

src/components/UserDropdown.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useMainStore } from '@stores/useMainStore'
+import githubLight from 'highlight.js/styles/github.css?raw'
+import githubDark from 'highlight.js/styles/github-dark.css?raw'
+
+const store = useMainStore()
+const { logoutCurrentUser, toggleDark } = store
+const { isDark, jwtPayload } = storeToRefs(store)
+const { css } = useStyleTag(isDark.value ? githubDark : githubLight)
+
+watchEffect(() => {
+	css.value = isDark.value ? githubDark : githubLight
+})
+</script>
+
+<template>
+	<div class="dropdown dropdown-bottom">
+		<button class="btn btn-circle btn-ghost">
+			<heroicons-user-solid class="size-6" />
+		</button>
+		<ul tabindex="0" class="dropdown-content join join-vertical !right-0 z-10 mt-6 w-40 p-0 text-sm">
+			<li>
+				<button class="font-small btn join-item pointer-events-none w-full cursor-not-allowed flex-nowrap px-2 text-left opacity-100">
+					<span class="grow text-right"> <span class="opacity-60">Signed in as</span> {{ jwtPayload?.username }} </span>
+				</button>
+			</li>
+			<li>
+				<button class="font-small btn join-item w-full flex-nowrap px-2 text-left" @click="toggleDark()">
+					<span class="grow text-right"> Change Theme </span>
+					<span class="rounded-lg p-1">
+						<button class="swap opacity-50">
+							<input v-model="isDark" type="checkbox" class="modal-toggle" />
+							<heroicons-sun-solid class="swap-on size-5" />
+							<heroicons-moon-solid class="swap-off size-5" />
+						</button>
+					</span>
+				</button>
+			</li>
+			<li>
+				<button class="font-small btn join-item w-full flex-nowrap px-2 text-right" @click="logoutCurrentUser()">
+					<span class="grow text-right"> Logout </span>
+					<span class="rounded-lg p-1">
+						<button class="opacity-50" @click="logoutCurrentUser()">
+							<heroicons-arrow-right-on-rectangle class="size-5" />
+						</button>
+					</span>
+				</button>
+			</li>
+		</ul>
+	</div>
+</template>

src/stores/useMainStore.ts

@@ -83,12 +83,21 @@ export const useMainStore = defineStore('main', () => {
 		},
 	})
 
+	const logoutCurrentUser = () => {
+		const cookies = useCookies().getAll()
+		Object.keys(cookies).forEach(key => delete cookies[key])
+		cookie.value = ''
+		// TODO: find different solution for this redirect, maybe having a LoginView and moving login page to frontend is an idea
+		window.location.href = window.location.origin + '/auth/login'
+	}
+
 	return {
 		isDark,
 		pluginsFilters,
 		toggleDark,
 		cookie,
 		jwtPayload,
+		logoutCurrentUser,
 	}
 })