From 35351057449f1e942d100a58e1d4bf9dada2e184 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Fri, 7 Mar 2025 21:46:44 +0100
Subject: [PATCH] Pull Log Out button into its own component

---
 assets/global.css           |  5 +++++
 components/Header.vue       | 20 ++------------------
 components/LogOutButton.vue | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 18 deletions(-)
 create mode 100644 components/LogOutButton.vue

diff --git a/assets/global.css b/assets/global.css
index b392990..8ce34a5 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -53,6 +53,11 @@ a {
 	}
 }
 
+button {
+	font-family: inherit;
+	font-size: inherit;
+}
+
 label {
 	display: block;
 }
diff --git a/components/Header.vue b/components/Header.vue
index 9416909..b4cb0d4 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -12,7 +12,7 @@
 				(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
 				{{ session.account.type }}
 				<NuxtLink to="/account/settings">Settings</NuxtLink>
-				<button type="button" @click="logOut">Log out</button>
+				<LogOutButton />
 			</template>
 			<template v-else>
 				<NuxtLink to="/login">Log In</NuxtLink>
@@ -22,19 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-const { data: session, refresh: sessionRefresh } = useAccountSession();
-
-async function logOut() {
-	try {
-		const res = await $fetch.raw("/api/auth/session", {
-			method: "DELETE",
-		});
-		await sessionRefresh();
-
-	} catch (err: any) {
-		alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
-	}
-}
+const { data: session } = useAccountSession();
 </script>
 
 <style scoped>
@@ -58,8 +46,4 @@ nav ul {
 	display: flex;
 	column-gap: 0.5em;
 }
-button {
-	font-family: inherit;
-	font-size: inherit;
-}
 </style>
diff --git a/components/LogOutButton.vue b/components/LogOutButton.vue
new file mode 100644
index 0000000..a0362fe
--- /dev/null
+++ b/components/LogOutButton.vue
@@ -0,0 +1,19 @@
+<template>
+	<button type="button" @click="logOut">Log out</button>
+</template>
+
+<script setup lang="ts">
+const { refresh: sessionRefresh } = useAccountSession();
+
+async function logOut() {
+	try {
+		await $fetch.raw("/api/auth/session", {
+			method: "DELETE",
+		});
+		await sessionRefresh();
+
+	} catch (err: any) {
+		alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
+	}
+}
+</script>