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

@@ -6,12 +6,16 @@ interface UseOAuthComposableState {
    * Shows a popup window with google authorization
    */
   showGoogleAuthPopup: () => void;
+  /**
+   * Logs out the user
+   */
+  logoutTheUser: () => Promise<void>;
 }
 
 /**
- * Methods for working with OAuth (Google)
+ * Methods for working with Auth
  */
-export default function useOAuth(): UseOAuthComposableState {
+export default function useAuth(): UseOAuthComposableState {
   /**
    * Google OAuth URL
    */
@@ -54,8 +58,16 @@ export default function useOAuth(): UseOAuthComposableState {
       }
     });
   }
+  /**
+   *Logs out the user by deleting the refresh token in local strorage
+   */
+  async function logoutTheUser(): Promise<void> {
+    await authService.logout();
+  }
 
   return {
     showGoogleAuthPopup,
+    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>