feat: update webhook to support global webhook (#407)

2026-05-26 18:49:53 +08:00 · 2024-08-15 00:23:31 +08:00
parent c969c4b082
commit 621476cb79
17 changed files with 416 additions and 216 deletions
--- a/frontend/src/components/MailBox.vue
+++ b/frontend/src/components/MailBox.vue
@@ -14,37 +14,37 @@ const props = defineProps({
  enableUserDeleteEmail: {
    type: Boolean,
    default: false,
-    requried: false
+    required: false
  },
  showEMailTo: {
    type: Boolean,
    default: true,
-    requried: false
+    required: false
  },
  fetchMailData: {
    type: Function,
    default: () => { },
-    requried: true
+    required: true
  },
  deleteMail: {
    type: Function,
    default: () => { },
-    requried: false
+    required: false
  },
  showReply: {
    type: Boolean,
    default: false,
-    requried: false
+    required: false
  },
  showSaveS3: {
    type: Boolean,
    default: false,
-    requried: false
+    required: false
  },
  saveToS3: {
    type: Function,
    default: (mail_id, filename, blob) => { },
-    requried: false
+    required: false
  },
 })

--- a/frontend/src/components/SendBox.vue
+++ b/frontend/src/components/SendBox.vue
@@ -12,7 +12,7 @@ const props = defineProps({
  enableUserDeleteEmail: {
    type: Boolean,
    default: false,
-    requried: false
+    required: false
  },
  showEMailFrom: {
    type: Boolean,
@@ -21,12 +21,12 @@ const props = defineProps({
  fetchMailData: {
    type: Function,
    default: () => { },
-    requried: true
+    required: true
  },
  deleteMail: {
    type: Function,
    default: () => { },
-    requried: false
+    required: false
  },
 })

--- a/frontend/src/components/WebhookComponent.vue
+++ b/frontend/src/components/WebhookComponent.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+    fetchData: {
+        type: Function,
+        default: () => { },
+        required: true
+    },
+    saveSettings: {
+        type: Function,
+        default: (webhookSettings: WebhookSettings) => { },
+        required: true
+    },
+    testSettings: {
+        type: Function,
+        default: (webhookSettings: WebhookSettings) => { },
+        required: true
+    },
+})
+
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            successTip: 'Success',
+            test: 'Test',
+            save: 'Save',
+            notEnabled: 'Webhook is not enabled for you',
+            urlMissing: 'URL is required',
+            enable: 'Enable',
+            messagePusherDemo: 'Fill with Message Pusher Demo',
+            messagePusherDoc: 'Message Pusher Doc',
+            fillInDemoTip: 'Please modify the URL and other settings to your own',
+        },
+        zh: {
+            successTip: '成功',
+            test: '测试',
+            save: '保存',
+            notEnabled: 'Webhook 未开启，请联系管理员开启',
+            urlMissing: 'URL 不能为空',
+            enable: '启用',
+            messagePusherDemo: '填入MessagePusher示例',
+            messagePusherDoc: 'MessagePusher文档',
+            fillInDemoTip: '请修改URL和其他设置为您自己的配置',
+        }
+    }
+});
+
+class WebhookSettings {
+    enabled: boolean = false
+    url: string = ''
+    method: string = 'POST'
+    headers: string = JSON.stringify({}, null, 2)
+    body: string = JSON.stringify({}, null, 2)
+}
+
+const messagePusherDocLink = "https://github.com/songquanpeng/message-pusher";
+
+const messagePusherDemo = {
+    enabled: true,
+    url: 'https://msgpusher.com/push/username',
+    method: 'POST',
+    headers: JSON.stringify({
+        'Content-Type': 'application/json',
+    }, null, 2),
+    body: JSON.stringify({
+        "token": "token",
+        "title": "${subject}",
+        "description": "${subject}",
+        "content": "*${subject}*\n\nFrom: ${from}\nTo: ${to}\n\n${parsedText}\n"
+    }, null, 2),
+} as WebhookSettings;
+
+const fillMessagePuhserDemo = () => {
+    Object.assign(webhookSettings.value, messagePusherDemo)
+    message.success(t('fillInDemoTip'))
+}
+
+const webhookSettings = ref<WebhookSettings>(new WebhookSettings())
+const enableWebhook = ref(false)
+
+const fetchData = async () => {
+    try {
+        const res = await props.fetchData()
+        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 props.saveSettings(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 props.testSettings(webhookSettings.value)
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded v-if="enableWebhook" style="max-width: 800px; overflow: auto;">
+            <n-flex justify="end">
+                <n-button tag="a" :href="messagePusherDocLink" target="_blank" secondary>
+                    {{ t('messagePusherDoc') }}
+                </n-button>
+                <n-button @click="fillMessagePuhserDemo" secondary>
+                    {{ t('messagePusherDemo') }}
+                </n-button>
+                <n-button v-if="webhookSettings.enabled" @click="testSettings" secondary>
+                    {{ t('test') }}
+                </n-button>
+                <n-button @click="saveSettings" type="primary">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
+            <n-form-item-row :label="t('enable')">
+                <n-switch v-model:value="webhookSettings.enabled" :round="false" />
+            </n-form-item-row>
+            <div v-if="webhookSettings.enabled">
+                <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>
+            </div>
+        </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>
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -20,6 +20,7 @@ import Maintenance from './admin/Maintenance.vue';
 import Appearance from './common/Appearance.vue';
 import Telegram from './admin/Telegram.vue';
 import Webhook from './admin/Webhook.vue';
+import MailWebhook from './admin/MailWebhook.vue';

 const {
  adminAuth, showAdminAuth, adminTab, loading,
@@ -51,12 +52,13 @@ const { t } = useI18n({
      senderAccess: 'Sender Access Control',
      sendBox: 'Send Box',
      telegram: 'Telegram Bot',
-      webhook: 'Webhook',
+      webhookSettings: 'Webhook Settings',
      statistics: 'Statistics',
      maintenance: 'Maintenance',
      appearance: 'Appearance',
      about: 'About',
      ok: 'OK',
+      mailWebhook: 'Mail Webhook',
    },
    zh: {
      accessHeader: 'Admin 密码',
@@ -72,12 +74,13 @@ const { t } = useI18n({
      senderAccess: '发件权限控制',
      sendBox: '发件箱',
      telegram: '电报机器人',
-      webhook: 'Webhook',
+      webhookSettings: 'Webhook 设置',
      statistics: '统计',
      maintenance: '维护',
      appearance: '外观',
      about: '关于',
      ok: '确定',
+      mailWebhook: '邮件 Webhook',
    }
  }
 });
@@ -119,7 +122,7 @@ onMounted(async () => {
          <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
            <SenderAccess />
          </n-tab-pane>
-          <n-tab-pane name="webhook" :tab="t('webhook')">
+          <n-tab-pane name="webhook" :tab="t('webhookSettings')">
            <Webhook />
          </n-tab-pane>
        </n-tabs>
@@ -142,6 +145,9 @@ onMounted(async () => {
          <n-tab-pane name="unknow" :tab="t('unknow')">
            <MailsUnknow />
          </n-tab-pane>
+          <n-tab-pane name="mailWebhook" :tab="t('mailWebhook')">
+            <MailWebhook />
+          </n-tab-pane>
        </n-tabs>
      </n-tab-pane>
      <n-tab-pane name="sendBox" :tab="t('sendBox')">
--- a/frontend/src/views/Index.vue
+++ b/frontend/src/views/Index.vue
@@ -29,6 +29,7 @@ const { t } = useI18n({
      about: 'About',
      s3Attachment: 'S3 Attachment',
      saveToS3Success: 'save to s3 success',
+      webhookSettings: 'Webhook Settings',
    },
    zh: {
      mailbox: '收件箱',
@@ -39,6 +40,7 @@ const { t } = useI18n({
      about: '关于',
      s3Attachment: 'S3附件',
      saveToS3Success: '保存到s3成功',
+      webhookSettings: 'Webhook 设置',
    }
  }
 });
@@ -102,7 +104,7 @@ const saveToS3 = async (mail_id, filename, blob) => {
      <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')">
+      <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('webhookSettings')">
        <Webhook />
      </n-tab-pane>
      <n-tab-pane v-if="openSettings.isS3Enabled" name="s3_attachment" :tab="t('s3Attachment')">
--- a/frontend/src/views/admin/MailWebhook.vue
+++ b/frontend/src/views/admin/MailWebhook.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// @ts-ignore
+import { api } from '../../api'
+
+// @ts-ignore
+import WebhookComponent from '../../components/WebhookComponent.vue'
+
+const fetchData = async () => {
+    return await api.fetch(`/admin/mail_webhook/settings`)
+}
+
+const saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+</script>
+
+<template>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
+</template>
--- a/frontend/src/views/common/Login.vue
+++ b/frontend/src/views/common/Login.vue
@@ -15,7 +15,7 @@ const props = defineProps({
    bindUserAddress: {
        type: Function,
        default: async () => { await api.bindUserAddress(); },
-        requried: true
+        required: true
    },
    newAddressPath: {
        type: Function,
@@ -29,7 +29,7 @@ const props = defineProps({
                }),
            });
        },
-        requried: true
+        required: true
    },
 })

--- a/frontend/src/views/index/SendMail.vue
+++ b/frontend/src/views/index/SendMail.vue
@@ -151,16 +151,15 @@ onMounted(async () => {
                    <n-button type="primary" tertiary @click="requestAccess" size="small">{{ t('requestAccess')
                        }}</n-button>
                </n-alert>
-                <br />
                <AdminContact />
            </div>
            <div v-else>
-                <n-alert type="info" :show-icon="false" :bordered="false">
+                <n-alert type="info" :show-icon="false" :bordered="false" closable>
                    {{ t('send_balance') }}: {{ settings.send_balance }}
                </n-alert>
-                <div class="right">
+                <n-flex justify="end">
                    <n-button type="primary" @click="send">{{ t('send') }}</n-button>
-                </div>
+                </n-flex>
                <div class="left">
                    <n-form :model="sendMailModel">
                        <n-form-item :label="t('fromName')" label-placement="top">
@@ -232,9 +231,7 @@ onMounted(async () => {
    justify-content: left;
 }

-.right {
-    text-align: right;
-    place-items: right;
-    justify-content: right;
+.n-alert {
+    margin-bottom: 10px;
 }
 </style>
--- a/frontend/src/views/index/Webhook.vue
+++ b/frontend/src/views/index/Webhook.vue
@@ -1,129 +1,28 @@
 <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 { settings } = useGlobalState()
 // @ts-ignore
-const message = useMessage()
-
-const { t } = useI18n({
-    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)
+import WebhookComponent from '../../components/WebhookComponent.vue'

 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");
-    }
+    return await api.fetch(`/api/webhook/settings`)
 }

-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 saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
 }

-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");
-    }
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
 }
-
-onMounted(async () => {
-    await fetchData();
-})
 </script>

 <template>
-    <div class="center" v-if="settings.address">
-        <n-card :bordered="false" embedded 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>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
 </template>
-
-<style scoped>
-.center {
-    display: flex;
-    text-align: left;
-    place-items: center;
-    justify-content: center;
-}
-
-.n-button {
-    margin-top: 10px;
-}
-</style>