feat: telegram bot TelegramSettings && webhook (#244)

* feat: telegram bot TelegramSettings

* feat: webhook

frontend/src/views/admin/Account.vue

@@ -261,7 +261,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div>
+    <div style="margin-top: 10px;">
         <n-modal v-model:show="showEmailCredential" preset="dialog" title="Dialog">
             <template #header>
                 <div>{{ t("addressCredential") }}</div>

frontend/src/views/admin/Mails.vue

@@ -58,7 +58,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div>
+    <div style="margin-top: 10px;">
         <n-input-group>
             <n-input v-model:value="adminMailTabAddress" :placeholder="t('addressQueryTip')" />
             <n-input v-model:value="mailKeyword" :placeholder="t('keywordQueryTip')" />

frontend/src/views/admin/MailsUnknow.vue

@@ -24,7 +24,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div v-if="adminAuth">
+    <div v-if="adminAuth" style="margin-top: 10px;">
         <MailBox :enableUserDeleteEmail="false" :fetchMailData="fetchMailUnknowData" />
     </div>
 </template>

frontend/src/views/admin/Telegram.vue

@@ -1,10 +1,14 @@
-<script setup>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+// @ts-ignore
 import { useGlobalState } from '../../store'
+// @ts-ignore
 import { api } from '../../api'
 
 const { localeCache } = useGlobalState()
+// @ts-ignore
 const message = useMessage()
 
 const { t } = useI18n({
@@ -14,11 +18,19 @@ const { t } = useI18n({
             init: 'Init',
             successTip: 'Success',
             status: 'Check Status',
+            enableTelegramAllowList: 'Enable Telegram Allow List(Manually input user ID)',
+            enable: 'Enable',
+            telegramAllowList: 'Telegram Allow List',
+            save: 'Save',
         },
         zh: {
             init: '初始化',
             successTip: '成功',
             status: '查看状态',
+            enableTelegramAllowList: '启用 Telegram 白名单(手动输入用户 ID)',
+            enable: '启用',
+            telegramAllowList: 'Telegram 白名单',
+            save: '保存',
         }
     }
 });
@@ -27,35 +39,86 @@ const status = ref({
     fetched: false,
 })
 
-const fetchData = async () => {
+const fetchStatus = async () => {
     try {
         const res = await api.fetch(`/admin/telegram/status`)
         Object.assign(status.value, res)
         status.value.fetched = true
     } catch (error) {
-        message.error(error.message || "error");
+        message.error((error as Error).message || "error");
     }
 }
 
-const save = async () => {
+const init = async () => {
     try {
         await api.fetch(`/admin/telegram/init`, {
             method: 'POST',
         })
         message.success(t('successTip'))
     } catch (error) {
-        message.error(error.message || "error");
+        message.error((error as Error).message || "error");
     }
 }
+
+class TelegramSettings {
+    enableAllowList: boolean;
+    allowList: string[];
+
+    constructor(enableAllowList: boolean, allowList: string[]) {
+        this.enableAllowList = enableAllowList;
+        this.allowList = allowList;
+    }
+}
+
+const settings = ref(new TelegramSettings(false, []))
+
+const getSettings = async () => {
+    try {
+        const res = await api.fetch(`/admin/telegram/settings`)
+        Object.assign(settings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    try {
+        await api.fetch(`/admin/telegram/settings`, {
+            method: 'POST',
+            body: JSON.stringify(settings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await getSettings();
+})
 </script>
 
 <template>
     <div class="center">
         <n-card style="max-width: 800px; overflow: auto;">
-            <n-button @click="save" type="primary" block>
+            <n-card>
+                <n-form-item-row :label="t('enableTelegramAllowList')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="settings.enableAllowList" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-select v-model:value="settings.allowList" filterable multiple tag style="width: 80%;"
+                            :placeholder="t('telegramAllowList')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-button @click="saveSettings" type="primary" block>
+                    {{ t('save') }}
+                </n-button>
+            </n-card>
+            <n-button @click="init" type="primary" block>
                 {{ t('init') }}
             </n-button>
-            <n-button @click="fetchData" secondary block>
+            <n-button @click="fetchStatus" secondary block>
                 {{ t('status') }}
             </n-button>
             <pre v-if="status.fetched">{{ JSON.stringify(status, null, 2) }}</pre>

frontend/src/views/admin/UserManagement.vue

@@ -223,7 +223,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div>
+    <div style="margin-top: 10px;">
         <n-modal v-model:show="showCreateUser" preset="dialog" :title="t('createUser')">
             <n-form>
                 <n-form-item-row :label="t('email')" required>

frontend/src/views/admin/Webhook.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+
+const { localeCache } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            successTip: 'Success',
+            webhookAllowList: 'Webhook Allow List(Enter the address that is allowed to use webhook)',
+            save: 'Save',
+        },
+        zh: {
+            successTip: '成功',
+            webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址)',
+            save: '保存',
+        }
+    }
+});
+
+class WebhookSettings {
+    allowList: string[];
+
+    constructor(allowList: string[]) {
+        this.allowList = allowList;
+    }
+}
+
+const webhookSettings = ref(new WebhookSettings([]))
+
+const getSettings = async () => {
+    try {
+        const res = await api.fetch(`/admin/webhook/settings`)
+        Object.assign(webhookSettings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    try {
+        await api.fetch(`/admin/webhook/settings`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await getSettings();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card style="max-width: 800px; overflow: auto;">
+            <n-form-item-row :label="t('webhookAllowList')">
+                <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
+                    :placeholder="t('webhookAllowList')" />
+            </n-form-item-row>
+            <n-button @click="saveSettings" type="primary" block>
+                {{ t('save') }}
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>