commit: c202c89ca0f8c9bc1957bff3bbe3ea39e21ddbba
parent 0bfe100ef77ca36e2789310b204987ea54ec2696
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:51:13 -0500
Add confirmation for logout
Diffstat:
5 files changed, 76 insertions(+), 6 deletions(-)
diff --git 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
@@ -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
@@ -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>
diff --git 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 NavigationPins from 'src/components/navigation/navigation_pins.vue'
@@ -25,12 +26,14 @@ const MobileNav = {
components: {
SideDrawer,
Notifications,
- NavigationPins
+ NavigationPins,
+ ConfirmModal
},
data: () => ({
notificationsCloseGesture: undefined,
notificationsOpen: false,
- notificationsAtTop: true
+ notificationsAtTop: true,
+ showingConfirmLogout: false
}),
created () {
this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -57,7 +60,11 @@ const MobileNav = {
...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
chatsPinned () {
return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
- }
+ },
+ shouldConfirmLogout () {
+ return this.$store.getters.mergedConfig.modalOnLogout
+ },
+ ...mapGetters(['unreadChatCount'])
},
methods: {
toggleMobileSidebar () {
@@ -88,9 +95,23 @@ const MobileNav = {
scrollMobileNotificationsToTop () {
this.$refs.mobileNotifications.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
@@ -88,6 +88,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>
@@ -235,6 +245,14 @@
}
}
}
+ .confirm-modal.dark-overlay {
+ &::before {
+ z-index: 3000;
+ }
+ .dialog-modal.panel {
+ z-index: 3001;
+ }
+ }
}
</style>
