Added Button to Logout in Settings

src/application/i18n/messages/en.json

@@ -1,6 +1,7 @@
 {
   "auth": {
-    "login": "Login"
+    "login": "Login",
+    "logout": "Logout"
   },
   "settings": {
     "title": "Settings",

src/application/services/useOAuth.ts → src/application/services/useAuth.ts

@@ -8,6 +8,13 @@ interface UseOAuthComposableState {
   showGoogleAuthPopup: () => void;
 }
 
+interface UseAuthComposableState {
+  /**
+   * logouts the user by deleting the refresh token in the local storage
+   */
+  logoutTheUser: () => Promise<void>;
+}
+
 /**
  * Methods for working with OAuth (Google)
  */
@@ -59,3 +66,19 @@ export default function useOAuth(): UseOAuthComposableState {
     showGoogleAuthPopup,
   };
 }
+
+/**
+ * Methods for working with Auth tokens
+ */
+export function useAuth(): UseAuthComposableState {
+  /**
+   * Deletes the refresh token in the local storage
+   */
+  async function logoutTheUser(): Promise<void> {
+    await authService.logout();
+  }
+
+  return {
+    logoutTheUser,
+  };
+}

src/presentation/components/header/HeaderLoginButton.vue

@@ -11,10 +11,10 @@
 import { IconUser } from '@codexteam/icons';
 import { useI18n } from 'vue-i18n';
 import Button from '@/presentation/components/button/Button.vue';
-import useOAuth from '@/application/services/useOAuth';
+import useAuth from '@/application/services/useAuth';
 
 const { t } = useI18n();
-const { showGoogleAuthPopup } = useOAuth();
+const { showGoogleAuthPopup } = useAuth();
 
 /**
  * Shows Google Authentication in a popup

src/presentation/pages/Settings.vue

@@ -1,14 +1,36 @@
 <template>
   <h1>{{ t('settings.title') }}</h1>
   <ThemeButton />
+  <Button
+    :text="t('auth.logout')"
+    type="primary"
+    :icon="IconUnlink"
+    @click="logout"
+  />
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import ThemeButton from '@/presentation/components/theme/ThemeButton.vue';
+import ThemeButton from '../components/theme/ThemeButton.vue';
+import Button from '../components/button/Button.vue';
+import { IconUnlink } from '@codexteam/icons';
+import { useRouter } from 'vue-router';
+import { useAuth } from '@/application/services/useAuth';
 
 const { t } = useI18n();
-</script>
+const router = useRouter();
+const { logoutTheUser } = useAuth();
 
+/**
+ * Function to logout the user by deleting the refresh  token from the local storage and redirecting to the main page
+ */
+async function logout() {
+  await logoutTheUser().then(() => {
+    router.push({ path: '/' }).then(() => {
+      window.location.reload();
+    });
+  });
+}
+</script>
 <style scoped>
 </style>