feat: change version (#294)

* feat: telegram bot TelegramSettings

* feat: webhook

.github/workflows/docs_deploy.yml

@@ -31,6 +31,22 @@ jobs:
           version: 8
           run_install: false
 
+      - name: check github release done
+        run: |
+          for ((attempt=1; attempt<=10; attempt++)); do
+              if wget -q --spider "https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip"; then
+                  echo "frontend.zip found."
+                  break
+              else
+                  if [ $attempt -eq 10 ]; then
+                      echo "Exceeded maximum retries. frontend.zip not found."
+                  else
+                      echo "frontend.zip not found. Retrying in 30 seconds..."
+                      sleep 30
+                  fi
+              fi
+          done
+
       - name: Deploy Docs for ${{github.ref_name}}
         run: |
           cd vitepress-docs/

.github/workflows/frontend_deploy.yaml

@@ -38,6 +38,13 @@ jobs:
           pnpm run deploy --project-name=$project_name
           echo "Deploying prodcution for ${{ github.ref_name }}"
           echo "Deployed for tag ${{ github.ref_name }}"
+
+          export tg_mini_app_project_name=${{ secrets.TG_FRONTEND_NAME }}
+          if [ -n "$tg_mini_app_project_name" ]; then
+            echo "Deploying telegram mini app $tg_mini_app_project_name"
+            pnpm run deploy:telegram --project-name=$tg_mini_app_project_name
+            echo "Deployed telegram mini app for ${{ github.ref_name }}"
+          fi
         env:
           CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

CHANGELOG.md

@@ -1,8 +1,91 @@
+<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
-## main branch
+## v0.5.0
 
-### DB Changes
+- UI: 增加本地缓存进行地址管理
+- worker: 增加 `FORWARD_ADDRESS_LIST` 全局邮件转发地址(等同于 `catch all`)
+- UI: 多语言使用路由进行切换
+- 添加保存附件到 S3 的功能
+- UI: 增加收取邮件列表 `批量删除` 和 `批量下载`
+
+## v0.4.6
+
+- worker 配置文件添加 `TITLE = "Custom Title"`, 可自定义网站标题
+- 修复 KV 未绑定无法删除地址的问题
+
+## v0.4.5
+
+- UI lazy load 懒加载
+- telegram bot 添加用户全局推送功能(admin 用户)
+- 增加对 cloudflare verified 用户发送邮件
+- 增加使用 `resend` 发送邮件, `resend` 提供 http 和 smtp api, 使用更加方便, 文档: https://temp-mail-docs.awsl.uk/zh/guide/config-send-mail.html
+
+## v0.4.4
+
+- 增加 telegram mini app
+- telegram bot 增加 `ubind`, `delete` 指令
+- 修复 webhook 多行文本的问题
+
+## v0.4.3
+
+### Breaking Changes
+
+配置文件 `main = "src/worker.js"` 改为 `main = "src/worker.ts"`
+
+### Changes
+
+- `telegram bot`  白名单配置
+- `ENABLE_WEBHOOK` 添加 webhook
+- UI: admin 页面使用双层 tab
+- UI: 登录后可直接主页切换地址
+- UI: 发件箱也采用左右分栏显示(类似收件箱)
+- `SMTP IMAP Proxy` 添加发件箱查看
+
+* feat: telegram bot TelegramSettings && webhook by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/244
+* fix build by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/245
+* feat: UI changes by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/247
+* feat: SMTP IMAP Proxy: add sendbox && UI: sendbox use split view by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/248
+
+## v0.4.2
+
+- 修复 smtp imap proxy sever 的一些 bug
+- 修复 UI 界面文字错误, 界面增加版本号
+- 增加  telegram bot 文档 https://temp-mail-docs.awsl.uk/zh/guide/feature/telegram.html
+
+* fix: imap server by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/227
+* fix: Maintenance wrong label by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/229
+* feat: add version for frontend && backend by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/230
+* feat: add page functions proxy to make response faster by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/234
+* feat: add about page by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/235
+* feat: remove mailV1Alert && fix mobile showSideMargin by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/236
+* feat: telegram bot by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/238
+* fix: remove cleanup address due to many table need to be clean by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/240
+* feat: docs: Telegram Bot by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/241
+* fix: smtp_proxy: cannot decode 8bit && tg bot new random address by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/242
+* fix: smtp_proxy: update raise imap4.NoSuchMailbox by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/243
+
+### v0.4.1
+
+- 用户名限制最长30个字符
+- 修复 `/external/api/send_mail` 未返回的 bug (#222)
+- 添加 `IMAP proxy` 服务，支持 `IMAP` 查看邮件
+- UI 界面增加版本号显示
+
+* feat: use common function handleListQuery when query by page by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/220
+* fix: typos by @lwd-temp in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/221
+* fix: name max 30 && /external/api/send_mail not return result by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/222
+* fix: smtp_proxy_server support decode from mail charset by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/223
+* feat: add imap proxy server by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/225
+* feat: UI show version by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/226
+
+### New Contributors
+
+* @lwd-temp made their first contribution in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/221
+
+## v0.4.0
+
+### DB Changes/Breaking changes
 
 新增 user 相关表，用于存储用户信息
 
@@ -10,6 +93,8 @@
 
 ### config changs
 
+启用用户注册邮箱验证需要 `KV`
+
 ```toml
 # kv config for send email verification code
 # [[kv_namespaces]]
@@ -26,6 +111,15 @@
 - 修复删除地址时邮件未删除的BUG #213
 - UI 增加全局标签页位置配置, 侧边距配置
 
+* feat: update docs by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/204
+* feat: add Deploy to Cloudflare Workers button by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/205
+* feat: add Deploy to Cloudflare Workers docs by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/206
+* feat: add UserLogin by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/209
+* feat: admin search mailbox && fix generateName multi dot && user jwt exp in 30 days && UI globalTabplacement && useSideMargin by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/214
+* feat: UI check openSettings in Login page by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/215
+* feat: UI move AdminContact to common by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/217
+* feat: docs by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/218
+
 ## v0.3.3
 
 - 修复 Admin 删除邮件报错
@@ -128,7 +222,6 @@ set
 - 添加 RATE_LIMITER 限流 发送邮件 和 新建地址
 - 一些 bug 修复
 
----
 - feat: allow user delete mail && notify when send access changed by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/132
 - feat: requset_send_mail_access default 1 balance by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/143
 - fix: RATE_LIMITER not call jwt by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/146

README.md

@@ -1,5 +1,20 @@
 # 使用 cloudflare 免费服务，搭建临时邮箱
 
+<p align="center">
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/LICENSE">
+    <img alt="MIT License" src="https://img.shields.io/github/license/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/graphs/contributors">
+   <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="">
+    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="https://discord.gg/dQEwTWhA6Q">
+     <img alt="Join Discord Chat" src="https://img.shields.io/discord/1238705663623036939.svg?label=discord&logo=discord">
+  </a>
+</p>
+
 > 本项目仅供学习和个人用途，请勿将其用于任何违法行为，否则后果自负。
 
 ## [查看部署文档](https://temp-mail-docs.awsl.uk)
@@ -31,6 +46,7 @@
   - [在线演示](#在线演示)
   - [功能/TODO](#功能todo)
   - [Reference](#reference)
+  - [Join Community](#join-community)
 
 ## 功能/TODO
 
@@ -44,8 +60,9 @@
 - [x] 支持发送邮件
 - [x] 支持 `DKIM`
 - [x] `admin` 后台创建无前缀邮箱
-- [x] 添加 `SMTP proxy server`，支持 SMTP 发送邮件
+- [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件, `IMAP` 查看邮件
 - [x] 添加完整的用户注册登录功能，可绑定邮箱地址，绑定后可自动获取邮箱JWT凭证切换不同邮箱
+- [x] `Telegram Bot` 使用，以及 `Telegram` 推送
 
 ## Reference
 
@@ -53,3 +70,8 @@
 - 使用 Cloudflare Pages 部署前端
 - 使用 Cloudflare Workers 部署后端
 - email 转发使用 Cloudflare Email Routing
+
+## Join Community
+
+- [Discord](https://discord.gg/dQEwTWhA6Q)
+- [Telegram](https://t.me/cloudflare_temp_email)

frontend/.env.example

@@ -1,2 +1,3 @@
 VITE_API_BASE=https://temp-email-api.xxx.xxx
 VITE_CF_WEB_ANALY_TOKEN=
+VITE_IS_TELEGRAM=false

frontend/.env.pages

@@ -0,0 +1,2 @@
+VITE_API_BASE=
+VITE_CF_WEB_ANALY_TOKEN=

frontend/.gitignore

@@ -28,5 +28,7 @@ coverage
 *.sw?
 
 .env.*
+!.env.example
+!.env.pages
 *-dist/
 components.d.ts

frontend/package.json

@@ -1,27 +1,32 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.0.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build -m prod --emptyOutDir",
     "build:release": "vite build -m example --emptyOutDir",
+    "build:pages": "vite build -m pages --emptyOutDir",
+    "build:telegram": "VITE_IS_TELEGRAM=true vite build -m prod --emptyOutDir",
     "preview": "vite preview",
+    "deploy:telegram": "npm run build:telegram && wrangler pages deploy ./dist --branch production",
     "deploy:preview": "npm run build && wrangler pages deploy ./dist --branch preview",
     "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
   },
   "dependencies": {
+    "@unhead/vue": "^1.9.11",
     "@vicons/material": "^0.12.0",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
+    "jszip": "^3.10.1",
     "mail-parser-wasm": "^0.1.6",
     "naive-ui": "^2.38.2",
     "postal-mime": "^2.2.5",
     "vooks": "^0.2.12",
-    "vue": "^3.4.26",
+    "vue": "^3.4.27",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2"
@@ -29,13 +34,13 @@
   "devDependencies": {
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "unplugin-auto-import": "^0.17.5",
+    "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.11",
     "vite-plugin-pwa": "^0.19.8",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "workbox-window": "^7.1.0",
-    "wrangler": "^3.53.1"
+    "wrangler": "^3.57.1"
   }
 }

frontend/src/App.vue

@@ -8,16 +8,15 @@ import Header from './views/Header.vue';
 import Footer from './views/Footer.vue';
 
 
-const { localeCache, isDark, loading, useSideMargin } = useGlobalState()
+const {
+  isDark, loading, useSideMargin, telegramApp, isTelegram
+} = useGlobalState()
+const { locale } = useI18n({});
 const theme = computed(() => isDark.value ? darkTheme : null)
-const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
+const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
-const showSideMargin = computed(() => !isMobile.value && !useSideMargin.value);
+const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);
 
-const { locale } = useI18n({
-  useScope: 'global',
-});
-locale.value = localeCache.value;
 
 onMounted(async () => {
   const token = import.meta.env.VITE_CF_WEB_ANALY_TOKEN;
@@ -31,6 +30,23 @@ onMounted(async () => {
     document.body.appendChild(script);
   }
 
+  // check if telegram is enabled
+  const enableTelegram = import.meta.env.VITE_IS_TELEGRAM;
+  if (
+    (typeof enableTelegram === 'boolean' && enableTelegram === true)
+    ||
+    (typeof enableTelegram === 'string' && enableTelegram === 'true')
+  ) {
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://telegram.org/js/telegram-web-app.js';
+      script.onload = resolve;
+      script.onerror = reject;
+      document.body.appendChild(script);
+    });
+    telegramApp.value = window.Telegram?.WebApp || {};
+    isTelegram.value = !!window.Telegram?.WebApp?.initData;
+  }
 });
 </script>
 
@@ -40,8 +56,8 @@ onMounted(async () => {
     <n-spin description="loading..." :show="loading">
       <n-message-provider>
         <n-grid x-gap="12" :cols="12">
-          <n-gi v-if="!showSideMargin" span="1"></n-gi>
-          <n-gi :span="showSideMargin ? 12 : 10">
+          <n-gi v-if="showSideMargin" span="1"></n-gi>
+          <n-gi :span="!showSideMargin ? 12 : 10">
             <div class="main">
               <n-space vertical>
                 <n-layout style="min-height: 80vh;">
@@ -52,7 +68,7 @@ onMounted(async () => {
               </n-space>
             </div>
           </n-gi>
-          <n-gi v-if="!showSideMargin" span="1"></n-gi>
+          <n-gi v-if="showSideMargin" span="1"></n-gi>
         </n-grid>
         <n-back-top />
       </n-message-provider>

frontend/src/api/index.js

@@ -33,7 +33,7 @@ const apiFetch = async (path, options = {}) => {
         }
         if (response.status === 401 && path.startsWith("/admin")) {
             showAdminAuth.value = true;
-            throw new Error("Unauthorized, you admin password is wrong")
+            throw new Error("Unauthorized, your admin password is wrong")
         }
         if (response.status >= 300) {
             throw new Error(`${response.status} ${response.data}` || "error");
@@ -54,6 +54,7 @@ const getOpenSettings = async (message) => {
     try {
         const res = await api.fetch("/open_api/settings");
         Object.assign(openSettings.value, {
+            title: res["title"] || "",
             prefix: res["prefix"] || "",
             needAuth: res["needAuth"] || false,
             domains: res["domains"].map((domain) => {
@@ -66,8 +67,11 @@ const getOpenSettings = async (message) => {
             enableUserCreateEmail: res["enableUserCreateEmail"] || false,
             enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
             enableAutoReply: res["enableAutoReply"] || false,
+            enableIndexAbout: res["enableIndexAbout"] || false,
             copyright: res["copyright"] || openSettings.value.copyright,
             cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
+            enableWebhook: res["enableWebhook"] || false,
+            isS3Enabled: res["isS3Enabled"] || false,
         });
         if (openSettings.value.needAuth) {
             showAuth.value = true;
@@ -86,7 +90,6 @@ const getSettings = async () => {
         settings.value = {
             address: res["address"],
             auto_reply: res["auto_reply"],
-            has_v1_mails: res["has_v1_mails"],
             send_balance: res["send_balance"],
         };
     } finally {

frontend/src/components/MailBox.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { watch, onMounted, ref, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
@@ -10,7 +9,6 @@ import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
 
 const message = useMessage()
 const isMobile = useIsMobile()
-const router = useRouter()
 
 const props = defineProps({
   enableUserDeleteEmail: {
@@ -37,11 +35,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
     requried: false
-  }
+  },
+  showSaveS3: {
+    type: Boolean,
+    default: false,
+    requried: false
+  },
+  saveToS3: {
+    type: Function,
+    default: (mail_id, filename, blob) => { },
+    requried: false
+  },
 })
 
 const {
-  localeCache, isDark, mailboxSplitSize, indexTab,
+  isDark, mailboxSplitSize, indexTab, loading,
   useIframeShowMail, sendMailModel, preferShowTextMail
 } = useGlobalState()
 const autoRefresh = ref(false)
@@ -58,8 +66,13 @@ const curAttachments = ref([])
 const curMail = ref(null);
 const showTextMail = ref(preferShowTextMail.value)
 
+const multiActionMode = ref(false)
+const showMultiActionDownload = ref(false)
+const showMultiActionDelete = ref(false)
+const multiActionDownloadZip = ref({})
+const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
+
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
       success: 'Success',
@@ -68,12 +81,17 @@ const { t } = useI18n({
       refresh: 'Refresh',
       attachments: 'Show Attachments',
       downloadMail: 'Download Mail',
-      pleaseSelectMail: "Please select a mail to view.",
+      pleaseSelectMail: "Please select mail",
       delete: 'Delete',
-      deleteMailTip: 'Are you sure you want to delete this mail?',
+      deleteMailTip: 'Are you sure you want to delete mail?',
       reply: 'Reply',
       showTextMail: 'Show Text Mail',
-      showHtmlMail: 'Show Html Mail'
+      showHtmlMail: 'Show Html Mail',
+      saveToS3: 'Save to S3',
+      multiAction: 'Multi Action',
+      cancelMultiAction: 'Cancel Multi Action',
+      selectAll: 'Select All',
+      unselectAll: 'Unselect All',
     },
     zh: {
       success: '成功',
@@ -82,12 +100,17 @@ const { t } = useI18n({
       refresh: '刷新',
       downloadMail: '下载邮件',
       attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。",
+      pleaseSelectMail: "请选择邮件",
       delete: '删除',
-      deleteMailTip: '确定要删除这封邮件吗?',
+      deleteMailTip: '确定要删除邮件吗?',
       reply: '回复',
       showTextMail: '显示纯文本邮件',
-      showHtmlMail: '显示HTML邮件'
+      showHtmlMail: '显示HTML邮件',
+      saveToS3: '保存到S3',
+      multiAction: '多选',
+      cancelMultiAction: '取消多选',
+      selectAll: '全选',
+      unselectAll: '取消全选',
     }
   }
 });
@@ -125,12 +148,14 @@ const refresh = async () => {
       pageSize.value, (page.value - 1) * pageSize.value
     );
     data.value = await Promise.all(results.map(async (item) => {
+      item.checked = false;
       return await processItem(item);
     }));
     if (totalCount > 0) {
       count.value = totalCount;
     }
-    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+    curMail.value = null;
+    if (!isMobile.value && data.value.length > 0) {
       curMail.value = data.value[0];
     }
   } catch (error) {
@@ -140,6 +165,10 @@ const refresh = async () => {
 };
 
 const clickRow = async (row) => {
+  if (multiActionMode.value) {
+    row.checked = !row.checked;
+    return;
+  }
   curMail.value = row;
 };
 
@@ -186,6 +215,92 @@ const onSpiltSizeChange = (size) => {
   mailboxSplitSize.value = size;
 }
 
+const attachmentLoding = ref(false)
+const saveToS3Proxy = async (filename, blob) => {
+  attachmentLoding.value = true
+  try {
+    await props.saveToS3(curMail.value.id, filename, blob);
+  } finally {
+    attachmentLoding.value = false
+  }
+}
+
+const multiActionModeClick = (enableMulti) => {
+  if (enableMulti) {
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+    multiActionMode.value = true;
+  } else {
+    multiActionMode.value = false;
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+  }
+}
+
+const multiActionSelectAll = (checked) => {
+  data.value.forEach((item) => {
+    item.checked = checked;
+  });
+}
+
+const multiActionDeleteMail = async () => {
+  try {
+    loading.value = true;
+    const selectedMails = data.value.filter((item) => item.checked);
+    if (selectedMails.length === 0) {
+      message.error(t('pleaseSelectMail'));
+      return;
+    }
+    multiActionDeleteProgress.value = {
+      percentage: 0,
+      tip: `0/${selectedMails.length}`
+    };
+    for (const [index, mail] of selectedMails.entries()) {
+      await props.deleteMail(mail.id);
+      showMultiActionDelete.value = true;
+      multiActionDeleteProgress.value = {
+        percentage: Math.floor((index + 1) / selectedMails.length * 100),
+        tip: `${index + 1}/${selectedMails.length}`
+      };
+    }
+    message.success(t("success"));
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  } finally {
+    loading.value = false;
+    showMultiActionDelete.value = true;
+  }
+}
+
+const multiActionDownload = async () => {
+  try {
+    loading.value = true;
+    const selectedMails = data.value.filter((item) => item.checked);
+    if (selectedMails.length === 0) {
+      message.error(t('pleaseSelectMail'));
+      return;
+    }
+    const JSZipModlue = await import('jszip');
+    const JSZip = JSZipModlue.default;
+    const zip = new JSZip();
+    for (const mail of selectedMails) {
+      zip.file(`${mail.id}.eml`, mail.raw);
+    }
+    multiActionDownloadZip.value = {
+      url: URL.createObjectURL(await zip.generateAsync({ type: "blob" })),
+      filename: `mails-${new Date().toISOString().replace(/:/g, '-')}.zip`
+    }
+    showMultiActionDownload.value = true;
+  } catch (error) {
+    message.error(error.message || "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
 onMounted(async () => {
   await refresh();
 });
@@ -197,14 +312,38 @@ onBeforeUnmount(() => {
 
 <template>
   <div>
-    <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25"
-      :default-size="mailboxSplitSize" :on-update:size="onSpiltSizeChange">
-      <template #1>
-        <div class="center">
-          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-          </div>
-          <n-switch v-model:value="autoRefresh" size="small" :round="false">
+    <div v-if="!isMobile" class="left">
+      <div style="margin-bottom: 10px;">
+        <n-space v-if="multiActionMode">
+          <n-button @click="multiActionModeClick(false)" tertiary>
+            {{ t('cancelMultiAction') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(true)" tertiary>
+            {{ t('selectAll') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(false)" tertiary>
+            {{ t('unselectAll') }}
+          </n-button>
+          <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="multiActionDeleteMail">
+            <template #trigger>
+              <n-button tertiary type="error">{{ t('delete') }}</n-button>
+            </template>
+            {{ t('deleteMailTip') }}
+          </n-popconfirm>
+          <n-button @click="multiActionDownload" tertiary type="info">
+            <template #icon>
+              <n-icon :component="CloudDownloadRound" />
+            </template>
+            {{ t('downloadMail') }}
+          </n-button>
+        </n-space>
+        <n-space v-else>
+          <n-button @click="multiActionModeClick(true)" type="primary" tertiary>
+            {{ t('multiAction') }}
+          </n-button>
+          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
+            show-size-picker />
+          <n-switch v-model:value="autoRefresh" :round="false">
             <template #checked>
               {{ t('refreshAfter', { msg: autoRefreshInterval }) }}
             </template>
@@ -212,91 +351,99 @@ onBeforeUnmount(() => {
               {{ t('autoRefresh') }}
             </template>
           </n-switch>
-          <n-button @click="refresh" size="small" type="primary" tertiary>
+          <n-button @click="refresh" type="primary" tertiary>
             {{ t('refresh') }}
           </n-button>
-        </div>
-        <div style="overflow: auto; height: 80vh;">
-          <n-list hoverable clickable>
-            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-              :class="mailItemClass(row)">
-              <n-thing :title="row.subject">
-                <template #description>
-                  <n-tag type="info">
-                    ID: {{ row.id }}
-                  </n-tag>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </n-tag>
-                  <n-tag type="info">
-                    FROM: {{ row.source }}
-                  </n-tag>
-                  <n-tag v-if="showEMailTo" type="info">
-                    TO: {{ row.address }}
-                  </n-tag>
+        </n-space>
+      </div>
+      <n-split class="left" direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
+        :on-update:size="onSpiltSizeChange">
+        <template #1>
+          <div style="overflow: auto; height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <template #prefix v-if="multiActionMode">
+                  <n-checkbox v-model:checked="row.checked" />
                 </template>
-              </n-thing>
-            </n-list-item>
-          </n-list>
-        </div>
-      </template>
-      <template #2>
-        <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
-          <n-space>
-            <n-tag type="info">
-              ID: {{ curMail.id }}
-            </n-tag>
-            <n-tag type="info">
-              {{ curMail.created_at }}
-            </n-tag>
-            <n-tag type="info">
-              FROM: {{ curMail.source }}
-            </n-tag>
-            <n-tag v-if="showEMailTo" type="info">
-              TO: {{ curMail.address }}
-            </n-tag>
-            <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
-              <template #trigger>
-                <n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
-              </template>
-              {{ t('deleteMailTip') }}
-            </n-popconfirm>
-            <n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
-              @click="getAttachments(curMail.attachments)">
-              {{ t('attachments') }}
-            </n-button>
-            <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
-              :href="getDownloadEmlUrl(curMail.raw)">
-              <template #icon>
-                <n-icon :component="CloudDownloadRound" />
-              </template>
-              {{ t('downloadMail') }}
-            </n-button>
-            <n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
-              <template #icon>
-                <n-icon :component="ReplyFilled" />
-              </template>
-              {{ t('reply') }}
-            </n-button>
-            <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
-              {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
-            </n-button>
-          </n-space>
-          <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
-          <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
-            style="margin-top: 10px;width: 100%; height: 100%;">
-          </iframe>
-          <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
-        </n-card>
-        <n-card class="mail-item" v-else>
-          <n-result status="info" :title="t('pleaseSelectMail')">
-          </n-result>
-        </n-card>
-      </template>
-    </n-split>
+                <n-thing :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ `${row.created_at} UTC` }}
+                    </n-tag>
+                    <n-tag type="info">
+                      FROM: {{ row.source }}
+                    </n-tag>
+                    <n-tag v-if="showEMailTo" type="info">
+                      TO: {{ row.address }}
+                    </n-tag>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
+        </template>
+        <template #2>
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ `${curMail.created_at} UTC` }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.source }}
+              </n-tag>
+              <n-tag v-if="showEMailTo" type="info">
+                TO: {{ curMail.address }}
+              </n-tag>
+              <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
+                <template #trigger>
+                  <n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
+                </template>
+                {{ t('deleteMailTip') }}
+              </n-popconfirm>
+              <n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
+                @click="getAttachments(curMail.attachments)">
+                {{ t('attachments') }}
+              </n-button>
+              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
+                :href="getDownloadEmlUrl(curMail.raw)">
+                <template #icon>
+                  <n-icon :component="CloudDownloadRound" />
+                </template>
+                {{ t('downloadMail') }}
+              </n-button>
+              <n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
+                <template #icon>
+                  <n-icon :component="ReplyFilled" />
+                </template>
+                {{ t('reply') }}
+              </n-button>
+              <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
+                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
+              </n-button>
+            </n-space>
+            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
+            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
+              style="margin-top: 10px;width: 100%; height: 100%;">
+            </iframe>
+            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
+          </n-card>
+          <n-card class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+    </div>
     <div class="left" v-else>
-      <div class="center">
-        <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+      <n-space justify="center">
+        <div style="display: inline-block;">
           <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
         </div>
         <n-switch v-model:value="autoRefresh" size="small" :round="false">
@@ -307,10 +454,10 @@ onBeforeUnmount(() => {
             {{ t('autoRefresh') }}
           </template>
         </n-switch>
-        <n-button @click="refresh" size="small" type="primary">
+        <n-button @click="refresh" tertiary size="small" type="primary">
           {{ t('refresh') }}
         </n-button>
-      </div>
+      </n-space>
       <div style="overflow: auto; height: 80vh;">
         <n-list hoverable clickable>
           <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
@@ -320,7 +467,7 @@ onBeforeUnmount(() => {
                   ID: {{ row.id }}
                 </n-tag>
                 <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                 </n-tag>
                 <n-tag type="info">
                   FROM: {{ row.source }}
@@ -342,7 +489,7 @@ onBeforeUnmount(() => {
                 ID: {{ curMail.id }}
               </n-tag>
               <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
               </n-tag>
               <n-tag type="info">
                 FROM: {{ curMail.source }}
@@ -371,8 +518,15 @@ onBeforeUnmount(() => {
                 </template>
                 {{ t('reply') }}
               </n-button>
+              <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
+                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
+              </n-button>
             </n-space>
-            <div v-html="curMail.message" style="margin-top: 10px;"></div>
+            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
+            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
+              style="margin-top: 10px;width: 100%; height: 100%;">
+            </iframe>
+            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
           </n-card>
         </n-drawer-content>
       </n-drawer>
@@ -381,25 +535,51 @@ onBeforeUnmount(() => {
       <template #header>
         <div>{{ t("attachments") }}</div>
       </template>
-      <n-list hoverable clickable>
-        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-          <n-thing class="center" :title="row.filename">
-            <template #description>
-              <n-space>
-                <n-tag type="info">
-                  Size: {{ row.size }}
-                </n-tag>
-              </n-space>
+      <n-spin v-model:show="attachmentLoding">
+        <n-list hoverable clickable>
+          <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
+            <n-thing class="center" :title="row.filename">
+              <template #description>
+                <n-space>
+                  <n-tag type="info">
+                    Size: {{ row.size }}
+                  </n-tag>
+                  <n-button v-if="showSaveS3" @click="saveToS3Proxy(row.filename, row.blob)" ghost type="info"
+                    size="small">
+                    {{ t('saveToS3') }}
+                  </n-button>
+                </n-space>
+              </template>
+            </n-thing>
+            <template #suffix>
+              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
+                :href="row.url">
+                <n-icon :component="CloudDownloadRound" />
+              </n-button>
             </template>
-          </n-thing>
-          <template #suffix>
-            <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
-              :href="row.url">
-              <n-icon :component="CloudDownloadRound" />
-            </n-button>
-          </template>
-        </n-list-item>
-      </n-list>
+          </n-list-item>
+        </n-list>
+      </n-spin>
+    </n-modal>
+    <n-modal v-model:show="showMultiActionDownload" preset="dialog" :title="t('downloadMail')">
+      <n-tag type="info">
+        {{ multiActionDownloadZip.filename }}
+      </n-tag>
+      <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="multiActionDownloadZip.filename"
+        :href="multiActionDownloadZip.url">
+        <n-icon :component="CloudDownloadRound" />
+        {{ t('downloadMail') + " zip" }}
+      </n-button>
+    </n-modal>
+    <n-modal v-model:show="showMultiActionDelete" preset="dialog" :title="t('delete') + t('success')"
+      negative-text="OK">
+      <n-space justify="center">
+        <n-progress type="circle" status="error" :percentage="multiActionDeleteProgress.percentage">
+          <span style="text-align: center">
+            {{ multiActionDeleteProgress.tip }}
+          </span>
+        </n-progress>
+      </n-space>
     </n-modal>
   </div>
 </template>

frontend/src/components/SendBox.vue

@@ -0,0 +1,269 @@
+<script setup>
+import { watch, onMounted, ref } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { useIsMobile } from '../utils/composables'
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const props = defineProps({
+  showEMailFrom: {
+    type: Boolean,
+    default: false
+  },
+  fetchMailData: {
+    type: Function,
+    default: () => { },
+    requried: true
+  },
+})
+
+const { isDark, mailboxSplitSize } = useGlobalState()
+const data = ref([])
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const curMail = ref(null);
+const showCode = ref(false)
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      success: 'Success',
+      refresh: 'Refresh',
+      showCode: 'Change View Original Code',
+      pleaseSelectMail: "Please select a mail to view."
+    },
+    zh: {
+      success: '成功',
+      refresh: '刷新',
+      showCode: '切换查看元数据',
+      pleaseSelectMail: "请选择一封邮件查看。",
+    }
+  }
+});
+
+watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
+  if (page !== oldPage || pageSize !== oldPageSize) {
+    await refresh();
+  }
+})
+
+const refresh = async () => {
+  try {
+    const { results, count: totalCount } = await props.fetchMailData(
+      pageSize.value, (page.value - 1) * pageSize.value
+    );
+    data.value = results.map((item) => {
+      try {
+        const data = JSON.parse(item.raw);
+        if (data.version == "v2") {
+          item.to_mail = data.to_name ? `${data.to_name} <${data.to_mail}>` : data.to_mail;
+          item.subject = data.subject;
+          item.is_html = data.is_html;
+          item.content = data.content;
+          item.raw = JSON.stringify(data, null, 2);
+        } else {
+          item.to_mail = data?.personalizations?.map(
+            (p) => p.to?.map((t) => t.email).join(',')
+          ).join(';');
+          item.subject = data.subject;
+          item.is_html = (data.content[0]?.type != 'text/plain');
+          item.content = data.content[0]?.value;
+          item.raw = JSON.stringify(data, null, 2);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+      return item;
+    });
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+      curMail.value = data.value[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  }
+};
+
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+const onSpiltSizeChange = (size) => {
+  mailboxSplitSize.value = size;
+}
+
+onMounted(async () => {
+  await refresh();
+});
+</script>
+
+<template>
+  <div>
+    <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25"
+      :default-size="mailboxSplitSize" :on-update:size="onSpiltSizeChange">
+      <template #1>
+        <div class="center">
+          <div style="display: inline-block; margin-right: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+          </div>
+          <n-button @click="refresh" size="small" type="primary" tertiary>
+            {{ t('refresh') }}
+          </n-button>
+        </div>
+        <div style="overflow: auto; height: 80vh;">
+          <n-list hoverable clickable>
+            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+              :class="mailItemClass(row)">
+              <n-thing :title="row.subject">
+                <template #description>
+                  <n-tag type="info">
+                    ID: {{ row.id }}
+                  </n-tag>
+                  <n-tag type="info">
+                    {{ `${row.created_at} UTC` }}
+                  </n-tag>
+                  <n-tag v-if="showEMailFrom" type="info">
+                    FROM: {{ row.address }}
+                  </n-tag>
+                  <n-tag type="info">
+                    TO: {{ row.to_mail }}
+                  </n-tag>
+                </template>
+              </n-thing>
+            </n-list-item>
+          </n-list>
+        </div>
+      </template>
+      <template #2>
+        <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
+          <n-space>
+            <n-tag type="info">
+              ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+              {{ `${curMail.created_at} UTC` }}
+            </n-tag>
+            <n-tag type="info">
+              FROM: {{ curMail.address }}
+            </n-tag>
+            <n-tag type="info">
+              TO: {{ curMail.to_mail }}
+            </n-tag>
+            <n-button size="small" tertiary type="info" @click="showCode = !showCode">
+              {{ t('showCode') }}
+            </n-button>
+          </n-space>
+          <pre v-if="showCode" style="margin-top: 10px;">{{ curMail.raw }}</pre>
+          <pre v-else-if="!curMail.is_html" style="margin-top: 10px;">{{ curMail.content }}</pre>
+          <div v-else v-html="curMail.content" style="margin-top: 10px;"></div>
+        </n-card>
+        <n-card class="mail-item" v-else>
+          <n-result status="info" :title="t('pleaseSelectMail')">
+          </n-result>
+        </n-card>
+      </template>
+    </n-split>
+    <div class="left" v-else>
+      <div class="center">
+        <div style="display: inline-block; margin-right: 10px;">
+          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+        </div>
+        <n-button @click="refresh" size="small" type="primary">
+          {{ t('refresh') }}
+        </n-button>
+      </div>
+      <div style="overflow: auto; height: 80vh;">
+        <n-list hoverable clickable>
+          <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+            <n-thing :title="row.subject">
+              <template #description>
+                <n-tag type="info">
+                  ID: {{ row.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ `${row.created_at} UTC` }}
+                </n-tag>
+                <n-tag v-if="showEMailFrom" type="info">
+                  FROM: {{ row.address }}
+                </n-tag>
+                <n-tag type="info">
+                  TO: {{ row.to_mail }}
+                </n-tag>
+              </template>
+            </n-thing>
+          </n-list-item>
+        </n-list>
+      </div>
+      <n-drawer v-model:show="curMail" width="100%" placement="bottom" :trap-focus="false" :block-scroll="false"
+        style="height: 80vh;">
+        <n-drawer-content :title="curMail ? curMail.subject : ''" closable>
+          <n-card style="overflow: auto;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ `${curMail.created_at} UTC` }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.address }}
+              </n-tag>
+              <n-tag type="info">
+                TO: {{ curMail.to_mail }}
+              </n-tag>
+            </n-space>
+            <pre v-if="showCode" style="margin-top: 10px;">{{ curMail.raw }}</pre>
+            <pre v-else-if="!curMail.is_html" style="margin-top: 10px;">{{ curMail.content }}</pre>
+            <div v-else v-html="curMail.content" style="margin-top: 10px;"></div>
+          </n-card>
+        </n-drawer-content>
+      </n-drawer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.overlay-dark-backgroud {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.overlay-light-backgroud {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mail-item {
+  height: 100%;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>

frontend/src/components/Turnstile.vue

@@ -2,12 +2,11 @@
 import { ref, watch, defineModel, onMounted } from "vue";
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-const { localeCache, openSettings, isDark } = useGlobalState()
+const { openSettings, isDark } = useGlobalState()
 
 const cfToken = defineModel('value')
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             refresh: 'Refresh'
@@ -42,7 +41,7 @@ const checkCfTurnstile = async (remove) => {
             "#cf-turnstile",
             {
                 sitekey: openSettings.value.cfTurnstileSiteKey,
-                language: localeCache.value == 'zh' ? 'zh-CN' : 'en-US',
+                language: locale.value == 'zh' ? 'zh-CN' : 'en-US',
                 theme: isDark.value ? 'dark' : 'light',
                 callback: function (token) {
                     cfToken.value = token;
@@ -68,12 +67,15 @@ onMounted(() => {
     <div v-if="openSettings.cfTurnstileSiteKey" class="center">
         <n-spin description="loading..." :show="turnstileLoading">
             <n-form-item-row>
-                <div id="cf-turnstile"></div>
-                <n-button text @click="checkCfTurnstile(true)">
-                    {{ t('refresh') }}
-                </n-button>
+                <n-flex vertical>
+                    <div id="cf-turnstile"></div>
+                    <n-button text @click="checkCfTurnstile(true)">
+                        {{ t('refresh') }}
+                    </n-button>
+                </n-flex>
             </n-form-item-row>
         </n-spin>
+
     </div>
 </template>
 

frontend/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import { createI18n } from 'vue-i18n'
 import router from './router'
 import { registerSW } from 'virtual:pwa-register'
+import { createHead } from '@unhead/vue'
 
 registerSW({ immediate: true })
 const i18n = createI18n({
@@ -16,7 +17,19 @@ const i18n = createI18n({
         messages: {}
     }
 })
+
+router.beforeEach((to, from) => {
+    if (to.params.lang && ['en', 'zh'].includes(to.params.lang)) {
+        i18n.global.locale.value = to.params.lang
+    } else {
+        i18n.global.locale.value = 'zh'
+    }
+});
+
+
+const head = createHead()
 const app = createApp(App)
 app.use(i18n)
 app.use(router)
+app.use(head)
 app.mount('#app')

frontend/src/router/index.js

@@ -1,24 +1,35 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Index from '../views/Index.vue'
-import UserLogin from '../views/user/UserLogin.vue'
 import User from '../views/User.vue'
-import SendMail from '../views/index/SendMail.vue'
-import Admin from '../views/Admin.vue'
+import { useGlobalState } from '../store'
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
             path: '/',
+            alias: "/:lang/",
             component: Index
         },
         {
             path: '/user',
+            alias: "/:lang/user",
             component: User
         },
         {
             path: '/admin',
-            component: Admin
+            alias: "/:lang/admin",
+            component: () => import('../views/Admin.vue')
+        },
+        {
+            path: '/telegram_mail',
+            alias: "/:lang/telegram_mail",
+            component: () => import('../views/telegram/Mail.vue')
+        },
+        {
+            name: 'not-found',
+            path: '/:pathMatch(.*)*',
+            redirect: '/'
         }
     ]
 })

frontend/src/store/index.js

@@ -7,19 +7,22 @@ export const useGlobalState = createGlobalState(
         const toggleDark = useToggle(isDark)
         const loading = ref(false);
         const openSettings = ref({
+            title: '',
             prefix: '',
             needAuth: false,
             adminContact: '',
             enableUserCreateEmail: false,
             enableUserDeleteEmail: false,
             enableAutoReply: false,
+            enableIndexAbout: false,
             domains: [],
             copyright: 'Dream Hunter',
             cfTurnstileSiteKey: '',
+            enableWebhook: false,
+            isS3Enabled: false,
         })
         const settings = ref({
             fetched: false,
-            has_v1_mails: false,
             send_balance: 0,
             address: '',
             auto_reply: {
@@ -44,7 +47,6 @@ export const useGlobalState = createGlobalState(
         const auth = useStorage('auth', '');
         const adminAuth = useStorage('adminAuth', '');
         const jwt = useStorage('jwt', '');
-        const localeCache = useStorage('locale', 'zh');
         const adminTab = ref("account");
         const adminMailTabAddress = ref("");
         const adminSendBoxTabAddress = ref("");
@@ -68,6 +70,8 @@ export const useGlobalState = createGlobalState(
             /** @type {number} */
             user_id: 0,
         });
+        const telegramApp = ref(window.Telegram?.WebApp || {});
+        const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
         return {
             isDark,
             toggleDark,
@@ -79,7 +83,6 @@ export const useGlobalState = createGlobalState(
             showAddressCredential,
             auth,
             jwt,
-            localeCache,
             adminAuth,
             showAdminAuth,
             adminTab,
@@ -95,6 +98,8 @@ export const useGlobalState = createGlobalState(
             userSettings,
             globalTabplacement,
             useSideMargin,
+            telegramApp,
+            isTelegram,
         }
     },
 )

frontend/src/utils/email-parser.js

@@ -16,11 +16,11 @@ export async function processItem(item) {
         item.message = parsedEmail.body_html || parsedEmail.text || '';
         item.text = parsedEmail.text || '';
         item.attachments = parsedEmail.attachments?.map((a_item) => {
-            const blob_url = URL.createObjectURL(
-                new Blob(
-                    [a_item.content],
-                    { type: a_item.content_type || 'application/octet-stream' }
-                ))
+            const blob = new Blob(
+                [a_item.content],
+                { type: a_item.content_type || 'application/octet-stream' }
+            );
+            const blob_url = URL.createObjectURL(blob);
             if (a_item.content_id && a_item.content_id.length > 0) {
                 item.message = item.message.replace(`cid:${a_item.content_id}`, blob_url);
             }
@@ -28,7 +28,8 @@ export async function processItem(item) {
                 id: a_item.content_id || Math.random().toString(36).substring(2, 15),
                 filename: a_item.filename || a_item.content_id || "",
                 size: humanFileSize(a_item.content?.length || 0),
-                url: blob_url
+                url: blob_url,
+                blob: blob
             }
         }) || [];
     } catch (error) {
@@ -49,11 +50,11 @@ export async function processItem(item) {
         item.message = parsedEmail.html || parsedEmail.text || item.raw;
         item.text = parsedEmail.text || '';
         item.attachments = parsedEmail.attachments?.map((a_item) => {
-            const blob_url = URL.createObjectURL(
-                new Blob(
-                    [a_item.content],
-                    { type: a_item.mimeType || 'application/octet-stream' }
-                ))
+            const blob = new Blob(
+                [a_item.content],
+                { type: a_item.mimeType || 'application/octet-stream' }
+            );
+            const blob_url = URL.createObjectURL(blob)
             if (a_item.contentId && a_item.contentId.length > 0) {
                 item.message = item.message.replace(`cid:${a_item.contentId}`, blob_url);
             }
@@ -61,7 +62,8 @@ export async function processItem(item) {
                 id: a_item.contentId || Math.random().toString(36).substring(2, 15),
                 filename: a_item.filename || a_item.contentId || "",
                 size: humanFileSize(a_item.content?.length || 0),
-                url: blob_url
+                url: blob_url,
+                blob: blob
             }
         }) || [];
     } catch (error) {

frontend/src/utils/index.ts

@@ -1,6 +1,13 @@
-export const hashPassword = async (password) => {
+export const hashPassword = async (password: string) => {
     // user crypto to hash password
     const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password));
     const hashArray = Array.from(new Uint8Array(digest));
     return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
 }
+
+export const getRouterPathWithLang = (path: string, lang: string) => {
+    if (!lang || lang === 'zh') {
+        return path;
+    }
+    return `/${lang}${path}`;
+}

frontend/src/views/Admin.vue

@@ -14,11 +14,14 @@ import UserManagement from './admin/UserManagement.vue';
 import UserSettings from './admin/UserSettings.vue';
 import Mails from './admin/Mails.vue';
 import MailsUnknow from './admin/MailsUnknow.vue';
+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
+  adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
 } = useGlobalState()
 const message = useMessage()
 
@@ -31,7 +34,6 @@ const authFunc = async () => {
 }
 
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
       accessHeader: 'Admin Password',
@@ -40,14 +42,18 @@ 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',
+      about: 'About',
       ok: 'OK',
     },
     zh: {
@@ -57,14 +63,18 @@ const { t } = useI18n({
       account: '账号',
       account_create: '创建账号',
       account_settings: '账号设置',
+      user: '用户',
       user_management: '用户管理',
       user_settings: '用户设置',
       unknow: '无收件人邮件',
       senderAccess: '发件权限控制',
       sendBox: '发件箱',
+      telegram: '电报机器人',
+      webhook: 'Webhook',
       statistics: '统计',
       maintenance: '维护',
       appearance: '外观',
+      about: '关于',
       ok: '确定',
     }
   }
@@ -92,32 +102,50 @@ 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 />
       </n-tab-pane>
+      <n-tab-pane name="telegram" :tab="t('telegram')">
+        <Telegram />
+      </n-tab-pane>
       <n-tab-pane name="statistics" :tab="t('statistics')">
         <Statistics />
       </n-tab-pane>
@@ -127,6 +155,9 @@ onMounted(async () => {
       <n-tab-pane name="appearance" :tab="t('appearance')">
         <Appearance />
       </n-tab-pane>
+      <n-tab-pane name="about" :tab="t('about')">
+        <About />
+      </n-tab-pane>
     </n-tabs>
   </div>
 </template>

frontend/src/views/Footer.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-const { localeCache, openSettings } = useGlobalState()
+const { openSettings } = useGlobalState()
 
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             copyright: "Copyright"

frontend/src/views/Header.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import {
@@ -11,11 +12,13 @@ import { GithubAlt, Language, User, Home } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
+import { getRouterPathWithLang } from '../utils'
+
 const message = useMessage()
 
 const {
-    localeCache, toggleDark, isDark, openSettings,
-    showAuth, adminAuth, auth, loading
+    toggleDark, isDark, isTelegram,
+    showAuth, adminAuth, auth, loading, openSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -36,13 +39,15 @@ const authFunc = async () => {
     }
 }
 
-const changeLocale = (locale) => {
-    localeCache.value = locale;
-    location.reload()
+const changeLocale = async (lang) => {
+    if (lang == 'zh') {
+        await router.push(route.fullPath.replace('/en', ''));
+    } else {
+        await router.push(`/${lang}${route.fullPath}`);
+    }
 }
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             title: 'Cloudflare Temp Email',
@@ -69,6 +74,8 @@ const { t } = useI18n({
     }
 });
 
+const version = import.meta.env.PACKAGE_VERSION ? `v${import.meta.env.PACKAGE_VERSION}` : "";
+
 const menuOptions = computed(() => [
     {
         label: () => h(NButton,
@@ -77,7 +84,10 @@ const menuOptions = computed(() => [
                 size: "small",
                 type: menuValue.value == "home" ? "primary" : "default",
                 style: "width: 100%",
-                onClick: async () => { await router.push('/'); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/', locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
                 default: () => t('home'),
@@ -93,7 +103,10 @@ const menuOptions = computed(() => [
                 size: "small",
                 type: menuValue.value == "user" ? "primary" : "default",
                 style: "width: 100%",
-                onClick: async () => { await router.push("/user"); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang("/user", locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
                 default: () => t('user'),
@@ -101,6 +114,7 @@ const menuOptions = computed(() => [
             }
         ),
         key: "user",
+        show: !isTelegram.value
     },
     {
         label: () => h(
@@ -110,7 +124,10 @@ const menuOptions = computed(() => [
                 size: "small",
                 type: menuValue.value == "admin" ? "primary" : "default",
                 style: "width: 100%",
-                onClick: async () => { await router.push('/admin'); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/admin', locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
                 default: () => "Admin",
@@ -145,13 +162,13 @@ const menuOptions = computed(() => [
                 text: true,
                 size: "small",
                 style: "width: 100%",
-                onClick: () => {
-                    localeCache.value == 'zh' ? changeLocale('en') : changeLocale('zh');
+                onClick: async () => {
+                    locale.value == 'zh' ? await changeLocale('en') : await changeLocale('zh');
                     showMobileMenu.value = false;
                 }
             },
             {
-                default: () => localeCache.value == 'zh' ? "English" : "中文",
+                default: () => locale.value == 'zh' ? "English" : "中文",
                 icon: () => h(
                     NIcon, { component: Language }
                 )
@@ -171,7 +188,7 @@ const menuOptions = computed(() => [
                 href: "https://github.com/dreamhunter2333/cloudflare_temp_email",
             },
             {
-                default: () => "Github",
+                default: () => version || "Github",
                 icon: () => h(NIcon, { component: GithubAlt })
             }
         ),
@@ -179,6 +196,13 @@ const menuOptions = computed(() => [
     }
 ]);
 
+useHead({
+    title: () => openSettings.value.title || t('title'),
+    meta: [
+        { name: "description", content: openSettings.value.description || t('title') },
+    ]
+});
+
 onMounted(async () => {
     await api.getOpenSettings(message);
 });
@@ -188,7 +212,7 @@ onMounted(async () => {
     <div>
         <n-page-header>
             <template #title>
-                <h3>{{ t('title') }}</h3>
+                <h3>{{ openSettings.title || t('title') }}</h3>
             </template>
             <template #avatar>
                 <n-avatar style="margin-left: 10px;" src="/logo.png" />

frontend/src/views/Index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../store'
@@ -6,15 +7,18 @@ import { api } from '../api'
 
 import AddressBar from './index/AddressBar.vue';
 import MailBox from '../components/MailBox.vue';
+import SendBox from '../components/SendBox.vue';
 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 Webhook from './index/Webhook.vue';
+import Attachment from './index/Attachment.vue';
+import About from './common/About.vue';
 
-const { localeCache, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
+const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const message = useMessage()
 
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
       mailbox: 'Mail Box',
@@ -22,6 +26,9 @@ const { t } = useI18n({
       sendmail: 'Send Mail',
       auto_reply: 'Auto Reply',
       accountSettings: 'Account Settings',
+      about: 'About',
+      s3Attachment: 'S3 Attachment',
+      saveToS3Success: 'save to s3 success',
     },
     zh: {
       mailbox: '收件箱',
@@ -29,6 +36,9 @@ const { t } = useI18n({
       sendmail: '发送邮件',
       auto_reply: '自动回复',
       accountSettings: '账户设置',
+      about: '关于',
+      s3Attachment: 'S3附件',
+      saveToS3Success: '保存到s3成功',
     }
   }
 });
@@ -40,6 +50,30 @@ const fetchMailData = async (limit, offset) => {
 const deleteMail = async (curMailId) => {
   await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
 };
+
+const fetchSenboxData = async (limit, offset) => {
+  return await api.fetch(`/api/sendbox?limit=${limit}&offset=${offset}`);
+};
+
+const saveToS3 = async (mail_id, filename, blob) => {
+  try {
+    const { url } = await api.fetch(`/api/attachment/put_url`, {
+      method: 'POST',
+      body: JSON.stringify({ key: `${mail_id}/${filename}` })
+    });
+    // upload to s3 by formdata
+    const formData = new FormData();
+    formData.append(filename, blob);
+    await fetch(url, {
+      method: 'PUT',
+      body: formData
+    });
+    message.success(t('saveToS3Success'));
+  } catch (error) {
+    console.error(error);
+    message.error(error.message || "save to s3 error");
+  }
+}
 </script>
 
 <template>
@@ -47,11 +81,12 @@ const deleteMail = async (curMailId) => {
     <AddressBar />
     <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
       <n-tab-pane name="mailbox" :tab="t('mailbox')">
-        <MailBox :showEMailTo="false" :showReply="true" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
-          :fetchMailData="fetchMailData" :deleteMail="deleteMail" />
+        <MailBox :showEMailTo="false" :showReply="true" :showSaveS3="openSettings.isS3Enabled" :saveToS3="saveToS3"
+          :enableUserDeleteEmail="openSettings.enableUserDeleteEmail" :fetchMailData="fetchMailData"
+          :deleteMail="deleteMail" />
       </n-tab-pane>
       <n-tab-pane name="sendbox" :tab="t('sendbox')">
-        <SendBox />
+        <SendBox :fetchMailData="fetchSenboxData" />
       </n-tab-pane>
       <n-tab-pane name="sendmail" :tab="t('sendmail')">
         <SendMail />
@@ -62,6 +97,15 @@ 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')">
+        <Webhook />
+      </n-tab-pane>
+      <n-tab-pane v-if="openSettings.isS3Enabled" name="s3_attachment" :tab="t('s3Attachment')">
+        <Attachment />
+      </n-tab-pane>
+      <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
+        <About />
+      </n-tab-pane>
     </n-tabs>
   </div>
 </template>

frontend/src/views/User.vue

@@ -9,11 +9,10 @@ import UserBar from './user/UserBar.vue';
 import BindAddress from './user/BindAddress.vue';
 
 const {
-    localeCache, userTab, globalTabplacement, userSettings
+    userTab, globalTabplacement, userSettings
 } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             address_management: 'Address Management',

frontend/src/views/admin/Account.vue

@@ -9,13 +9,12 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'
 
 const {
-    localeCache, adminAuth, showAdminAuth, loading,
+    adminAuth, showAdminAuth, loading,
     adminTab, adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             name: 'Name',
@@ -261,7 +260,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/AccountSettings.vue

@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             save: 'Save',
@@ -17,6 +16,7 @@ const { t } = useI18n({
             address_block_list: 'Address Block Keywords for Users(Admin can skip)',
             address_block_list_placeholder: 'Please enter the keywords you want to block',
             send_address_block_list: 'Address Block Keywords for send email',
+            verified_address_list: 'Verified Address List(Can send email by cf internal api)',
         },
         zh: {
             save: '保存',
@@ -24,18 +24,21 @@ const { t } = useI18n({
             address_block_list: '邮件地址屏蔽关键词(管理员可跳过检查)',
             address_block_list_placeholder: '请输入您想要屏蔽的关键词',
             send_address_block_list: '发送邮件地址屏蔽关键词',
+            verified_address_list: '已验证地址列表(可通过 cf 内部 api 发送邮件)',
         }
     }
 });
 
 const addressBlockList = ref([])
 const sendAddressBlockList = ref([])
+const verifiedAddressList = ref([])
 
 const fetchData = async () => {
     try {
         const res = await api.fetch(`/admin/account_settings`)
         addressBlockList.value = res.blockList || []
         sendAddressBlockList.value = res.sendBlockList || []
+        verifiedAddressList.value = res.verifiedAddressList || []
     } catch (error) {
         message.error(error.message || "error");
     }
@@ -47,7 +50,8 @@ const save = async () => {
             method: 'POST',
             body: JSON.stringify({
                 blockList: addressBlockList.value || [],
-                sendBlockList: sendAddressBlockList.value || []
+                sendBlockList: sendAddressBlockList.value || [],
+                verifiedAddressList: verifiedAddressList.value || []
             })
         })
         message.success(t('successTip'))
@@ -73,6 +77,10 @@ onMounted(async () => {
                 <n-select v-model:value="sendAddressBlockList" filterable multiple tag
                     :placeholder="t('address_block_list_placeholder')" />
             </n-form-item-row>
+            <n-form-item-row :label="t('verified_address_list')">
+                <n-select v-model:value="verifiedAddressList" filterable multiple tag
+                    :placeholder="t('verified_address_list')" />
+            </n-form-item-row>
             <n-button @click="save" type="primary" block :loading="loading">
                 {{ t('save') }}
             </n-button>

frontend/src/views/admin/CreateAccount.vue

@@ -6,12 +6,11 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
 const {
-    localeCache, loading, openSettings,
+    loading, openSettings,
 } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             address: 'Address',

frontend/src/views/admin/Mails.vue

@@ -7,12 +7,11 @@ import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';
 
 const {
-    localeCache, adminAuth, showAdminAuth,
+    adminAuth, showAdminAuth,
     adminMailTabAddress
 } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             addressQueryTip: 'Leave blank to query all addresses',
@@ -58,7 +57,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')" />
@@ -66,6 +65,7 @@ onMounted(async () => {
                 {{ t('query') }}
             </n-button>
         </n-input-group>
+        <div style="margin-top: 10px;"></div>
         <MailBox :key="mailBoxKey" :enableUserDeleteEmail="false" :fetchMailData="fetchMailData" />
     </div>
 </template>

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/Maintenance.vue

@@ -6,7 +6,7 @@ import { CleaningServicesFilled } from '@vicons/material'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, adminAuth, showAdminAuth } = useGlobalState()
+const { adminAuth, showAdminAuth } = useGlobalState()
 const message = useMessage()
 const cleanupModel = ref({
     enableMailsAutoCleanup: false,
@@ -20,13 +20,11 @@ const cleanupModel = ref({
 })
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             tip: 'Please input the cleanup days',
             mailBoxLabel: 'Clean up days for mailbox',
             mailUnknowLabel: "Clean up days for unknow receiver",
-            addressUnActiveLabel: "Clean up days for unactive address",
             sendBoxLabel: "Clean up days for sendbox",
             cleanupNow: "Cleanup now",
             autoCleanup: "Auto cleanup",
@@ -38,7 +36,6 @@ const { t } = useI18n({
             tip: '请输入清理天数',
             mailBoxLabel: '收件箱清理天数',
             mailUnknowLabel: "无收件人邮件清理天数",
-            addressUnActiveLabel: "未活跃地址清理天数",
             sendBoxLabel: "发件箱清理天数",
             autoCleanup: "自动清理",
             cleanupSuccess: "清理成功",
@@ -123,19 +120,7 @@ onMounted(async () => {
                         {{ t('cleanupNow') }}
                     </n-button>
                 </n-form-item-row>
-                <n-form-item-row :label="t('addressUnActiveLabel')">
-                    <n-checkbox v-model:checked="cleanupModel.enableAddressAutoCleanup">
-                        {{ t('autoCleanup') }}
-                    </n-checkbox>
-                    <n-input-number v-model:value="cleanupModel.cleanAddressDays" :placeholder="t('tip')" />
-                    <n-button @click="cleanup('address', cleanupModel.cleanAddressDays)">
-                        <template #icon>
-                            <n-icon :component="CleaningServicesFilled" />
-                        </template>
-                        {{ t('cleanupNow') }}
-                    </n-button>
-                </n-form-item-row>
-                <n-form-item-row :label="t('mailBoxLabel')">
+                <n-form-item-row :label="t('sendBoxLabel')">
                     <n-checkbox v-model:checked="cleanupModel.enableSendBoxAutoCleanup">
                         {{ t('autoCleanup') }}
                     </n-checkbox>

frontend/src/views/admin/SendBox.vue

@@ -1,153 +1,42 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import SendBox from '../../components/SendBox.vue';
 
-const { localeCache, adminAuth, adminSendBoxTabAddress, showAdminAuth } = useGlobalState()
-const message = useMessage()
+const { adminSendBoxTabAddress } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
-            address: 'Address',
-            success: 'Success',
-            to_mail: 'To Mail',
-            subject: 'Subject',
-            created_at: 'Created At',
-            action: 'Action',
             query: 'Query',
-            itemCount: 'itemCount',
-            view: 'View',
+            queryTip: 'Please input address to query, leave blank to query all',
         },
         zh: {
-            address: '地址',
-            success: '成功',
-            to_mail: '收件人邮箱',
-            subject: '主题',
-            created_at: '创建时间',
-            action: '操作',
             query: '查询',
-            itemCount: '总数',
-            view: '查看',
+            queryTip: '请输入地址查询, 留空则查询所有',
         }
     }
 });
-const data = ref([])
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
 
-const curRow = ref({})
-const showModal = ref(false)
-
-const fetchData = async () => {
-    try {
-        const { results, count: addressCount } = await api.fetch(
-            `/admin/sendbox`
-            + `?limit=${pageSize.value}`
-            + `&offset=${(page.value - 1) * pageSize.value}`
-            + (adminSendBoxTabAddress.value ? `&address=${adminSendBoxTabAddress.value}` : '')
-        );
-        data.value = results.map((item) => {
-            try {
-                const data = JSON.parse(item.raw);
-                item.to_mail = data?.personalizations?.map(
-                    (p) => p.to?.map((t) => t.email).join(',')
-                ).join(';');
-                item.subject = data.subject;
-                item.raw = JSON.stringify(data, null, 2);
-            } catch (error) {
-                console.log(error);
-            }
-            return item;
-        });
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
+const fetchData = async (limit, offset) => {
+    return await api.fetch(
+        `/admin/sendbox?limit=${limit}&offset=${offset}`
+        + (adminSendBoxTabAddress.value ? `&address=${adminSendBoxTabAddress.value}` : '')
+    );
 }
-
-const columns = [
-    {
-        title: "ID",
-        key: "id"
-    },
-    {
-        title: t('address'),
-        key: "address"
-    },
-    {
-        title: t('to_mail'),
-        key: "to_mail"
-    },
-    {
-        title: t('subject'),
-        key: "subject"
-    },
-    {
-        title: t('created_at'),
-        key: "created_at"
-    },
-    {
-        title: t('action'),
-        key: 'actions',
-        render(row) {
-            return h('div', [
-                h(NButton,
-                    {
-                        type: 'success',
-                        tertiary: true,
-                        onClick: () => {
-                            showModal.value = true;
-                            curRow.value = row;
-                        }
-                    },
-                    { default: () => t('view') }
-                )
-            ])
-        }
-    }
-]
-
-watch([page, pageSize], async () => {
-    await fetchData()
-})
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-    await fetchData()
-})
 </script>
 
 <template>
     <div>
-        <n-modal v-model:show="showModal" preset="dialog" style="width: 100%;">
-            <pre style="overflow: auto;">{{ curRow.raw }}</pre>
-        </n-modal>
         <n-input-group>
-            <n-input v-model:value="adminSendBoxTabAddress" />
+            <n-input v-model:value="adminSendBoxTabAddress" :placeholder="t('queryTip')" />
             <n-button @click="fetchData" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>
         </n-input-group>
-        <div style="display: inline-block;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
-                :page-sizes="[20, 50, 100]" show-size-picker>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-            </n-pagination>
-        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
+        <SendBox style="margin-top: 10px;" :fetchMailData="fetchData" :showEMailFrom="true" />
     </div>
 </template>
 

frontend/src/views/admin/SenderAccess.vue

@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
       address: 'Address',

frontend/src/views/admin/Statistics.vue

@@ -7,11 +7,10 @@ import { SendOutlined } from '@vicons/material'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, adminAuth } = useGlobalState()
+const { adminAuth } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             userCount: 'Account Count',

frontend/src/views/admin/Telegram.vue

@@ -0,0 +1,164 @@
+<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'
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            init: 'Init',
+            successTip: 'Success',
+            status: 'Check Status',
+            enableTelegramAllowList: 'Enable Telegram Allow List(Manually input user ID)',
+            enable: 'Enable',
+            telegramAllowList: 'Telegram Allow List',
+            save: 'Save',
+            miniAppUrl: 'Telegram Mini App URL',
+            enableGlobalMailPush: 'Enable Global Mail Push(Manually input telegram user ID)',
+            globalMailPushList: 'Global Mail Push List',
+        },
+        zh: {
+            init: '初始化',
+            successTip: '成功',
+            status: '查看状态',
+            enableTelegramAllowList: '启用 Telegram 白名单(手动输入用户 ID)',
+            enable: '启用',
+            telegramAllowList: 'Telegram 白名单',
+            save: '保存',
+            miniAppUrl: '电报小程序 URL(请输入你部署的电报小程序网页地址)',
+            enableGlobalMailPush: '启用全局邮件推送(手动输入邮箱管理员的 telegram 用户 ID)',
+            globalMailPushList: '全局邮件推送用户列表',
+        }
+    }
+});
+
+const status = ref({
+    fetched: false,
+})
+
+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 as Error).message || "error");
+    }
+}
+
+const init = async () => {
+    try {
+        await api.fetch(`/admin/telegram/init`, {
+            method: 'POST',
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+class TelegramSettings {
+    enableAllowList: boolean;
+    allowList: string[];
+    miniAppUrl: string;
+    enableGlobalMailPush: boolean;
+    globalMailPushList: string[];
+
+    constructor(
+        enableAllowList: boolean, allowList: string[], miniAppUrl: string,
+        enableGlobalMailPush: boolean, globalMailPushList: string[]
+    ) {
+        this.enableAllowList = enableAllowList;
+        this.allowList = allowList;
+        this.miniAppUrl = miniAppUrl;
+        this.enableGlobalMailPush = enableGlobalMailPush;
+        this.globalMailPushList = globalMailPushList;
+    }
+}
+
+const settings = ref(new TelegramSettings(false, [], '', 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-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-form-item-row :label="t('enableGlobalMailPush')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="settings.enableGlobalMailPush" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-select v-model:value="settings.globalMailPushList" filterable multiple tag
+                            style="width: 80%;" :placeholder="t('globalMailPushList')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-form-item-row :label="t('miniAppUrl')">
+                    <n-input v-model:value="settings.miniAppUrl"></n-input>
+                </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="fetchStatus" secondary block>
+                {{ t('status') }}
+            </n-button>
+            <pre v-if="status.fetched">{{ JSON.stringify(status, null, 2) }}</pre>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/src/views/admin/UserManagement.vue

@@ -8,11 +8,10 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { hashPassword } from '../../utils';
 
-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             success: 'Success',
@@ -223,7 +222,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/UserSettings.vue

@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             save: 'Save',

frontend/src/views/admin/Webhook.vue

@@ -0,0 +1,84 @@
+<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'
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    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/common/About.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+</script>
+
+<template>
+    <div class="center">
+        <n-card>
+            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
+                <template #icon>
+                    <n-icon :component="GithubAlt" />
+                </template>
+                Github
+            </n-button>
+            <n-button tag="a" target="_blank" href="https://discord.gg/dQEwTWhA6Q">
+                <template #icon>
+                    <n-icon :component="Discord" />
+                </template>
+                Discord
+            </n-button>
+            <n-button tag="a" target="_blank" href="https://t.me/cloudflare_temp_email">
+                <template #icon>
+                    <n-icon :component="Telegram" />
+                </template>
+                Telegram
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+.n-card {
+    max-width: 800px;
+}
+
+.n-button {
+    margin-top: 10px;
+    margin-left: 10px;
+}
+</style>

frontend/src/views/common/AdminContact.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
-const { localeCache, openSettings } = useGlobalState()
+const { openSettings } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             adminContact: 'If you need help, please contact the administrator ({msg})',

frontend/src/views/common/Appearance.vue

@@ -1,15 +1,16 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 
+import { useIsMobile } from '../../utils/composables'
 import { useGlobalState } from '../../store'
 
 const {
-    localeCache, mailboxSplitSize, useIframeShowMail, preferShowTextMail,
+    mailboxSplitSize, useIframeShowMail, preferShowTextMail,
     globalTabplacement, useSideMargin
 } = useGlobalState()
+const isMobile = useIsMobile()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             mailboxSplitSize: 'Mailbox Split Size',
@@ -40,7 +41,7 @@ const { t } = useI18n({
 <template>
     <div class="center">
         <n-card>
-            <n-form-item-row :label="t('mailboxSplitSize')">
+            <n-form-item-row v-if="!isMobile" :label="t('mailboxSplitSize')">
                 <n-slider v-model:value="mailboxSplitSize" :min="0.25" :max="0.75" :step="0.01" :marks="{
                     0.25: '0.25',
                     0.5: '0.5',
@@ -53,7 +54,7 @@ const { t } = useI18n({
             <n-form-item-row :label="t('useIframeShowMail')">
                 <n-switch v-model:value="useIframeShowMail" :round="false" />
             </n-form-item-row>
-            <n-form-item-row :label="t('useSideMargin')">
+            <n-form-item-row v-if="!isMobile" :label="t('useSideMargin')">
                 <n-switch v-model:value="useSideMargin" :round="false" />
             </n-form-item-row>
             <n-form-item-row :label="t('globalTabplacement')">

frontend/src/views/common/Login.vue

@@ -9,11 +9,35 @@ import Turnstile from '../../components/Turnstile.vue'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import { getRouterPathWithLang } from '../../utils'
+
+const props = defineProps({
+    bindUserAddress: {
+        type: Function,
+        default: async () => { await api.bindUserAddress(); },
+        requried: true
+    },
+    newAddressPath: {
+        type: Function,
+        default: async (address_name, domain, cf_token) => {
+            return await api.fetch("/api/new_address", {
+                method: "POST",
+                body: JSON.stringify({
+                    name: address_name,
+                    domain: domain,
+                    cf_token: cf_token,
+                }),
+            });
+        },
+        requried: true
+    },
+})
+
 const message = useMessage()
 const router = useRouter()
 
 const {
-    jwt, localeCache, loading, openSettings,
+    jwt, loading, openSettings,
     showAddressCredential, userSettings
 } = useGlobalState()
 
@@ -32,18 +56,17 @@ const login = async () => {
         jwt.value = credential.value;
         await api.getSettings();
         try {
-            await api.bindUserAddress();
+            await props.bindUserAddress();
         } catch (error) {
             message.error(`${t('bindUserAddressError')}: ${error.message}`);
         }
-        await router.push("/");
+        await router.push(getRouterPathWithLang("/", locale.value));
     } catch (error) {
         message.error(error.message || "error");
     }
 }
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             login: 'Login',
@@ -98,20 +121,17 @@ const generateName = async () => {
 
 const newEmail = async () => {
     try {
-        const res = await api.fetch(`/api/new_address`, {
-            method: "POST",
-            body: JSON.stringify({
-                name: emailName.value,
-                domain: emailDomain.value,
-                cf_token: cfToken.value,
-            }),
-        });
+        const res = await props.newAddressPath(
+            emailName.value,
+            emailDomain.value,
+            cfToken.value
+        );
         jwt.value = res["jwt"];
         await api.getSettings();
-        await router.push("/");
+        await router.push(getRouterPathWithLang("/", locale.value));
         showAddressCredential.value = true;
         try {
-            await api.bindUserAddress();
+            await props.bindUserAddress();
         } catch (error) {
             message.error(`${t('bindUserAddressError')}: ${error.message}`);
         }

frontend/src/views/index/AccountSettings.vue

@@ -6,17 +6,17 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Appearance from '../common/Appearance.vue'
+import { getRouterPathWithLang } from '../../utils'
 
 const {
-    jwt, localeCache, settings, showAddressCredential, loading
+    jwt, settings, showAddressCredential, loading
 } = useGlobalState()
 const router = useRouter()
 const message = useMessage()
 
 const showLogout = ref(false)
 const showDelteAccount = ref(false)
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             logout: "Logout",
@@ -39,7 +39,7 @@ const { t } = useI18n({
 
 const logout = async () => {
     jwt.value = '';
-    await router.push('/')
+    await router.push(getRouterPathWithLang("/", locale.value))
     location.reload()
 }
 
@@ -49,7 +49,7 @@ const deleteAccount = async () => {
             method: 'DELETE'
         });
         jwt.value = '';
-        await router.push('/')
+        await router.push(getRouterPathWithLang("/", locale.value))
         location.reload()
     } catch (error) {
         message.error(error.message || "error");

frontend/src/views/index/AddressBar.vue

@@ -1,43 +1,47 @@
 <script setup>
 import useClipboard from 'vue-clipboard3'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { Copy, User } from '@vicons/fa'
+import { Copy, User, ExchangeAlt } from '@vicons/fa'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Login from '../common/Login.vue'
+import AddressManagement from '../user/AddressManagement.vue'
+import TelegramAddress from './TelegramAddress.vue'
+import LocalAddress from './LocalAddress.vue'
+import { getRouterPathWithLang } from '../../utils'
 
 const { toClipboard } = useClipboard()
 const message = useMessage()
 const router = useRouter()
 
 const {
-    jwt, localeCache, settings, showAddressCredential, openSettings
+    jwt, settings, showAddressCredential, userJwt,
+    isTelegram
 } = useGlobalState()
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
-            yourAddress: 'Your email address is',
+            addressManage: 'Address Manage',
+            changeAddress: 'Change Address',
             ok: 'OK',
             copy: 'Copy',
             copied: 'Copied',
             fetchAddressError: 'Mail address credential is invalid or account not exist, it may be network connection issue, please try again later.',
-            mailV1Alert: 'You have some mails in v1, please click here to login and visit your history mails.',
             addressCredential: 'Mail Address Credential',
             addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             userLogin: 'User Login',
         },
         zh: {
-            yourAddress: '你的邮箱地址是',
+            addressManage: '地址管理',
+            changeAddress: '更换地址',
             ok: '确定',
             copy: '复制',
             copied: '已复制',
             fetchAddressError: '邮箱地址凭证无效或邮箱地址不存在，也可能是网络连接异常，请稍后再尝试。',
-            mailV1Alert: '你有一些 v1 版本的邮件，请点击此处登录查看。',
             addressCredential: '邮箱地址凭证',
             addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             userLogin: '用户登录',
@@ -45,6 +49,10 @@ const { t } = useI18n({
     }
 });
 
+const showChangeAddress = ref(false)
+const showTelegramChangeAddress = ref(false)
+const showLocalAddress = ref(false)
+
 const copy = async () => {
     try {
         await toClipboard(settings.value.address)
@@ -54,6 +62,10 @@ const copy = async () => {
     }
 }
 
+const onUserLogin = async () => {
+    await router.push(getRouterPathWithLang("/user", locale.value))
+}
+
 onMounted(async () => {
     await api.getSettings();
 });
@@ -65,22 +77,30 @@ onMounted(async () => {
             <n-skeleton style="height: 50vh" />
         </n-card>
         <div v-else-if="settings.address">
-            <n-alert v-if="settings.has_v1_mails" type="warning" :show-icon="false" closable>
-                <span>
-                    <n-button tag="a" target="_blank" tertiary type="info" size="small" href="https://mail-v1.awsl.uk">
-                        <b>{{ t('mailV1Alert') }} </b>
-                    </n-button>
-                </span>
-            </n-alert>
             <n-alert type="info" :show-icon="false">
                 <span>
-                    <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                    <b>{{ settings.address }}</b>
+                    <n-button v-if="isTelegram" style="margin-left: 10px" @click="showTelegramChangeAddress = true"
+                        size="small" tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('addressManage') }}
+                    </n-button>
+                    <n-button v-else-if="userJwt" style="margin-left: 10px" @click="showChangeAddress = true"
+                        size="small" tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('changeAddress') }}
+                    </n-button>
+                    <n-button v-else style="margin-left: 10px" @click="showLocalAddress = true" size="small" tertiary
+                        type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('addressManage') }}
+                    </n-button>
                     <n-button style="margin-left: 10px" @click="copy" size="small" tertiary type="primary">
                         <n-icon :component="Copy" /> {{ t('copy') }}
                     </n-button>
                 </span>
             </n-alert>
         </div>
+        <div v-else-if="isTelegram">
+            <TelegramAddress />
+        </div>
         <div v-else class="center">
             <n-card style="max-width: 600px;">
                 <n-alert v-if="jwt" type="warning" :show-icon="false" closable>
@@ -88,7 +108,7 @@ onMounted(async () => {
                 </n-alert>
                 <Login />
                 <n-divider />
-                <n-button @click="router.push('/user')" type="primary" block secondary strong>
+                <n-button @click="onUserLogin" type="primary" block secondary strong>
                     <template #icon>
                         <n-icon :component="User" />
                     </template>
@@ -96,6 +116,15 @@ onMounted(async () => {
                 </n-button>
             </n-card>
         </div>
+        <n-modal v-model:show="showTelegramChangeAddress" preset="card" :title="t('changeAddress')">
+            <TelegramAddress />
+        </n-modal>
+        <n-modal v-model:show="showChangeAddress" preset="card" :title="t('changeAddress')">
+            <AddressManagement />
+        </n-modal>
+        <n-modal v-model:show="showLocalAddress" preset="card" :title="t('changeAddress')">
+            <LocalAddress />
+        </n-modal>
         <n-modal v-model:show="showAddressCredential" preset="dialog" :title="t('addressCredential')">
             <span>
                 <p>{{ t("addressCredentialTip") }}</p>

frontend/src/views/index/Attachment.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { api } from '../../api'
+
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            download: 'Download',
+            action: 'Action',
+        },
+        zh: {
+            download: '下载',
+            action: '操作',
+        }
+    }
+});
+const data = ref([])
+const showDownload = ref(false)
+const curRow = ref({})
+const curDownloadUrl = ref('')
+
+const fetchData = async () => {
+    try {
+        const { results } = await api.fetch(
+            `/api/attachment/list`
+        );
+        data.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "key",
+        key: "key"
+    },
+    {
+        title: t('action'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NButton,
+                    {
+                        type: 'success',
+                        tertiary: true,
+                        onClick: async () => {
+                            try {
+                                const { url } = await api.fetch(`/api/attachment/get_url`, {
+                                    method: 'POST',
+                                    body: JSON.stringify({ key: row.key })
+                                });
+                                curDownloadUrl.value = url;
+                                curRow.value = row;
+                                showDownload.value = true;
+                            }
+                            catch (error) {
+                                console.error(error);
+                                message.error(error.message || "error");
+                            }
+                        }
+                    },
+                    { default: () => t('download') }
+                )
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-modal v-model:show="showDownload" preset="dialog" :title="t('download')">
+            <n-tag type="info">{{ curRow.key }}</n-tag>
+            <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curRow.key.replace('/', '_')"
+                :href="curDownloadUrl">
+                {{ t('download') }}
+            </n-button>
+        </n-modal>
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
+    </div>
+</template>

frontend/src/views/index/LocalAddress.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, h, computed } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import { useI18n } from 'vue-i18n'
+import { NPopconfirm, NButton } from 'naive-ui'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import Login from '../common/Login.vue';
+
+const { jwt } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            tip: 'These addresses are stored in your browser, maybe loss if you clear the browser cache.',
+            success: 'success',
+            address: 'Address',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+            unbindMailAddress: 'Unbind Mail Address credential',
+            bind: 'Bind',
+            bindAddressSuccess: 'Bind Address Success',
+        },
+        zh: {
+            tip: '这些地址存储在您的浏览器中，如果您清除浏览器缓存，可能会丢失。',
+            success: '成功',
+            address: '地址',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+            unbindMailAddress: '解绑邮箱地址',
+            bind: '绑定',
+            bindAddressSuccess: '绑定地址成功',
+        }
+    }
+});
+
+const tabValue = ref('address')
+const localAddressCache = useLocalStorage("LocalAddressCache", []);
+const data = computed(() => {
+    // @ts-ignore
+    if (!localAddressCache.value.includes(jwt.value)) {
+        // @ts-ignore
+        localAddressCache.value.push(jwt.value)
+    }
+    return localAddressCache.value.map((curJwt: string) => {
+        try {
+            var payload = JSON.parse(
+                decodeURIComponent(
+                    atob(curJwt.split(".")[1]
+                        .replace(/-/g, "+").replace(/_/g, "/")
+                    )
+                )
+            );
+            return {
+                valid: true,
+                address: payload.address,
+                jwt: curJwt
+            }
+        } catch (e) {
+            return {
+                valid: false,
+                address: `invalid jwt [${curJwt}]`,
+                jwt: curJwt
+            }
+        }
+    })
+
+})
+
+const bindAddress = async () => {
+    try {
+        // @ts-ignore
+        if (!localAddressCache.value.includes(jwt.value)) {
+            // @ts-ignore
+            localAddressCache.value.push(jwt.value)
+        }
+        tabValue.value = 'address'
+        message.success(t('bindAddressSuccess'));
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row: any) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            jwt.value = row.jwt
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            if (jwt.value === row.jwt) {
+                                return;
+                            }
+                            localAddressCache.value = localAddressCache.value.filter(
+                                (curJwt: string) => curJwt !== row.jwt
+                            );
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                disabled: jwt.value === row.jwt,
+                                type: "warning",
+                            },
+                            { default: () => t('unbindMailAddress') }
+                        ),
+                        default: () => `${t('unbindMailAddress')}?`
+                    }
+                )
+            ])
+        }
+    }
+]
+</script>
+
+<template>
+    <div>
+        <n-alert type="warning" :show-icon="false">
+            <span>{{ t('tip') }}</span>
+        </n-alert>
+        <n-tabs type="segment" v-model:value="tabValue">
+            <n-tab-pane name="address" :tab="t('address')">
+                <n-data-table :columns="columns" :data="data" :bordered="false" />
+            </n-tab-pane>
+            <n-tab-pane name="bind" :tab="t('bind')">
+                <Login :bindUserAddress="bindAddress" />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>

frontend/src/views/index/SendBox.vue

@@ -1,156 +0,0 @@
-<script setup>
-import { ref, h, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n'
-
-import { useGlobalState } from '../../store'
-import { api } from '../../api'
-
-const { localeCache, settings } = useGlobalState()
-const message = useMessage()
-
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
-    messages: {
-        en: {
-            address: 'Address',
-            success: 'Success',
-            to_mail: 'To Mail',
-            subject: 'Subject',
-            created_at: 'Created At',
-            action: 'Action',
-            refresh: 'Refresh',
-            itemCount: 'itemCount',
-            view: 'View',
-            ok: 'OK'
-        },
-        zh: {
-            address: '地址',
-            success: '成功',
-            to_mail: '收件人邮箱',
-            subject: '主题',
-            created_at: '创建时间',
-            action: '操作',
-            refresh: '刷新',
-            itemCount: '总数',
-            view: '查看',
-            ok: '确定'
-        }
-    }
-});
-const data = ref([])
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const curRow = ref({})
-const showModal = ref(false)
-
-const fetchData = async () => {
-    try {
-        const { results, count: addressCount } = await api.fetch(
-            `/api/sendbox`
-            + `?limit=${pageSize.value}`
-            + `&offset=${(page.value - 1) * pageSize.value}`
-        );
-        data.value = results.map((item) => {
-            try {
-                const data = JSON.parse(item.raw);
-                item.to_mail = data?.personalizations?.map(
-                    (p) => p.to?.map((t) => t.email).join(',')
-                ).join(';');
-                item.subject = data.subject;
-                item.raw = JSON.stringify(data, null, 2);
-            } catch (error) {
-                console.log(error);
-            }
-            return item;
-        });
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
-}
-
-const columns = [
-    {
-        title: "ID",
-        key: "id"
-    },
-    {
-        title: t('address'),
-        key: "address"
-    },
-    {
-        title: t('to_mail'),
-        key: "to_mail"
-    },
-    {
-        title: t('subject'),
-        key: "subject"
-    },
-    {
-        title: t('created_at'),
-        key: "created_at"
-    },
-    {
-        title: t('action'),
-        key: 'actions',
-        render(row) {
-            return h('div', [
-                h(NButton,
-                    {
-                        type: 'success',
-                        ghost: true,
-                        onClick: () => {
-                            showModal.value = true;
-                            curRow.value = row;
-                        }
-                    },
-                    { default: () => t('view') }
-                )
-            ])
-        }
-    }
-]
-
-watch([page, pageSize], async () => {
-    await fetchData()
-})
-
-
-onMounted(async () => {
-    await fetchData()
-})
-</script>
-
-<template>
-    <div v-if="settings.address">
-        <n-modal v-model:show="showModal" preset="dialog" style="width: 100%;">
-            <pre style="overflow: auto;">{{ curRow.raw }}</pre>
-        </n-modal>
-        <div style="display: inline-block;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
-                :page-sizes="[20, 50, 100]" show-size-picker>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-                <template #suffix>
-                    <n-button @click="fetchData" type="primary" size="small" tertiary>
-                        {{ t('refresh') }}
-                    </n-button>
-                </template>
-            </n-pagination>
-        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
-    </div>
-</template>
-
-<style scoped>
-.n-pagination {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-</style>

frontend/src/views/index/TelegramAddress.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NPopconfirm, NButton } from 'naive-ui'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+// @ts-ignore
+import Login from '../common/Login.vue';
+
+const { jwt, telegramApp } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            success: 'success',
+            address: 'Address',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+            unbindMailAddress: 'Unbind Mail Address',
+            bind: 'Bind',
+            bindAddressSuccess: 'Bind Address Success',
+        },
+        zh: {
+            success: '成功',
+            address: '地址',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+            unbindMailAddress: '解绑邮箱地址',
+            bind: '绑定',
+            bindAddressSuccess: '绑定地址成功',
+        }
+    }
+});
+
+const data = ref([]);
+
+const fetchData = async () => {
+    try {
+        data.value = await api.fetch(`/telegram/get_bind_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData
+            })
+        });
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const newAddressPath = async (address_name: string, domain: string, cf_token: string) => {
+    return await api.fetch("/telegram/new_address", {
+        method: "POST",
+        body: JSON.stringify({
+            initData: telegramApp.value.initData,
+            address: `${address_name}@${domain}`,
+            cf_token: cf_token,
+        }),
+    });
+}
+
+const bindAddress = async () => {
+    try {
+        await api.fetch(`/telegram/bind_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData,
+                jwt: jwt.value
+            })
+        });
+        message.success(t('bindAddressSuccess'));
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row: any) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            jwt.value = row.jwt
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            api.fetch(`/telegram/unbind_address`, {
+                                method: 'POST',
+                                body: JSON.stringify({
+                                    initData: telegramApp.value.initData,
+                                    address: row.address
+                                })
+                            });
+                            jwt.value = ""
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "warning",
+                            },
+                            { default: () => t('unbindMailAddress') }
+                        ),
+                        default: () => `${t('unbindMailAddress')}?`
+                    }
+                )
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    if (!telegramApp.value?.initData || data.value.length > 0) {
+        return
+    }
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-tabs type="segment">
+            <n-tab-pane name="address" :tab="t('address')">
+                <n-data-table :columns="columns" :data="data" :bordered="false" />
+            </n-tab-pane>
+            <n-tab-pane name="bind" :tab="t('bind')">
+                <Login :newAddressPath="newAddressPath" :bindUserAddress="bindAddress" />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>

frontend/src/views/index/Webhook.vue

@@ -0,0 +1,129 @@
+<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)
+
+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/src/views/telegram/Mail.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { useRoute } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import { onMounted, watch } from 'vue';
+import { processItem } from '../../utils/email-parser'
+
+const { telegramApp } = useGlobalState()
+const route = useRoute()
+
+const curMail = ref({});
+
+watch(telegramApp, async () => {
+    if (telegramApp.value.initData) {
+        curMail.value = await fetchMailData();
+    }
+});
+
+const fetchMailData = async () => {
+    try {
+        const res = await api.fetch(`/telegram/get_mail`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData,
+                mailId: route.query.mail_id
+            })
+        });
+        return await processItem(res);
+    }
+    catch (error) {
+        console.error(error);
+        return {};
+    }
+};
+
+onMounted(async () => {
+    curMail.value = await fetchMailData();
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-card v-if="curMail.message" style="max-width: 800px; overflow: auto;">
+            <n-tag type="info">
+                ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+                Date: {{ curMail.created_at }}
+            </n-tag>
+            <n-tag type="info">
+                FROM: {{ curMail.source }}
+            </n-tag>
+            <n-tag v-if="showEMailTo" type="info">
+                TO: {{ curMail.address }}
+            </n-tag>
+            <div v-html="curMail.message" style="margin-top: 10px;"></div>
+        </n-card>
+    </div>
+</template>
+
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/user/AddressManagement.vue

@@ -6,13 +6,13 @@ import { NBadge, NPopconfirm, NButton } from 'naive-ui'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import { getRouterPathWithLang } from '../../utils'
 
-const { localeCache, jwt } = useGlobalState()
+const { jwt } = useGlobalState()
 const message = useMessage()
 const router = useRouter()
 
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
     messages: {
         en: {
             success: 'success',
@@ -48,7 +48,7 @@ const changeMailAddress = async (address_id) => {
             return;
         }
         jwt.value = res.jwt;
-        await router.push('/');
+        await router.push(getRouterPathWithLang("/", locale.value))
         location.reload();
     } catch (error) {
         console.log(error)

frontend/src/views/user/BindAddress.vue

@@ -6,10 +6,9 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import Login from '../common/Login.vue'
 
-const { userJwt, localeCache, userSettings, } = useGlobalState()
+const { userJwt, userSettings, } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             logout: 'Logout',

frontend/src/views/user/UserBar.vue

@@ -11,11 +11,10 @@ const message = useMessage()
 const router = useRouter()
 
 const {
-    localeCache, userSettings, userJwt, userOpenSettings
+    userSettings, userJwt, userOpenSettings
 } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             currentUser: 'Current Login User',

frontend/src/views/user/UserLogin.vue

@@ -10,12 +10,11 @@ import { hashPassword } from '../../utils';
 
 import Turnstile from '../../components/Turnstile.vue';
 
-const { userJwt, localeCache, userTab, userOpenSettings } = useGlobalState()
+const { userJwt, userTab, userOpenSettings } = useGlobalState()
 const message = useMessage();
 const router = useRouter();
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             login: 'Login',

frontend/src/views/user/UserSettings.vue

@@ -6,14 +6,13 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { userJwt, localeCache, userSettings, } = useGlobalState()
+const { userJwt, userSettings, } = useGlobalState()
 const router = useRouter()
 const message = useMessage()
 
 const showLogout = ref(false)
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             logout: 'Logout',

frontend/tsconfig.json

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

frontend/vite.config.js

@@ -13,15 +13,6 @@ import topLevelAwait from "vite-plugin-top-level-await";
 export default defineConfig({
   build: {
     outDir: './dist',
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('wangeditor')) {
-            return 'vendor-wangeditor';
-          }
-        }
-      }
-    }
   },
   plugins: [
     vue(),
@@ -71,5 +62,8 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  define: {
+    'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
   }
 })

pages/.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env.*
+*-dist/
+components.d.ts
+.wrangler/
+pnpm-lock.yaml

pages/functions/_middleware.js

@@ -0,0 +1,9 @@
+const API_PATHS = ["/api/", "/open_api/", "/user_api/", "/admin/"]
+
+export async function onRequest(context) {
+    const reqPath = new URL(context.request.url).pathname;
+    if (API_PATHS.map(path => reqPath.startsWith(path)).some(Boolean)) {
+        return context.env.BACKEND.fetch(context.request);
+    }
+    return await context.next();
+}

pages/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "temp-email-pages",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "wrangler pages dev",
+    "deploy": "wrangler pages deploy --branch production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "wrangler": "^3.55.0"
+  }
+}

pages/wrangler.toml

@@ -0,0 +1,8 @@
+name = "temp-email-pages"
+pages_build_output_dir = "../frontend/dist"
+compatibility_date = "2024-05-13"
+
+[[services]]
+binding = "BACKEND"
+service = "cloudflare_temp_email"
+environment = "production"

smtp_proxy_server/config.py

@@ -0,0 +1,21 @@
+import logging
+from pydantic_settings import BaseSettings
+
+logging.basicConfig(
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+)
+
+_logger = logging.getLogger(__name__)
+_logger.setLevel(logging.INFO)
+
+
+class Settings(BaseSettings):
+    proxy_url: str = "http://localhost:8787"
+    port: int = 8025
+    imap_port: int = 11143
+
+    class Config:
+        env_file = ".env"
+
+
+settings = Settings()

smtp_proxy_server/docker-compose.yaml

@@ -7,6 +7,8 @@ services:
     container_name: "smtp_proxy_server"
     ports:
       - "8025:8025"
+      - "11143:11143"
     environment:
       - proxy_url=https://temp-email-api.xxx.xxx
       - port=8025
+      - imap_port=11143

smtp_proxy_server/dockerfile

@@ -4,4 +4,4 @@ WORKDIR /app
 COPY requirements.txt /requirements.txt
 RUN python3 -m pip install -r /requirements.txt
 COPY . /app
-ENTRYPOINT [ "python3", "server.py" ]
+ENTRYPOINT [ "python3", "main.py" ]

smtp_proxy_server/imap_server.py

@@ -0,0 +1,249 @@
+import json
+import logging
+import httpx
+
+from io import BytesIO
+from twisted.mail import imap4
+from zope.interface import implementer
+from twisted.cred.portal import Portal, IRealm
+from twisted.internet import protocol, reactor, defer
+from twisted.cred.checkers import ICredentialsChecker, IUsernamePassword
+
+from config import settings
+from parse_email import generate_email_model, parse_email
+from models import EmailModel
+
+_logger = logging.getLogger(__name__)
+_logger.setLevel(logging.INFO)
+
+
+@implementer(imap4.IMessage)
+class SimpleMessage:
+
+    def __init__(self, uid=None, email_model: EmailModel = None):
+        self.uid = uid
+        self.email = email_model
+        self.subparts = self.email.subparts
+
+    def getUID(self):
+        return self.uid
+
+    def getHeaders(self, negate, *names):
+        self.got_headers = negate, names
+        return {
+            k.lower(): v
+            for k, v in self.email.headers.items()
+        }
+
+    def isMultipart(self):
+        return len(self.subparts) > 0
+
+    def getSubPart(self, part):
+        self.got_subpart = part
+        return SimpleMessage(email_model=self.subparts[part])
+
+    def getBodyFile(self):
+        return BytesIO(self.email.body.encode("utf-8"))
+
+    def getSize(self):
+        return self.email.size
+
+    def getFlags(self):
+        return ["\\Seen"]
+
+    def getInternalDate(self):
+        return self.email.headers.get("Date", "Mon, 1 Jan 1900 00:00:00 +0000")
+
+
+@implementer(imap4.IMailboxInfo, imap4.IMailbox)
+class SimpleMailbox:
+
+    def __init__(self, name, password):
+        self.name = name
+        self.password = password
+        self.listeners = []
+        self.addListener = self.listeners.append
+        self.removeListener = self.listeners.remove
+        self.message_count = 0
+
+    def getFlags(self):
+        return ["\\Seen"]
+
+    def getUIDValidity(self):
+        return 0
+
+    def getMessageCount(self):
+        return self.message_count or 1000
+
+    def getRecentCount(self):
+        return 0
+
+    def getUnseenCount(self):
+        return 0
+
+    def isWriteable(self):
+        return 0
+
+    def destroy(self):
+        pass
+
+    def getHierarchicalDelimiter(self):
+        return "/"
+
+    def requestStatus(self, names):
+        r = {}
+        if "MESSAGES" in names:
+            r["MESSAGES"] = self.getMessageCount()
+        if "RECENT" in names:
+            r["RECENT"] = self.getRecentCount()
+        if "UIDNEXT" in names:
+            r["UIDNEXT"] = self.getMessageCount() + 1
+        if "UIDVALIDITY" in names:
+            r["UIDVALIDITY"] = self.getUIDValidity()
+        if "UNSEEN" in names:
+            r["UNSEEN"] = self.getUnseenCount()
+        return defer.succeed(r)
+
+    def fetch(self, messages, uid):
+        if self.name == "INBOX":
+            return self.fetchINBOX(messages)
+        if self.name == "SENT":
+            return self.fetchSENT(messages)
+        return []
+
+    def fetchINBOX(self, messages):
+        start, end = messages.ranges[0]
+        start = max(start, 1)
+        limit = min(20, end - start + 1) if end and end >= start else 20
+        if self.message_count > 0 and start > self.message_count:
+            return []
+        res = httpx.get(
+            f"{settings.proxy_url}/api/mails?limit={limit}&offset={start - 1}",
+            headers={
+                "Authorization": f"Bearer {self.password}",
+                "Content-Type": "application/json"
+            }
+        )
+        if res.status_code != 200:
+            _logger.error(
+                "Failed: "
+                f"code=[{res.status_code}] text=[{res.text}]"
+            )
+            raise Exception("Failed to fetch emails")
+        if res.json()["count"] > 0:
+            self.message_count = res.json()["count"]
+        return [
+            (start + uid, SimpleMessage(start + uid, parse_email(item["raw"])))
+            for uid, item in enumerate(reversed(res.json()["results"]))
+        ]
+
+    def fetchSENT(self, messages):
+        start, end = messages.ranges[0]
+        start = max(start, 1)
+        limit = min(20, end - start + 1) if end and end >= start else 20
+        if self.message_count > 0 and start > self.message_count:
+            return []
+        res = httpx.get(
+            f"{settings.proxy_url}/api/sendbox?limit={limit}&offset={start - 1}",
+            headers={
+                "Authorization": f"Bearer {self.password}",
+                "Content-Type": "application/json"
+            }
+        )
+        if res.status_code != 200:
+            _logger.error(
+                "Failed: "
+                f"code=[{res.status_code}] text=[{res.text}]"
+            )
+            raise Exception("Failed to fetch emails")
+        if res.json()["count"] > 0:
+            self.message_count = res.json()["count"]
+        return [
+            (start + uid, SimpleMessage(start + uid, generate_email_model(item)))
+            for uid, item in enumerate(reversed(res.json()["results"]))
+        ]
+
+    def getUID(self, message):
+        return message.uid
+
+    def store(self, messages, flags, mode, uid):
+        # IMailboxIMAP.store
+        raise NotImplementedError
+
+
+class Account(imap4.MemoryAccount):
+
+    def __init__(self, user, password):
+        self.password = password
+        super().__init__(user)
+
+    def isSubscribed(self, name):
+        return name.upper() in ["INBOX", "SENT"]
+
+    def _emptyMailbox(self, name, id):
+        _logger.info(f"New mailbox: {name}, {id}")
+        if name == "INBOX":
+            return SimpleMailbox(name, self.password)
+        if name == "SENT":
+            return SimpleMailbox(name, self.password)
+        raise imap4.NoSuchMailbox(name.encode("utf-8"))
+
+    def select(self, name, rw=1):
+        return imap4.MemoryAccount.select(self, name)
+
+
+class SimpleIMAPServer(imap4.IMAP4Server):
+    def __init__(self, factory):
+        imap4.IMAP4Server.__init__(self)
+        self.factory = factory
+
+    def lineReceived(self, line):
+        # _logger.info(f"Received: {line}")
+        super().lineReceived(line)
+
+    def sendLine(self, line):
+        # _logger.info(f"Sent: {line}")
+        super().sendLine(line)
+
+
+@implementer(IRealm)
+class SimpleRealm:
+    def requestAvatar(self, avatarId, mind, *interfaces):
+        res = json.loads(avatarId)
+        account = Account(res["username"], res["password"])
+        account.addMailbox("INBOX")
+        account.addMailbox("SENT")
+        return imap4.IAccount, account, lambda: None
+
+
+class IMAPFactory(protocol.Factory):
+    def __init__(self, portal):
+        self.portal = portal
+
+    def buildProtocol(self, addr):
+        p = SimpleIMAPServer(self)
+        p.portal = self.portal
+        return p
+
+
+@implementer(ICredentialsChecker)
+class CustomChecker:
+    credentialInterfaces = (IUsernamePassword,)
+
+    def requestAvatarId(self, credentials):
+        return defer.succeed(json.dumps({
+            "username": credentials.username.decode(),
+            "password": credentials.password.decode(),
+        }))
+
+
+def start_imap_server():
+    _logger.info(f"Starting IMAP server on port {settings.imap_port}")
+    portal = Portal(SimpleRealm(), [CustomChecker()])
+    reactor.listenTCP(settings.imap_port, IMAPFactory(portal))
+    reactor.run()
+
+
+if __name__ == "__main__":
+    _logger.info(f"Starting server settings[{settings}]")
+    start_imap_server()

smtp_proxy_server/main.py

@@ -0,0 +1,24 @@
+import logging
+import multiprocessing
+
+from smtp_server import start_smtp_server
+from imap_server import start_imap_server
+from config import settings
+
+_logger = logging.getLogger(__name__)
+_logger.setLevel(logging.INFO)
+
+if __name__ == '__main__':
+    _logger.info(f"Starting server settings[{settings}]")
+    process_list = [
+        multiprocessing.Process(target=start_smtp_server, args=()),
+        multiprocessing.Process(target=start_imap_server, args=()),
+    ]
+    try:
+        for p in process_list:
+            p.start()
+        for p in process_list:
+            p.join()
+    except KeyboardInterrupt:
+        for p in process_list:
+            p.terminate()

smtp_proxy_server/models.py

@@ -0,0 +1,10 @@
+from typing import Dict, List
+from pydantic import BaseModel
+
+
+class EmailModel(BaseModel):
+    headers: Dict[str, str]
+    body: str
+    content_type: str
+    subparts: List["EmailModel"]
+    size: int

smtp_proxy_server/parse_email.py

@@ -0,0 +1,62 @@
+import datetime
+import json
+import logging
+import email
+
+from email.message import Message
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
+
+
+from models import EmailModel
+
+_logger = logging.getLogger(__name__)
+_logger.setLevel(logging.INFO)
+
+
+def get_email_model(msg: Message):
+    subparts = [
+        get_email_model(subpart)
+        for subpart in msg.get_payload()
+    ] if msg.is_multipart() else []
+    body = "" if msg.is_multipart() else msg._payload
+    return EmailModel(
+        headers={k: v for k, v in msg.items()},
+        body=body,
+        content_type=msg.get_content_type(),
+        size=len(body) + sum(subpart.size for subpart in subparts),
+        subparts=subparts,
+    )
+
+
+def parse_email(raw: str) -> EmailModel:
+    try:
+        msg = email.message_from_string(raw)
+        return get_email_model(msg)
+    except Exception as e:
+        _logger.error(f"Could not parse email: {e}")
+        return EmailModel(
+            headers={},
+            body="could not parse email",
+            content_type="text/plain",
+            size=len("could not parse email"),
+            subparts=[],
+        )
+
+
+def generate_email_model(item: dict) -> EmailModel:
+    email_json = json.loads(item["raw"])
+    message = MIMEMultipart()
+    message['From'] = f"{email_json["from"]['name']} <{
+        email_json["from"]['email']}>"
+    message['To'] = ", ".join(
+        [f"{to['name']} <{to['email']}>" for to in email_json["personalizations"][0]["to"]])
+    message['Subject'] = email_json["subject"]
+    message["Date"] = datetime.datetime.strptime(
+        item["created_at"], "%Y-%m-%d %H:%M:%S"
+    ).strftime("%a, %d %b %Y %H:%M:%S +0000")
+    message.attach(MIMEText(
+        email_json["content"][0]["value"],
+        "html" if "html" in email_json["content"][0]["type"] else "plain"
+    ))
+    return parse_email(message.as_string())

smtp_proxy_server/requirements.txt

@@ -1,3 +1,5 @@
-aiosmtpd==1.4.5
+aiosmtpd==1.4.6
 pydantic-settings==2.2.1
-requests==2.31.0
+requests==2.32.0
+twisted==24.3.0
+httpx==0.27.0

smtp_proxy_server/smtp_server.py

@@ -1,28 +1,17 @@
 import asyncio
 import logging
 import email
-import requests
+import httpx
 
-from pydantic_settings import BaseSettings
 from aiosmtpd.controller import Controller
 from aiosmtpd.smtp import SMTP, Session, Envelope, AuthResult, LoginPassword
 
-logging.basicConfig(
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
-)
+from config import settings
 
 _logger = logging.getLogger(__name__)
 _logger.setLevel(logging.INFO)
 
 
-class Settings(BaseSettings):
-    proxy_url: str = "http://localhost:8787"
-    port: int = 8025
-
-    class Config:
-        env_file = ".env"
-
-
 class CustomSMTPHandler:
 
     def authenticator(self, server, session, envelope, mechanism, auth_data):
@@ -51,20 +40,34 @@ class CustomSMTPHandler:
         if msg.is_multipart():
             for part in msg.walk():
                 content_type = part.get_content_type()
-                payload = part.get_payload(decode=True)
+                charset = part.get_content_charset()
+                cte = str(part.get('content-transfer-encoding', '')).lower()
                 if content_type not in ["text/plain", "text/html"]:
                     _logger.warning(f"Skipping {content_type}")
                     continue
-                if not payload:
+                if cte == "8bit":
+                    value = part.get_payload(decode=False)
+                else:
+                    payload = part.get_payload(decode=True)
+                    value = payload.decode(charset) if charset else payload
+                if not value:
                     continue
                 content_list.append({
                     "type": content_type,
-                    "value": payload.decode()
+                    "value": value
                 })
         elif msg.get_content_type() in ["text/plain", "text/html"] and msg.get_payload(decode=True):
+            cte = str(msg.get('content-transfer-encoding', '')).lower()
+            charset = msg.get_content_charset()
+            if cte == "8bit":
+                value = msg.get_payload(decode=False)
+            else:
+                payload = msg.get_payload(decode=True)
+                value = payload.decode(charset) if charset else payload
+            _logger.info(f"Payload {msg._payload} charset {charset}")
             content_list.append({
                 "type": msg.get_content_type(),
-                "value": msg.get_payload(decode=True).decode()
+                "value": value
             })
 
         if not content_list:
@@ -97,9 +100,9 @@ class CustomSMTPHandler:
             "is_html": body["type"] == "text/html",
             "content": body["value"],
         }
-        _logger.info(f"Send mail {send_body}")
+        _logger.info(f"Send mail {dict(send_body, token='***')}")
         try:
-            res = requests.post(
+            res = httpx.post(
                 f"{settings.proxy_url}/external/api/send_mail",
                 json=send_body, headers={
                     "Content-Type": "application/json"
@@ -118,7 +121,6 @@ class CustomSMTPHandler:
         return '250 OK'
 
 
-settings = Settings()
 handler = CustomSMTPHandler()
 server = Controller(
     handler,
@@ -132,11 +134,11 @@ server = Controller(
 
 
 async def start():
-    _logger.info(f"Starting server settings[{settings}]")
+    _logger.info(f"Starting server on port {settings.port}")
     server.start()
 
 
-if __name__ == "__main__":
+def start_smtp_server():
     loop = asyncio.new_event_loop()
     asyncio.set_event_loop(loop)
     task = loop.create_task(start())
@@ -145,3 +147,8 @@ if __name__ == "__main__":
     except KeyboardInterrupt:
         _logger.info("Got KeyboardInterrupt, stopping")
         server.stop()
+
+
+if __name__ == "__main__":
+    _logger.info(f"Starting server settings[{settings}]")
+    start_smtp_server()

vitepress-docs/docs/.vitepress/zh.ts

@@ -96,7 +96,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         },
         {
             text: '通过命令行部署',
-            collapsed: false,
+            collapsed: true,
             items: [
                 { text: '命令行部署准备', link: 'cli/pre-requisite' },
                 { text: 'D1 数据库', link: 'cli/d1' },
@@ -109,7 +109,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         },
         {
             text: '通过用户界面部署',
-            collapsed: false,
+            collapsed: true,
             items: [
                 { text: 'D1 数据库', link: 'ui/d1' },
                 { text: '配置 DKIM', link: 'dkim' },
@@ -121,24 +121,26 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         },
         {
             text: '通过 Github Actions 部署',
-            collapsed: false,
+            collapsed: true,
             items: [
-                { text: '开发中', link: 'github-action' },
+                { text: '通过 Github Actions 部署', link: 'github-action' },
             ]
         },
         {
             text: '附加功能',
-            collapsed: false,
+            collapsed: true,
             items: [
-                { text: '配置 SMTP 代理服务', link: 'feature/config-smtp-proxy' },
+                { text: '配置 SMTP IMAP 代理服务', link: 'feature/config-smtp-proxy' },
                 { text: '发送邮件 API', link: 'feature/send-mail-api' },
                 { text: '查看邮件 API', link: 'feature/mail-api' },
                 { text: '配置子域名邮箱', link: 'feature/subdomain' },
+                { text: '配置 Telegram Bot', link: 'feature/telegram' },
+                { text: '配置 S3 附件', link: 'feature/s3-attachment' },
             ]
         },
         {
             text: '功能简介',
-            collapsed: false,
+            collapsed: true,
             items: [
                 { text: 'Admin 控制台', link: 'feature/admin' },
                 { text: 'Admin 用户管理', link: 'feature/admin-user-management' },

vitepress-docs/docs/en/cli.md

@@ -60,7 +60,7 @@ pnpm run deploy
 
 ```toml
 name = "cloudflare_temp_email"
-main = "src/worker.js"
+main = "src/worker.ts"
 compatibility_date = "2023-08-14"
 node_compat = true
 
@@ -68,7 +68,13 @@ node_compat = true
 # [triggers]
 # crons = [ "0 0 * * *" ]
 
+# send mail by cf mail
+# send_email = [
+#    { name = "SEND_MAIL" },
+# ]
+
 [vars]
+# TITLE = "Custom Title" # The title of the site
 PREFIX = "tmp" # The mailbox name prefix to be processed
 # If you want your site to be private, uncomment below and change your password
 # PASSWORDS = ["123", "456"]
@@ -85,6 +91,8 @@ ENABLE_USER_CREATE_EMAIL = true
 ENABLE_USER_DELETE_EMAIL = true
 # Allow automatic replies to emails
 ENABLE_AUTO_REPLY = false
+# Allow webhook
+# ENABLE_WEBHOOK = true
 # Footer text
 # COPYRIGHT = "Dream Hunter"
 # default send balance, if not set, it will be 0
@@ -95,6 +103,10 @@ ENABLE_AUTO_REPLY = false
 # dkim config
 # DKIM_SELECTOR = "mailchannels" # Refer to the DKIM section mailchannels._domainkey for mailchannels
 # DKIM_PRIVATE_KEY = "" # Refer to the contents of priv_key.txt in the DKIM section
+# telegram bot
+# TG_MAX_ACCOUNTS = 5
+# global forward address list, if set, all emails will be forwarded to these addresses
+# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]
 
 [[d1_databases]]
 binding = "DB"

vitepress-docs/docs/zh/guide/cli/pages.md

@@ -1,5 +1,11 @@
 # Cloudflare Pages 前端
 
+::: warning
+下面两种方式选择一种即可
+:::
+
+## 前后端分离部署
+
 第一次部署会提示创建项目, `production` 分支请填写 `production`
 
 ```bash
@@ -23,3 +29,19 @@ pnpm run deploy
 部署完成之后你可以在 Cloudflare 控制台看到你的项目, 可以为 `pages` 配置自定义域名
 
 ![pages](/readme_assets/pages.png)
+
+## 通过 page functions 转发后端请求
+
+从 page functions 转发请求到 worker 后端, 可以获取更快的响应速度
+
+第一次部署会提示创建项目, `production` 分支请填写 `production`
+
+如果你的 worker 后端 名称不为 `cloudflare_temp_email` 请修改 `pages/wrangler.toml`
+
+```bash
+cd frontend
+pnpm install
+pnpm build:pages
+cd ../pages
+pnpm run deploy
+```

vitepress-docs/docs/zh/guide/cli/worker.md

@@ -12,6 +12,7 @@ cp wrangler.toml.template wrangler.toml
 
 > [!NOTE]
 > 如果你要启用注册用户功能，并需要发送邮件验证，则需要创建 `KV` 缓存, 不需要可跳过此步骤
+> 如果需要 Telegram Bot，需要创建 `KV` 缓存，不需要可跳过此步骤
 
 通过命令行创建 KV 缓存，或者在 Cloudflare 控制台创建，然后复制对应配置到 `wrangler.toml` 文件中
 
@@ -23,7 +24,7 @@ wrangler kv:namespace create DEV
 
 ```toml
 name = "cloudflare_temp_email"
-main = "src/worker.js"
+main = "src/worker.ts"
 compatibility_date = "2023-12-01"
 # 如果你想使用自定义域名，你需要添加 routes 配置
 # routes = [
@@ -35,7 +36,13 @@ node_compat = true
 # [triggers]
 # crons = [ "0 0 * * *" ]
 
+# 通过 Cloudflare 发送邮件
+# send_email = [
+#    { name = "SEND_MAIL" },
+# ]
+
 [vars]
+# TITLE = "Custom Title" # 自定义网站标题
 PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
 # 如果你想要你的网站私有，取消下面的注释，并修改密码
 # PASSWORDS = ["123", "456"]
@@ -52,6 +59,8 @@ ENABLE_USER_CREATE_EMAIL = true
 ENABLE_USER_DELETE_EMAIL = true
 # 允许自动回复邮件
 ENABLE_AUTO_REPLY = false
+# 是否启用 webhook
+# ENABLE_WEBHOOK = true
 # 前端界面页脚文本
 # COPYRIGHT = "Dream Hunter"
 # 默认发送邮件余额，如果不设置，将为 0
@@ -62,6 +71,10 @@ ENABLE_AUTO_REPLY = false
 # dkim config
 # DKIM_SELECTOR = "mailchannels" # 参考 DKIM 部分 mailchannels._domainkey 的 mailchannels
 # DKIM_PRIVATE_KEY = "" # 参考 DKIM 部分 priv_key.txt 的内容
+# telegram bot 最多绑定邮箱数量
+# TG_MAX_ACCOUNTS = 5
+# 全局转发地址列表，如果不配置则不启用，启用后所有邮件都会转发到列表中的地址
+# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]
 
 # D1 数据库的名称和 ID 可以在 cloudflare 控制台查看
 [[d1_databases]]
@@ -83,6 +96,17 @@ database_id = "xxx" # D1 数据库 ID
 # simple = { limit = 10, period = 60 }
 ```
 
+## Telegram Bot 配置
+
+> [!NOTE]
+> 如果不需要 Telegram Bot, 可跳过此步骤
+
+请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 secrets 中
+
+```bash
+pnpm wrangler secret put TELEGRAM_BOT_TOKEN
+```
+
 ## 部署
 
 第一次部署会提示创建项目, `production` 分支请填写 `production`

vitepress-docs/docs/zh/guide/config-send-mail.md

@@ -1,6 +1,35 @@
 
 # 配置发送邮件
 
+## 使用 Cloudflare Workers 给已认证的邮箱发送邮件
+
+admin 后台 账号配置 `已验证地址列表(可通过 cf 内部 api 发送邮件)`
+
+## 使用 resend 发送邮件
+
+注册 `https://resend.com/domains` 根据提示添加 DNS 记录,
+
+`API KEYS` 页面创建 `api key`
+
+使用 cli 或者直接添加到 `wrangler.toml` 的 `vars`，或者在 cloudflare worker 页面的变量中添加 `RESEND_TOKEN`
+
+```bash
+wrangler secret put RESEND_TOKEN
+```
+
+如果你有多个域名，对应不同的 `api key`，可以在 `wrangler.toml` 中添加多个 secret, 名称为 `RESEND_TOKEN_` + `<. 换成 _ 的 大写域名>`,例如
+
+```bash
+wrangler secret put RESEND_TOKEN_XXX_COM
+wrangler secret put RESEND_TOKEN_DREAMHUNTER2333_XYZ
+```
+
+## 使用 mailchannels 发送邮件
+
+::: warning
+[Mail Channels 免费电子邮件发送 API 将于2024年6月30日结束](https://support.mailchannels.com/hc/en-us/articles/26814255454093-End-of-Life-Notice-Cloudflare-Workers)
+:::
+
 1. 找到域名 `DNS` 记录的 `TXT` 的 `SPF` 记录, 增加 `include:relay.mailchannels.net`
 
     `v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all`

vitepress-docs/docs/zh/guide/feature/config-smtp-proxy.md

@@ -1,10 +1,14 @@
-# 搭建 SMTP 代理服务
+# 搭建 SMTP IMAP 代理服务
 
-## 为什么需要 SMTP 代理服务
+::: warning
+如果你使用了 `resend`, 可直接使用 `resend` 的 `SMTP` 服务，不需要使用此服务
+:::
 
-SMTP 的应用场景更加广泛
+## 为什么需要 SMTP IMAP 代理服务
 
-## 如何搭建 SMTP 代理服务
+`SMTP` `IMAP` 的应用场景更加广泛
+
+## 如何搭建 SMTP IMAP 代理服务
 
 ### Local Run
 
@@ -16,7 +20,7 @@ cd smtp_proxy_server/
 cp .env.example .env
 python3 -m venv venv
 ./venv/bin/python3 -m pip install -r requirements.txt
-./venv/bin/python3 server.py
+./venv/bin/python3 main.py
 ```
 
 ### Docker Run
@@ -28,14 +32,29 @@ docker-compose up -d
 
 修改 docker-compose.yaml 中的环境变量, 注意选择合适的 `tag`
 
+`proxy_url` 为 `worker` 的 URL 地址
+
 ```yaml
 services:
   smtp_proxy_server:
     image: ghcr.io/dreamhunter2333/cloudflare_temp_email/smtp_proxy_server:latest
+    # build:
+    #   context: .
+    #   dockerfile: dockerfile
     container_name: "smtp_proxy_server"
     ports:
       - "8025:8025"
+      - "11143:11143"
     environment:
       - proxy_url=https://temp-email-api.xxx.xxx
       - port=8025
+      - imap_port=11143
 ```
+
+## 使用 Thunderbird 登录
+
+下载 [Thunderbird](https://www.thunderbird.net/en-US/)
+
+密码填写 `邮箱地址凭证`
+
+![imap](/feature/imap.png)

vitepress-docs/docs/zh/guide/feature/mail-api.md

@@ -7,9 +7,9 @@
 ```python
 limit = 10
 offset = 0
-res = requests.post(
-    f"http://localhost:8787/api/mails?limit={limit}&offset={offset}`;",
-    json=send_body, headers={
+res = requests.get(
+    f"http://localhost:8787/api/mails?limit={limit}&offset={offset}",
+    headers={
         "Authorization": f"Bearer {你的JWT密码}",
         # "x-custom-auth": "<你的网站密码>", # 如果启用了自定义密码
         "Content-Type": "application/json"

vitepress-docs/docs/zh/guide/feature/s3-attachment.md

@@ -0,0 +1,34 @@
+# 配置 S3 附件
+
+## 配置
+
+> [!NOTE]
+> 如果不需要 S3 附件, 可跳过此步骤
+
+在 Cloudflare 创建一个 R2 bucket, 你也可以使用其他的 S3 服务(如有 bug 请提 issue)
+
+参考: [配置 Cloudflare R2 的 cors](https://developers.cloudflare.com/r2/buckets/cors/#add-cors-policies-from-the-dashboard)
+
+参考 [Cloudflare R2  s3 toke](https://developers.cloudflare.com/r2/api/s3/tokens/) 创建 token, 拿到 `ENDPOINT`, `Access Key ID` 和 `Secret Access Key`，然后执行下面的命令添加到 secrets 中
+
+> [!NOTE]
+> 你也可以在 Cloudflare worker 的 UI 界面中添加 `secrets`
+
+```bash
+cd worker
+pnpm wrangler secret put S3_ENDPOINT
+pnpm wrangler secret put S3_ACCESS_KEY_ID
+pnpm wrangler secret put S3_SECRET_ACCESS_KEY
+# 请注意这里的 bucket 是你的 bucket 名称
+pnpm wrangler secret put S3_BUCKET
+```
+
+## 使用
+
+保存附件
+
+![S3 save](/feature/s3-save.png)
+
+下载附件
+
+![S3 download](/public/feature/s3-download.png)

vitepress-docs/docs/zh/guide/feature/telegram.md

@@ -0,0 +1,38 @@
+# 配置 Telegram Bot
+
+## Telegram Bot 配置
+
+> [!NOTE]
+> 如果不需要 Telegram Bot, 可跳过此步骤
+
+请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 secrets 中
+
+你也可以在 Cloudflare 的 UI 界面中添加 `secrets`
+
+```bash
+pnpm wrangler secret put TELEGRAM_BOT_TOKEN
+```
+
+## Bot
+
+- 可设置白名单用户
+- 点击`初始化`即可完成配置。
+- 点击`查看状态`，可以查看当前配置的状态。
+
+![telegram](/feature/telegram.png)
+
+## Mini App
+
+```bash
+cd frontend
+pnpm install
+cp .env.example .env.prod
+# --project-name 可以单独为 mini app 创建一个 pages, 你也可以公用一个 pages，但是可能遇到 js 加载不了的问题
+pnpm run deploy:telegram --project-name=<你的项目名称>
+```
+
+部署完成后，请在 admin 后台的 `设置` -> `电报小程序` 页面 `电报小程序 URL`。
+
+请在 `@BotFather` 处执行 `/setmenubutton`，然后输入你的网页地址，设置左下角的 `Open App` 按钮。
+
+你也可以在 `@BotFather` 处执行 `/newapp` 新建 app 来获得 mini app 的链接

vitepress-docs/docs/zh/guide/github-action.md

@@ -17,5 +17,6 @@
 - `BACKEND_TOML`: 后端配置文件，[参考此处](/zh/guide/cli/worker.html#修改-wrangler-toml-配置文件)
 - `FRONTEND_ENV`: 前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html)
 - `FRONTEND_NAME`: 你在 Cloudflare Pages 创建的项目名称，可通过 [用户界面](https://temp-mail-docs.awsl.uk/zh/guide/ui/pages.html) 或者 [命令行](https://temp-mail-docs.awsl.uk/zh/guide/cli/pages.html) 创建
+- `TG_FRONTEND_NAME`: (可选) 你在 Cloudflare Pages 创建的项目名称，同 `FRONTEND_NAME`，如果需要 Telegram Mini App 功能，请填写
 
 1. 打开仓库的 `Actions` 页面，找到 `Deploy Backend Production` 和 `Deploy Frontend`，点击 `Run workflow` 选择分支手动部署

vitepress-docs/docs/zh/guide/ui/worker.md

@@ -45,3 +45,10 @@
 
     ![worker-kv](/ui_install/worker-kv.png)
     ![worker-kv-bind](/ui_install/worker-kv-bind.png)
+
+9. Telegram Bot 配置
+
+    > [!NOTE]
+    > 如果不需要 Telegram Bot, 可跳过此步骤
+
+    请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 `Variables` 中, Name: `TELEGRAM_BOT_TOKEN`

worker/.gitignore

@@ -131,3 +131,4 @@ dist
 
 .wrangler
 wrangler.toml
+.dev.vars

worker/eslint.config.js

@@ -0,0 +1,19 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+export default [
+  {
+    languageOptions: { globals: globals.browser },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+    }
+  }
+];

worker/package.json

@@ -5,15 +5,31 @@
   "type": "module",
   "scripts": {
     "dev": "wrangler dev",
-    "deploy": "wrangler deploy",
+    "lint": "eslint src",
+    "deploy": "wrangler deploy --minify",
     "start": "wrangler dev",
-    "build": "wrangler deploy src/worker.js --dry-run --outdir dist --minify"
+    "build": "wrangler deploy --dry-run --outdir dist --minify"
   },
   "devDependencies": {
-    "wrangler": "^3.53.1"
+    "@cloudflare/workers-types": "^4.20240512.0",
+    "@eslint/js": "8.56.0",
+    "eslint": "8.56.0",
+    "globals": "^15.3.0",
+    "typescript-eslint": "^7.10.0",
+    "wrangler": "^3.57.1"
   },
   "dependencies": {
-    "hono": "^4.3.0",
-    "mimetext": "^3.0.24"
+    "@aws-sdk/client-s3": "^3.588.0",
+    "@aws-sdk/s3-request-presigner": "^3.588.0",
+    "hono": "^4.3.9",
+    "mimetext": "^3.0.24",
+    "postal-mime": "^2.2.5",
+    "resend": "^3.2.0",
+    "telegraf": "4.16.3"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "telegraf@4.16.3": "patches/telegraf@4.16.3.patch"
+    }
   }
 }

worker/patches/telegraf@4.16.3.patch

@@ -0,0 +1,163 @@
+diff --git a/lib/core/network/client.js b/lib/core/network/client.js
+index 25fbbbb47c7f88e83ae26f629e5ae1a0c141725c..209d4a6bf05352f44eeb082eb327581d698de5ce 100644
+--- a/lib/core/network/client.js
++++ b/lib/core/network/client.js
+@@ -1,18 +1,18 @@
+ "use strict";
+-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
++var __createBinding = (this && this.__createBinding) || (Object.create ? (function (o, m, k, k2) {
+     if (k2 === undefined) k2 = k;
+     var desc = Object.getOwnPropertyDescriptor(m, k);
+     if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+-      desc = { enumerable: true, get: function() { return m[k]; } };
++        desc = { enumerable: true, get: function () { return m[k]; } };
+     }
+     Object.defineProperty(o, k2, desc);
+-}) : (function(o, m, k, k2) {
++}) : (function (o, m, k, k2) {
+     if (k2 === undefined) k2 = k;
+     o[k2] = m[k];
+ }));
+-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
++var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function (o, v) {
+     Object.defineProperty(o, "default", { enumerable: true, value: v });
+-}) : function(o, v) {
++}) : function (o, v) {
+     o["default"] = v;
+ });
+ var __importStar = (this && this.__importStar) || function (mod) {
+@@ -29,8 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ /* eslint @typescript-eslint/restrict-template-expressions: [ "error", { "allowNumber": true, "allowBoolean": true } ] */
+ const crypto = __importStar(require("crypto"));
+ const fs = __importStar(require("fs"));
+-const promises_1 = require("fs/promises");
+-const https = __importStar(require("https"));
++// const promises_1 = require("fs/promises");
++// const https = __importStar(require("https"));
+ const path = __importStar(require("path"));
+ const node_fetch_1 = __importDefault(require("node-fetch"));
+ const check_1 = require("../helpers/check");
+@@ -61,10 +61,10 @@ const DEFAULT_OPTIONS = {
+     apiRoot: 'https://api.telegram.org',
+     apiMode: 'bot',
+     webhookReply: true,
+-    agent: new https.Agent({
+-        keepAlive: true,
+-        keepAliveMsecs: 10000,
+-    }),
++    // agent: new https.Agent({
++    //     keepAlive: true,
++    //     keepAliveMsecs: 10000,
++    // }),
+     attachmentAgent: undefined,
+     testEnv: false,
+ };
+@@ -112,9 +112,9 @@ async function buildFormDataConfig(payload, agent) {
+     }
+     const boundary = crypto.randomBytes(32).toString('hex');
+     const formData = new multipart_stream_1.default(boundary);
+-    await Promise.all(Object.keys(payload).map((key) => 
+-    // @ts-expect-error payload[key] can obviously index payload, but TS doesn't trust us
+-    attachFormValue(formData, key, payload[key], agent)));
++    await Promise.all(Object.keys(payload).map((key) =>
++        // @ts-expect-error payload[key] can obviously index payload, but TS doesn't trust us
++        attachFormValue(formData, key, payload[key], agent)));
+     return {
+         method: 'POST',
+         compress: true,
+@@ -205,14 +205,15 @@ async function attachFormMedia(form, media, id, agent) {
+     if ('source' in media && media.source) {
+         let mediaSource = media.source;
+         if (typeof media.source === 'string') {
+-            const source = await (0, promises_1.realpath)(media.source);
+-            if ((await (0, promises_1.stat)(source)).isFile()) {
+-                fileName = (_c = media.filename) !== null && _c !== void 0 ? _c : path.basename(media.source);
+-                mediaSource = await fs.createReadStream(media.source);
+-            }
+-            else {
+-                throw new TypeError(`Unable to upload '${media.source}', not a file`);
+-            }
++            throw new TypeError(`Unable to upload '${media.source}', not a file`);
++            // const source = await (0, promises_1.realpath)(media.source);
++            // if ((await (0, promises_1.stat)(source)).isFile()) {
++            //     fileName = (_c = media.filename) !== null && _c !== void 0 ? _c : path.basename(media.source);
++            //     mediaSource = await fs.createReadStream(media.source);
++            // }
++            // else {
++            //     throw new TypeError(`Unable to upload '${media.source}', not a file`);
++            // }
+         }
+         if (isStream(mediaSource) || Buffer.isBuffer(mediaSource)) {
+             form.addPart({
+diff --git a/lib/core/network/polling.js b/lib/core/network/polling.js
+index 42f20a5090304c56d0970da56eeaaacaa518ca92..0ae889c32d46e33440c62ad6d27a290c0fe3dda2 100644
+--- a/lib/core/network/polling.js
++++ b/lib/core/network/polling.js
+@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.Polling = void 0;
+ const abort_controller_1 = __importDefault(require("abort-controller"));
+ const debug_1 = __importDefault(require("debug"));
+-const util_1 = require("util");
++// const util_1 = require("util");
+ const error_1 = require("./error");
+ const debug = (0, debug_1.default)('telegraf:polling');
+-const wait = (0, util_1.promisify)(setTimeout);
++// const wait = (0, util_1.promisify)(setTimeout);
+ function always(x) {
+     return () => x;
+ }
+@@ -47,7 +47,8 @@ class Polling {
+                     (err instanceof error_1.TelegramError && err.code >= 500)) {
+                     const retryAfter = (_b = (_a = err.parameters) === null || _a === void 0 ? void 0 : _a.retry_after) !== null && _b !== void 0 ? _b : 5;
+                     debug('Failed to fetch updates, retrying after %ds.', retryAfter, err);
+-                    await wait(retryAfter * 1000);
++                    // await wait(retryAfter * 1000);
++                    await new Promise((resolve) => setTimeout(resolve, retryAfter * 1000));
+                     continue;
+                 }
+                 if (err instanceof error_1.TelegramError &&
+diff --git a/lib/telegraf.js b/lib/telegraf.js
+index 23d021c3d5f98493bd714a2114ec8fa853560e5c..90094d18316138b7e12eab42f722e69ccc9b6c1f 100644
+--- a/lib/telegraf.js
++++ b/lib/telegraf.js
+@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.Telegraf = void 0;
+ const crypto = __importStar(require("crypto"));
+-const http = __importStar(require("http"));
+-const https = __importStar(require("https"));
++// const http = __importStar(require("http"));
++// const https = __importStar(require("https"));
+ const composer_1 = require("./composer");
+ const compact_1 = require("./core/helpers/compact");
+ const context_1 = __importDefault(require("./context"));
+@@ -157,13 +157,13 @@ class Telegraf extends composer_1.Composer {
+         const callback = typeof cb === 'function'
+             ? (req, res) => webhookCb(req, res, () => cb(req, res))
+             : webhookCb;
+-        this.webhookServer =
+-            tlsOptions != null
+-                ? https.createServer(tlsOptions, callback)
+-                : http.createServer(callback);
+-        this.webhookServer.listen(port, host, () => {
+-            debug('Webhook listening on port: %s', port);
+-        });
++        // this.webhookServer =
++        //     tlsOptions != null
++        //         ? https.createServer(tlsOptions, callback)
++        //         : http.createServer(callback);
++        // this.webhookServer.listen(port, host, () => {
++        //     debug('Webhook listening on port: %s', port);
++        // });
+         return this;
+     }
+     secretPathComponent() {
+@@ -176,7 +176,7 @@ class Telegraf extends composer_1.Composer {
+     /**
+      * @see https://github.com/telegraf/telegraf/discussions/1344#discussioncomment-335700
+      */
+-    async launch(config = {}, 
++    async launch(config = {},
+     /** @experimental */
+     onLaunch) {
+         var _a, _b;

worker/src/admin_api/admin_user_api.ts

@@ -1,20 +1,27 @@
+import { Context } from 'hono';
+
 import { CONSTANTS } from '../constants';
 import { getJsonSetting, saveSetting, checkUserPassword, getDomains } from '../utils';
 import { UserSettings, GeoData, UserInfo } from "../models";
+import { handleListQuery } from '../common'
+import { HonoCustomType } from '../types';
 
 export default {
-    getSetting: async (c) => {
+    getSetting: async (c: Context<HonoCustomType>) => {
         const value = await getJsonSetting(c, CONSTANTS.USER_SETTINGS_KEY);
         const settings = new UserSettings(value);
         return c.json(settings)
     },
-    saveSetting: async (c) => {
+    saveSetting: async (c: Context<HonoCustomType>) => {
         const value = await c.req.json();
         const settings = new UserSettings(value);
         if (settings.enableMailVerify && !c.env.KV) {
             return c.text("Please enable KV first if you want to enable mail verify", 403)
         }
-        if (settings.enableMailVerify) {
+        if (settings.enableMailVerify && !settings.verifyMailSender) {
+            return c.text("Please provide verifyMailSender", 400)
+        }
+        if (settings.enableMailVerify && settings.verifyMailSender) {
             const mailDomain = settings.verifyMailSender.split("@")[1];
             const domains = getDomains(c);
             if (!domains.includes(mailDomain)) {
@@ -27,61 +34,35 @@ export default {
         await saveSetting(c, CONSTANTS.USER_SETTINGS_KEY, JSON.stringify(settings));
         return c.json({ success: true })
     },
-    getUsers: async (c) => {
+    getUsers: async (c: Context<HonoCustomType>) => {
         const { limit, offset, query } = c.req.query();
-        if (!limit || limit < 0 || limit > 100) {
-            return c.text("Invalid limit", 400)
-        }
-        if (!offset || offset < 0) {
-            return c.text("Invalid offset", 400)
-        }
         if (query) {
-            const { results } = await c.env.DB.prepare(
+            return await handleListQuery(c,
                 `SELECT u.id, u.user_email, u.created_at, u.updated_at,`
                 + ` (SELECT COUNT(*) FROM users_address WHERE user_id = u.id) AS address_count`
                 + ` FROM users u`
-                + ` where u.user_email like ?`
-                + ` order by u.id desc limit ? offset ?`
-            ).bind(`%${query}%`, limit, offset).all();
-            let count = 0;
-            if (offset == 0) {
-                const { count: userCount } = await c.env.DB.prepare(
-                    `SELECT count(*) as count FROM users where user_email like ?`
-                ).bind(`%${query}%`).first();
-                count = userCount;
-            }
-            return c.json({
-                results: results,
-                count: count
-            })
+                + ` where u.user_email like ?`,
+                `SELECT count(*) as count FROM users where user_email like ?`,
+                [`%${query}%`], limit, offset
+            );
         }
-        const { results } = await c.env.DB.prepare(
+        return await handleListQuery(c,
             `SELECT u.id, u.user_email, u.created_at, u.updated_at,`
             + ` (SELECT COUNT(*) FROM users_address WHERE user_id = u.id) AS address_count`
-            + ` FROM users u`
-            + ` order by u.id desc limit ? offset ?`
-        ).bind(limit, offset).all();
-        let count = 0;
-        if (offset == 0) {
-            const { count: userCount } = await c.env.DB.prepare(
-                `SELECT count(*) as count FROM users`
-            ).first();
-            count = userCount;
-        }
-        return c.json({
-            results: results,
-            count: count
-        })
+            + ` FROM users u`,
+            `SELECT count(*) as count FROM users`,
+            [], limit, offset
+        );
     },
-    createUser: async (c) => {
+    createUser: async (c: Context<HonoCustomType>) => {
         const { email, password } = await c.req.json();
         if (!email || !password) {
             return c.text("Invalid email or password", 400)
         }
         // geo data
         const reqIp = c.req.raw.headers.get("cf-connecting-ip")
-        const geoData = new GeoData(reqIp, c.req.raw.cf);
-        const userInfo = new UserInfo(geoData);
+        const geoData = new GeoData(reqIp, c.req.raw.cf as any);
+        const userInfo = new UserInfo(geoData, email);
         try {
             checkUserPassword(password);
             const { success } = await c.env.DB.prepare(
@@ -94,14 +75,15 @@ export default {
                 return c.text("Failed to register", 500)
             }
         } catch (e) {
-            if (e.message && e.message.includes("UNIQUE")) {
+            const errorMsg = (e as Error).message;
+            if (errorMsg && errorMsg.includes("UNIQUE")) {
                 return c.text("User already exists", 400)
             }
-            return c.text(`Failed to register: ${e.message}`, 500)
+            return c.text(`Failed to register: ${errorMsg}`, 500)
         }
         return c.json({ success: true })
     },
-    deleteUser: async (c) => {
+    deleteUser: async (c: Context<HonoCustomType>) => {
         const { user_id } = c.req.param();
         if (!user_id) return c.text("Invalid user_id", 400);
         const { success } = await c.env.DB.prepare(
@@ -115,7 +97,7 @@ export default {
         }
         return c.json({ success: true })
     },
-    resetPassword: async (c) => {
+    resetPassword: async (c: Context<HonoCustomType>) => {
         const { user_id } = c.req.param();
         const { password } = await c.req.json();
         if (!user_id) return c.text("Invalid user_id", 400);
@@ -128,7 +110,7 @@ export default {
                 return c.text("Failed to reset password", 500)
             }
         } catch (e) {
-            return c.text(`Failed to reset password: ${e.message}`, 500)
+            return c.text(`Failed to reset password: ${(e as Error).message}`, 500)
         }
         return c.json({ success: true });
     },

worker/src/admin_api/cleanup_api.ts

@@ -1,25 +1,28 @@
+import { Context } from 'hono';
+
 import { cleanup } from '../common';
 import { CONSTANTS } from '../constants';
 import { getJsonSetting, saveSetting } from '../utils';
 import { CleanupSettings } from '../models';
+import { HonoCustomType } from '../types';
 
 export default {
-    cleanup: async (c) => {
+    cleanup: async (c: Context<HonoCustomType>) => {
         const { cleanType, cleanDays } = await c.req.json();
         try {
             await cleanup(c, cleanType, cleanDays);
         } catch (error) {
             console.error(error);
-            return c.text(`Failed to cleanup ${error.message}`, 500)
+            return c.text(`Failed to cleanup ${(error as Error).message}`, 500)
         }
         return c.json({ success: true })
     },
-    getCleanup: async (c) => {
+    getCleanup: async (c: Context<HonoCustomType>) => {
         const value = await getJsonSetting(c, CONSTANTS.AUTO_CLEANUP_KEY);
         const cleanupSetting = new CleanupSettings(value);
         return c.json(cleanupSetting)
     },
-    saveCleanup: async (c) => {
+    saveCleanup: async (c: Context<HonoCustomType>) => {
         const value = await c.req.json();
         const cleanupSetting = new CleanupSettings(value);
         await saveSetting(c, CONSTANTS.AUTO_CLEANUP_KEY, JSON.stringify(cleanupSetting));

worker/src/admin_api/index.ts

@@ -1,68 +1,50 @@
 import { Hono } from 'hono'
 import { Jwt } from 'hono/utils/jwt'
+
+import { HonoCustomType } from '../types'
 import { sendAdminInternalMail, getJsonSetting, saveSetting } from '../utils'
 import { newAddress, handleListQuery } from '../common'
 import { CONSTANTS } from '../constants'
 import cleanup_api from './cleanup_api'
 import admin_user_api from './admin_user_api'
+import webhook_settings from './webhook_settings'
 
-const api = new Hono()
+export const api = new Hono<HonoCustomType>()
 
 api.get('/admin/address', async (c) => {
     const { limit, offset, query } = c.req.query();
-    if (!limit || limit < 0 || limit > 100) {
-        return c.text("Invalid limit", 400)
-    }
-    if (!offset || offset < 0) {
-        return c.text("Invalid offset", 400)
-    }
     if (query) {
-        const { results } = await c.env.DB.prepare(
+        return await handleListQuery(c,
             `SELECT a.*,`
             + ` (SELECT COUNT(*) FROM raw_mails WHERE address = a.name) AS mail_count,`
             + ` (SELECT COUNT(*) FROM sendbox WHERE address = a.name) AS send_count`
             + ` FROM address a`
-            + ` where name like ?`
-            + ` order by id desc limit ? offset ?`
-        ).bind(`%${query}%`, limit, offset).all();
-        let count = 0;
-        if (offset == 0) {
-            const { count: addressCount } = await c.env.DB.prepare(
-                `SELECT count(*) as count FROM address where name like ?`
-            ).bind(`%${query}%`).first();
-            count = addressCount;
-        }
-        return c.json({
-            results: results,
-            count: count
-        })
+            + ` where name like ?`,
+            `SELECT count(*) as count FROM address where name like ?`,
+            [`%${query}%`], limit, offset
+        );
     }
-    const { results } = await c.env.DB.prepare(
+    return await handleListQuery(c,
         `SELECT a.*,`
         + ` (SELECT COUNT(*) FROM raw_mails WHERE address = a.name) AS mail_count,`
         + ` (SELECT COUNT(*) FROM sendbox WHERE address = a.name) AS send_count`
-        + ` FROM address a`
-        + ` order by id desc limit ? offset ?`
-    ).bind(limit, offset).all();
-    let count = 0;
-    if (offset == 0) {
-        const { count: addressCount } = await c.env.DB.prepare(
-            `SELECT count(*) as count FROM address`
-        ).first();
-        count = addressCount;
-    }
-    return c.json({
-        results: results,
-        count: count
-    })
+        + ` FROM address a`,
+        `SELECT count(*) as count FROM address`,
+        [], limit, offset
+    );
 })
 
 api.post('/admin/new_address', async (c) => {
-    let { name, domain, enablePrefix } = await c.req.json();
+    const { name, domain, enablePrefix } = await c.req.json();
     if (!name) {
         return c.text("Please provide a name", 400)
     }
-    return newAddress(c, name, domain, enablePrefix);
+    try {
+        const res = await newAddress(c, name, domain, enablePrefix);
+        return c.json(res);
+    } catch (e) {
+        return c.text(`Failed create address: ${(e as Error).message}`, 400)
+    }
 })
 
 api.delete('/admin/delete_address/:id', async (c) => {
@@ -100,7 +82,7 @@ api.get('/admin/show_password/:id', async (c) => {
     const jwt = await Jwt.sign({
         address: name,
         address_id: id
-    }, c.env.JWT_SECRET)
+    }, c.env.JWT_SECRET, "HS256")
     return c.json({
         jwt: jwt
     })
@@ -162,7 +144,9 @@ api.get('/admin/address_sender', async (c) => {
 })
 
 api.post('/admin/address_sender', async (c) => {
+    /* eslint-disable prefer-const */
     let { address, address_id, balance, enabled } = await c.req.json();
+    /* eslint-enable prefer-const */
     if (!address_id) {
         return c.text("Invalid address_id", 400)
     }
@@ -175,7 +159,7 @@ api.post('/admin/address_sender', async (c) => {
     }
     await sendAdminInternalMail(
         c, address, "Account Send Access Updated",
-        `You send access has been ${enabled ? "enabled" : "disabled"}, balance: ${balance}`
+        `Your send access has been ${enabled ? "enabled" : "disabled"}, balance: ${balance}`
     );
     return c.json({
         success: success
@@ -184,57 +168,33 @@ api.post('/admin/address_sender', async (c) => {
 
 api.get('/admin/sendbox', async (c) => {
     const { address, limit, offset } = c.req.query();
-    if (!limit || limit < 0 || limit > 100) {
-        return c.text("Invalid limit", 400)
+    if (address) {
+        return await handleListQuery(c,
+            `SELECT * FROM sendbox where address = ? `,
+            `SELECT count(*) as count FROM sendbox where address = ? `,
+            [address], limit, offset
+        );
     }
-    if (!offset || offset < 0) {
-        return c.text("Invalid offset", 400)
-    }
-    if (!address) {
-        const { results } = await c.env.DB.prepare(
-            `SELECT * FROM sendbox order by id desc limit ? offset ?`
-        ).bind(limit, offset).all();
-        let count = 0;
-        if (offset == 0) {
-            const { count: mailCount } = await c.env.DB.prepare(
-                `SELECT count(*) as count FROM sendbox`
-            ).first();
-            count = mailCount;
-        }
-        return c.json({
-            results: results,
-            count: count
-        })
-    }
-    const { results } = await c.env.DB.prepare(
-        `SELECT * FROM sendbox where address = ? order by id desc limit ? offset ?`
-    ).bind(address, limit, offset).all();
-    let count = 0;
-    if (offset == 0) {
-        const { count: mailCount } = await c.env.DB.prepare(
-            `SELECT count(*) as count FROM sendbox where address = ?`
-        ).bind(address).first();
-        count = mailCount;
-    }
-    return c.json({
-        results: results,
-        count: count
-    })
+    return await handleListQuery(c,
+        `SELECT * FROM sendbox `,
+        `SELECT count(*) as count FROM sendbox `,
+        [], limit, offset
+    );
 })
 
 api.get('/admin/statistics', async (c) => {
-    const { count: mailCount } = await c.env.DB.prepare(`
-            SELECT count(*) as count FROM raw_mails`
-    ).first();
-    const { count: addressCount } = await c.env.DB.prepare(`
-            SELECT count(*) as count FROM address`
-    ).first();
-    const { count: activeUserCount7days } = await c.env.DB.prepare(`
-            SELECT count(*) as count FROM address where updated_at > datetime('now', '-7 day')`
-    ).first();
-    const { count: sendMailCount } = await c.env.DB.prepare(`
-            SELECT count(*) as count FROM sendbox`
-    ).first();
+    const { count: mailCount } = await c.env.DB.prepare(
+        `SELECT count(*) as count FROM raw_mails`
+    ).first<{ count: number }>() || {};
+    const { count: addressCount } = await c.env.DB.prepare(
+        `SELECT count(*) as count FROM address`
+    ).first<{ count: number }>() || {};
+    const { count: activeUserCount7days } = await c.env.DB.prepare(
+        `SELECT count(*) as count FROM address where updated_at > datetime('now', '-7 day')`
+    ).first<{ count: number }>() || {};
+    const { count: sendMailCount } = await c.env.DB.prepare(
+        `SELECT count(*) as count FROM sendbox`
+    ).first<{ count: number }>() || {};
     return c.json({
         mailCount: mailCount,
         userCount: addressCount,
@@ -245,13 +205,13 @@ api.get('/admin/statistics', async (c) => {
 
 api.get('/admin/account_settings', async (c) => {
     try {
-        /** @type {Array<string>|undefined|null} */
         const blockList = await getJsonSetting(c, CONSTANTS.ADDRESS_BLOCK_LIST_KEY);
-        /** @type {Array<string>|undefined|null} */
         const sendBlockList = await getJsonSetting(c, CONSTANTS.SEND_BLOCK_LIST_KEY);
+        const verifiedAddressList = await getJsonSetting(c, CONSTANTS.VERIFIED_ADDRESS_LIST_KEY);
         return c.json({
             blockList: blockList || [],
-            sendBlockList: sendBlockList || []
+            sendBlockList: sendBlockList || [],
+            verifiedAddressList: verifiedAddressList || []
         })
     } catch (error) {
         console.error(error);
@@ -261,10 +221,13 @@ api.get('/admin/account_settings', async (c) => {
 
 api.post('/admin/account_settings', async (c) => {
     /** @type {{ blockList: Array<string>, sendBlockList: Array<string> }} */
-    const { blockList, sendBlockList } = await c.req.json();
-    if (!blockList || !sendBlockList) {
+    const { blockList, sendBlockList, verifiedAddressList } = await c.req.json();
+    if (!blockList || !sendBlockList || !verifiedAddressList) {
         return c.text("Invalid blockList or sendBlockList", 400)
     }
+    if (!c.env.SEND_MAIL && verifiedAddressList.length > 0) {
+        return c.text("Please enable SEND_MAIL to use verifiedAddressList", 400)
+    }
     await saveSetting(
         c, CONSTANTS.ADDRESS_BLOCK_LIST_KEY,
         JSON.stringify(blockList)
@@ -273,6 +236,10 @@ api.post('/admin/account_settings', async (c) => {
         c, CONSTANTS.SEND_BLOCK_LIST_KEY,
         JSON.stringify(sendBlockList)
     );
+    await saveSetting(
+        c, CONSTANTS.VERIFIED_ADDRESS_LIST_KEY,
+        JSON.stringify(verifiedAddressList)
+    )
     return c.json({
         success: true
     })
@@ -287,5 +254,5 @@ api.get('/admin/users', admin_user_api.getUsers)
 api.delete('/admin/users/:user_id', admin_user_api.deleteUser)
 api.post('/admin/users', admin_user_api.createUser)
 api.post('/admin/users/:user_id/reset_password', admin_user_api.resetPassword)
-
-export { api }
+api.get("/admin/webhook/settings", webhook_settings.getWebhookSettings);
+api.post("/admin/webhook/settings", webhook_settings.saveWebhookSettings);

worker/src/admin_api/webhook_settings.ts

@@ -0,0 +1,20 @@
+import { Context } from "hono";
+import { HonoCustomType } from "../types";
+import { CONSTANTS } from "../constants";
+import { AdminWebhookSettings } from "../models";
+
+async function getWebhookSettings(c: Context<HonoCustomType>): Promise<Response> {
+    const settings = await c.env.KV.get<AdminWebhookSettings>(CONSTANTS.WEBHOOK_KV_SETTINGS_KEY, "json");
+    return c.json(settings || new AdminWebhookSettings([]));
+}
+
+async function saveWebhookSettings(c: Context<HonoCustomType>): Promise<Response> {
+    const settings = await c.req.json<AdminWebhookSettings>();
+    await c.env.KV.put(CONSTANTS.WEBHOOK_KV_SETTINGS_KEY, JSON.stringify(settings));
+    return c.json({ success: true })
+}
+
+export default {
+    getWebhookSettings,
+    saveWebhookSettings,
+}

worker/src/commom_api.ts

@@ -0,0 +1,36 @@
+import { Hono } from 'hono'
+
+import { getDomains, getPasswords, getBooleanValue } from './utils';
+import { CONSTANTS } from './constants';
+import { HonoCustomType } from './types';
+import { isS3Enabled } from './mails_api/s3_attachment';
+
+const api = new Hono<HonoCustomType>
+
+api.get('/open_api/settings', async (c) => {
+    // check header x-custom-auth
+    let needAuth = false;
+    const passwords = getPasswords(c);
+    if (passwords && passwords.length > 0) {
+        const auth = c.req.raw.headers.get("x-custom-auth");
+        needAuth = !auth || !passwords.includes(auth);
+    }
+    return c.json({
+        "title": c.env.TITLE,
+        "prefix": c.env.PREFIX,
+        "domains": getDomains(c),
+        "needAuth": needAuth,
+        "adminContact": c.env.ADMIN_CONTACT,
+        "enableUserCreateEmail": getBooleanValue(c.env.ENABLE_USER_CREATE_EMAIL),
+        "enableUserDeleteEmail": getBooleanValue(c.env.ENABLE_USER_DELETE_EMAIL),
+        "enableAutoReply": getBooleanValue(c.env.ENABLE_AUTO_REPLY),
+        "enableIndexAbout": getBooleanValue(c.env.ENABLE_INDEX_ABOUT),
+        "copyright": c.env.COPYRIGHT,
+        "cfTurnstileSiteKey": c.env.CF_TURNSTILE_SITE_KEY,
+        "enableWebhook": getBooleanValue(c.env.ENABLE_WEBHOOK),
+        "isS3Enabled": isS3Enabled(c),
+        "version": CONSTANTS.VERSION,
+    });
+})
+
+export { api }

worker/src/common.js

@@ -1,117 +0,0 @@
-import { Jwt } from 'hono/utils/jwt'
-
-import { getDomains, getStringValue } from './utils';
-
-export const newAddress = async (c, name, domain, enablePrefix) => {
-    // remove special characters
-    name = name.replace(/[^a-zA-Z0-9.]/g, '')
-    // check name length
-    if (name.length < 0) {
-        return c.text("Name too short", 400)
-    }
-    if (name.length > 100) {
-        return c.text("Name too long (max 100)", 400)
-    }
-    // check domain, generate random domain
-    const domains = getDomains(c);
-    if (!domain || !domains.includes(domain)) {
-        domain = domains[Math.floor(Math.random() * domains.length)];
-    }
-    // create address
-    if (enablePrefix) {
-        name = getStringValue(c.env.PREFIX) + name + "@" + domain;
-    } else {
-        name = name + "@" + domain;
-    }
-    try {
-        const { success } = await c.env.DB.prepare(
-            `INSERT INTO address(name) VALUES(?)`
-        ).bind(name).run();
-        if (!success) {
-            return c.text("Failed to create address", 500)
-        }
-    } catch (e) {
-        if (e.message && e.message.includes("UNIQUE")) {
-            return c.text("Address already exists, please retry a new address", 400)
-        }
-        return c.text("Failed to create address", 500)
-    }
-    let address_id = 0;
-    try {
-        address_id = await c.env.DB.prepare(
-            `SELECT id FROM address where name = ?`
-        ).bind(name).first("id");
-    } catch (error) {
-        console.log(error);
-    }
-    // create jwt
-    const jwt = await Jwt.sign({
-        address: name,
-        address_id: address_id
-    }, c.env.JWT_SECRET)
-    return c.json({
-        jwt: jwt
-    })
-}
-
-export const cleanup = async (c, cleanType, cleanDays) => {
-    if (!cleanType || !cleanDays || cleanDays < 0 || cleanDays > 30) {
-        throw new Error("Invalid cleanType or cleanDays")
-    }
-    console.log(`Cleanup ${cleanType} before ${cleanDays} days`);
-    switch (cleanType) {
-        case "mails":
-            await c.env.DB.prepare(`
-                DELETE FROM raw_mails WHERE created_at < datetime('now', '-${cleanDays} day')`
-            ).run();
-            break;
-        case "mails_unknow":
-            await c.env.DB.prepare(`
-                DELETE FROM raw_mails WHERE address NOT IN
-                (select name from address) AND created_at < datetime('now', '-${cleanDays} day')`
-            ).run();
-            break;
-        case "address":
-            await c.env.DB.prepare(`
-                DELETE FROM address WHERE updated_at < datetime('now', '-${cleanDays} day')`
-                + ` AND id NOT IN (SELECT address_id FROM users_address)`
-            ).run();
-            break;
-        case "sendbox":
-            await c.env.DB.prepare(`
-                DELETE FROM sendbox WHERE created_at < datetime('now', '-${cleanDays} day')`
-            ).run();
-            break;
-        default:
-            throw new Error("Invalid cleanType")
-    }
-    return true;
-}
-
-/**
- *
- * @param {*} c context
- * @param {*} query @type {string} query
- * @param {*} countQuery @type {string} countQuery
- * @param {*} limit @type {number} limit
- * @param {*} offset @type {number} offset
- * @returns {Promise} Promise
- */
-export const handleListQuery = async (
-    c, query, countQuery, params, limit, offset
-) => {
-    if (!limit || limit < 0 || limit > 100) {
-        return c.text("Invalid limit", 400)
-    }
-    if (!offset || offset < 0) {
-        return c.text("Invalid offset", 400)
-    }
-    const resultsQuery = `${query} order by id desc limit ? offset ?`;
-    const { results } = await c.env.DB.prepare(resultsQuery).bind(
-        ...params, limit, offset
-    ).all();
-    const count = offset == 0 ? await c.env.DB.prepare(
-        countQuery
-    ).bind(...params).first("count") : 0;
-    return c.json({ results, count });
-}

worker/src/common.ts

@@ -0,0 +1,168 @@
+import { Context } from 'hono';
+import { Jwt } from 'hono/utils/jwt'
+
+import { getBooleanValue, getDomains, getStringValue } from './utils';
+import { HonoCustomType } from './types';
+import { unbindTelegramByAddress } from './telegram_api/common';
+
+export const newAddress = async (
+    c: Context<HonoCustomType>,
+    name: string, domain: string | undefined | null,
+    enablePrefix: boolean
+): Promise<{ address: string, jwt: string }> => {
+    // remove special characters
+    name = name.replace(/[^a-zA-Z0-9.]/g, '')
+    // check name length
+    if (name.length <= 0) {
+        throw new Error("Name too short")
+    }
+    // create address
+    if (enablePrefix) {
+        name = getStringValue(c.env.PREFIX) + name;
+    }
+    if (name.length >= 30) {
+        throw new Error("Name too long (max 30)")
+    }
+    // check domain, generate random domain
+    const domains = getDomains(c);
+    if (!domain || !domains.includes(domain)) {
+        domain = domains[Math.floor(Math.random() * domains.length)];
+    }
+    // create address
+    name = name + "@" + domain;
+    try {
+        const { success } = await c.env.DB.prepare(
+            `INSERT INTO address(name) VALUES(?)`
+        ).bind(name).run();
+        if (!success) {
+            throw new Error("Failed to create address")
+        }
+    } catch (e) {
+        const message = (e as Error).message;
+        if (message && message.includes("UNIQUE")) {
+            throw new Error("Address already exists")
+        }
+        throw new Error("Failed to create address")
+    }
+    const address_id = await c.env.DB.prepare(
+        `SELECT id FROM address where name = ?`
+    ).bind(name).first<number>("id");
+    // create jwt
+    const jwt = await Jwt.sign({
+        address: name,
+        address_id: address_id
+    }, c.env.JWT_SECRET, "HS256")
+    return {
+        jwt: jwt,
+        address: name,
+    }
+}
+
+export const cleanup = async (
+    c: Context<HonoCustomType>,
+    cleanType: string | undefined | null,
+    cleanDays: number | undefined | null
+): Promise<boolean> => {
+    if (!cleanType || !cleanDays || cleanDays < 0 || cleanDays > 30) {
+        throw new Error("Invalid cleanType or cleanDays")
+    }
+    console.log(`Cleanup ${cleanType} before ${cleanDays} days`);
+    switch (cleanType) {
+        case "mails":
+            await c.env.DB.prepare(`
+                DELETE FROM raw_mails WHERE created_at < datetime('now', '-${cleanDays} day')`
+            ).run();
+            break;
+        case "mails_unknow":
+            await c.env.DB.prepare(`
+                DELETE FROM raw_mails WHERE address NOT IN
+                (select name from address) AND created_at < datetime('now', '-${cleanDays} day')`
+            ).run();
+            break;
+        case "sendbox":
+            await c.env.DB.prepare(`
+                DELETE FROM sendbox WHERE created_at < datetime('now', '-${cleanDays} day')`
+            ).run();
+            break;
+        default:
+            throw new Error("Invalid cleanType")
+    }
+    return true;
+}
+
+/**
+ * TODO: need senbox delete?
+ */
+export const deleteAddressWithData = async (
+    c: Context<HonoCustomType>,
+    address: string | undefined | null,
+    address_id: number | undefined | null
+): Promise<boolean> => {
+    if (!getBooleanValue(c.env.ENABLE_USER_DELETE_EMAIL)) {
+        throw new Error("Delete email is disabled")
+    }
+    if (!address && !address_id) {
+        throw new Error("Address or address_id required")
+    }
+    // get address_id or address
+    if (!address_id) {
+        address_id = await c.env.DB.prepare(
+            `SELECT id FROM address where name = ?`
+        ).bind(address).first<number>("id");
+    } else if (!address) {
+        address = await c.env.DB.prepare(
+            `SELECT name FROM address where id = ?`
+        ).bind(address_id).first<string>("name");
+    }
+    // check address again
+    if (!address || !address_id) {
+        throw new Error("Can't find address");
+    }
+    // unbind telegram
+    await unbindTelegramByAddress(c, address);
+    // delete address and related data
+    const { success: mailSuccess } = await c.env.DB.prepare(
+        `DELETE FROM raw_mails WHERE address = ? `
+    ).bind(address).run();
+    const { success: sendAccess } = await c.env.DB.prepare(
+        `DELETE FROM address_sender WHERE address = ? `
+    ).bind(address).run();
+    const { success: addressSuccess } = await c.env.DB.prepare(
+        `DELETE FROM users_address WHERE address_id = ? `
+    ).bind(address_id).run();
+    const { success } = await c.env.DB.prepare(
+        `DELETE FROM address WHERE name = ? `
+    ).bind(address).run();
+    if (!success || !mailSuccess || !addressSuccess || !sendAccess) {
+        throw new Error("Failed to delete address")
+    }
+    return true;
+}
+
+export const handleListQuery = async (
+    c: Context<HonoCustomType>,
+    query: string, countQuery: string, params: string[],
+    limit: string | number | undefined | null,
+    offset: string | number | undefined | null
+): Promise<Response> => {
+    if (typeof limit === "string") {
+        limit = parseInt(limit);
+    }
+    if (typeof offset === "string") {
+        offset = parseInt(offset);
+    }
+    if (!limit || limit < 0 || limit > 100) {
+        return c.text("Invalid limit", 400)
+    }
+    if (offset == null || offset == undefined || offset < 0) {
+        return c.text("Invalid offset", 400)
+    }
+    const resultsQuery = `${query} order by id desc limit ? offset ?`;
+    const { results } = await c.env.DB.prepare(resultsQuery).bind(
+        ...params, limit, offset
+    ).all();
+    const count = offset == 0 ? await c.env.DB.prepare(
+        countQuery
+    ).bind(...params).first("count") : 0;
+    return c.json({ results, count });
+}

worker/src/constants.js

@@ -1,6 +0,0 @@
-export const CONSTANTS = {
-    ADDRESS_BLOCK_LIST_KEY: 'address_block_list',
-    SEND_BLOCK_LIST_KEY: 'send_block_list',
-    AUTO_CLEANUP_KEY: 'auto_cleanup',
-    USER_SETTINGS_KEY: 'user_settings',
-}

worker/src/constants.ts

@@ -0,0 +1,16 @@
+export const CONSTANTS = {
+    VERSION: 'v0.5.0',
+
+    // DB settings
+    ADDRESS_BLOCK_LIST_KEY: 'address_block_list',
+    SEND_BLOCK_LIST_KEY: 'send_block_list',
+    AUTO_CLEANUP_KEY: 'auto_cleanup',
+    USER_SETTINGS_KEY: 'user_settings',
+    VERIFIED_ADDRESS_LIST_KEY: 'verified_address_list',
+
+    // KV
+    TG_KV_PREFIX: "temp-mail-telegram",
+    TG_KV_SETTINGS_KEY: "temp-mail-telegram-settings",
+    WEBHOOK_KV_SETTINGS_KEY: "temp-mail-webhook-settings",
+    WEBHOOK_KV_USER_SETTINGS_KEY: "temp-mail-webhook-user-settings",
+}

worker/src/email/auto_reply.ts

@@ -1,34 +1,18 @@
 import { createMimeMessage } from "mimetext";
-import { getBooleanValue } from "./utils";
+import { getBooleanValue } from "../utils";
+import { Bindings } from "../types";
 
-async function email(message, env, ctx) {
-    if (env.BLACK_LIST && env.BLACK_LIST.split(",").some(word => message.from.includes(word))) {
-        message.setReject("Missing from address");
-        console.log(`Reject message from ${message.from} to ${message.to}`);
-        return;
-    }
-    const rawEmail = await new Response(message.raw).text();
+export const auto_reply = async (message: ForwardableEmailMessage, env: Bindings): Promise<void> => {
     const message_id = message.headers.get("Message-ID");
-    // save email
-    const { success } = await env.DB.prepare(
-        `INSERT INTO raw_mails (source, address, raw, message_id) VALUES (?, ?, ?, ?)`
-    ).bind(
-        message.from, message.to, rawEmail, message_id
-    ).run();
-    if (!success) {
-        message.setReject(`Failed save message to ${message.to}`);
-        console.log(`Failed save message from ${message.from} to ${message.to}`);
-    }
-
     // auto reply email
-    if (getBooleanValue(env.ENABLE_AUTO_REPLY)) {
+    if (getBooleanValue(env.ENABLE_AUTO_REPLY) && message_id) {
         try {
             const results = await env.DB.prepare(
                 `SELECT * FROM auto_reply_mails where address = ? and enabled = 1`
-            ).bind(message.to).first();
+            ).bind(message.to).first<Record<string, string>>();
             if (results && results.source_prefix && message.from.startsWith(results.source_prefix)) {
                 const msg = createMimeMessage();
-                msg.setHeader("In-Reply-To", message.headers.get("Message-ID"));
+                msg.setHeader("In-Reply-To", message_id);
                 msg.setSender({
                     name: results.name || results.address,
                     addr: results.address
@@ -45,6 +29,7 @@ async function email(message, env, ctx) {
                     message.from,
                     msg.asRaw()
                 );
+                // @ts-ignore
                 await message.reply(replyMessage);
             }
         } catch (error) {
@@ -52,5 +37,3 @@ async function email(message, env, ctx) {
         }
     }
 }
-
-export { email }

worker/src/email/index.ts

@@ -0,0 +1,62 @@
+import { Context } from "hono";
+
+import { getEnvStringList } from "../utils";
+import { sendMailToTelegram } from "../telegram_api";
+import { Bindings, HonoCustomType } from "../types";
+import { auto_reply } from "./auto_reply";
+import { trigerWebhook } from "../mails_api/webhook_settings";
+
+
+async function email(message: ForwardableEmailMessage, env: Bindings, ctx: ExecutionContext) {
+    if (env.BLACK_LIST && env.BLACK_LIST.split(",").some(word => message.from.includes(word))) {
+        message.setReject("Missing from address");
+        console.log(`Reject message from ${message.from} to ${message.to}`);
+        return;
+    }
+    const rawEmail = await new Response(message.raw).text();
+    const message_id = message.headers.get("Message-ID");
+    // save email
+    const { success } = await env.DB.prepare(
+        `INSERT INTO raw_mails (source, address, raw, message_id) VALUES (?, ?, ?, ?)`
+    ).bind(
+        message.from, message.to, rawEmail, message_id
+    ).run();
+    if (!success) {
+        message.setReject(`Failed save message to ${message.to}`);
+        console.log(`Failed save message from ${message.from} to ${message.to}`);
+    }
+
+    // forward email
+    try {
+        const forwardAddressList = getEnvStringList(env.FORWARD_ADDRESS_LIST)
+        for (const forwardAddress of forwardAddressList) {
+            await message.forward(forwardAddress);
+        }
+    } catch (error) {
+        console.log("forward email error", error);
+    }
+
+    // send email to telegram
+    try {
+        await sendMailToTelegram(
+            { env: env } as Context<HonoCustomType>,
+            message.to, rawEmail, message_id);
+    } catch (error) {
+        console.log("send mail to telegram error", error);
+    }
+
+    // send webhook
+    try {
+        await trigerWebhook(
+            { env: env } as Context<HonoCustomType>,
+            message.to, rawEmail
+        );
+    } catch (error) {
+        console.log("send webhook error", error);
+    }
+
+    // auto reply email
+    await auto_reply(message, env);
+}
+
+export { email }