fix(ui/sidebar): unable to logout if user is not admin in control center

ArtalkJS · May 24, 2024 · fdfeef8 · fdfeef8
1 parent 824f122
commit fdfeef8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/ui/artalk-sidebar/src/components/Header.vue b/ui/artalk-sidebar/src/components/Header.vue
@@ -4,9 +4,10 @@ import MD5 from '../lib/md5'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '../stores/user'
 import { useNavStore } from '../stores/nav'
-import { artalk } from '../global'
+import { artalk, isOpenFromSidebar } from '../global'
 
 const nav = useNavStore()
+const router = useRouter()
 const user = useUserStore()
 const { t } = useI18n()
 const { site: curtSite, isAdmin, email } = storeToRefs(user)
@@ -16,6 +17,19 @@ const userAvatarImgURL = computed(() => {
   if (!conf) return ``
   return `${conf.mirror.replace(/\/$/, '')}/${MD5(email.value)}?${conf.params.replace(/^\?/, '')}`
 })
+
+const avatarClickHandler = () => {
+  if (!isOpenFromSidebar()) logout()
+}
+
+const logout = () => {
+  if (!window.confirm(t('logoutConfirm'))) return
+
+  useUserStore().logout()
+  nextTick(() => {
+    router.replace('/login')
+  })
+}
 </script>
 
 <template>
@@ -30,7 +44,7 @@ const userAvatarImgURL = computed(() => {
       </div>
     </template>
     <template v-else>
-      <div class="avatar">
+      <div class="avatar" @click="avatarClickHandler">
         <img :src="userAvatarImgURL" />
       </div>
     </template>

diff --git a/ui/artalk-sidebar/src/components/SiteSwitcher.vue b/ui/artalk-sidebar/src/components/SiteSwitcher.vue
@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia'
 import { useNavStore } from '../stores/nav'
 import { useUserStore } from '../stores/user'
-import { bootParams } from '@/global'
+import { isOpenFromSidebar } from '@/global'
 
 const el = ref<HTMLElement | null>(null)
 
@@ -69,6 +69,8 @@ watch(curtShow, (value) => {
 })
 
 function logout() {
+  if (!window.confirm(t('logoutConfirm'))) return
+
   useUserStore().logout()
   nextTick(() => {
     router.replace('/login')
@@ -92,7 +94,7 @@ function logout() {
         </div>
 
         <!-- Logout Button -->
-        <div v-if="!bootParams.user?.email" class="atk-site-item" @click="logout()">
+        <div v-if="!isOpenFromSidebar()" class="atk-site-item" @click="logout()">
           <svg
             class="atk-site-logo"
             stroke="currentColor"

diff --git a/ui/artalk-sidebar/src/global.ts b/ui/artalk-sidebar/src/global.ts
@@ -59,3 +59,7 @@ export function initArtalk() {
     },
   })
 }
+
+export function isOpenFromSidebar() {
+  return !!bootParams.user?.email
+}
diff --git a/ui/artalk-sidebar/src/i18n/messages.ts b/ui/artalk-sidebar/src/i18n/messages.ts
@@ -77,6 +77,7 @@ const en = {
   loginFailure: 'Login failure',
   login: 'Login',
   logout: 'Logout',
+  logoutConfirm: 'Are you sure you want to log out?',
   loginSelectHint: 'Please select the account you wish to log into:',
 }
 
@@ -159,6 +160,7 @@ const zhCN: typeof en = {
   loginFailure: '登录发生异常',
   login: '登录',
   logout: '退出登录',
+  logoutConfirm: '确定要退出登录吗？',
   loginSelectHint: '请选择您要登录的账户：',
 }
 
@@ -241,6 +243,7 @@ const zhTW: typeof en = {
   loginFailure: '登入失敗',
   login: '登入',
   logout: '登出',
+  logoutConfirm: '確定要登出嗎？',
   loginSelectHint: '請選擇您要登入的帳號：',
 }