From 58155abeb1e60a0b1585bf6dfdcd873c04b5b787 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:51:13 -0500
Subject: [PATCH] Add confirmation for logout
---
.../confirm_modal/confirm_modal.vue | 1 +
src/components/desktop_nav/desktop_nav.js | 12 ++++++---
src/components/desktop_nav/desktop_nav.vue | 10 +++++++
src/components/mobile_nav/mobile_nav.js | 27 ++++++++++++++++---
src/components/mobile_nav/mobile_nav.vue | 18 +++++++++++++
5 files changed, 62 insertions(+), 6 deletions(-)
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 250a6984..fa354285 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,7 @@
<template>
<dialog-modal
v-if="showing"
+ class="confirm-modal"
:onCancel="onCancel"
>
<template v-slot:header>
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 3307b5d5..9ba5abc4 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,
@@ -38,7 +39,8 @@ library.add(
export default {
components: {
- SearchBar
+ SearchBar,
+ ConfirmModal
},
data: () => ({
searchBarHidden: true,
@@ -48,7 +50,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 },
@@ -92,7 +95,10 @@ 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 () {
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 25b4fe8e..cdf33fac 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -167,6 +167,16 @@
</a>
</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>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 7a356921..0d4f6f3b 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,5 +1,6 @@
import SideDrawer from '../side_drawer/side_drawer.vue'
import Notifications from '../notifications/notifications.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
import GestureService from '../../services/gesture_service/gesture_service'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -18,11 +19,13 @@ library.add(
const MobileNav = {
components: {
SideDrawer,
- Notifications
+ Notifications,
+ ConfirmModal
},
data: () => ({
notificationsCloseGesture: undefined,
- notificationsOpen: false
+ notificationsOpen: false,
+ showingConfirmLogout: false
}),
created () {
this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -47,7 +50,11 @@ const MobileNav = {
hideSiteName () {
return this.mergedConfig.hideSiteName
},
- sitename () { return this.$store.state.instance.name }
+ sitename () { return this.$store.state.instance.name },
+ shouldConfirmLogout () {
+ return this.$store.getters.mergedConfig.modalOnLogout
+ },
+ ...mapGetters(['unreadChatCount'])
},
methods: {
toggleMobileSidebar () {
@@ -73,9 +80,23 @@ const MobileNav = {
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()
},
markNotificationsAsSeen () {
// this.$refs.notifications.markAsSeen()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 308c8d57..7dc343c6 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -76,6 +76,16 @@
ref="sideDrawer"
:logout="logout"
/>
+ <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>
</div>
</template>
@@ -206,6 +216,14 @@
}
}
}
+ .confirm-modal.dark-overlay {
+ &::before {
+ z-index: 3000;
+ }
+ .dialog-modal.panel {
+ z-index: 3001;
+ }
+ }
}
</style>