Add confirmation for logout

2 files changed, 33 insertions, 3 deletions

diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 08c0e44e..745b1a81 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
@@ -30,7 +31,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -40,7 +42,8 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    showingConfirmLogout: false
   }),
   computed: {
     enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
@@ -73,15 +76,32 @@ export default {
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    privateMode () { return this.$store.state.instance.private },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    }
   },
   methods: {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 07bf8005..7db94a37 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,6 +76,16 @@
         </button>
       </div>
     </div>
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>