From 06b306473bc2c21fbe28273deb29a01982860e81 Mon Sep 17 00:00:00 2001
From: eris <femmediscord@gmail.com>
Date: Sun, 7 Aug 2022 06:32:05 +0000
Subject: [PATCH] Move logout button to settings modal

---
 src/components/settings_modal/settings_modal.js   |  8 ++++++++
 src/components/settings_modal/settings_modal.scss |  5 +++++
 src/components/settings_modal/settings_modal.vue  | 14 ++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 0a72dca1..b1bb4eab 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -14,6 +14,7 @@ import {
   faTimes,
   faFileUpload,
   faFileDownload,
+  faSignOutAlt,
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -28,6 +29,7 @@ library.add(
   faWindowMinimize,
   faFileUpload,
   faFileDownload,
+  faSignOutAlt,
   faChevronDown
 )
 
@@ -66,6 +68,11 @@ const SettingsModal = {
     closeModal () {
       this.$store.dispatch('closeSettingsModal')
     },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('closeSettingsModal')
+      this.$store.dispatch('logout')
+    },
     peekModal () {
       this.$store.dispatch('togglePeekSettingsModal')
     },
@@ -150,6 +157,7 @@ const SettingsModal = {
     }
   },
   computed: {
+    currentUser () { return this.$store.state.users.currentUser },
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index f5861229..68e8eb6d 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -76,5 +76,10 @@
         transform: translateY(calc(100% - 50px));
       }
     }
+
+    .logout-button {
+      position: absolute;
+      right: 20px;
+    }
   }
 }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 7b457371..25269ed9 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -111,6 +111,20 @@
           id="unscrolled-content"
           class="extra-content"
         />
+        <button
+          v-if="currentUser"
+          class="button-default logout-button"
+          :title="$t('login.logout')"
+          :aria-label="$t('login.logout')"
+          @click.prevent="logout"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+          />
+          <span>{{ $t('login.logout') }}</span>
+        </button>
       </div>
     </div>
   </Modal>