feat(logout): adds logout button to the settings page

Author: dvcol

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -6,7 +6,6 @@ import { computed, defineProps, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import type { DropdownProps } from 'naive-ui';
-
 import type { Component } from 'vue';
 
 import type { ArrayElement } from '~/utils/typescript.utils';
@@ -21,13 +20,9 @@ import IconLogOut from '~/components/icons/IconLogOut.vue';
 import { Route } from '~/router';
 import { TraktService } from '~/services/trakt.service';
 import { ExternaLinks } from '~/settings/external.links';
-import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { logger } from '~/stores/settings/log.store';
-import {
-  defaultUser,
-  useUserSettingsStore,
-  useUserSettingsStoreRefs,
-} from '~/stores/settings/user.store';
+import { useLogout } from '~/stores/settings/use-logout';
+import { defaultUser, useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 
 import { chromeRuntimeId, createTab } from '~/utils/browser/browser.utils';
@@ -36,8 +31,6 @@ const i18n = useI18n('navbar', 'settings');
 const router = useRouter();
 
 const { user, userSetting, userSettings } = useUserSettingsStoreRefs();
-const { setCurrentUser } = useUserSettingsStore();
-const { syncRestoreAuth } = useAuthSettingsStore();
 
 const avatar = computed(() => userSetting.value?.user?.images?.avatar?.full);
 const username = computed(() => userSetting.value?.user?.username);
@@ -106,10 +99,7 @@ const options = computed<DropdownProps['options']>(() => {
   return baseOptions;
 });
 
-const loadUser = async (account: string) => {
-  const auth = await syncRestoreAuth(account);
-  return TraktService.importAuthentication(auth);
-};
+const { loadUser, logout } = useLogout();
 
 const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
   switch (key) {
@@ -124,10 +114,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     case 'login':
       return TraktService.approve({ prompt: true });
     case 'logout':
-      await TraktService.logout();
-      await setCurrentUser();
-      if (user.value !== defaultUser) return loadUser(user.value);
-      return router.push(Route.Login);
+      return logout();
     default:
       if (typeof label === 'string' && key.startsWith('user-')) {
         return loadUser(label);

src/components/views/settings/SettingsAccount.vue

@@ -8,16 +8,19 @@ import type { UserSetting } from '~/models/trakt-service.model';
 import TextField from '~/components/common/typography/TextField.vue';
 import IconAccount from '~/components/icons/IconAccount.vue';
 
+import IconLogOut from '~/components/icons/IconLogOut.vue';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { logger } from '~/stores/settings/log.store';
+import { useLogout } from '~/stores/settings/use-logout';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
 import { chromeRuntimeId } from '~/utils/browser/browser.utils';
 
 const i18n = useI18n('settings', 'account');
 
 const { userSetting } = useUserSettingsStoreRefs();
+const { logout } = useLogout();
 
 const fallback = ref<boolean>(!chromeRuntimeId);
 const avatar = computed(() => {
@@ -149,6 +152,16 @@ const onClick = () => {
       </NFlex>
     </NCard>
   </NFlex>
+
+  <!--   Footer   -->
+  <NFlex class="footer" align="center" justify="center">
+    <NButton secondary type="error" @click="logout()">
+      <span>{{ i18n('logout', 'common', 'button') }}</span>
+      <template #icon>
+        <NIcon :component="IconLogOut" />
+      </template>
+    </NButton>
+  </NFlex>
 </template>
 
 <style lang="scss" scoped>
@@ -157,16 +170,13 @@ const onClick = () => {
 .account-card {
   --border-color: var(--white-10);
 
+  margin-bottom: 1.5rem;
   background: var(--bg-black-soft);
 
   &:hover {
     --border-color: var(--white-15);
   }
 
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
   .avatar {
     --n-avatar-size-override: 8rem;
 
@@ -202,4 +212,9 @@ const onClick = () => {
     min-width: 31%;
   }
 }
+
+.footer {
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+}
 </style>

src/i18n/en/common/button.json

@@ -42,5 +42,9 @@
   "common__button__off": {
     "message": "Off",
     "description": "Button to turn off an item."
+  },
+  "common__button__logout": {
+    "message": "Logout",
+    "description": "Button to logout."
   }
 }

src/stores/settings/use-logout.ts

@@ -0,0 +1,28 @@
+import { useRouter } from 'vue-router';
+
+import { Route } from '~/router';
+import { TraktService } from '~/services/trakt.service';
+import { useAuthSettingsStore } from '~/stores/settings/auth.store';
+import { defaultUser, useUserSettingsStore, useUserSettingsStoreRefs } from '~/stores/settings/user.store';
+
+export const useLogout = () => {
+  const router = useRouter();
+  const { user } = useUserSettingsStoreRefs();
+  const { setCurrentUser } = useUserSettingsStore();
+  const { syncRestoreAuth } = useAuthSettingsStore();
+
+  const loadUser = async (account: string) => {
+    console.info('loadUser', account);
+    const auth = await syncRestoreAuth(account);
+    return TraktService.importAuthentication(auth);
+  };
+
+  const logout = async () => {
+    await TraktService.logout();
+    await setCurrentUser();
+    if (user.value !== defaultUser) return loadUser(user.value);
+    return router.push(Route.Login);
+  };
+
+  return { logout, loadUser };
+};