Move logout button to settings modal

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
     },

src/components/settings_modal/settings_modal.scss

@@ -76,5 +76,10 @@
         transform: translateY(calc(100% - 50px));
       }
     }
+
+    .logout-button {
+      position: absolute;
+      right: 20px;
+    }
   }
 }

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>