feat: add ADMIN_USER_ROLE for user access admin panel (#363)

frontend/src/api/index.js

@@ -22,6 +22,7 @@ const apiFetch = async (path, options = {}) => {
             data: options.body || null,
             headers: {
                 'x-user-token': userJwt.value,
+                'x-user-access-token': userSettings.value.access_token,
                 'x-custom-auth': auth.value,
                 'x-admin-auth': adminAuth.value,
                 'Authorization': `Bearer ${jwt.value}`,

frontend/src/store/index.js

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { createGlobalState, useStorage, useDark, useToggle, useLocalStorage } from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
@@ -74,9 +74,14 @@ export const useGlobalState = createGlobalState(
             user_email: '',
             /** @type {number} */
             user_id: 0,
+            /** @type {boolean} */
+            is_admin: false,
+            /** @type {string | null} */
+            access_token: null,
             /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
             user_role: null,
         });
+        const showAdminPage = computed(() => !!adminAuth.value || userSettings.value.is_admin);
         const telegramApp = ref(window.Telegram?.WebApp || {});
         const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
         return {
@@ -108,6 +113,7 @@ export const useGlobalState = createGlobalState(
             useSideMargin,
             telegramApp,
             isTelegram,
+            showAdminPage,
         }
     },
 )

frontend/src/views/Admin.vue

@@ -21,7 +21,8 @@ import Telegram from './admin/Telegram.vue';
 import Webhook from './admin/Webhook.vue';
 
 const {
-  adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
+  adminAuth, showAdminAuth, adminTab, loading,
+  globalTabplacement, showAdminPage
 } = useGlobalState()
 const message = useMessage()
 
@@ -81,7 +82,7 @@ const { t } = useI18n({
 });
 
 onMounted(async () => {
-  if (!adminAuth.value) {
+  if (!showAdminPage.value) {
     showAdminAuth.value = true;
     return;
   }
@@ -100,7 +101,7 @@ onMounted(async () => {
         </n-button>
       </template>
     </n-modal>
-    <n-tabs type="card" v-model:value="adminTab" :placement="globalTabplacement">
+    <n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement">
       <n-tab-pane name="account" :tab="t('account')">
         <n-tabs type="bar" animated>
           <n-tab-pane name="account" :tab="t('account')">

frontend/src/views/Header.vue

@@ -17,8 +17,8 @@ import { getRouterPathWithLang } from '../utils'
 const message = useMessage()
 
 const {
-    toggleDark, isDark, isTelegram,
-    showAuth, adminAuth, auth, loading, openSettings
+    toggleDark, isDark, isTelegram, showAdminPage,
+    showAuth, auth, loading, openSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -134,7 +134,7 @@ const menuOptions = computed(() => [
                 icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
             }
         ),
-        show: !!adminAuth.value,
+        show: showAdminPage.value,
         key: "admin"
     },
     {
@@ -223,6 +223,11 @@ const logoClick = async () => {
 
 onMounted(async () => {
     await api.getOpenSettings(message);
+    try {
+        await api.getUserSettings(message);
+    } catch (error) {
+        console.error(error);
+    }
 });
 </script>
 

frontend/src/views/admin/Account.vue

@@ -9,8 +9,8 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'
 
 const {
-    adminAuth, showAdminAuth, loading,
-    adminTab, adminMailTabAddress, adminSendBoxTabAddress
+    showAdminAuth, loading, adminTab,
+    adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
 
@@ -252,10 +252,6 @@ watch([page, pageSize], async () => {
 })
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
     await fetchData()
 })
 </script>

frontend/src/views/admin/Mails.vue

@@ -6,10 +6,7 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';
 
-const {
-    adminAuth, showAdminAuth,
-    adminMailTabAddress
-} = useGlobalState()
+const { adminMailTabAddress } = useGlobalState()
 
 const { t } = useI18n({
     messages: {
@@ -48,13 +45,6 @@ const fetchMailData = async (limit, offset) => {
 const deleteMail = async (curMailId) => {
     await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
 };
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-})
 </script>
 
 <template>

frontend/src/views/admin/MailsUnknow.vue

@@ -1,12 +1,7 @@
 <script setup>
-import { onMounted } from 'vue';
-
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';
 
-const { adminAuth, showAdminAuth } = useGlobalState()
-
 const fetchMailUnknowData = async (limit, offset) => {
     return await api.fetch(
         `/admin/mails_unknow`
@@ -18,17 +13,10 @@ const fetchMailUnknowData = async (limit, offset) => {
 const deleteMail = async (curMailId) => {
     await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
 };
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-})
 </script>
 
 <template>
-    <div v-if="adminAuth" style="margin-top: 10px;">
+    <div style="margin-top: 10px;">
         <MailBox :enableUserDeleteEmail="true" :fetchMailData="fetchMailUnknowData" :deleteMail="deleteMail" />
     </div>
 </template>

frontend/src/views/admin/Maintenance.vue

@@ -1,12 +1,10 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n'
 import { CleaningServicesFilled } from '@vicons/material'
 
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { adminAuth, showAdminAuth } = useGlobalState()
 const message = useMessage()
 const cleanupModel = ref({
     enableMailsAutoCleanup: false,
@@ -80,10 +78,6 @@ const save = async () => {
 }
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
     await fetchData();
 })
 </script>

frontend/src/views/admin/Statistics.vue

@@ -4,10 +4,8 @@ import { useI18n } from 'vue-i18n'
 import { User, UserCheck, MailBulk } from '@vicons/fa'
 import { SendOutlined } from '@vicons/material'
 
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { adminAuth } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
@@ -60,9 +58,6 @@ const fetchStatistics = async () => {
 }
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        return;
-    }
     await fetchStatistics()
 })
 </script>

frontend/src/views/user/UserBar.vue

@@ -31,7 +31,8 @@ const { t } = useI18n({
 
 onMounted(async () => {
     await api.getUserOpenSettings(message);
-    await api.getUserSettings(message);
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
 });
 </script>