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

* feat: telegram bot TelegramSettings

* feat: webhook

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/api/index.js

@@ -69,6 +69,7 @@ const getOpenSettings = async (message) => {
             enableIndexAbout: res["enableIndexAbout"] || false,
             copyright: res["copyright"] || openSettings.value.copyright,
             cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
+            enableWebhook: res["enableWebhook"] || false,
         });
         if (openSettings.value.needAuth) {
             showAuth.value = true;

frontend/src/views/Admin.vue

@@ -18,6 +18,7 @@ import About from './common/About.vue';
 import Maintenance from './admin/Maintenance.vue';
 import Appearance from './common/Appearance.vue';
 import Telegram from './admin/Telegram.vue';
+import Webhook from './admin/Webhook.vue';
 
 const {
   localeCache, adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
@@ -42,12 +43,14 @@ const { t } = useI18n({
       account: 'Account',
       account_create: 'Create Account',
       account_settings: 'Account Settings',
+      user: 'User',
       user_management: 'User Management',
       user_settings: 'User Settings',
       unknow: 'Mails with unknow receiver',
       senderAccess: 'Sender Access Control',
       sendBox: 'Send Box',
       telegram: 'Telegram Bot',
+      webhook: 'Webhook',
       statistics: 'Statistics',
       maintenance: 'Maintenance',
       appearance: 'Appearance',
@@ -61,12 +64,14 @@ const { t } = useI18n({
       account: '账号',
       account_create: '创建账号',
       account_settings: '账号设置',
+      user: '用户',
       user_management: '用户管理',
       user_settings: '用户设置',
       unknow: '无收件人邮件',
       senderAccess: '发件权限控制',
       sendBox: '发件箱',
       telegram: '电报机器人',
+      webhook: 'Webhook',
       statistics: '统计',
       maintenance: '维护',
       appearance: '外观',
@@ -98,28 +103,43 @@ onMounted(async () => {
     </n-modal>
     <n-tabs type="card" v-model:value="adminTab" :placement="globalTabplacement">
       <n-tab-pane name="account" :tab="t('account')">
-        <Account />
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="account" :tab="t('account')">
+            <Account />
+          </n-tab-pane>
+          <n-tab-pane name="account_create" :tab="t('account_create')">
+            <CreateAccount />
+          </n-tab-pane>
+          <n-tab-pane name="account_settings" :tab="t('account_settings')">
+            <AccountSettings />
+          </n-tab-pane>
+          <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
+            <SenderAccess />
+          </n-tab-pane>
+          <n-tab-pane name="webhook" :tab="t('webhook')">
+            <Webhook />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
-      <n-tab-pane name="account_create" :tab="t('account_create')">
-        <CreateAccount />
-      </n-tab-pane>
-      <n-tab-pane name="account_settings" :tab="t('account_settings')">
-        <AccountSettings />
-      </n-tab-pane>
-      <n-tab-pane name="user_management" :tab="t('user_management')">
-        <UserManagement />
-      </n-tab-pane>
-      <n-tab-pane name="user_settings" :tab="t('user_settings')">
-        <UserSettings />
+      <n-tab-pane name="user" :tab="t('user')">
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="user_management" :tab="t('user_management')">
+            <UserManagement />
+          </n-tab-pane>
+          <n-tab-pane name="user_settings" :tab="t('user_settings')">
+            <UserSettings />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="mails" :tab="t('mails')">
-        <Mails />
-      </n-tab-pane>
-      <n-tab-pane name="unknow" :tab="t('unknow')">
-        <MailsUnknow />
-      </n-tab-pane>
-      <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
-        <SenderAccess />
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="mails" :tab="t('mails')">
+            <Mails />
+          </n-tab-pane>
+          <n-tab-pane name="unknow" :tab="t('unknow')">
+            <MailsUnknow />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="sendBox" :tab="t('sendBox')">
         <SendBox />

frontend/src/views/Index.vue

@@ -10,6 +10,7 @@ import AutoReply from './index/AutoReply.vue';
 import SendBox from './index/SendBox.vue';
 import SendMail from './index/SendMail.vue';
 import AccountSettings from './index/AccountSettings.vue';
+import WenHook from './index/Webhook.vue';
 import About from './common/About.vue';
 
 const { localeCache, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
@@ -65,6 +66,9 @@ const deleteMail = async (curMailId) => {
       <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
         <AutoReply />
       </n-tab-pane>
+      <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('webhook')">
+        <WenHook />
+      </n-tab-pane>
       <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
         <About />
       </n-tab-pane>

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>

frontend/src/views/index/Webhook.vue

@@ -0,0 +1,130 @@
+<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, settings } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            successTip: 'Success',
+            test: 'Test',
+            save: 'Save',
+            notEnabled: 'Webhook is not enabled for you',
+            urlMissing: 'URL is required',
+        },
+        zh: {
+            successTip: '成功',
+            test: '测试',
+            save: '保存',
+            notEnabled: 'Webhook 未开启，请联系管理员开启',
+            urlMissing: 'URL 不能为空',
+        }
+    }
+});
+
+class WebhookSettings {
+    url: string = ''
+    method: string = 'POST'
+    headers: string = JSON.stringify({}, null, 2)
+    body: string = JSON.stringify({}, null, 2)
+}
+
+const webhookSettings = ref<WebhookSettings>(new WebhookSettings())
+const enableWebhook = ref(false)
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/api/webhook/settings`)
+        Object.assign(webhookSettings.value, res)
+        enableWebhook.value = true
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    if (!webhookSettings.value.url) {
+        message.error(t('urlMissing'))
+        return
+    }
+    try {
+        await api.fetch(`/api/webhook/settings`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const testSettings = async () => {
+    if (!webhookSettings.value.url) {
+        message.error(t('urlMissing'))
+        return
+    }
+    try {
+        await api.fetch(`/api/webhook/test`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center" v-if="settings.address">
+        <n-card v-if="enableWebhook" style="max-width: 800px; overflow: auto;">
+            <n-form-item-row label="URL">
+                <n-input v-model:value="webhookSettings.url" />
+            </n-form-item-row>
+            <n-form-item-row label="METHOD">
+                <n-select v-model:value="webhookSettings.method" tag :options='[
+                    { label: "POST", value: "POST" }
+                ]' />
+            </n-form-item-row>
+            <n-form-item-row label="HEADERS">
+                <n-input v-model:value="webhookSettings.headers" type="textarea" :autosize="{ minRows: 3 }" />
+            </n-form-item-row>
+            <n-form-item-row label="BODY">
+                <n-input v-model:value="webhookSettings.body" type="textarea" :autosize="{ minRows: 3 }" />
+            </n-form-item-row>
+            <n-button @click="testSettings" secondary block strong>
+                {{ t('test') }}
+            </n-button>
+            <n-button @click="saveSettings" type="primary" block>
+                {{ t('save') }}
+            </n-button>
+        </n-card>
+        <n-result v-else status="404" :title="t('notEnabled')" />
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ESNext"
+    ],
+    "types": []
+  },
+}