feat: remove service workbox html cache (#486)

* feat: support transfer address from user to user

* feat: remove service worker

.github/ISSUE_TEMPLATE/bug-反馈.md

@@ -0,0 +1,23 @@
+---
+name: Bug 反馈
+about: Create a report to help us improve
+title: "[BUG]"
+labels: bug
+assignees: ''
+
+---
+
+## 复现步骤
+
+
+
+## 预期行为
+
+
+
+## 部署方式
+
+- [ ] cli 部署
+- [ ]  用户界面部署
+
+## 浏览器环境

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,16 @@
+---
+name: Feature Request
+about: Suggest an idea for this project
+title: "[Feature]"
+labels: enhancement, good first issue
+assignees: ''
+
+---
+
+## 请描述您的 Feature
+
+## 描述您想要的解决方案
+
+## 描述您考虑过的替代方案
+
+## 附加上下文

.github/workflows/backend_deploy.yaml

@@ -0,0 +1,44 @@
+name: Deploy Backend Production
+
+on:
+  push:
+    tags:
+      - "*"
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Deploy Backend for ${{ github.ref_name }}
+        run: |
+          cd worker/
+          echo '${{ secrets.BACKEND_TOML }}' > wrangler.toml
+          pnpm install --no-frozen-lockfile
+          output=$(pnpm run deploy 2>&1)
+          if [ $? -ne 0 ]; then
+              code=$?
+              echo "Command failed with exit code $code"
+              exit $code
+          fi
+          echo "Deployed for tag ${{ github.ref_name }}"
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/docs_deploy.yml

@@ -4,10 +4,9 @@ on:
   push:
     paths:
       - "vitepress-docs/**"
-    branches:
-      - main
     tags:
       - "*"
+  workflow_dispatch:
 
 jobs:
   deploy:
@@ -32,9 +31,26 @@ 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/
+          wget https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip  -O docs/public/ui_install/frontend.zip
           pnpm install --no-frozen-lockfile
           if [[ ${{github.ref}} == refs/tags/* ]]; then
             export TAG_NAME=${{github.ref_name}}

.github/workflows/frontend_deploy.yaml

@@ -0,0 +1,63 @@
+name: Deploy Frontend
+
+on:
+  push:
+    paths:
+      - "frontend/**"
+    tags:
+      - "*"
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Deploy Frontend for ${{ github.ref_name }}
+        run: |
+          cd frontend/
+          echo "${{ secrets.FRONTEND_ENV }}" > .env.prod
+          export project_name=${{ secrets.FRONTEND_NAME }}
+          pnpm install --no-frozen-lockfile
+          export frontend_branch=${{ secrets.FRONTEND_BRANCH }}
+          if [ -n "$frontend_branch" ]; then
+            echo "Deploying branch $frontend_branch"
+            pnpm run deploy:actions --project-name=$project_name
+          else
+            echo "Deploying branch prodcution"
+            pnpm run deploy --project-name=$project_name
+          fi
+          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"
+            if [ -n "$frontend_branch" ]; then
+              echo "Deploying telegram mini app branch $frontend_branch"
+              pnpm run deploy:actions:telegram --project-name=$tg_mini_app_project_name
+            else
+              echo "Deploying telegram mini app branch prodcution"
+              pnpm run deploy:telegram --project-name=$tg_mini_app_project_name
+            fi
+            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 }}

.github/workflows/frontend_pagefunction_deploy.yaml

@@ -0,0 +1,39 @@
+name: Deploy Frontend with page function
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Deploy Frontend for ${{ github.ref_name }}
+        run: |
+          cd frontend/
+          pnpm install --no-frozen-lockfile
+          pnpm build:pages
+          cd ../pages/
+          echo '${{ secrets.PAGE_TOML }}' > wrangler.toml
+          pnpm install --no-frozen-lockfile
+          pnpm run deploy
+          echo "Deploying prodcution for ${{ github.ref_name }}"
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/pr_agent.yml

@@ -0,0 +1,25 @@
+name: Codium PR Agent
+
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+jobs:
+  pr_agent_job:
+    if: ${{ github.event.sender.type != 'Bot' }}
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    name: Run pr agent on every pull request, respond to user comments
+    steps:
+      - name: PR Agent action step
+        id: pragent
+        uses: Codium-ai/pr-agent@main
+        env:
+          PR_REVIEWER.REQUIRE_TESTS_REVIEW: "false"
+          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+          OPENAI_API_BASE: ${{ secrets.OPENAI_API_BASE }}
+          CONFIG.MODEL: "gpt-4o"
+          CONFIG.MODEL_TURBO: "gpt-4o"
+          OPENAI.API_BASE: ${{ secrets.OPENAI_API_BASE }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/smtp_proxy_server.yml

@@ -0,0 +1,48 @@
+name: SMTP Proxy Server Docker Image CI
+
+on:
+  push:
+    paths:
+      - "smtp_proxy_server/**"
+    tags:
+      - "*"
+    branches:
+      - main
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: smtp_proxy_server
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker images
+        uses: docker/build-push-action@v5
+        with:
+          context: ./smtp_proxy_server
+          file: ./smtp_proxy_server/dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            ${{ env.REGISTRY }}/${{ github.repository }}/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
+            ${{ env.REGISTRY }}/${{ github.repository }}/${{ env.IMAGE_NAME }}:latest

.github/workflows/tag_build.yml

@@ -30,7 +30,13 @@ jobs:
         run: cd frontend && pnpm install --no-frozen-lockfile && pnpm build:release
 
       - name: Zip Frontend dist
-        run: cd frontend/dist/ && zip -r frontend.zip *
+        run: cd frontend/dist/ && zip -r frontend.zip * && mv frontend.zip ../
+
+      - name: Build Telegram Frontend
+        run: cd frontend && pnpm install --no-frozen-lockfile && pnpm build:telegram:release
+
+      - name: Zip Telegram Frontend dist
+        run: cd frontend/dist/ && zip -r telegram-frontend.zip * && mv telegram-frontend.zip ../
 
       - name: cp wrangler.toml
         run: cd worker && cp wrangler.toml.template wrangler.toml
@@ -42,5 +48,6 @@ jobs:
         uses: softprops/action-gh-release@v2
         with:
           files: |
-            frontend/dist/frontend.zip
+            frontend/frontend.zip
+            frontend/telegram-frontend.zip
             worker/dist/worker.js

.gitignore

@@ -1,2 +1,138 @@
 dist/
 test/
+.vscode/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.wrangler
+wrangler.toml
+.dev.vars
+pnpm-lock.yaml

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-python.vscode-pylance",
+    "1yib.rust-bundle",
+    "rust-lang.rust-analyzer",
+    "vue.volar"
+  ]
+}

CHANGELOG.md

@@ -1,5 +1,337 @@
+<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
+## main(v0.8.0)
+
+- feat: |UI| 随机生成地址时不超过最大长度
+- feat: |UI| 邮件时间显示浏览器时区，可在设置中切换显示为 UTC 时间
+- feat: 支持转移邮件到其他用户
+
+## v0.7.6
+
+- feat: 支持提前设置 bot info, 降低 telegram 回调延迟 (#441)
+- feat: 增加 telegram mini app 的 build 压缩包
+- feat: 增加是否启用垃圾邮件检查 `ENABLE_CHECK_JUNK_MAIL` 配置
+
+## v0.7.5
+
+- fix: 修复 `name` 的校验检查
+
+## v0.7.4
+
+- feat: UI 列表页面增加最小宽度
+- fix: 修复 `name` 的校验检查
+- fix: 修复 `DEFAULT_DOMAINS` 配置为空不生效的问题
+
+## v0.7.3
+
+- feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查，符合条件将通过检查
+- fix: UI 修复登录页面 tab 激活图标错位
+- fix: UI 修复 admin 页面刷新弹框输入密码的问题
+- feat: support `Oath2` 登录, 可以通过 `Github` `Authentik` 等第三方登录, 详情查看 [OAuth2 第三方登录](https://temp-mail-docs.awsl.uk/zh/guide/feature/user-oauth2.html)
+
+## v0.7.2
+
+### Breaking Changes
+
+`webhook` 的结构增加了 `enabled` 字段，已经配置了的需要重新在页面开启并保存。
+
+### Changes
+
+- fix: worker 增加 `NO_LIMIT_SEND_ROLE` 配置, 加载失败的问题
+- feat: worker 增加 `# ADDRESS_REGEX = "[^a-z.0-9]"` 配置, 替换非法符号的正则表达式，如果不设置，默认为 [^a-z0-9], 需谨慎使用, 有些符号可能导致无法收件
+- feat: worker 优化 webhook 逻辑, 支持 admin 配置全局 webhook, 添加 `message pusher` 集成示例
+
+## v0.7.1
+
+- fix: 修复用户角色加载失败的问题
+- feat: admin 账号设置增加来源邮件地址黑名单配置
+
+## v0.7.0
+
+### Breaking Changes
+
+DB changes: 增加用户 `passkey` 表, 需要执行 `db/2024-08-10-patch.sql` 更新 `D1` 数据库
+
+### Changes
+
+- Docs: Update new-address-api.md (#360)
+- feat: worker 增加 `ADMIN_USER_ROLE` 配置, 用于配置管理员用户角色，此角色的用户可访问 admin 管理页面 (#363)
+- feat: worker 增加 `DISABLE_SHOW_GITHUB` 配置, 用于配置是否显示 github 链接
+- feat: worker 增加 `NO_LIMIT_SEND_ROLE` 配置, 用于配置可以无限发送邮件的角色
+- feat: 用户增加 `passkey` 登录方式, 用于用户登录, 无需输入密码
+- feat: worker 增加 `DISABLE_ADMIN_PASSWORD_CHECK` 配置, 用于配置是否禁用 admin 控制台密码检查, 若你的网站只可私人访问，可通过此禁用检查
+
+## v0.6.1
+
+- pages github actions && 修复清理邮件天数为 0 不生效 by @tqjason (#355)
+- fix: imap proxy server 不支持 密码 by @dreamhunter2333 (#356)
+- worker 新增 `ANNOUNCEMENT` 配置, 用于配置公告信息 by @dreamhunter2333 (#357)
+- fix: telegram bot 新建地址默认选择第一个域名 by @dreamhunter2333 (#358)
+
+## v0.6.0
+
+### Breaking Changes
+
+DB changes: 增加用户角色表, 需要执行 `db/2024-07-14-patch.sql` 更新 `D1` 数据库
+
+### Changes
+
+worker 配置文件新增 `DEFAULT_DOMAINS`, `USER_ROLES`, `USER_DEFAULT_ROLE`, 具体查看文档 [worker配置](https://temp-mail-docs.awsl.uk/zh/guide/cli/worker.html#%E4%BF%AE%E6%94%B9-wrangler-toml-%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)
+
+- 移除 `apiV1` 相关代码和相关的数据库表
+- 更新 `admin/statistics` api, 添加用户统计信息
+- 更新地址的规则，只允许小写+数字，对于历史的地址在查询邮件时会进行 `lowercase` 处理
+- 增加用户角色功能，`admin` 可以设置用户角色(目前可配置每个角色域名和前缀)
+- admin 页面搜索优化, 回车自动搜索, 输入内容自动 trim
+
+## v0.5.4
+
+- 点击 logo 5 次进入 admin 页面
+- 修复 401 时无法跳转登录页面(admin 和 网站认证)
+
+## v0.5.3
+
+- 修复 smtp imap proxy sever 的一些 bug
+- 完善用户/admin 删除收件箱/发件箱的功能
+- admin 可以删除 发件权限记录
+- 添加中文邮件别名配置 `DOMAIN_LABELS` [文档](https://temp-mail-docs.awsl.uk/zh/guide/cli/worker.html)
+- 移除 `mail channels` 相关代码
+- github actions 增加 `FRONTEND_BRANCH` 变量用于指定部署的分支 (#324)
+
+## v0.5.1
+
+- 添加 `mail-parser-wasm-worker` 用于 worker 解析邮件, [文档](https://temp-mail-docs.awsl.uk/zh/guide/feature/mail_parser_wasm_worker.html)
+- 添加校验用户邮箱长度配置 `MIN_ADDRESS_LEN` 和 `MAX_ADDRESS_LEN`
+- 修复 `pages function` 未转发 `telegram` api 问题
+
+## v0.5.0
+
+- 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 相关表，用于存储用户信息
+
+- `db/2024-05-08-patch.sql`
+
+### config changs
+
+启用用户注册邮箱验证需要 `KV`
+
+```toml
+# kv config for send email verification code
+# [[kv_namespaces]]
+# binding = "KV"
+# id = "xxxx"
+```
+
+### function changs
+
+- 增加用户注册功能，可绑定邮箱地址，绑定后可自动获取邮箱JWT凭证
+- 增加默认以文本显示邮件，文本和HTML邮箱显示方式切换按钮
+- 修复 `BUG` 随机生成的邮箱名字不合法 #211
+- `admin` 邮件页面支持邮件内容搜索 #210
+- 修复删除地址时邮件未删除的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 删除邮件报错
+- UI: 回复邮件按钮, 引用原始邮件文本  #186
+- 添加发送邮件地址黑名单
+- 添加 `CF Turnstile` 人机验证配置
+- 添加 `/external/api/send_mail` 发送邮件 api, 使用 body 验证 #194
+
+## v0.3.2
+
+## What's Changed
+
+- UI: 添加回复邮件按钮
+- 添加定时清理功能，可在 admin 页面配置（需要在配置文件启用定时任务）
+- 修复删除账户无反应的问题
+
+* feat: UI: MailBox add reply button by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/187
+* feat: add cron auto clean up by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/189
+* fix: delete account by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/190
+
+## v0.3.1
+
+### DB Changes
+
+新增 `settings` 表，用于存储通用配置信息
+
+- `db/2024-05-01-patch.sql`
+
+### Changes
+
+- `ENABLE_USER_CREATE_EMAIL` 是否允许用户创建邮件
+- 允许 admin 创建无前缀的邮件
+- 添加 `SMTP proxy server`，支持 SMTP 发送邮件
+- 修复某些情况浏览器无法加载 `wasm` 时使用 js 解析邮件
+- 页脚添加 `COPYRIGHT`
+- UI 允许用户切换邮件展示模式 `v-html` / `iframe`
+- 添加 `admin` 账户配置页面，支持配置用户注册名称黑名单
+
+* feat: support admin create address && add ENABLE_USER_CREATE_EMAIL co… by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/175
+* feat: add SMTP proxy server by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/177
+* fix: cf ui var is string by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/178
+* fix: UI mailbox 100vh to 80vh by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/179
+* fix: smtp_proxy_server hostname && add docker image for linux/arm64 by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/180
+* fix: some browser do not support wasm by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/182
+* feat: add COPYRIGHT by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/183
+* feat: UI: add user page: useIframeShowMail && mailboxSplitSize by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/184
+* feat: add address_block_list for new address by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/185
+
+## v0.3.0
+
+### Breaking Changes
+
+`address` 表的前缀将从代码中迁移到 db 中，请将下面 sql 中的 `tmp` 替换为你的前缀，然后执行。
+如果你的数据很重要，请先备份数据库。
+
+**注意替换前缀**
+
+```sql
+update
+    address
+set
+    name = 'tmp' || name;
+```
+
+### Changes
+
+- `address` 表的前缀将从代码中迁移到 db 中
+- `admin` 账户页面添加收发邮件数量
+- `admin` 发件页面默认显示全部
+- `admin` 发件权限页面支持搜索地址
+- `admin` 邮件页面使用左右分栏 UI
+
+* feat: remove PREFIX logic in db by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/171
+* feat: admin page add account mail count && sendbox default all && sen… by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/172
+* feat: all mail use MailBox Component by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/173
+
+**Full Changelog**: https://github.com/dreamhunter2333/cloudflare_temp_email/compare/0.2.10...v0.3.0
+
+## v0.2.10
+
+- `ENABLE_USER_DELETE_EMAIL` 是否允许用户删除账户和邮件
+- `ENABLE_AUTO_REPLY` 是否启用自动回复
+- fetchAddressError 提示改进
+- 自动刷新显示倒计时
+
+* feat: docs update by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/165
+* feat: add ENABLE_USER_DELETE_EMAIL && ENABLE_AUTO_REPLY && modify fetchAddressError i18n && UI: show autoRefreshInterval by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/169
+
+## v0.2.9
+
+- 添加富文本编辑器
+- admin 联系方式，不配置则不显示，可配置任意字符串 `ADMIN_CONTACT = "xx@xx.xxx"`
+- 默认发送邮件余额，如果不设置，将为 0 `DEFAULT_SEND_BALANCE = 1`
+
+## v0.2.8
+
+- 允许用户删除邮件
+- admin 修改发件权限时邮件通知用户
+- 发件权限默认 1 条
+- 添加 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
+- fix: delete_address not delete address_sender by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/153
+- fix: send_balance not update when click sendmail by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/155
+
 ## v0.2.7
 
 - Added user interface installation documentation
@@ -49,7 +381,7 @@ The `mails` table will be discarded, and the `raw` text of the new `mail` will b
 ```bash
 git checkout v0.2.0
 cd worker
-wrangler d1 execute dev  --file=../db/2024-04-09-patch.sql
+wrangler d1 execute dev  --file=../db/2024-04-09-patch.sql --remote
 pnpm run deploy
 cd ../frontend
 pnpm run deploy

README.md

@@ -1,28 +1,50 @@
 # 使用 cloudflare 免费服务，搭建临时邮箱
 
+<p align="center">
+  <a href="https://hellogithub.com/repository/2ccc64bb1ba346b480625f584aa19eb1" target="_blank">
+    <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=2ccc64bb1ba346b480625f584aa19eb1&claim_uid=FxNypXK7UQ9OECT" alt="Featured｜HelloGitHub"/>
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://temp-mail-docs.awsl.uk" target="_blank">
+    <img alt="docs" src="https://img.shields.io/badge/docs-grey?style=for-the-badge&logo=vitepress">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest" target="_blank">
+    <img src="https://img.shields.io/github/v/release/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/LICENSE" target="_blank">
+    <img alt="MIT License" src="https://img.shields.io/github/license/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/graphs/contributors" target="_blank">
+   <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
+  </a>
+  <a href="">
+    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
+  </a>
+  <a href="">
+    <img src="https://img.shields.io/github/last-commit/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
+  </a>
+</p>
+
+> 本项目仅供学习和个人用途，请勿将其用于任何违法行为，否则后果自负。
+
 ## [查看部署文档](https://temp-mail-docs.awsl.uk)
 
-## [English](https://temp-mail-docs.awsl.uk/en/)
+[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/dreamhunter2333/cloudflare_temp_email)
+
+[Github Action 部署文档](https://temp-mail-docs.awsl.uk/zh/guide/github-action.html)
+
+[English Docs](https://temp-mail-docs.awsl.uk/en/)
 
 ## [CHANGELOG](CHANGELOG.md)
 
 ## [在线演示](https://mail.awsl.uk/)
 
-[Backend](https://temp-email-api.awsl.uk/)
-![](https://uptime.aks.awsl.icu/api/badge/10/status)
-![](https://uptime.aks.awsl.icu/api/badge/10/uptime)
-![](https://uptime.aks.awsl.icu/api/badge/10/ping)
-![](https://uptime.aks.awsl.icu/api/badge/10/avg-response)
-![](https://uptime.aks.awsl.icu/api/badge/10/cert-exp)
-![](https://uptime.aks.awsl.icu/api/badge/10/response)
-
-[Frontend](https://mail.awsl.uk/)
-![](https://uptime.aks.awsl.icu/api/badge/12/status)
-![](https://uptime.aks.awsl.icu/api/badge/12/uptime)
-![](https://uptime.aks.awsl.icu/api/badge/12/ping)
-![](https://uptime.aks.awsl.icu/api/badge/12/avg-response)
-![](https://uptime.aks.awsl.icu/api/badge/12/cert-exp)
-![](https://uptime.aks.awsl.icu/api/badge/12/response)
+|                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Backend](https://temp-email-api.awsl.uk/) | [![Deploy Backend Production](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/backend_deploy.yaml/badge.svg)](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/backend_deploy.yaml) ![](https://uptime.aks.awsl.icu/api/badge/10/status) ![](https://uptime.aks.awsl.icu/api/badge/10/uptime) ![](https://uptime.aks.awsl.icu/api/badge/10/ping) ![](https://uptime.aks.awsl.icu/api/badge/10/avg-response) ![](https://uptime.aks.awsl.icu/api/badge/10/cert-exp) ![](https://uptime.aks.awsl.icu/api/badge/10/response) |
+| [Frontend](https://mail.awsl.uk/)          | [![Deploy Frontend](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/frontend_deploy.yaml/badge.svg)](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/frontend_deploy.yaml) ![](https://uptime.aks.awsl.icu/api/badge/12/status) ![](https://uptime.aks.awsl.icu/api/badge/12/uptime) ![](https://uptime.aks.awsl.icu/api/badge/12/ping) ![](https://uptime.aks.awsl.icu/api/badge/12/avg-response) ![](https://uptime.aks.awsl.icu/api/badge/12/cert-exp) ![](https://uptime.aks.awsl.icu/api/badge/12/response)         |
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date&theme=dark" />
@@ -32,225 +54,36 @@
 
 - [使用 cloudflare 免费服务，搭建临时邮箱](#使用-cloudflare-免费服务搭建临时邮箱)
   - [查看部署文档](#查看部署文档)
-  - [English](#english)
   - [CHANGELOG](#changelog)
   - [在线演示](#在线演示)
   - [功能/TODO](#功能todo)
-  - [什么是临时邮箱](#什么是临时邮箱)
-  - [Cloudflare 服务](#cloudflare-服务)
-  - [wrangler 的安装](#wrangler-的安装)
-  - [D1 数据库](#d1-数据库)
-  - [Cloudflare workers 后端](#cloudflare-workers-后端)
-  - [Cloudflare Email Routing](#cloudflare-email-routing)
-  - [Cloudflare Pages 前端](#cloudflare-pages-前端)
-  - [配置发送邮件](#配置发送邮件)
-  - [配置 DKIM](#配置-dkim)
-  - [参考资料](#参考资料)
+  - [Reference](#reference)
+  - [Join Community](#join-community)
 
 ## 功能/TODO
 
-- [x] Cloudflare D1 作为数据库
-- [x] 使用 Cloudflare Pages 部署前端
-- [x] 使用 Cloudflare Workers 部署后端
-- [x] email 转发使用 Cloudflare Email Routing
-- [x] 使用 password 重新登录之前的邮箱
-- [x] 获取自定义名字的邮箱
+- [x] 使用 `password` 重新登录之前的邮箱
+- [x] 获取自定义名字的邮箱，`admin` 可配置黑名单
 - [x] 支持多语言
-- [x] 增加访问授权，可作为私人站点
+- [x] 增加访问密码，可作为私人站点
 - [x] 增加自动回复功能
-- [x] 增加查看附件功能
-- [x] 使用 rust wasm 解析邮件
+- [x] 增加查看 `附件` 功能
+- [x] 使用 `rust wasm` 解析邮件
 - [x] 支持发送邮件
-- [x] 支持 DKIM
+- [x] 支持 `DKIM`
+- [x] `admin` 后台创建无前缀邮箱
+- [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件, `IMAP` 查看邮件
+- [x] 添加完整的用户注册登录功能，可绑定邮箱地址，绑定后可自动获取邮箱JWT凭证切换不同邮箱
+- [x] `Telegram Bot` 使用，以及 `Telegram` 推送
 
----
+## Reference
 
-## 什么是临时邮箱
+- Cloudflare D1 作为数据库
+- 使用 Cloudflare Pages 部署前端
+- 使用 Cloudflare Workers 部署后端
+- email 转发使用 Cloudflare Email Routing
 
-临时邮箱，也被称为一次性邮箱或临时邮件地址，是一种用于临时接收邮件的虚拟邮箱。与常规邮箱不同，临时邮箱旨在提供一种匿名且临时的邮件接收解决方案。
+## Join Community
 
-临时邮箱往往由网站或在线服务提供商提供，用户可以在需要注册或接收验证邮件时使用临时邮箱地址，而无需暴露自己的真实邮箱地址。这样做的好处是可以保护个人隐私
-
----
-
-## Cloudflare 服务
-
-- `D1` 是 `Cloudflare` 的原生无服务器数据库。
-- `Pages` 是 `Cloudflare` 的静态网站托管服务, 速度超快，始终保持最新状态。
-- `Workers` 是 `Cloudflare` 的 `serverless` 应用服务，可以在全球 300 个数据中心运行代码, 而无需配置或维护基础架构。
-- `Cloudflare Email Routing` 可以处理域名的所有电子邮件流量，而无需管理电子邮件服务器。
-
----
-
-## wrangler 的安装
-
-安装 wrangler
-
-```bash
-npm install wrangler -g
-```
-
-克隆项目
-
-```bash
-git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git
-# 切换到最新 tag 或者你想部署的分支，你也可以直接使用 main 分支
-# git checkout $(git describe --tags $(git rev-list --tags --max-count=1))
-```
-
----
-
-## D1 数据库
-
-第一次执行登录 wrangler 命令时，会提示登录, 按提示操作即可
-
-```bash
-# 创建 D1 并执行 schema.sql
-wrangler d1 create dev
-wrangler d1 execute dev --file=db/schema.sql
-# schema 更新，如果你在此日期之前初始化过数据库，可以执行此命令更新
-# wrangler d1 execute dev --file=db/2024-01-13-patch.sql
-# wrangler d1 execute dev --file=db/2024-04-03-patch.sql
-```
-
-创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
-
-![D1](vitepress-docs/docs/public/readme_assets/d1.png)
-
----
-
-## Cloudflare workers 后端
-
-初始化项目
-
-```bash
-cd worker
-pnpm install
-cp wrangler.toml.template wrangler.toml
-```
-
-修改 `wrangler.toml` 文件
-
-```bash
-name = "cloudflare_temp_email"
-main = "src/worker.js"
-compatibility_date = "2023-08-14"
-node_compat = true
-
-[vars]
-PREFIX = "tmp" # 要处理的邮箱名称前缀
-# 如果你想要你的网站私有，取消下面的注释，并修改密码
-# PASSWORDS = ["123", "456"]
-# admin 控制台密码, 不配置则不允许访问控制台
-# ADMIN_PASSWORDS = ["123", "456"]
-DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 你的域名
-JWT_SECRET = "xxx" # 用于生成 jwt 的密钥
-BLACK_LIST = "" # 黑名单，用于过滤发件人，逗号分隔
-# dkim config
-# DKIM_SELECTOR = "mailchannels" # 参考 DKIM 部分 mailchannels._domainkey 的 mailchannels
-# DKIM_PRIVATE_KEY = "" # 参考 DKIM 部分 priv_key.txt 的内容
-
-[[d1_databases]]
-binding = "DB"
-database_name = "xxx" # D1 数据库名称
-database_id = "xxx" # D1 数据库 ID
-
-# 新建地址限流配置
-# [[unsafe.bindings]]
-# name = "RATE_LIMITER"
-# type = "ratelimit"
-# namespace_id = "1001"
-# # 10 requests per minute
-# simple = { limit = 10, period = 60 }
-```
-
-部署
-
-第一次部署会提示创建项目, `production` 分支请填写 `production`
-
-```bash
-pnpm run deploy
-```
-
-部署成功之后再路由中可以看到 `worker` 的 `url`，控制台也会输出 `worker` 的 `url`
-
-![worker](vitepress-docs/docs/public/readme_assets/worker.png)
-
----
-
-## Cloudflare Email Routing
-
-在将电子邮件地址绑定到您的 Worker 之前，您需要启用电子邮件路由并拥有至少一个经过验证的电子邮件地址。
-
-配置对应域名的 `电子邮件 DNS 记录`
-
-配置 `Cloudflare Email Routing` catch-all 发送到 `worker`
-
-![email](vitepress-docs/docs/public/readme_assets/email.png)
-
----
-
-## Cloudflare Pages 前端
-
-第一次部署会提示创建项目, `production` 分支请填写 `production`
-
-```bash
-cd frontend
-pnpm install
-cp .env.example .env.local
-```
-
-修改 `.env.local` 文件, 将 `VITE_API_BASE` 修改为 `worker` 的 `url`, 不要在末尾加 `/`
-
-例如: `VITE_API_BASE=https://xxx.xxx.workers.dev`
-
-```bash
-pnpm build --emptyOutDir
-# 根据提示创建 pages
-pnpm run deploy
-```
-
-![pages](vitepress-docs/docs/public/readme_assets/pages.png)
-
-## 配置发送邮件
-
-找到域名 `DNS` 记录的 `TXT` 的 `SPF` 记录, 增加 `include:relay.mailchannels.net`
-
-```bash
-v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all
-```
-
-新建 `_mailchannels` 记录, 类型为 `TXT`, 内容为 `v=mc1 cfid=你的worker域名`
-
-- 此处 worker 域名为后端 api 的域名，比如我部署在 `https://temp-email-api.awsl.uk/`，则填写 `v=mc1 cfid=awsl.uk`
-- 如果你的域名是 `https://temp-email-api.xxx.workers.dev`，则填写 `v=mc1 cfid=xxx.workers.dev`
-
-## 配置 DKIM
-
-参考: [Adding-a-DKIM-Signature](https://support.mailchannels.com/hc/en-us/articles/7122849237389-Adding-a-DKIM-Signature)
-
-Creating a DKIM private and public key:
-Private key as PEM file and base64 encoded txt file:
-
-```bash
-openssl genrsa 2048 | tee priv_key.pem | openssl rsa -outform der | openssl base64 -A > priv_key.txt
-```
-
-Public key as DNS record:
-
-```bash
-echo -n "v=DKIM1;p=" > pub_key_record.txt && \
-openssl rsa -in priv_key.pem -pubout -outform der | openssl base64 -A >> pub_key_record.txt
-```
-
-在 `Cloudflare` 的 `DNS` 记录中添加 `TXT` 记录
-
-- `_dmarc`: `v=DMARC1; p=none; adkim=r; aspf=r;`
-- `mailchannels._domainkey`: `v=DKIM1; p=<content of the file pub_key_record.txt>`
-
-## 参考资料
-
-- https://developers.cloudflare.com/d1/
-- https://developers.cloudflare.com/pages/
-- https://developers.cloudflare.com/workers/
-- https://developers.cloudflare.com/email-routing/
+- [Discord](https://discord.gg/dQEwTWhA6Q)
+- [Telegram](https://t.me/cloudflare_temp_email)

db/2024-05-01-patch.sql

@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS settings (
+    key TEXT PRIMARY KEY,
+    value TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);

db/2024-05-08-patch.sql

@@ -0,0 +1,21 @@
+CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY,
+    user_email TEXT UNIQUE NOT NULL,
+    password TEXT NOT NULL,
+    user_info TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_user_email ON users(user_email);
+
+CREATE TABLE IF NOT EXISTS users_address (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER,
+    address_id INTEGER UNIQUE,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_address_user_id ON users_address(user_id);
+
+CREATE INDEX IF NOT EXISTS idx_users_address_address_id ON users_address(address_id);

db/2024-07-14-patch.sql

@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS user_roles (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER UNIQUE NOT NULL,
+    role_text TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_roles_user_id ON user_roles(user_id);

db/2024-08-10-patch.sql

@@ -0,0 +1,14 @@
+CREATE TABLE IF NOT EXISTS user_passkeys (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER NOT NULL,
+    passkey_name TEXT NOT NULL,
+    passkey_id TEXT NOT NULL,
+    passkey TEXT NOT NULL,
+    counter INTEGER DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_passkeys_user_id ON user_passkeys(user_id);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_user_passkeys_user_id_passkey_id ON user_passkeys(user_id, passkey_id);

db/schema.sql

@@ -1,15 +1,3 @@
-CREATE TABLE IF NOT EXISTS mails (
-    id INTEGER PRIMARY KEY,
-    message_id TEXT,
-    source TEXT,
-    address TEXT,
-    subject TEXT,
-    message TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE INDEX IF NOT EXISTS idx_mails_address ON mails(address);
-
 CREATE TABLE IF NOT EXISTS raw_mails (
     id INTEGER PRIMARY KEY,
     message_id TEXT,
@@ -22,7 +10,7 @@ CREATE TABLE IF NOT EXISTS raw_mails (
 CREATE INDEX IF NOT EXISTS idx_raw_mails_address ON raw_mails(address);
 
 CREATE TABLE IF NOT EXISTS address (
-    id INTEGER PRIMARY KEY,
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
     name TEXT UNIQUE,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
     updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
@@ -43,15 +31,6 @@ CREATE TABLE IF NOT EXISTS auto_reply_mails (
 
 CREATE INDEX IF NOT EXISTS idx_auto_reply_mails_address ON auto_reply_mails(address);
 
-CREATE TABLE IF NOT EXISTS attachments (
-    id INTEGER PRIMARY KEY,
-    source TEXT,
-    address TEXT,
-    message_id TEXT,
-    data TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
 CREATE TABLE IF NOT EXISTS address_sender (
     id INTEGER PRIMARY KEY,
     address TEXT UNIQUE,
@@ -70,3 +49,57 @@ CREATE TABLE IF NOT EXISTS sendbox (
 );
 
 CREATE INDEX IF NOT EXISTS idx_sendbox_address ON sendbox(address);
+
+CREATE TABLE IF NOT EXISTS settings (
+    key TEXT PRIMARY KEY,
+    value TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY,
+    user_email TEXT UNIQUE NOT NULL,
+    password TEXT NOT NULL,
+    user_info TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_user_email ON users(user_email);
+
+CREATE TABLE IF NOT EXISTS users_address (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER,
+    address_id INTEGER UNIQUE,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_address_user_id ON users_address(user_id);
+
+CREATE INDEX IF NOT EXISTS idx_users_address_address_id ON users_address(address_id);
+
+CREATE TABLE IF NOT EXISTS user_roles (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER UNIQUE NOT NULL,
+    role_text TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_roles_user_id ON user_roles(user_id);
+
+CREATE TABLE IF NOT EXISTS user_passkeys (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER NOT NULL,
+    passkey_name TEXT NOT NULL,
+    passkey_id TEXT NOT NULL,
+    passkey TEXT NOT NULL,
+    counter INTEGER DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_passkeys_user_id ON user_passkeys(user_id);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_user_passkeys_user_id_passkey_id ON user_passkeys(user_id, passkey_id);

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,4 +28,7 @@ coverage
 *.sw?
 
 .env.*
+!.env.example
+!.env.pages
 *-dist/
+components.d.ts

frontend/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

frontend/index.html

@@ -14,6 +14,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="icon" href="/logo.png" sizes="any">
   <link rel="apple-touch-icon" href="/logo.png">
+  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
 </head>
 
 <body>

frontend/package.json

@@ -1,37 +1,51 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.0.0",
+  "version": "0.8.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:pages:nopwa": "VITE_PWA_DISABLED=true vite build -m pages --emptyOutDir",
+    "build:telegram": "VITE_IS_TELEGRAM=true vite build -m prod --emptyOutDir",
+    "build:telegram:release": "VITE_IS_TELEGRAM=true vite build -m example --emptyOutDir",
     "preview": "vite preview",
-    "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
+    "deploy:telegram": "npm run build:telegram && wrangler pages deploy ./dist --branch production",
+    "deploy:actions:telegram": "npm run build:telegram && wrangler pages deploy ./dist",
+    "deploy:preview": "npm run build && wrangler pages deploy ./dist --branch preview",
+    "deploy": "npm run build && wrangler pages deploy ./dist --branch production",
+    "deploy:actions": "npm run build && wrangler pages deploy ./dist"
   },
   "dependencies": {
+    "@simplewebauthn/browser": "^10.0.0",
+    "@unhead/vue": "^1.11.11",
     "@vicons/material": "^0.12.0",
-    "@vueuse/core": "^10.9.0",
-    "axios": "^1.6.8",
-    "mail-parser-wasm": "^0.1.6",
-    "naive-ui": "^2.38.1",
-    "postal-mime": "^2.2.1",
+    "@vueuse/core": "^10.11.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.7.7",
+    "jszip": "^3.10.1",
+    "mail-parser-wasm": "^0.1.8",
+    "naive-ui": "^2.40.1",
+    "postal-mime": "^2.3.2",
     "vooks": "^0.2.12",
-    "vue": "^3.4.21",
+    "vue": "^3.5.12",
     "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "^9.10.2",
-    "vue-router": "^4.3.0"
+    "vue-i18n": "^9.14.1",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@vicons/fa": "^0.12.0",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.6",
-    "vite-plugin-pwa": "^0.19.7",
-    "vite-plugin-top-level-await": "^1.4.1",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "unplugin-auto-import": "^0.18.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.10",
+    "vite-plugin-pwa": "^0.19.8",
+    "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "workbox-window": "^7.0.0"
+    "workbox-window": "^7.3.0",
+    "wrangler": "^3.84.1"
   }
 }

frontend/src/App.vue

@@ -1,23 +1,31 @@
 <script setup>
-import { darkTheme, NGlobalStyle } from 'naive-ui'
-import { zhCN } from 'naive-ui'
+import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
 import Header from './views/Header.vue';
+import Footer from './views/Footer.vue';
+import { api } from './api'
 
-const { localeCache, themeSwitch, loading } = useGlobalState()
-const theme = computed(() => themeSwitch.value ? darkTheme : null)
-const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
+const {
+  isDark, loading, useSideMargin, telegramApp, isTelegram
+} = useGlobalState()
+const { locale } = useI18n({});
+const theme = computed(() => isDark.value ? darkTheme : null)
+const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
+const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);
 
-const { locale } = useI18n({
-  useScope: 'global',
-});
-locale.value = localeCache.value;
 
 onMounted(async () => {
+
+  try {
+    await api.getUserSettings();
+  } catch (error) {
+    console.error(error);
+  }
+
   const token = import.meta.env.VITE_CF_WEB_ANALY_TOKEN;
 
   const exist = document.querySelector('script[src="https://static.cloudflareinsights.com/beacon.min.js"]') !== null
@@ -29,6 +37,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>
 
@@ -36,18 +61,21 @@ onMounted(async () => {
   <n-config-provider :locale="localeConfig" :theme="theme">
     <n-global-style />
     <n-spin description="loading..." :show="loading">
-      <n-message-provider>
+      <n-message-provider container-style="margin-top: 20px;">
         <n-grid x-gap="12" :cols="12">
-          <n-gi v-if="!isMobile" span="1"></n-gi>
-          <n-gi :span="isMobile ? 12 : 10">
+          <n-gi v-if="showSideMargin" span="1"></n-gi>
+          <n-gi :span="!showSideMargin ? 12 : 10">
             <div class="main">
               <n-space vertical>
-                <Header />
-                <router-view></router-view>
+                <n-layout style="min-height: 80vh;">
+                  <Header />
+                  <router-view></router-view>
+                </n-layout>
+                <Footer />
               </n-space>
             </div>
           </n-gi>
-          <n-gi v-if="!isMobile" 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

@@ -2,12 +2,16 @@ import { useGlobalState } from '../store'
 import axios from 'axios'
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
-const { loading, auth, jwt, settings, openSettings } = useGlobalState();
-const { showAuth, adminAuth, showAdminAuth } = useGlobalState();
+const {
+    loading, auth, jwt, settings, openSettings,
+    userOpenSettings, userSettings, announcement,
+    showAuth, adminAuth, showAdminAuth, userJwt
+} = useGlobalState();
 
 const instance = axios.create({
     baseURL: API_BASE,
-    timeout: 10000
+    timeout: 30000,
+    validateStatus: (status) => status >= 200 && status <= 500
 });
 
 const apiFetch = async (path, options = {}) => {
@@ -17,19 +21,21 @@ const apiFetch = async (path, options = {}) => {
             method: options.method || 'GET',
             data: options.body || null,
             headers: {
+                'x-user-token': userJwt.value,
+                'x-user-access-token': userSettings.value.access_token,
                 'x-custom-auth': auth.value,
                 'x-admin-auth': adminAuth.value,
                 'Authorization': `Bearer ${jwt.value}`,
                 'Content-Type': 'application/json',
             },
         });
-        if (response.status === 401 && openSettings.value.auth) {
-            showAuth.value = true;
-            throw new Error("Unauthorized, you password is wrong")
-        }
         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 === 401 && openSettings.value.auth) {
+            showAuth.value = true;
+            throw new Error("Unauthorized, you access password is wrong")
         }
         if (response.status >= 300) {
             throw new Error(`${response.status} ${response.data}` || "error");
@@ -49,21 +55,49 @@ const apiFetch = async (path, options = {}) => {
 const getOpenSettings = async (message) => {
     try {
         const res = await api.fetch("/open_api/settings");
-        openSettings.value = {
+        const domainLabels = res["domainLabels"] || [];
+        if (res["domains"]?.length < 1) {
+            message.error("No domains found, please check your worker settings");
+        }
+        Object.assign(openSettings.value, {
+            ...res,
+            title: res["title"] || "",
             prefix: res["prefix"] || "",
+            minAddressLen: res["minAddressLen"] || 1,
+            maxAddressLen: res["maxAddressLen"] || 30,
             needAuth: res["needAuth"] || false,
-            domains: res["domains"].map((domain) => {
+            defaultDomains: res["defaultDomains"] || [],
+            domains: res["domains"].map((domain, index) => {
                 return {
-                    label: domain,
+                    label: domainLabels.length > index ? domainLabels[index] : domain,
                     value: domain
                 }
-            })
-        };
+            }),
+            adminContact: res["adminContact"] || "",
+            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;
         }
+        if (openSettings.value.announcement && openSettings.value.announcement != announcement.value) {
+            announcement.value = openSettings.value.announcement;
+            message.info(announcement.value, {
+                showIcon: false,
+                duration: 0,
+                closable: true
+            });
+        }
     } catch (error) {
         message.error(error.message || "error");
+    } finally {
+        openSettings.value.fetched = true;
     }
 }
 
@@ -76,7 +110,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 {
@@ -84,10 +117,34 @@ const getSettings = async () => {
     }
 }
 
-const adminShowPassword = async (id) => {
+
+const getUserOpenSettings = async (message) => {
     try {
-        const { password } = await apiFetch(`/admin/show_password/${id}`);
-        return password;
+        const res = await api.fetch(`/user_api/open_settings`);
+        Object.assign(userOpenSettings.value, res);
+    } catch (error) {
+        message.error(error.message || "fetch settings failed");
+    } finally {
+        userOpenSettings.value.fetched = true;
+    }
+}
+
+const getUserSettings = async (message) => {
+    try {
+        if (!userJwt.value) return;
+        const res = await api.fetch("/user_api/settings")
+        Object.assign(userSettings.value, res)
+    } catch (error) {
+        message?.error(error.message || "error");
+    } finally {
+        userSettings.value.fetched = true;
+    }
+}
+
+const adminShowAddressCredential = async (id) => {
+    try {
+        const { jwt: addressCredential } = await apiFetch(`/admin/show_password/${id}`);
+        return addressCredential;
     } catch (error) {
         throw error;
     }
@@ -103,10 +160,24 @@ const adminDeleteAddress = async (id) => {
     }
 }
 
+const bindUserAddress = async () => {
+    if (!userJwt.value) return;
+    try {
+        await apiFetch(`/user_api/bind_address`, {
+            method: 'POST',
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
 export const api = {
     fetch: apiFetch,
-    getSettings: getSettings,
-    getOpenSettings: getOpenSettings,
-    adminShowPassword: adminShowPassword,
-    adminDeleteAddress: adminDeleteAddress,
+    getSettings,
+    getOpenSettings,
+    getUserOpenSettings,
+    getUserSettings,
+    adminShowAddressCredential,
+    adminDeleteAddress,
+    bindUserAddress,
 }

frontend/src/components/MailBox.vue

@@ -0,0 +1,623 @@
+<script setup>
+import { watch, onMounted, ref, onBeforeUnmount } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { CloudDownloadRound, ReplyFilled } from '@vicons/material'
+import { useIsMobile } from '../utils/composables'
+import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
+import { utcToLocalDate } from '../utils';
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const props = defineProps({
+  enableUserDeleteEmail: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  showEMailTo: {
+    type: Boolean,
+    default: true,
+    required: false
+  },
+  fetchMailData: {
+    type: Function,
+    default: () => { },
+    required: true
+  },
+  deleteMail: {
+    type: Function,
+    default: () => { },
+    required: false
+  },
+  showReply: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  showSaveS3: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  saveToS3: {
+    type: Function,
+    default: (mail_id, filename, blob) => { },
+    required: false
+  },
+})
+
+const {
+  isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
+  useIframeShowMail, sendMailModel, preferShowTextMail
+} = useGlobalState()
+const autoRefresh = ref(false)
+const autoRefreshInterval = ref(30)
+const data = ref([])
+const timer = ref(null)
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const showAttachments = ref(false)
+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({
+  messages: {
+    en: {
+      success: 'Success',
+      autoRefresh: 'Auto Refresh',
+      refreshAfter: 'Refresh After {msg} Seconds',
+      refresh: 'Refresh',
+      attachments: 'Show Attachments',
+      downloadMail: 'Download Mail',
+      pleaseSelectMail: "Please select mail",
+      delete: 'Delete',
+      deleteMailTip: 'Are you sure you want to delete mail?',
+      reply: 'Reply',
+      showTextMail: 'Show Text Mail',
+      showHtmlMail: 'Show Html Mail',
+      saveToS3: 'Save to S3',
+      multiAction: 'Multi Action',
+      cancelMultiAction: 'Cancel Multi Action',
+      selectAll: 'Select All of This Page',
+      unselectAll: 'Unselect All',
+    },
+    zh: {
+      success: '成功',
+      autoRefresh: '自动刷新',
+      refreshAfter: '{msg}秒后刷新',
+      refresh: '刷新',
+      downloadMail: '下载邮件',
+      attachments: '查看附件',
+      pleaseSelectMail: "请选择邮件",
+      delete: '删除',
+      deleteMailTip: '确定要删除邮件吗?',
+      reply: '回复',
+      showTextMail: '显示纯文本邮件',
+      showHtmlMail: '显示HTML邮件',
+      saveToS3: '保存到S3',
+      multiAction: '多选',
+      cancelMultiAction: '取消多选',
+      selectAll: '全选本页',
+      unselectAll: '取消全选',
+    }
+  }
+});
+
+const setupAutoRefresh = async (autoRefresh) => {
+  // auto refresh every 30 seconds
+  autoRefreshInterval.value = 30;
+  if (autoRefresh) {
+    timer.value = setInterval(async () => {
+      autoRefreshInterval.value--;
+      if (autoRefreshInterval.value <= 0) {
+        autoRefreshInterval.value = 30;
+        await refresh();
+      }
+    }, 1000)
+  } else {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+watch(autoRefresh, async (autoRefresh, old) => {
+  setupAutoRefresh(autoRefresh)
+})
+
+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
+    );
+    loading.value = true;
+    data.value = await Promise.all(results.map(async (item) => {
+      item.checked = false;
+      return await processItem(item);
+    }));
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    curMail.value = null;
+    if (!isMobile.value && data.value.length > 0) {
+      curMail.value = data.value[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const clickRow = async (row) => {
+  if (multiActionMode.value) {
+    row.checked = !row.checked;
+    return;
+  }
+  curMail.value = row;
+};
+
+const getAttachments = (attachments) => {
+  curAttachments.value = attachments;
+  showAttachments.value = true;
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+const deleteMail = async () => {
+  try {
+    await props.deleteMail(curMail.value.id);
+    message.success(t("success"));
+    curMail.value = null;
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+};
+
+const replyMail = async () => {
+  const emailRegex = /(.+?) <(.+?)>/;
+  let toMail = curMail.value.originalSource;
+  let toName = ""
+  const match = emailRegex.exec(curMail.value.source);
+  if (match) {
+    toName = match[1];
+    toMail = match[2];
+  }
+  Object.assign(sendMailModel.value, {
+    toName: toName,
+    toMail: toMail,
+    subject: `${t('reply')}: ${curMail.value.subject}`,
+    contentType: 'rich',
+    content: curMail.value.text ? `<p><br></p><blockquote>${curMail.value.text}</blockquote><p><br></p>` : '',
+  });
+  indexTab.value = 'sendmail';
+};
+
+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();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+})
+</script>
+
+<template>
+  <div>
+    <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>
+            <template #unchecked>
+              {{ t('autoRefresh') }}
+            </template>
+          </n-switch>
+          <n-button @click="refresh" type="primary" tertiary>
+            {{ t('refresh') }}
+          </n-button>
+        </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 :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ utcToLocalDate(row.created_at, useUTCDate) }}
+                    </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 :bordered="false" embedded 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">
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
+              </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 :bordered="false" embedded 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>
+      <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">
+          <template #checked>
+            {{ t('refreshAfter', { msg: autoRefreshInterval }) }}
+          </template>
+          <template #unchecked>
+            {{ t('autoRefresh') }}
+          </template>
+        </n-switch>
+        <n-button @click="refresh" tertiary size="small" type="primary">
+          {{ t('refresh') }}
+        </n-button>
+      </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)">
+            <n-thing :title="row.subject">
+              <template #description>
+                <n-tag type="info">
+                  ID: {{ row.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ utcToLocalDate(row.created_at, useUTCDate) }}
+                </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>
+      <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 :bordered="false" embedded style="overflow: auto;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
+              </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)">
+                <n-icon :component="CloudDownloadRound" />
+                {{ 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-drawer-content>
+      </n-drawer>
+    </div>
+    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("attachments") }}</div>
+      </template>
+      <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-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>
+
+<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/SendBox.vue

@@ -0,0 +1,405 @@
+<script setup>
+import { watch, onMounted, ref, computed } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { useIsMobile } from '../utils/composables'
+import { utcToLocalDate } from '../utils';
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const props = defineProps({
+  enableUserDeleteEmail: {
+    type: Boolean,
+    default: false,
+    required: false
+  },
+  showEMailFrom: {
+    type: Boolean,
+    default: false
+  },
+  fetchMailData: {
+    type: Function,
+    default: () => { },
+    required: true
+  },
+  deleteMail: {
+    type: Function,
+    default: () => { },
+    required: false
+  },
+})
+
+const { isDark, mailboxSplitSize, loading, useUTCDate } = 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 multiActionMode = ref(false)
+const showMultiActionDelete = ref(false)
+const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      success: 'Success',
+      refresh: 'Refresh',
+      showCode: 'Change View Original Code',
+      pleaseSelectMail: "Please select a mail to view.",
+      delete: 'Delete',
+      deleteMailTip: 'Are you sure you want to delete mail?',
+      multiAction: 'Multi Action',
+      cancelMultiAction: 'Cancel Multi Action',
+      selectAll: 'Select All of This Page',
+      unselectAll: 'Unselect All',
+    },
+    zh: {
+      success: '成功',
+      refresh: '刷新',
+      showCode: '切换查看元数据',
+      pleaseSelectMail: "请选择一封邮件查看。",
+      delete: '删除',
+      deleteMailTip: '确定要删除邮件吗?',
+      multiAction: '多选',
+      cancelMultiAction: '取消多选',
+      selectAll: '全选本页',
+      unselectAll: '取消全选',
+    }
+  }
+});
+
+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;
+}
+
+const deleteMail = async () => {
+  try {
+    await props.deleteMail(curMail.value.id);
+    message.success(t("success"));
+    curMail.value = null;
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+};
+
+const showMultiActionMode = computed(() => {
+  return props.enableUserDeleteEmail;
+});
+
+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;
+  }
+}
+
+onMounted(async () => {
+  await refresh();
+});
+</script>
+
+<template>
+  <div>
+    <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-space>
+        <n-space v-else>
+          <n-button v-if="showMultiActionMode" @click="multiActionModeClick(true)" type="primary" tertiary>
+            {{ t('multiAction') }}
+          </n-button>
+          <div style="display: inline-block; margin-right: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
+              :page-sizes="[20, 50, 100]" show-size-picker />
+          </div>
+          <n-button @click="refresh" type="primary" tertiary>
+            {{ t('refresh') }}
+          </n-button>
+        </n-space>
+      </div>
+      <n-split 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 :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ utcToLocalDate(row.created_at, useUTCDate) }}
+                    </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 :bordered="false" embedded 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">
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
+              </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-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-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 :bordered="false" embedded 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-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">
+                  {{ utcToLocalDate(row.created_at, useUTCDate) }}
+                </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 :bordered="false" embedded style="overflow: auto;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
+              </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-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-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

@@ -0,0 +1,90 @@
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+const { openSettings, isDark } = useGlobalState()
+
+const cfToken = defineModel('value')
+
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            refresh: 'Refresh'
+        },
+        zh: {
+            refresh: '刷新'
+        }
+    }
+});
+
+const cfTurnstileId = ref("")
+const turnstileLoading = ref(false)
+
+const checkCfTurnstile = async (remove) => {
+    if (!openSettings.value.cfTurnstileSiteKey) return;
+    turnstileLoading.value = true;
+    try {
+        let container = document.getElementById("cf-turnstile");
+        let count = 100;
+        while (!container && count-- > 0) {
+            container = document.getElementById("cf-turnstile");
+            await new Promise(r => setTimeout(r, 10));
+        }
+        count = 100;
+        while (!window.turnstile && count-- > 0) {
+            await new Promise(r => setTimeout(r, 10));
+        }
+        if (remove && cfTurnstileId.value) {
+            window.turnstile.remove(cfTurnstileId.value);
+        }
+        cfTurnstileId.value = window.turnstile.render(
+            "#cf-turnstile",
+            {
+                sitekey: openSettings.value.cfTurnstileSiteKey,
+                language: locale.value == 'zh' ? 'zh-CN' : 'en-US',
+                theme: isDark.value ? 'dark' : 'light',
+                callback: function (token) {
+                    cfToken.value = token;
+                },
+            }
+        );
+    } finally {
+        turnstileLoading.value = false;
+    }
+}
+
+watch(isDark, async (isDark) => {
+    checkCfTurnstile(true)
+}, { immediate: true })
+
+onMounted(() => {
+    cfToken.value = "";
+    checkCfTurnstile(true);
+})
+</script>
+
+<template>
+    <div v-if="openSettings.cfTurnstileSiteKey" class="center">
+        <n-spin description="loading..." :show="turnstileLoading">
+            <n-form-item-row>
+                <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>
+
+<style scoped>
+.center {
+    display: flex;
+}
+
+.n-button {
+    margin-left: 10px;
+}
+</style>

frontend/src/components/WebhookComponent.vue

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

frontend/src/constant/index.ts

@@ -0,0 +1,8 @@
+const COMMOM_MAIL = [
+    "gmail.com", "163.com", "126.com", "qq.com", "outlook.com", "hotmail.com",
+    "icloud.com", "yahoo.com", "foxmail.com"
+]
+
+export default {
+    COMMOM_MAIL
+}

frontend/src/main.js

@@ -2,9 +2,8 @@ import { createApp } from 'vue'
 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({
     legacy: false, // you must set `false`, to use Composition API
     locale: 'zh', // set locale
@@ -16,7 +15,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/models/index.ts

@@ -0,0 +1,15 @@
+export type UserOauth2Settings = {
+    name: string;
+    clientID: string;
+    clientSecret: string;
+    authorizationURL: string;
+    accessTokenURL: string;
+    accessTokenFormat?: string;
+    userInfoURL: string;
+    redirectURL: string;
+    logoutURL?: string;
+    userEmailKey: string;
+    scope: string;
+    enableMailAllowList?: boolean | undefined;
+    mailAllowList?: string[] | undefined;
+}

frontend/src/router/index.js

@@ -1,32 +1,40 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Index from '../views/Index.vue'
-import Settings from '../views/Settings.vue'
-import SendMail from '../views/send/SendMail.vue'
-import Admin from '../views/Admin.vue'
-import SendBox from '../views/send/SendBox.vue'
+import User from '../views/User.vue'
+import UserOauth2Callback from '../views/user/UserOauth2Callback.vue'
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
             path: '/',
+            alias: "/:lang/",
             component: Index
         },
         {
-            path: '/settings',
-            component: Settings
+            path: '/user',
+            alias: "/:lang/user",
+            component: User
         },
         {
-            path: '/send',
-            component: SendMail
-        },
-        {
-            path: '/sendbox',
-            component: SendBox
+            path: '/user/oauth2/callback',
+            alias: "/:lang/user/oauth2/callback",
+            component: UserOauth2Callback
         },
         {
             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

@@ -1,20 +1,40 @@
-import { ref } from "vue";
-import { createGlobalState, useStorage } from '@vueuse/core'
+import { computed, ref } from "vue";
+import {
+    createGlobalState, useStorage, useDark, useToggle,
+    useLocalStorage, useSessionStorage
+} from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
     () => {
+        const isDark = useDark()
+        const toggleDark = useToggle(isDark)
         const loading = ref(false);
+        const announcement = useLocalStorage('announcement', '');
         const openSettings = ref({
+            fetched: false,
+            title: '',
+            announcement: '',
             prefix: '',
+            addressRegex: '',
             needAuth: false,
-            domains: [{
-                label: 'test.com',
-                value: 'test.com'
-            }]
+            adminContact: '',
+            enableUserCreateEmail: false,
+            enableUserDeleteEmail: false,
+            enableAutoReply: false,
+            enableIndexAbout: false,
+            /** @type {string[]} */
+            defaultDomains: [],
+            /** @type {Array<{label: string, value: string}>} */
+            domains: [],
+            copyright: 'Dream Hunter',
+            cfTurnstileSiteKey: '',
+            enableWebhook: false,
+            isS3Enabled: false,
+            showGithub: true,
+            disableAdminPasswordCheck: false,
         })
         const settings = ref({
             fetched: false,
-            has_v1_mails: false,
             send_balance: 0,
             address: '',
             auto_reply: {
@@ -24,33 +44,96 @@ export const useGlobalState = createGlobalState(
                 source_prefix: '',
                 name: '',
             }
-        })
+        });
+        const sendMailModel = useSessionStorage('sendMailModel', {
+            fromName: "",
+            toName: "",
+            toMail: "",
+            subject: "",
+            contentType: 'text',
+            content: "",
+        });
         const showAuth = ref(false);
+        const showAddressCredential = ref(false);
         const showAdminAuth = ref(false);
         const auth = useStorage('auth', '');
         const adminAuth = useStorage('adminAuth', '');
         const jwt = useStorage('jwt', '');
-        const localeCache = useStorage('locale', 'zh');
-        const themeSwitch = useStorage('themeSwitch', false);
-        const showLogin = ref(false);
-        const adminTab = ref("account");
+        const adminTab = useSessionStorage('adminTab', "account");
         const adminMailTabAddress = ref("");
         const adminSendBoxTabAddress = ref("");
+        const mailboxSplitSize = useStorage('mailboxSplitSize', 0.25);
+        const useIframeShowMail = useStorage('useIframeShowMail', false);
+        const preferShowTextMail = useStorage('preferShowTextMail', false);
+        const userJwt = useStorage('userJwt', '');
+        const userTab = useSessionStorage('userTab', 'user_settings');
+        const indexTab = useSessionStorage('indexTab', 'mailbox');
+        const globalTabplacement = useStorage('globalTabplacement', 'top');
+        const useSideMargin = useStorage('useSideMargin', true);
+        const useUTCDate = useStorage('useUTCDate', false);
+        const userOpenSettings = ref({
+            fetched: false,
+            enable: false,
+            enableMailVerify: false,
+            /** @type {{ clientID: string, name: string }[]} */
+            oauth2ClientIDs: [],
+        });
+        const userSettings = ref({
+            /** @type {boolean} */
+            fetched: false,
+            /** @type {string} */
+            user_email: '',
+            /** @type {number} */
+            user_id: 0,
+            /** @type {boolean} */
+            is_admin: false,
+            /** @type {string | null} */
+            access_token: null,
+            /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
+            user_role: null,
+        });
+        const showAdminPage = computed(() =>
+            !!adminAuth.value
+            || userSettings.value.is_admin
+            || openSettings.value.disableAdminPasswordCheck
+        );
+        const telegramApp = ref(window.Telegram?.WebApp || {});
+        const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
+        const userOauth2SessionState = useSessionStorage('userOauth2SessionState', '');
+        const userOauth2SessionClientID = useSessionStorage('userOauth2SessionClientID', '');
         return {
+            isDark,
+            toggleDark,
             loading,
             settings,
+            sendMailModel,
+            announcement,
             openSettings,
             showAuth,
+            showAddressCredential,
             auth,
             jwt,
-            localeCache,
-            themeSwitch,
             adminAuth,
             showAdminAuth,
-            showLogin,
             adminTab,
             adminMailTabAddress,
             adminSendBoxTabAddress,
+            mailboxSplitSize,
+            useIframeShowMail,
+            preferShowTextMail,
+            userJwt,
+            userTab,
+            indexTab,
+            userOpenSettings,
+            userSettings,
+            globalTabplacement,
+            useSideMargin,
+            useUTCDate,
+            telegramApp,
+            isTelegram,
+            showAdminPage,
+            userOauth2SessionState,
+            userOauth2SessionClientID,
         }
     },
 )

frontend/src/utils/email-parser.js

@@ -1,5 +1,4 @@
 import PostalMime from 'postal-mime';
-import { parse_message } from 'mail-parser-wasm'
 
 function humanFileSize(size) {
     const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
@@ -8,17 +7,20 @@ function humanFileSize(size) {
 
 export async function processItem(item) {
     // Try to parse the email using mail-parser-wasm
+    item.originalSource = item.source;
     try {
+        const { parse_message } = await import('mail-parser-wasm');
         const parsedEmail = parse_message(item.raw);
         item.source = parsedEmail.sender || item.source;
         item.subject = parsedEmail.subject || '';
         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);
             }
@@ -26,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) {
@@ -45,12 +48,13 @@ export async function processItem(item) {
         }
         item.subject = parsedEmail.subject || 'No Subject';
         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);
             }
@@ -58,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) {
@@ -67,6 +72,7 @@ export async function processItem(item) {
         item.subject = 'No Subject';
         item.message = item.raw;
     }
+    return item;
 }
 
 export function getDownloadEmlUrl(raw) {

frontend/src/utils/index.ts

@@ -0,0 +1,27 @@
+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}`;
+}
+
+export const utcToLocalDate = (utcDate: string, useUTCDate: boolean) => {
+    const utcDateString = `${utcDate} UTC`;
+    if (useUTCDate) {
+        return utcDateString;
+    }
+    try {
+        const date = new Date(utcDateString);
+        return date.toLocaleString();
+    } catch (e) {
+        console.error(e);
+    }
+    return utcDateString;
+}

frontend/src/views/Admin.vue

@@ -1,24 +1,38 @@
 <script setup>
-import { onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../store'
+import { api } from '../api'
 
 import SenderAccess from './admin/SenderAccess.vue'
 import Statistics from "./admin/Statistics.vue"
 import SendBox from './admin/SendBox.vue';
 import Account from './admin/Account.vue';
+import CreateAccount from './admin/CreateAccount.vue';
+import AccountSettings from './admin/AccountSettings.vue';
+import UserManagement from './admin/UserManagement.vue';
+import UserSettings from './admin/UserSettings.vue';
+import UserOauth2Settings from './admin/UserOauth2Settings.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';
+import MailWebhook from './admin/MailWebhook.vue';
+import WorkerConfig from './admin/WorkerConfig.vue';
 
 const {
-  localeCache, adminAuth, showAdminAuth, adminTab
+  adminAuth, showAdminAuth, adminTab, loading,
+  globalTabplacement, showAdminPage, userSettings
 } = useGlobalState()
 const message = useMessage()
 
 const authFunc = async () => {
   try {
+    adminAuth.value = tmpAdminAuth.value;
     location.reload()
   } catch (error) {
     message.error(error.message || "error");
@@ -26,73 +40,164 @@ const authFunc = async () => {
 }
 
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
-      auth: 'Admin Auth',
-      authTip: 'Please enter the correct auth code',
+      accessHeader: 'Admin Password',
+      accessTip: 'Please enter the admin password',
       mails: 'Emails',
+      qucickSetup: 'Quick Setup',
       account: 'Account',
+      account_create: 'Create Account',
+      account_settings: 'Account Settings',
+      user: 'User',
+      user_management: 'User Management',
+      user_settings: 'User Settings',
+      userOauth2Settings: 'Oauth2 Settings',
       unknow: 'Mails with unknow receiver',
       senderAccess: 'Sender Access Control',
       sendBox: 'Send Box',
+      telegram: 'Telegram Bot',
+      webhookSettings: 'Webhook Settings',
+      statistics: 'Statistics',
       maintenance: 'Maintenance',
+      workerconfig: 'Worker Config',
+      appearance: 'Appearance',
+      about: 'About',
+      ok: 'OK',
+      mailWebhook: 'Mail Webhook',
     },
     zh: {
-      auth: 'Admin 授权',
-      authTip: '请输入正确的授权码',
+      accessHeader: 'Admin 密码',
+      accessTip: '请输入 Admin 密码',
       mails: '邮件',
+      qucickSetup: '快速设置',
       account: '账号',
+      account_create: '创建账号',
+      account_settings: '账号设置',
+      user: '用户',
+      user_management: '用户管理',
+      user_settings: '用户设置',
+      userOauth2Settings: 'Oauth2 设置',
       unknow: '无收件人邮件',
       senderAccess: '发件权限控制',
       sendBox: '发件箱',
+      telegram: '电报机器人',
+      webhookSettings: 'Webhook 设置',
+      statistics: '统计',
       maintenance: '维护',
+      workerconfig: 'Worker 配置',
+      appearance: '外观',
+      about: '关于',
+      ok: '确定',
+      mailWebhook: '邮件 Webhook',
     }
   }
 });
 
+const showAdminPasswordModal = computed(() => !showAdminPage.value || showAdminAuth.value)
+const tmpAdminAuth = ref('')
+
 onMounted(async () => {
-  if (!adminAuth.value) {
-    showAdminAuth.value = true;
-    return;
-  }
+  // make sure user_id is fetched
+  if (!userSettings.value.user_id) await api.getUserSettings(message);
 })
 </script>
 
 <template>
   <div>
-    <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
-      title="Dialog">
-      <template #header>
-        <div>{{ t('auth') }}</div>
-      </template>
-      <p>{{ t('authTip') }}</p>
-      <n-input v-model:value="adminAuth" type="textarea" :autosize="{ minRows: 3 }" />
+    <n-modal v-model:show="showAdminPasswordModal" :closable="false" :closeOnEsc="false" :maskClosable="false"
+      preset="dialog" :title="t('accessHeader')">
+      <p>{{ t('accessTip') }}</p>
+      <n-input v-model:value="tmpAdminAuth" type="password" show-password-on="click" />
       <template #action>
-        <n-button @click="authFunc" size="small" tertiary round type="primary">
-          {{ t('auth') }}
+        <n-button @click="authFunc" type="primary" :loading="loading">
+          {{ t('ok') }}
         </n-button>
       </template>
     </n-modal>
-    <Statistics />
-    <n-tabs type="card" v-model:value="adminTab">
+    <n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement">
+      <n-tab-pane name="qucickSetup" :tab="t('qucickSetup')">
+        <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="account_settings" :tab="t('account_settings')">
+            <AccountSettings />
+          </n-tab-pane>
+          <n-tab-pane name="user_settings" :tab="t('user_settings')">
+            <UserSettings />
+          </n-tab-pane>
+          <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
+            <WorkerConfig />
+          </n-tab-pane>
+        </n-tabs>
+      </n-tab-pane>
       <n-tab-pane name="account" :tab="t('account')">
-        <Account />
+        <n-tabs type="bar" justify-content="center" 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('webhookSettings')">
+            <Webhook />
+          </n-tab-pane>
+        </n-tabs>
+      </n-tab-pane>
+      <n-tab-pane name="user" :tab="t('user')">
+        <n-tabs type="bar" justify-content="center" 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-tab-pane name="userOauth2Settings" :tab="t('userOauth2Settings')">
+            <UserOauth2Settings />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="mails" :tab="t('mails')">
-        <Mails />
+        <n-tabs type="bar" justify-content="center" 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-tab-pane name="sendBox" :tab="t('sendBox')">
+            <SendBox />
+          </n-tab-pane>
+          <n-tab-pane name="mailWebhook" :tab="t('mailWebhook')">
+            <MailWebhook />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
-      <n-tab-pane name="unknow" :tab="t('unknow')">
-        <MailsUnknow />
+      <n-tab-pane name="telegram" :tab="t('telegram')">
+        <Telegram />
       </n-tab-pane>
-      <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
-        <SenderAccess />
-      </n-tab-pane>
-      <n-tab-pane name="sendBox" :tab="t('sendBox')">
-        <SendBox />
+      <n-tab-pane name="statistics" :tab="t('statistics')">
+        <Statistics />
       </n-tab-pane>
       <n-tab-pane name="maintenance" :tab="t('maintenance')">
-        <Maintenance />
+        <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
+            <WorkerConfig />
+          </n-tab-pane>
+          <n-tab-pane name="maintenance" :tab="t('maintenance')">
+            <Maintenance />
+          </n-tab-pane>
+        </n-tabs>
+      </n-tab-pane>
+      <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>

frontend/src/views/Footer.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+const { openSettings } = useGlobalState()
+
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            copyright: "Copyright"
+        },
+        zh: {
+            copyright: "版权所有"
+        }
+    }
+});
+
+</script>
+
+<template>
+    <div>
+        <n-divider class="footer-divider" />
+        <div style="text-align: center; padding: 20px">
+            <n-text depth="3">
+                {{ t('copyright') }} © 2023-{{ new Date().getFullYear() }} {{ openSettings.copyright }}
+            </n-text>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+.footer-divider {
+    margin: 0;
+    padding: 0 var(--x-padding);
+}
+</style>

frontend/src/views/Header.vue

@@ -1,46 +1,35 @@
 <script setup>
-import useClipboard from 'vue-clipboard3'
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useHead } from '@unhead/vue'
+import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
-import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled, SendFilled } from '@vicons/material'
-import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
+import {
+    DarkModeFilled, LightModeFilled, MenuFilled,
+    AdminPanelSettingsFilled
+} from '@vicons/material'
+import { GithubAlt, Language, User, Home } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
-const { toClipboard } = useClipboard()
+import { getRouterPathWithLang } from '../utils'
+
 const message = useMessage()
 
-const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
-const { showLogin, openSettings, settings } = useGlobalState()
+const {
+    toggleDark, isDark, isTelegram, showAdminPage,
+    showAuth, auth, loading, openSettings, userSettings
+} = useGlobalState()
 const route = useRoute()
 const router = useRouter()
 const isMobile = useIsMobile()
-const isAdminRoute = computed(() => route.path.includes('admin'))
 
-const showNewEmail = ref(false)
-const showLogout = ref(false)
-const showDelteAccount = ref(false)
-const password = ref('')
-const showPassword = ref(false)
-const emailName = ref("")
-const emailDomain = ref("")
-
-const login = async () => {
-    try {
-        jwt.value = password.value;
-        await api.getSettings()
-        location.reload()
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-}
-
-const logout = () => {
-    jwt.value = '';
-    location.reload()
-}
+const showMobileMenu = ref(false)
+const menuValue = computed(() => {
+    if (route.path.includes("user")) return "user";
+    if (route.path.includes("admin")) return "admin";
+    return "home";
+});
 
 const authFunc = async () => {
     try {
@@ -50,216 +39,117 @@ 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',
             dark: 'Dark',
             light: 'Light',
-            login: 'Login',
-            logout: 'Logout',
-            logoutConfirm: 'Are you sure to logout?',
-            delteAccount: "Delete Account",
-            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
-            auth: 'Auth',
-            authTip: 'Please enter the correct auth code',
-            settings: 'Settings',
+            accessHeader: 'Access Password',
+            accessTip: 'Please enter the correct access password',
             home: 'Home',
             menu: 'Menu',
             user: 'User',
-            sendbox: 'Send Box',
-            sendMail: 'Send Mail',
-            pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
-            getNewEmail: 'Get New Email',
-            getNewEmailTip1: 'Please input the email you want to use. only allow ., a-z, A-Z and 0-9',
-            getNewEmailTip2: 'Levaing it blank will generate a random email address.',
-            getNewEmailTip3: 'You can choose a domain from the dropdown list.',
-            yourAddress: 'Your email address is',
-            password: 'Password',
-            passwordTip: 'Please copy the password and you can use it to login to your email account.', cancel: 'Cancel',
             ok: 'OK',
-            copy: 'Copy',
-            copied: 'Copied',
-            showPassword: 'Show Password',
-            fetchAddressError: 'Fetch address error, maybe your jwt is invalid or network error.',
-            mailV1Alert: 'You have some mails in v1, please click here to login and visit your history mails.',
-            generateName: 'Generate Fake Name',
         },
         zh: {
             title: 'Cloudflare 临时邮件',
             dark: '暗色',
             light: '亮色',
-            login: '登录',
-            logout: '登出',
-            logoutConfirm: '确定要登出吗？',
-            delteAccount: "删除账户",
-            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
-            auth: '授权',
-            authTip: '请输入正确的授权码',
-            settings: '设置',
+            accessHeader: '访问密码',
+            accessTip: '请输入站点访问密码',
             home: '主页',
             menu: '菜单',
             user: '用户',
-            sendbox: '发件箱',
-            sendMail: '发送邮件',
-            pleaseGetNewEmail: '请"登录"或点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
-            getNewEmail: '获取新邮箱',
-            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
-            getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
-            getNewEmailTip3: '你可以从下拉列表中选择一个域名。',
-            yourAddress: '你的邮箱地址是',
-            password: '密码',
-            passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
-            cancel: '取消',
             ok: '确定',
-            copy: '复制',
-            copied: '已复制',
-            showPassword: '查看密码',
-            fetchAddressError: '获取地址失败, 请检查你的 jwt 是否有效 或 网络是否正常。',
-            mailV1Alert: '你有一些 v1 版本的邮件，请点击此处登录查看。',
-            generateName: '生成随机名字',
         }
     }
 });
 
-const showUserMenu = computed(() => !!settings.value.address)
+const version = import.meta.env.PACKAGE_VERSION ? `v${import.meta.env.PACKAGE_VERSION}` : "";
 
 const menuOptions = computed(() => [
     {
-        label: () => h(
-            NButton,
+        label: () => h(NButton,
             {
-                bordered: false,
-                ghost: true,
+                text: true,
                 size: "small",
-                onClick: () => router.push('/')
+                type: menuValue.value == "home" ? "primary" : "default",
+                style: "width: 100%",
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/', locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
                 default: () => t('home'),
                 icon: () => h(NIcon, { component: Home })
-            }
-        ),
+            }),
         key: "home"
     },
     {
         label: () => h(
             NButton,
             {
-                bordered: false,
-                ghost: true,
-                size: "small",
-                onClick: () => router.push('/admin')
-            },
-            {
-                default: () => "Admin",
-                icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
-            }
-        ),
-        show: !!adminAuth.value,
-        key: "admin"
-    },
-    {
-        label: () => h(
-            NButton,
-            {
-                bordered: false,
-                ghost: true,
+                text: true,
                 size: "small",
+                type: menuValue.value == "user" ? "primary" : "default",
+                style: "width: 100%",
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang("/user", locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
                 default: () => t('user'),
                 icon: () => h(NIcon, { component: User }),
             }
         ),
-        show: showUserMenu.value,
         key: "user",
-        children: [
-            {
-                label: () => h(
-                    NButton,
-                    {
-                        bordered: false,
-                        ghost: true,
-                        size: "small",
-                        onClick: () => router.push('/sendbox')
-                    },
-                    { default: () => t('sendbox') }
-                ),
-                key: "sendbox"
-            },
-            {
-                label: () => h(
-                    NButton,
-                    {
-                        bordered: false,
-                        ghost: true,
-                        size: "small",
-                        onClick: () => { showPassword.value = true }
-                    },
-                    { default: () => t('showPassword') }
-                ),
-                key: "showPassword"
-            },
-            {
-                label: () => h(
-                    NButton,
-                    {
-                        bordered: false,
-                        ghost: true,
-                        size: "small",
-                        onClick: () => { router.push('/settings') }
-                    },
-                    { default: () => t('settings') }
-                ),
-                key: "settings"
-            },
-            {
-                label: () => h(
-                    NButton,
-                    {
-                        bordered: false,
-                        ghost: true,
-                        size: "small",
-                        onClick: () => { showLogout.value = true }
-                    },
-                    { default: () => t('logout') }
-                ),
-                key: "logout"
-            },
-            {
-                label: () => h(
-                    NButton,
-                    {
-                        bordered: false,
-                        ghost: true,
-                        size: "small",
-                        onClick: () => { showDelteAccount.value = true }
-                    },
-                    { default: () => t('delteAccount') }
-                ),
-                key: "delte_account"
-            }
-        ]
+        show: !isTelegram.value
     },
     {
         label: () => h(
             NButton,
             {
-                bordered: false,
-                ghost: true,
+                text: true,
                 size: "small",
-                onClick: () => { themeSwitch.value = !themeSwitch.value }
+                type: menuValue.value == "admin" ? "primary" : "default",
+                style: "width: 100%",
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/admin', locale.value));
+                    showMobileMenu.value = false;
+                }
             },
             {
-                default: () => themeSwitch.value ? t('light') : t('dark'),
+                default: () => "Admin",
+                icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
+            }
+        ),
+        show: showAdminPage.value,
+        key: "admin"
+    },
+    {
+        label: () => h(
+            NButton,
+            {
+                text: true,
+                size: "small",
+                style: "width: 100%",
+                onClick: () => { toggleDark(); showMobileMenu.value = false; }
+            },
+            {
+                default: () => isDark.value ? t('light') : t('dark'),
                 icon: () => h(
-                    NIcon, { component: themeSwitch.value ? LightModeFilled : DarkModeFilled }
+                    NIcon, { component: isDark.value ? LightModeFilled : DarkModeFilled }
                 )
             }
         ),
@@ -269,13 +159,16 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                bordered: false,
-                ghost: true,
+                text: true,
                 size: "small",
-                onClick: () => localeCache.value == 'zh' ? changeLocale('en') : changeLocale('zh')
+                style: "width: 100%",
+                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 }
                 )
@@ -287,241 +180,90 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                bordered: !isMobile.value,
-                ghost: true,
+                text: true,
                 size: "small",
+                style: "width: 100%",
                 tag: "a",
                 target: "_blank",
                 href: "https://github.com/dreamhunter2333/cloudflare_temp_email",
             },
             {
-                default: () => "Github",
+                default: () => version || "Github",
                 icon: () => h(NIcon, { component: GithubAlt })
             }
         ),
+        show: openSettings.value?.showGithub,
         key: "github"
     }
 ]);
 
-const menuOptionsMobile = computed(() => [
-    {
-        label: t('menu'),
-        icon: () => h(
-            NIcon,
-            {
-                component: MenuFilled
-            }
-        ),
-        key: "menu",
-        children: menuOptions.value
-    },
-]);
+useHead({
+    title: () => openSettings.value.title || t('title'),
+    meta: [
+        { name: "description", content: openSettings.value.description || t('title') },
+    ]
+});
 
-
-const copy = async () => {
-    try {
-        await toClipboard(settings.value.address)
-        message.success(t('copied'));
-    } catch (e) {
-        message.error(e.message || "error");
+const logoClickCount = ref(0);
+const logoClick = async () => {
+    if (route.path.includes("admin")) {
+        logoClickCount.value = 0;
+        return;
+    }
+    if (logoClickCount.value >= 5) {
+        logoClickCount.value = 0;
+        message.info("Change to admin Page");
+        await router.push(getRouterPathWithLang('/admin', locale.value));
+    } else {
+        logoClickCount.value++;
+    }
+    if (logoClickCount.value > 0) {
+        message.info(`Click ${5 - logoClickCount.value + 1} times to enter the admin page`);
     }
 }
 
-const generateNameLoading = ref(false);
-const generateName = async () => {
-    try {
-        generateNameLoading.value = true;
-        const { faker } = await import('https://esm.sh/@faker-js/faker');
-        emailName.value = faker.person
-            .fullName()
-            .replace(/\s+/g, '.')
-            .replace(/[^a-zA-Z0-9.]/g, '')
-            .toLowerCase();
-    } catch (error) {
-        message.error(error.message || "error");
-    } finally {
-        generateNameLoading.value = false;
-    }
-};
-
-const newEmail = async () => {
-    try {
-        const res = await api.fetch(
-            `/api/new_address`
-            + `?name=${emailName.value || ''}`
-            + `&domain=${emailDomain.value || ''}`
-        );
-        jwt.value = res["jwt"];
-        await api.getSettings();
-        showNewEmail.value = false;
-        showPassword.value = true;
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-};
-
-const deleteAccount = async () => {
-    try {
-        await api.fetch(`/api/delete_address`, {
-            method: 'DELETE'
-        });
-        jwt.value = '';
-        location.reload()
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-};
-
 onMounted(async () => {
     await api.getOpenSettings(message);
-    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
-    await api.getSettings();
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
 });
 </script>
 
 <template>
     <div>
-        <n-layout-header>
-            <h2 style="display: inline-block; margin-left: 10px;">{{ t('title') }}</h2>
-            <div>
-                <n-menu v-if="!isMobile" mode="horizontal" :options="menuOptions" />
-                <n-menu v-else mode="horizontal" :options="menuOptionsMobile" />
-            </div>
-        </n-layout-header>
-        <div v-if="!isAdminRoute">
-            <n-card v-if="!settings.fetched">
-                <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 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>
-                    <span>
-                        <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
-                        <n-button style="margin-left: 10px" @click="router.push('/send')" size="small" tertiary round
-                            type="primary">
-                            <n-icon :component="SendFilled" /> {{ t('sendMail') }}
-                        </n-button>
-                        <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
-                            <n-icon :component="Copy" /> {{ t('copy') }}
-                        </n-button>
-                    </span>
-                </n-alert>
-            </div>
-            <n-card v-else>
-                <n-result status="info" :description="t('pleaseGetNewEmail')">
-                    <template #footer>
-                        <n-alert v-if="jwt" type="warning" show-icon>
-                            <span>{{ t('fetchAddressError') }}</span>
-                        </n-alert>
-                        <n-button @click="showLogin = true" tertiary round type="primary">
-                            {{ t('login') }}
-                        </n-button>
-                        <n-button @click="showNewEmail = true" tertiary round type="primary">
-                            {{ t('getNewEmail') }}
-                        </n-button>
-                    </template>
-                </n-result>
-            </n-card>
-        </div>
-        <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
-            <template #header>
-                <div>{{ t('getNewEmail') }}</div>
+        <n-page-header>
+            <template #title>
+                <h3>{{ openSettings.title || t('title') }}</h3>
             </template>
-            <n-spin :show="generateNameLoading">
-                <span>
-                    <p>{{ t("getNewEmailTip1") }}</p>
-                    <p>{{ t("getNewEmailTip2") }}</p>
-                    <p>{{ t("getNewEmailTip3") }}</p>
-                </span>
-                <n-button @click="generateName" style="margin-bottom: 10px;">
-                    {{ t('generateName') }}
-                </n-button>
-                <n-input-group>
-                    <n-input-group-label v-if="openSettings.prefix">
-                        {{ openSettings.prefix }}
-                    </n-input-group-label>
-                    <n-input v-model:value="emailName" />
-                    <n-input-group-label>@</n-input-group-label>
-                    <n-select v-model:value="emailDomain" :consistent-menu-width="false"
-                        :options="openSettings.domains" />
-                </n-input-group>
-            </n-spin>
-            <template #action>
-                <n-button @click="showNewEmail = false">
-                    {{ t('cancel') }}
-                </n-button>
-                <n-button @click="newEmail" type="primary">
-                    {{ t('ok') }}
-                </n-button>
+            <template #avatar>
+                <div @click="logoClick">
+                    <n-avatar style="margin-left: 10px;" src="/logo.png" />
+                </div>
             </template>
-        </n-modal>
-        <n-modal v-model:show="showPassword" preset="dialog" title="Dialog">
-            <template #header>
-                <div>{{ t("password") }}</div>
+            <template #extra>
+                <n-space>
+                    <n-menu v-if="!isMobile" mode="horizontal" :options="menuOptions" responsive />
+                    <n-button v-else :text="true" @click="showMobileMenu = !showMobileMenu" style="margin-right: 10px;">
+                        <template #icon>
+                            <n-icon :component="MenuFilled" />
+                        </template>
+                        {{ t('menu') }}
+                    </n-button>
+                </n-space>
             </template>
-            <span>
-                <p>{{ t("passwordTip") }}</p>
-            </span>
-            <n-card>
-                <b>{{ jwt }}</b>
-            </n-card>
-            <template #action>
-            </template>
-        </n-modal>
-        <n-modal v-model:show="showLogin" preset="dialog" title="Dialog">
-            <template #header>
-                <div>{{ t('login') }}</div>
-            </template>
-            <n-input v-model:value="password" type="textarea" :autosize="{
-                minRows: 3
-            }" />
-            <template #action>
-                <n-button @click="login" size="small" tertiary round type="primary">
-                    {{ t('login') }}
-                </n-button>
-            </template>
-        </n-modal>
-        <n-modal v-model:show="showLogout" preset="dialog" title="Dialog">
-            <template #header>
-                <div>{{ t('logout') }}</div>
-            </template>
-            <p>{{ t('logoutConfirm') }}</p>
-            <template #action>
-                <n-button @click="logout" size="small" tertiary round type="primary">
-                    {{ t('logout') }}
-                </n-button>
-            </template>
-        </n-modal>
-        <n-modal v-model:show="showDelteAccount" preset="dialog" title="Dialog">
-            <template #header>
-                <div>{{ t('delteAccount') }}</div>
-            </template>
-            <p>{{ t('delteAccountConfirm') }}</p>
-            <template #action>
-                <n-button @click="deleteAccount" size="small" tertiary round type="error">
-                    {{ t('delteAccount') }}
-                </n-button>
-            </template>
-        </n-modal>
+        </n-page-header>
+        <n-drawer v-model:show="showMobileMenu" placement="top" style="height: 100vh;">
+            <n-drawer-content :title="t('menu')" closable>
+                <n-menu :options="menuOptions" />
+            </n-drawer-content>
+        </n-drawer>
         <n-modal v-model:show="showAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
-            title="Dialog">
-            <template #header>
-                <div>{{ t('auth') }}</div>
-            </template>
-            <p>{{ t('authTip') }}</p>
-            <n-input v-model:value="auth" type="textarea" :autosize="{
-                minRows: 3
-            }" />
+            :title="t('accessHeader')">
+            <p>{{ t('accessTip') }}</p>
+            <n-input v-model:value="auth" type="password" show-password-on="click" />
             <template #action>
-                <n-button @click="authFunc" size="small" tertiary round type="primary">
-                    {{ t('auth') }}
+                <n-button :loading="loading" @click="authFunc" type="primary">
+                    {{ t('ok') }}
                 </n-button>
             </template>
         </n-modal>
@@ -544,4 +286,16 @@ onMounted(async () => {
 .n-card {
     margin-top: 10px;
 }
+
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+
+.n-form .n-button {
+    margin-top: 10px;
+}
 </style>

frontend/src/views/Index.vue

@@ -1,11 +1,159 @@
 <script setup>
-import MailBox from './MailBox.vue';
+import { defineAsyncComponent, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
 import { useGlobalState } from '../store'
-const { settings } = useGlobalState()
+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 AccountSettings from './index/AccountSettings.vue';
+import Webhook from './index/Webhook.vue';
+import Attachment from './index/Attachment.vue';
+import About from './common/About.vue';
+
+const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
+const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const message = useMessage()
+const route = useRoute()
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      mailbox: 'Mail Box',
+      sendbox: 'Send Box',
+      sendmail: 'Send Mail',
+      auto_reply: 'Auto Reply',
+      accountSettings: 'Account Settings',
+      about: 'About',
+      s3Attachment: 'S3 Attachment',
+      saveToS3Success: 'save to s3 success',
+      webhookSettings: 'Webhook Settings',
+      query: 'Query',
+    },
+    zh: {
+      mailbox: '收件箱',
+      sendbox: '发件箱',
+      sendmail: '发送邮件',
+      auto_reply: '自动回复',
+      accountSettings: '账户设置',
+      about: '关于',
+      s3Attachment: 'S3附件',
+      saveToS3Success: '保存到s3成功',
+      webhookSettings: 'Webhook 设置',
+      query: '查询',
+    }
+  }
+});
+
+const fetchMailData = async (limit, offset) => {
+  if (mailIdQuery.value > 0) {
+    const singleMail = await api.fetch(`/api/mail/${mailIdQuery.value}`);
+    if (singleMail) return { results: [singleMail], count: 1 };
+    return { results: [], count: 0 };
+  }
+  return await api.fetch(`/api/mails?limit=${limit}&offset=${offset}`);
+};
+
+const deleteMail = async (curMailId) => {
+  await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
+};
+
+const deleteSenboxMail = async (curMailId) => {
+  await api.fetch(`/api/sendbox/${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");
+  }
+}
+
+const mailBoxKey = ref("")
+const mailIdQuery = ref("")
+const showMailIdQuery = ref(false)
+
+const queryMail = () => {
+  mailBoxKey.value = Date.now();
+}
+
+watch(route, () => {
+  if (!route.query.mail_id) {
+    showMailIdQuery.value = false;
+    mailIdQuery.value = "";
+    queryMail();
+  }
+})
+
+onMounted(() => {
+  if (route.query.mail_id) {
+    showMailIdQuery.value = true;
+    mailIdQuery.value = route.query.mail_id;
+    queryMail();
+  }
+})
 </script>
 
 <template>
   <div>
-    <MailBox v-if="settings.address" />
+    <AddressBar />
+    <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
+      <n-tab-pane name="mailbox" :tab="t('mailbox')">
+        <div v-if="showMailIdQuery" style="margin-bottom: 10px;">
+          <n-input-group>
+            <n-input v-model:value="mailIdQuery" />
+            <n-button @click="queryMail" type="primary" tertiary>
+              {{ t('query') }}
+            </n-button>
+          </n-input-group>
+        </div>
+        <MailBox :key="mailBoxKey" :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 :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+          :deleteMail="deleteSenboxMail" />
+      </n-tab-pane>
+      <n-tab-pane name="sendmail" :tab="t('sendmail')">
+        <SendMail />
+      </n-tab-pane>
+      <n-tab-pane name="accountSettings" :tab="t('accountSettings')">
+        <AccountSettings />
+      </n-tab-pane>
+      <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('webhookSettings')">
+        <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/MailBox.vue

@@ -1,294 +0,0 @@
-<script setup>
-import { watch, onMounted, ref } from "vue";
-import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
-import { useGlobalState } from '../store'
-import { api } from '../api'
-import { CloudDownloadRound } from '@vicons/material'
-import { useIsMobile } from '../utils/composables'
-import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
-
-const message = useMessage()
-const isMobile = useIsMobile()
-
-const { settings, themeSwitch } = useGlobalState()
-const autoRefresh = ref(false)
-const data = ref([])
-const timer = ref(null)
-
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const showAttachments = ref(false)
-const curAttachments = ref([])
-const curMail = ref(null);
-
-const { t } = useI18n({
-  locale: 'zh',
-  messages: {
-    en: {
-      autoRefresh: 'Auto Refresh',
-      refresh: 'Refresh',
-      attachments: 'Show Attachments',
-      downloadMail: 'Download Mail',
-      pleaseSelectMail: "Please select a mail to view."
-    },
-    zh: {
-      autoRefresh: '自动刷新',
-      refresh: '刷新',
-      downloadMail: '下载邮件',
-      attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。"
-    }
-  }
-});
-
-const setupAutoRefresh = async (autoRefresh) => {
-  if (autoRefresh) {
-    timer.value = setInterval(async () => {
-      await refresh();
-    }, 30000)
-  } else {
-    clearInterval(timer.value)
-    timer.value = null
-  }
-}
-
-watch(autoRefresh, async (autoRefresh, old) => {
-  setupAutoRefresh(autoRefresh)
-})
-
-watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
-  if (page !== oldPage || pageSize !== oldPageSize) {
-    await refresh();
-  }
-})
-
-const refresh = async () => {
-  try {
-    const { results, count: totalCount } = await api.fetch(
-      `/api/mails`
-      + `?limit=${pageSize.value}`
-      + `&offset=${(page.value - 1) * pageSize.value}`
-    );
-    data.value = await Promise.all(results.map(async (item) => {
-      return await processItem(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 getAttachments = (attachments) => {
-  curAttachments.value = attachments;
-  showAttachments.value = true;
-};
-
-const mailItemClass = (row) => {
-  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
-};
-
-onMounted(async () => {
-  await refresh();
-});
-</script>
-
-<template>
-  <div>
-    <n-layout v-if="settings.address">
-      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
-        <template #1>
-          <div>
-            <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">
-              <template #checked>
-                {{ t('autoRefresh') }}
-              </template>
-              <template #unchecked>
-                {{ t('autoRefresh') }}
-              </template></n-switch>
-            <n-button class="center" @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)"
-                :class="mailItemClass(row)">
-                <n-thing class="center" :title="row.subject">
-                  <template #description>
-                    <n-tag type="info">
-                      ID: {{ row.id }}
-                    </n-tag>
-                    <n-tag type="info">
-                      {{ row.created_at }}
-                    </n-tag>
-                    <div style="word-break: break-all; font-size: small;">
-                      FROM: {{ row.source }}
-                    </div>
-                  </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-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)">
-                <n-icon :component="CloudDownloadRound" />
-                {{ t('downloadMail') }}
-              </n-button>
-            </n-space>
-            <div 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 class="left" v-else>
-        <div>
-          <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">
-            <template #checked>
-              {{ t('autoRefresh') }}
-            </template>
-            <template #unchecked>
-              {{ t('autoRefresh') }}
-            </template></n-switch>
-          <n-button class="center" @click="refresh" size="small" type="primary">
-            {{ t('refresh') }}
-          </n-button>
-        </div>
-        <div id="drawer-target" 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 class="center" :title="row.subject">
-                <template #description>
-                  <n-tag type="info">
-                    ID: {{ row.id }}
-                  </n-tag>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </n-tag>
-                  <div style="word-break: break-all; font-size: small;">
-                    FROM: {{ row.source }}
-                  </div>
-                </template>
-              </n-thing>
-            </n-list-item>
-          </n-list>
-        </div>
-        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
-          <n-drawer-content :title="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 }}
-                </n-tag>
-                <n-tag type="info">
-                  FROM: {{ curMail.source }}
-                </n-tag>
-                <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)">
-                  <n-icon :component="CloudDownloadRound" />
-                  {{ t('downloadMail') }}
-                </n-button>
-              </n-space>
-              <div v-html="curMail.message" style="margin-top: 10px;"></div>
-            </n-card>
-          </n-drawer-content>
-        </n-drawer>
-      </div>
-    </n-layout>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <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>
-            </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>
-      <template #action>
-      </template>
-    </n-modal>
-  </div>
-</template>
-
-<style scoped>
-.left {
-  text-align: left;
-}
-
-.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%;
-}
-</style>

frontend/src/views/User.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../store'
+
+import AddressMangement from './user/AddressManagement.vue';
+import UserSettingsPage from './user/UserSettings.vue';
+import UserBar from './user/UserBar.vue';
+import BindAddress from './user/BindAddress.vue';
+
+const {
+    userTab, globalTabplacement, userSettings
+} = useGlobalState()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            address_management: 'Address Management',
+            user_settings: 'User Settings',
+            bind_address: 'Bind Mail Address',
+        },
+        zh: {
+            address_management: '地址管理',
+            user_settings: '用户设置',
+            bind_address: '绑定邮箱地址',
+        }
+    }
+});
+
+</script>
+
+<template>
+    <div>
+        <UserBar />
+        <n-tabs v-if="userSettings.user_email" type="card" v-model:value="userTab" :placement="globalTabplacement">
+            <n-tab-pane name="address_management" :tab="t('address_management')">
+                <AddressMangement />
+            </n-tab-pane>
+            <n-tab-pane name="user_settings" :tab="t('user_settings')">
+                <UserSettingsPage />
+            </n-tab-pane>
+            <n-tab-pane name="bind_address" :tab="t('bind_address')">
+                <BindAddress />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>

frontend/src/views/admin/Account.vue

@@ -1,27 +1,30 @@
 <script setup>
 import { ref, h, onMounted, watch } from 'vue';
+import { NBadge } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import { NMenu } from 'naive-ui';
+import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'
 
 const {
-    localeCache, adminAuth, showAdminAuth,
-    adminTab, adminMailTabAddress, adminSendBoxTabAddress
+    loading, adminTab,
+    adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             name: 'Name',
             created_at: 'Created At',
-            showPass: 'Show Passwrod',
-            password: 'Password',
-            passwordTip: 'Please copy the password and you can use it to login to your email account.',
+            updated_at: 'Update At',
+            mail_count: 'Mail Count',
+            send_count: 'Send Count',
+            showCredential: 'Show Mail Address Credential',
+            addressCredential: 'Mail Address Credential',
+            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             delete: 'Delete',
             deleteTip: 'Are you sure to delete this email?',
             delteAccount: 'Delete Account',
@@ -35,9 +38,12 @@ const { t } = useI18n({
         zh: {
             name: '名称',
             created_at: '创建时间',
-            showPass: '显示密码',
-            password: '密码',
-            passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
+            updated_at: '更新时间',
+            mail_count: '邮件数量',
+            send_count: '发送数量',
+            showCredential: '查看邮箱地址凭证',
+            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             delete: '删除',
             deleteTip: '确定要删除这个邮箱吗？',
             delteAccount: '删除邮箱',
@@ -51,8 +57,8 @@ const { t } = useI18n({
     }
 });
 
-const showEmailPassword = ref(false)
-const curEmailPassword = ref("")
+const showEmailCredential = ref(false)
+const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
 
 const addressQuery = ref("")
@@ -61,16 +67,16 @@ const data = ref([])
 const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
-const showDelteAccount = ref(false)
+const showDeleteAccount = ref(false)
 
-const showPassword = async (id) => {
+const showCredential = async (id) => {
     try {
-        curEmailPassword.value = await api.adminShowPassword(id)
-        showEmailPassword.value = true
+        curEmailCredential.value = await api.adminShowAddressCredential(id)
+        showEmailCredential.value = true
     } catch (error) {
         message.error(error.message || "error");
-        showEmailPassword.value = false
-        curEmailPassword.value = ""
+        showEmailCredential.value = false
+        curEmailCredential.value = ""
     }
 }
 
@@ -81,11 +87,14 @@ const deleteEmail = async () => {
         await fetchData()
     } catch (error) {
         message.error(error.message || "error");
+    } finally {
+        showDeleteAccount.value = false
     }
 }
 
 const fetchData = async () => {
     try {
+        addressQuery.value = addressQuery.value.trim()
         const { results, count: addressCount } = await api.fetch(
             `/admin/address`
             + `?limit=${pageSize.value}`
@@ -115,6 +124,62 @@ const columns = [
         title: t('created_at'),
         key: "created_at"
     },
+    {
+        title: t('updated_at'),
+        key: "updated_at"
+    },
+    {
+        title: t('mail_count'),
+        key: "mail_count",
+        render(row) {
+            return h(NButton,
+                {
+                    text: true,
+                    onClick: () => {
+                        if (row.mail_count > 0) {
+                            adminMailTabAddress.value = row.name;
+                            adminTab.value = "mails";
+                        }
+                    }
+                },
+                {
+                    icon: () => h(NBadge, {
+                        value: row.mail_count,
+                        'show-zero': true,
+                        max: 99,
+                        type: "success"
+                    }),
+                    default: () => row.mail_count > 0 ? t('viewMails') : ""
+                }
+            )
+        }
+    },
+    {
+        title: t('send_count'),
+        key: "send_count",
+        render(row) {
+            return h(NButton,
+                {
+                    text: true,
+                    onClick: () => {
+                        if (row.send_count > 0) {
+                            adminSendBoxTabAddress.value = row.name;
+                            adminTab.value = "sendBox";
+                        }
+                    }
+                },
+                {
+                    icon: () => h(NBadge, {
+                        value: row.send_count,
+                        'show-zero': true,
+                        max: 99,
+                        type: "success"
+                    }),
+                    default: () => row.send_count > 0 ? t('viewSendBox') : ""
+                }
+            )
+        }
+    },
     {
         title: t('actions'),
         key: 'actions',
@@ -131,18 +196,16 @@ const columns = [
                                 {
                                     label: () => h(NButton,
                                         {
-                                            bordered: false,
-                                            ghost: true,
-                                            onClick: () => showPassword(row.id)
+                                            text: true,
+                                            onClick: () => showCredential(row.id)
                                         },
-                                        { default: () => t('showPass') }
+                                        { default: () => t('showCredential') }
                                     ),
                                 },
                                 {
                                     label: () => h(NButton,
                                         {
-                                            bordered: false,
-                                            ghost: true,
+                                            text: true,
                                             onClick: () => {
                                                 adminMailTabAddress.value = row.name;
                                                 adminTab.value = "mails";
@@ -154,8 +217,7 @@ const columns = [
                                 {
                                     label: () => h(NButton,
                                         {
-                                            bordered: false,
-                                            ghost: true,
+                                            text: true,
                                             onClick: () => {
                                                 adminSendBoxTabAddress.value = row.name;
                                                 adminTab.value = "sendBox";
@@ -167,11 +229,10 @@ const columns = [
                                 {
                                     label: () => h(NButton,
                                         {
-                                            bordered: false,
-                                            ghost: true,
+                                            text: true,
                                             onClick: () => {
                                                 curDeleteAddressId.value = row.id;
-                                                showDelteAccount.value = true;
+                                                showDeleteAccount.value = true;
                                             }
                                         },
                                         { default: () => t('delete') }
@@ -191,52 +252,51 @@ watch([page, pageSize], async () => {
 })
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
     await fetchData()
 })
 </script>
 
 <template>
-    <div>
-        <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
+    <div style="margin-top: 10px;">
+        <n-modal v-model:show="showEmailCredential" preset="dialog" title="Dialog">
             <template #header>
-                <div>{{ t("password") }}</div>
+                <div>{{ t("addressCredential") }}</div>
             </template>
             <span>
-                <p>{{ t("passwordTip") }}</p>
+                <p>{{ t("addressCredentialTip") }}</p>
             </span>
-            <n-card>
-                <b>{{ curEmailPassword }}</b>
+            <n-card :bordered="false" embedded>
+                <b>{{ curEmailCredential }}</b>
             </n-card>
             <template #action>
             </template>
         </n-modal>
-        <n-modal v-model:show="showDelteAccount" preset="dialog" title="Dialog">
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('delteAccount')">
             <p>{{ t('deleteTip') }}</p>
             <template #action>
-                <n-button @click="deleteEmail" size="small" tertiary round type="error">
+                <n-button :loading="loading" @click="deleteEmail" size="small" tertiary type="error">
                     {{ t('delteAccount') }}
                 </n-button>
             </template>
         </n-modal>
         <n-input-group>
-            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')" />
-            <n-button @click="fetchData" type="primary" ghost>
+            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')"
+                @keydown.enter="fetchData" />
+            <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 style="overflow: auto;">
+            <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" embedded />
         </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
     </div>
 </template>
 
@@ -245,4 +305,8 @@ onMounted(async () => {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.n-data-table {
+    min-width: 1000px;
+}
 </style>

frontend/src/views/admin/AccountSettings.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { loading } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            tip: 'You can manually input the following multiple select input',
+            save: 'Save',
+            successTip: 'Save Success',
+            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)',
+            fromBlockList: 'Block Keywords for receive email',
+        },
+        zh: {
+            tip: '您可以手动输入以下多选输入框',
+            save: '保存',
+            successTip: '保存成功',
+            address_block_list: '邮件地址屏蔽关键词(管理员可跳过检查)',
+            address_block_list_placeholder: '请输入您想要屏蔽的关键词',
+            send_address_block_list: '发送邮件地址屏蔽关键词',
+            verified_address_list: '已验证地址列表(可通过 cf 内部 api 发送邮件)',
+            fromBlockList: '接收邮件地址屏蔽关键词',
+        }
+    }
+});
+
+const addressBlockList = ref([])
+const sendAddressBlockList = ref([])
+const verifiedAddressList = ref([])
+const fromBlockList = 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 || []
+        fromBlockList.value = res.fromBlockList || []
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/account_settings`, {
+            method: 'POST',
+            body: JSON.stringify({
+                blockList: addressBlockList.value || [],
+                sendBlockList: sendAddressBlockList.value || [],
+                verifiedAddressList: verifiedAddressList.value || [],
+                fromBlockList: fromBlockList.value || [],
+            })
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-alert :show-icon="false" style="margin-bottom: 10px;">
+                {{ t("tip") }}
+            </n-alert>
+            <n-form-item-row :label="t('address_block_list')">
+                <n-select v-model:value="addressBlockList" filterable multiple tag
+                    :placeholder="t('address_block_list_placeholder')" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('send_address_block_list')">
+                <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-form-item-row :label="t('fromBlockList')">
+                <n-select v-model:value="fromBlockList" filterable multiple tag :placeholder="t('fromBlockList')" />
+            </n-form-item-row>
+            <n-button @click="save" type="primary" block :loading="loading">
+                {{ t('save') }}
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+</style>

frontend/src/views/admin/CreateAccount.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const {
+    loading, openSettings,
+} = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            address: 'Address',
+            enablePrefix: 'If enable Prefix',
+            creatNewEmail: 'Get New Email',
+            fillInAllFields: 'Please fill in all fields',
+            successTip: 'Success Created',
+            addressCredential: 'Mail Address Credential',
+        },
+        zh: {
+            address: '地址',
+            enablePrefix: '是否启用前缀',
+            creatNewEmail: '创建新邮箱',
+            fillInAllFields: '请填写完整信息',
+            successTip: '创建成功',
+            addressCredential: '邮箱地址凭证',
+        }
+    }
+});
+
+const enablePrefix = ref(true)
+const emailName = ref("")
+const emailDomain = ref("")
+const showReultModal = ref(false)
+const result = ref("")
+
+const newEmail = async () => {
+    if (!emailName.value || !emailDomain.value) {
+        message.error(t('fillInAllFields'))
+        return
+    }
+    try {
+        const res = await api.fetch(`/admin/new_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                enablePrefix: enablePrefix.value,
+                name: emailName.value,
+                domain: emailDomain.value,
+            })
+        })
+        result.value = res["jwt"];
+        message.success(t('successTip'))
+        showReultModal.value = true
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+onMounted(async () => {
+    if (openSettings.prefix) {
+        enablePrefix.value = true
+    }
+    emailDomain.value = openSettings.value.domains?.[0]?.value || ""
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('addressCredential')">
+            <p>{{ t('addressCredential') }}</p>
+            <n-card :bordered="false" embedded>
+                <b>{{ result }}</b>
+            </n-card>
+        </n-modal>
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-form-item-row v-if="openSettings.prefix" :label="t('enablePrefix')">
+                <n-checkbox v-model:checked="enablePrefix" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('address')">
+                <n-input-group>
+                    <n-input-group-label v-if="enablePrefix && openSettings.prefix">
+                        {{ openSettings.prefix }}
+                    </n-input-group-label>
+                    <n-input v-model:value="emailName" />
+                    <n-input-group-label>@</n-input-group-label>
+                    <n-select v-model:value="emailDomain" :consistent-menu-width="false"
+                        :options="openSettings.domains" />
+                </n-input-group>
+            </n-form-item-row>
+            <n-button @click="newEmail" type="primary" block :loading="loading">
+                {{ t('creatNewEmail') }}
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+</style>

frontend/src/views/admin/MailWebhook.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// @ts-ignore
+import { api } from '../../api'
+
+// @ts-ignore
+import WebhookComponent from '../../components/WebhookComponent.vue'
+
+const fetchData = async () => {
+    return await api.fetch(`/admin/mail_webhook/settings`)
+}
+
+const saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+</script>
+
+<template>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
+</template>

frontend/src/views/admin/Mails.vue

@@ -4,109 +4,61 @@ import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import { processItem } from '../../utils/email-parser'
+import MailBox from '../../components/MailBox.vue';
 
-const {
-    localeCache, adminAuth, showAdminAuth,
-    adminMailTabAddress
-} = useGlobalState()
-const message = useMessage()
+const { adminMailTabAddress } = useGlobalState()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
-            mails: 'Emails',
-            itemCount: 'itemCount',
+            addressQueryTip: 'Leave blank to query all addresses',
+            keywordQueryTip: 'Leave blank to not query by keyword',
             query: 'Query',
         },
         zh: {
-            mails: '邮件',
-            itemCount: '总数',
+            addressQueryTip: '留空查询所有地址',
+            keywordQueryTip: '留空不按关键字查询',
             query: '查询',
         }
     }
 });
 
-const mailData = ref([])
-const mailCount = ref(0)
-const mailPage = ref(1)
-const mailPageSize = ref(20)
+const mailBoxKey = ref("")
+const mailKeyword = ref("")
 
-watch([mailPage, mailPageSize, adminMailTabAddress], async () => {
-    await fetchMailData()
-})
-
-const fetchMailData = async () => {
-    if (!adminMailTabAddress.value) {
-        return
-    }
-    try {
-        const { results, count } = await api.fetch(
-            `/admin/mails`
-            + `?address=${adminMailTabAddress.value}`
-            + `&limit=${mailPageSize.value}`
-            + `&offset=${(mailPage.value - 1) * mailPageSize.value}`
-        );
-        mailData.value = await Promise.all(results.map(async (item) => {
-            return await processItem(item);
-        }));
-        if (count > 0) {
-            mailCount.value = count;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
+const queryMail = () => {
+    adminMailTabAddress.value = adminMailTabAddress.value.trim();
+    mailKeyword.value = mailKeyword.value.trim();
+    mailBoxKey.value = Date.now();
 }
 
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-    await fetchMailData()
-})
+const fetchMailData = async (limit, offset) => {
+    return await api.fetch(
+        `/admin/mails`
+        + `?limit=${limit}`
+        + `&offset=${offset}`
+        + (adminMailTabAddress.value ? `&address=${adminMailTabAddress.value}` : '')
+        + (mailKeyword.value ? `&keyword=${mailKeyword.value}` : '')
+    );
+}
+
+const deleteMail = async (curMailId) => {
+    await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
+};
 </script>
 
 <template>
-    <div>
+    <div style="margin-top: 10px;">
         <n-input-group>
-            <n-input v-model:value="adminMailTabAddress" />
-            <n-button @click="fetchMailData" type="primary" ghost>
+            <n-input v-model:value="adminMailTabAddress" :placeholder="t('addressQueryTip')"
+                @keydown.enter="queryMail" />
+            <n-input v-model:value="mailKeyword" :placeholder="t('keywordQueryTip')" @keydown.enter="queryMail" />
+            <n-button @click="queryMail" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>
         </n-input-group>
-        <n-list hoverable clickable>
-            <div style="display: inline-block; margin-bottom: 10px;">
-                <n-pagination v-model:page="mailPage" v-model:page-size="mailPageSize" :item-count="mailCount" simple>
-                    <template #prefix="{ itemCount }">
-                        {{ t('itemCount') }}: {{ itemCount }}
-                    </template>
-                </n-pagination>
-            </div>
-            <n-list-item v-for="row in mailData" v-bind:key="row.id">
-                <n-thing class="center" :title="row.subject">
-                    <template #description>
-                        <n-space>
-                            <n-tag type="info">
-                                FROM: {{ row.source }}
-                            </n-tag>
-                            <n-tag type="info">
-                                ID: {{ row.id }}
-                            </n-tag>
-                        </n-space>
-                    </template>
-                    <div v-html="row.message"></div>
-                </n-thing>
-            </n-list-item>
-        </n-list>
+        <div style="margin-top: 10px;"></div>
+        <MailBox :key="mailBoxKey" :enableUserDeleteEmail="true" :fetchMailData="fetchMailData"
+            :deleteMail="deleteMail" />
     </div>
 </template>
-
-<style scoped>
-.n-pagination {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-</style>

frontend/src/views/admin/MailsUnknow.vue

@@ -1,103 +1,22 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n'
-
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import { processItem } from '../../utils/email-parser'
+import MailBox from '../../components/MailBox.vue';
 
-const {
-    localeCache, adminAuth, showAdminAuth
-} = useGlobalState()
-const message = useMessage()
-
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
-    messages: {
-        en: {
-            itemCount: 'itemCount',
-            refresh: 'Refresh'
-        },
-        zh: {
-            itemCount: '总数',
-            refresh: '刷新'
-        }
-    }
-});
-
-const mailUnknowData = ref([])
-const mailUnknowCount = ref(0)
-const mailUnknowPage = ref(1)
-const mailUnknowPageSize = ref(20)
-
-watch([mailUnknowPage, mailUnknowPageSize], async () => {
-    await fetchMailUnknowData()
-})
-
-const fetchMailUnknowData = async () => {
-    try {
-        const { results, count } = await api.fetch(
-            `/admin/mails_unknow`
-            + `?limit=${mailUnknowPageSize.value}`
-            + `&offset=${(mailUnknowPage.value - 1) * mailUnknowPage.value}`
-        );
-        mailUnknowData.value = await Promise.all(results.map(async (item) => {
-            return await processItem(item);
-        }));
-        if (count > 0) {
-            mailUnknowCount.value = count;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
+const fetchMailUnknowData = async (limit, offset) => {
+    return await api.fetch(
+        `/admin/mails_unknow`
+        + `?limit=${limit}`
+        + `&offset=${offset}`
+    );
 }
 
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-    await fetchMailUnknowData();
-})
+const deleteMail = async (curMailId) => {
+    await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
+};
 </script>
 
 <template>
-    <div>
-        <n-button @click="fetchMailUnknowData" type="primary" ghost>
-            {{ t('refresh') }}
-        </n-button>
-        <n-list hoverable clickable>
-            <div style="display: inline-block; margin-bottom: 10px;">
-                <n-pagination v-model:page="mailUnknowPage" v-model:page-size="mailUnknowPageSize"
-                    :item-count="mailUnknowCount" simple>
-                    <template #prefix="{ itemCount }">
-                        {{ t('itemCount') }}: {{ itemCount }}
-                    </template>
-                </n-pagination>
-            </div>
-            <n-list-item v-for="row in mailUnknowData" v-bind:key="row.id">
-                <n-thing class="center" :title="row.subject">
-                    <template #description>
-                        <n-space>
-                            <n-tag type="info">
-                                FROM: {{ row.source }}
-                            </n-tag>
-                            <n-tag type="info">
-                                ID: {{ row.id }}
-                            </n-tag>
-                        </n-space>
-                    </template>
-                    <div v-html="row.message"></div>
-                </n-thing>
-            </n-list-item>
-        </n-list>
+    <div style="margin-top: 10px;">
+        <MailBox :enableUserDeleteEmail="true" :fetchMailData="fetchMailUnknowData" :deleteMail="deleteMail" />
     </div>
 </template>
-
-<style scoped>
-.n-pagination {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-</style>

frontend/src/views/admin/Maintenance.vue

@@ -1,36 +1,45 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n'
 import { CleaningServicesFilled } from '@vicons/material'
 
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, adminAuth, showAdminAuth } = useGlobalState()
 const message = useMessage()
-const cleanMailsDays = ref(30)
-const cleanUnknowMailsDays = ref(30)
-const cleanAddressDays = ref(30)
-const cleanSendBoxDays = ref(30)
+const cleanupModel = ref({
+    enableMailsAutoCleanup: false,
+    cleanMailsDays: 30,
+    enableUnknowMailsAutoCleanup: false,
+    cleanUnknowMailsDays: 30,
+    enableAddressAutoCleanup: false,
+    cleanAddressDays: 30,
+    enableSendBoxAutoCleanup: false,
+    cleanSendBoxDays: 30,
+})
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
-            tip: 'Please input the cleanup days',
-            mailBoxTip: "Clean up {day} days ago mailbox",
-            mailUnknowTip: "Clean up {day} days ago mails with unknow receiver",
-            addressUnActiveTip: "Clean up {day} days ago unactive address",
-            sendBoxTip: "Clean up {day} days ago sendbox",
+            tip: 'Please input the days',
+            mailBoxLabel: 'Cleanup the inbox before n days',
+            mailUnknowLabel: "Cleanup the unknow mail before n days",
+            sendBoxLabel: "Cleanup the sendbox before n days",
+            cleanupNow: "Cleanup now",
+            autoCleanup: "Auto cleanup",
             cleanupSuccess: "Cleanup success",
+            save: "Save",
+            cronTip: "Enable cron cleanup, need to configure [crons] in worker, please refer to the document",
         },
         zh: {
-            tip: '请输入清理天数',
-            mailBoxTip: "清理{day}天前的收件箱",
-            mailUnknowTip: "清理{day}天前的无收件人邮件",
-            addressUnActiveTip: "清理{day}天前的未活动地址",
-            sendBoxTip: "清理{day}天前的发件箱",
+            tip: '请输入天数',
+            mailBoxLabel: '清理 n 天前的收件箱',
+            mailUnknowLabel: "清理 n 天前的无收件人邮件",
+            sendBoxLabel: "清理 n 天前的发件箱",
+            autoCleanup: "自动清理",
             cleanupSuccess: "清理成功",
+            cleanupNow: "立即清理",
+            save: "保存",
+            cronTip: "启用定时清理, 需在 worker 配置 [crons] 参数, 请参考文档",
         }
     }
 });
@@ -47,54 +56,80 @@ const cleanup = async (cleanType, cleanDays) => {
     }
 }
 
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
+const fetchData = async () => {
+    try {
+        const res = await api.fetch('/admin/auto_cleanup');
+        if (res) Object.assign(cleanupModel.value, res);
+    } catch (error) {
+        message.error(error.message || "error");
     }
+}
+
+const save = async () => {
+    try {
+        await api.fetch('/admin/auto_cleanup', {
+            method: 'POST',
+            body: JSON.stringify(cleanupModel.value)
+        });
+        message.success(t('cleanupSuccess'));
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
 })
 </script>
 
 
 <template>
     <div class="center">
-        <n-card>
-            <div class="item">
-                <n-input-number v-model:value="cleanMailsDays" :placeholder="t('tip')" />
-                <n-button @click="cleanup('mails', cleanMailsDays)">
-                    <template #icon>
-                        <n-icon :component="CleaningServicesFilled" />
-                    </template>
-                    {{ t('mailBoxTip', { day: cleanMailsDays }) }}
+        <n-card :bordered="false" embedded>
+            <n-alert :show-icon="false" :bordered="false">
+                <span>{{ t('cronTip') }}</span>
+            </n-alert>
+            <n-form :model="cleanupModel">
+                <n-form-item-row :label="t('mailBoxLabel')">
+                    <n-checkbox v-model:checked="cleanupModel.enableMailsAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanMailsDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('mails', cleanupModel.cleanMailsDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
+                    </n-button>
+                </n-form-item-row>
+                <n-form-item-row :label="t('mailUnknowLabel')">
+                    <n-checkbox v-model:checked="cleanupModel.enableUnknowMailsAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanUnknowMailsDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('mails_unknow', cleanupModel.cleanUnknowMailsDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
+                    </n-button>
+                </n-form-item-row>
+                <n-form-item-row :label="t('sendBoxLabel')">
+                    <n-checkbox v-model:checked="cleanupModel.enableSendBoxAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanSendBoxDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('sendbox', cleanupModel.cleanSendBoxDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
+                    </n-button>
+                </n-form-item-row>
+                <n-button @click="save" type="primary" block :loading="loading">
+                    {{ t('save') }}
                 </n-button>
-            </div>
-            <div class="item">
-                <n-input-number v-model:value="cleanUnknowMailsDays" :placeholder="t('tip')" />
-                <n-button @click="cleanup('mails_unknow', cleanUnknowMailsDays)">
-                    <template #icon>
-                        <n-icon :component="CleaningServicesFilled" />
-                    </template>
-                    {{ t('mailUnknowTip', { day: cleanUnknowMailsDays }) }}
-                </n-button>
-            </div>
-            <div class="item">
-                <n-input-number v-model:value="cleanAddressDays" :placeholder="t('tip')" />
-                <n-button @click="cleanup('address', cleanAddressDays)">
-                    <template #icon>
-                        <n-icon :component="CleaningServicesFilled" />
-                    </template>
-                    {{ t('addressUnActiveTip', { day: cleanAddressDays }) }}
-                </n-button>
-            </div>
-            <div class="item">
-                <n-input-number v-model:value="cleanSendBoxDays" :placeholder="t('tip')" />
-                <n-button @click="cleanup('sendbox', cleanSendBoxDays)">
-                    <template #icon>
-                        <n-icon :component="CleaningServicesFilled" />
-                    </template>
-                    {{ t('sendBoxTip', { day: cleanSendBoxDays }) }}
-                </n-button>
-            </div>
+            </n-form>
         </n-card>
     </div>
 </template>
@@ -111,6 +146,10 @@ onMounted(async () => {
     justify-content: center;
 }
 
+.n-alert {
+    margin-bottom: 20px;
+}
+
 .item {
     display: flex;
     margin: 10px;

frontend/src/views/admin/SendBox.vue

@@ -1,156 +1,48 @@
 <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, settings, adminAuth, adminSendBoxTabAddress } = 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 () => {
-    if (!adminSendBoxTabAddress.value) {
-        return
-    }
-    try {
-        const { results, count: addressCount } = await api.fetch(
-            `/admin/sendbox`
-            + `?address=${adminSendBoxTabAddress.value}`
-            + `&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 fetchData = async (limit, offset) => {
+    adminSendBoxTabAddress.value = adminSendBoxTabAddress.value.trim();
+    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',
-                        ghost: 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()
-})
+const deleteSenboxMail = async (curMailId) => {
+    await api.fetch(`/admin/sendbox/${curMailId}`, { method: 'DELETE' });
+};
 </script>
 
 <template>
-    <div v-if="settings.address">
-        <n-modal v-model:show="showModal" preset="dialog">
-            <pre>{{ curRow.raw }}</pre>
-        </n-modal>
+    <div>
         <n-input-group>
-            <n-input v-model:value="adminSendBoxTabAddress" />
-            <n-button @click="fetchData" type="primary" ghost>
+            <n-input v-model:value="adminSendBoxTabAddress" :placeholder="t('queryTip')" @keydown.enter="fetchData" />
+            <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;" :enableUserDeleteEmail="true" :deleteMail="deleteSenboxMail"
+            :fetchMailData="fetchData" :showEMailFrom="true" />
     </div>
 </template>
 

frontend/src/views/admin/SenderAccess.vue

@@ -5,38 +5,43 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
   messages: {
     en: {
       address: 'Address',
       success: 'Success',
+      is_enabled: 'Is Enabled',
       enable: 'Enable',
       disable: 'Disable',
       modify: 'Modify',
+      delete: 'Delete',
+      deleteTip: 'Are you sure to delete this?',
       created_at: 'Created At',
       action: 'Action',
       itemCount: 'itemCount',
       modalTip: 'Please input the sender balance',
       balance: 'Balance',
-      refresh: 'Refresh',
+      query: 'Query',
       ok: 'OK'
     },
     zh: {
       address: '地址',
       success: '成功',
+      is_enabled: '是否启用',
       enable: '启用',
       disable: '禁用',
       modify: '修改',
+      delete: '删除',
+      deleteTip: '确定删除吗？',
       created_at: '创建时间',
       action: '操作',
       itemCount: '总数',
       modalTip: '请输入发件额度',
       balance: '余额',
-      refresh: '刷新',
+      query: '查询',
       ok: '确定'
     }
   }
@@ -51,12 +56,14 @@ const showModal = ref(false)
 const senderBalance = ref(0)
 const senderEnabled = ref(false)
 
+const addressQuery = ref('')
 
 const updateData = async () => {
   try {
     await api.fetch(`/admin/address_sender`, {
       method: 'POST',
       body: JSON.stringify({
+        address: curRow.value.address,
         address_id: curRow.value.id,
         balance: senderBalance.value,
         enabled: senderEnabled.value ? 1 : 0
@@ -72,10 +79,12 @@ const updateData = async () => {
 
 const fetchData = async () => {
   try {
+    addressQuery.value = addressQuery.value.trim();
     const { results, count: addressCount } = await api.fetch(
       `/admin/address_sender`
       + `?limit=${pageSize.value}`
       + `&offset=${(page.value - 1) * pageSize.value}`
+      + (addressQuery.value ? `&address=${addressQuery.value}` : '')
     );
     data.value = results;
     if (addressCount > 0) {
@@ -105,7 +114,7 @@ const columns = [
     key: "balance"
   },
   {
-    title: "Enabled",
+    title: t('is_enabled'),
     key: "enabled",
     render(row) {
       return h('div', [
@@ -121,7 +130,7 @@ const columns = [
         h(NButton,
           {
             type: 'success',
-            ghost: true,
+            tertiary: true,
             onClick: () => {
               showModal.value = true;
               curRow.value = row;
@@ -130,7 +139,25 @@ const columns = [
             }
           },
           { default: () => t('modify') }
-        )
+        ),
+        h(NPopconfirm,
+          {
+            onPositiveClick: async () => {
+              await api.fetch(`/admin/address_sender/${row.id}`, { method: 'DELETE' });
+              await fetchData();
+            }
+          },
+          {
+            trigger: () => h(NButton,
+              {
+                tertiary: true,
+                type: "error",
+              },
+              { default: () => t('delete') }
+            ),
+            default: () => t('deleteTip')
+          }
+        ),
       ])
     }
   }
@@ -160,25 +187,28 @@ onMounted(async () => {
         <n-input-number v-model:value="senderBalance" :min="0" :max="1000" />
       </n-form-item>
       <template #action>
-        <n-button @click="updateData()" size="small" tertiary round type="primary">
+        <n-button :loading="loading" @click="updateData()" size="small" tertiary type="primary">
           {{ t('ok') }}
         </n-button>
       </template>
     </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" ghost>
-            {{ t('refresh') }}
-          </n-button>
-        </template>
-      </n-pagination>
+    <n-input-group>
+      <n-input v-model:value="addressQuery" @keydown.enter="fetchData" />
+      <n-button @click="fetchData" type="primary" tertiary>
+        {{ t('query') }}
+      </n-button>
+    </n-input-group>
+    <div style="overflow: auto;">
+      <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" embedded />
     </div>
-    <n-data-table :columns="columns" :data="data" :bordered="false" />
   </div>
 </template>
 
@@ -187,4 +217,8 @@ onMounted(async () => {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+.n-data-table {
+  min-width: 700px;
+}
 </style>

frontend/src/views/admin/Statistics.vue

@@ -4,24 +4,25 @@ import { useI18n } from 'vue-i18n'
 import { User, UserCheck, MailBulk } from '@vicons/fa'
 import { SendOutlined } from '@vicons/material'
 
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, adminAuth } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
     messages: {
         en: {
             userCount: 'User Count',
-            activeUser: '7 days Active User',
+            addressCount: 'Address Count',
+            activeAddressCount7days: '7 days Active Address Count',
+            activeAddressCount30days: '30 days Active Address Count',
             mailCount: 'Mail Count',
             sendMailCount: 'Send Mail Count'
         },
         zh: {
             userCount: '用户总数',
-            activeUser: '周活跃用户',
+            addressCount: '邮箱地址总数',
+            activeAddressCount7days: '7天活跃邮箱地址总数',
+            activeAddressCount30days: '30天活跃邮箱地址总数',
             mailCount: '邮件总数',
             sendMailCount: '发送邮件总数'
         }
@@ -29,21 +30,27 @@ const { t } = useI18n({
 });
 
 const statistics = ref({
+    addressCount: 0,
     userCount: 0,
     mailCount: 0,
-    activeUserCount7days: 0,
+    activeAddressCount7days: 0,
+    activeAddressCount30days: 0,
     sendMailCount: 0,
 })
 
 const fetchStatistics = async () => {
     try {
         const {
-            userCount, activeUserCount7days, mailCount, sendMailCount
+            userCount, mailCount, sendMailCount,
+            addressCount, activeAddressCount7days,
+            activeAddressCount30days,
         } = await api.fetch(`/admin/statistics`);
         statistics.value.mailCount = mailCount || 0;
-        statistics.value.userCount = userCount || 0;
-        statistics.value.activeUserCount7days = activeUserCount7days || 0;
         statistics.value.sendMailCount = sendMailCount || 0;
+        statistics.value.userCount = userCount || 0;
+        statistics.value.addressCount = addressCount || 0;
+        statistics.value.activeAddressCount7days = activeAddressCount7days || 0;
+        statistics.value.activeAddressCount30days = activeAddressCount30days || 0;
     } catch (error) {
         console.log(error)
         message.error(error.message || "error");
@@ -51,42 +58,68 @@ const fetchStatistics = async () => {
 }
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        return;
-    }
     await fetchStatistics()
 })
 </script>
 
 <template>
-    <n-row>
-        <n-col :span="6">
-            <n-statistic :label="t('userCount')" :value="statistics.userCount">
-                <template #prefix>
-                    <n-icon :component="User" />
-                </template>
-            </n-statistic>
-        </n-col>
-        <n-col :span="6">
-            <n-statistic :label="t('activeUser')" :value="statistics.activeUserCount7days">
-                <template #prefix>
-                    <n-icon :component="UserCheck" />
-                </template>
-            </n-statistic>
-        </n-col>
-        <n-col :span="6">
-            <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
-                <template #prefix>
-                    <n-icon :component="MailBulk" />
-                </template>
-            </n-statistic>
-        </n-col>
-        <n-col :span="6">
-            <n-statistic :label="t('sendMailCount')" :value="statistics.sendMailCount">
-                <template #prefix>
-                    <n-icon :component="SendOutlined" />
-                </template>
-            </n-statistic>
-        </n-col>
-    </n-row>
+    <div>
+        <n-card :bordered="false" embedded>
+            <n-row>
+
+                <n-col :span="8">
+                    <n-statistic :label="t('addressCount')" :value="statistics.addressCount">
+                        <template #prefix>
+                            <n-icon :component="User" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('activeAddressCount7days')" :value="statistics.activeAddressCount7days">
+                        <template #prefix>
+                            <n-icon :component="UserCheck" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('activeAddressCount30days')" :value="statistics.activeAddressCount30days">
+                        <template #prefix>
+                            <n-icon :component="UserCheck" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+            </n-row>
+        </n-card>
+        <n-card :bordered="false" embedded>
+            <n-row>
+                <n-col :span="8">
+                    <n-statistic :label="t('userCount')" :value="statistics.userCount">
+                        <template #prefix>
+                            <n-icon :component="User" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
+                        <template #prefix>
+                            <n-icon :component="MailBulk" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('sendMailCount')" :value="statistics.sendMailCount">
+                        <template #prefix>
+                            <n-icon :component="SendOutlined" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+            </n-row>
+        </n-card>
+    </div>
 </template>
+
+<style scoped>
+.n-card {
+    margin-bottom: 20px;
+}
+</style>

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 :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+            <n-card :bordered="false" embedded>
+                <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

@@ -0,0 +1,400 @@
+<script setup>
+import { ref, h, onMounted, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NMenu, NButton, NBadge, NTag } from 'naive-ui';
+import { MenuFilled } from '@vicons/material'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import { hashPassword } from '../../utils';
+
+const { loading, openSettings } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            success: 'Success',
+            user_email: 'User Email',
+            role: 'Role',
+            address_count: 'Address Count',
+            created_at: 'Created At',
+            actions: 'Actions',
+            query: 'Query',
+            itemCount: 'itemCount',
+            deleteUser: 'Delete User',
+            delete: 'Delete',
+            deleteUserTip: 'Are you sure you want to delete this user?',
+            resetPassword: 'Reset Password',
+            pleaseInput: 'Please input complete information',
+            createUser: 'Create User',
+            email: 'Email',
+            password: 'Password',
+            changeRole: 'Change Role',
+            prefix: 'Prefix',
+            domains: 'Domains',
+            roleDonotExist: 'Current Role does not exist',
+        },
+        zh: {
+            success: '成功',
+            user_email: '用户邮箱',
+            role: '角色',
+            address_count: '地址数量',
+            created_at: '创建时间',
+            actions: '操作',
+            query: '查询',
+            itemCount: '总数',
+            deleteUser: '删除用户',
+            delete: '删除',
+            deleteUserTip: '确定要删除此用户吗？',
+            resetPassword: '重置密码',
+            pleaseInput: '请输入完整信息',
+            createUser: '创建用户',
+            email: '邮箱',
+            password: '密码',
+            changeRole: '更改角色',
+            prefix: '前缀',
+            domains: '域名',
+            roleDonotExist: '当前角色不存在',
+        }
+    }
+});
+const data = ref([])
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const userQuery = ref('')
+const showResetPassword = ref(false)
+const newResetPassword = ref('')
+const showDeleteUser = ref(false)
+const curUserId = ref(0)
+const showCreateUser = ref(false)
+const user = ref({
+    email: "",
+    password: ""
+})
+const showChangeRole = ref(false)
+const userRoles = ref([])
+const curUserRole = ref('')
+const userRolesOptions = computed(() => {
+    return userRoles.value.map(role => {
+        return {
+            label: role.role,
+            value: role.role
+        }
+    });
+})
+
+const fetchUserRoles = async () => {
+    try {
+        const results = await api.fetch(`/admin/user_roles`);
+        userRoles.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const fetchData = async () => {
+    try {
+        userQuery.value = userQuery.value.trim()
+        const { results, count: userCount } = await api.fetch(
+            `/admin/users`
+            + `?limit=${pageSize.value}`
+            + `&offset=${(page.value - 1) * pageSize.value}`
+            + (userQuery.value ? `&query=${userQuery.value}` : '')
+        );
+        data.value = results;
+        if (userCount > 0) {
+            count.value = userCount;
+        }
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const resetPassword = async () => {
+    if (!newResetPassword.value) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        await api.fetch(`/admin/users/${curUserId.value}/reset_password`, {
+            method: "POST",
+            body: JSON.stringify({
+                password: await hashPassword(newResetPassword.value)
+            })
+        });
+        message.success(t('success'));
+        showResetPassword.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const createUser = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        await api.fetch(`/admin/users`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                password: await hashPassword(user.value.password)
+            })
+        });
+        message.success(t('success'));
+        await fetchData();
+        showCreateUser.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const deleteUser = async () => {
+    try {
+        await api.fetch(`/admin/users/${curUserId.value}`, {
+            method: "DELETE"
+        });
+        message.success(t('success'));
+        showDeleteUser.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const changeRole = async () => {
+    try {
+        await api.fetch(`/admin/user_roles`, {
+            method: "POST",
+            body: JSON.stringify({
+                user_id: curUserId.value,
+                role_text: curUserRole.value
+            })
+        });
+        message.success(t('success'));
+        showChangeRole.value = false;
+        await fetchData();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "ID",
+        key: "id"
+    },
+    {
+        title: t('user_email'),
+        key: "user_email"
+    },
+    {
+        title: t('role'),
+        key: "role_text",
+        render(row) {
+            if (!row.role_text) return null;
+            return h(NTag, {
+                bordered: false,
+                type: "info"
+            }, {
+                default: () => row.role_text
+            })
+        }
+    },
+    {
+        title: t('address_count'),
+        key: "address_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.address_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('created_at'),
+        key: "created_at"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NMenu, {
+                    mode: "horizontal",
+                    options: [
+                        {
+                            label: t('actions'),
+                            icon: () => h(MenuFilled),
+                            key: "action",
+                            children: [
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                curUserRole.value = row.role_text;
+                                                showChangeRole.value = true;
+                                            }
+                                        },
+                                        { default: () => t('changeRole') }
+                                    ),
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                newResetPassword.value = '';
+                                                showResetPassword.value = true;
+                                            }
+                                        },
+                                        { default: () => t('resetPassword') }
+                                    ),
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                user.value.email = '';
+                                                user.value.password = '';
+                                                showDeleteUser.value = true;
+                                            }
+                                        },
+                                        { default: () => t('delete') }
+                                    )
+                                }
+                            ]
+                        }
+                    ]
+                })
+            ])
+        }
+    }
+]
+
+const getRolePrefix = (role) => {
+    const res = userRoles.value.find(r => r.role === role)?.prefix;
+    if (res === undefined || res === null) return openSettings.value.prefix;
+    return res;
+}
+
+const getRoleDomains = (role) => {
+    const res = userRoles.value.find(r => r.role === role)?.domains;
+    if (res === undefined || res === null || res.length == 0) return openSettings.value.defaultDomains;
+    return res;
+}
+
+const roleDonotExist = computed(() => {
+    return curUserRole.value && !userRoles.value.some(r => r.role === curUserRole.value);
+})
+
+watch([page, pageSize], async () => {
+    await fetchData()
+})
+
+onMounted(async () => {
+    await fetchUserRoles();
+    await fetchData();
+})
+</script>
+
+<template>
+    <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>
+                    <n-input v-model:value="user.email" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('password')" required>
+                    <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                </n-form-item-row>
+            </n-form>
+            <template #action>
+                <n-button :loading="loading" @click="createUser" size="small" tertiary type="primary">
+                    {{ t('createUser') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showResetPassword" preset="dialog" :title="t('resetPassword')">
+            <n-form-item-row :label="t('password')" required>
+                <n-input v-model:value="newResetPassword" type="password" show-password-on="click" />
+            </n-form-item-row>
+            <template #action>
+                <n-button :loading="loading" @click="resetPassword" size="small" tertiary type="primary">
+                    {{ t('resetPassword') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showDeleteUser" preset="dialog" :title="t('deleteUser')">
+            <p>{{ t('deleteUserTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="deleteUser" size="small" tertiary type="error">
+                    {{ t('deleteUser') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showChangeRole" preset="dialog" :title="t('changeRole')">
+            <n-alert type="error" :bordered="false" v-if="roleDonotExist">
+                <span>{{ t('roleDonotExist') }}</span>
+            </n-alert>
+            <p>{{ t('prefix') + ": " + getRolePrefix(curUserRole) }}</p>
+            <p>{{ t('domains') + ": " + JSON.stringify(getRoleDomains(curUserRole)) }}</p>
+            <n-select clearable v-model:value="curUserRole" :options="userRolesOptions" />
+            <template #action>
+                <n-button :loading="loading" @click="changeRole" size="small" tertiary type="primary">
+                    {{ t('changeRole') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-input-group>
+            <n-input v-model:value="userQuery" @keydown.enter="fetchData" />
+            <n-button @click="fetchData" type="primary" tertiary>
+                {{ t('query') }}
+            </n-button>
+        </n-input-group>
+        <div style="overflow: auto;">
+            <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="showCreateUser = true" size="small" tertiary type="primary"
+                            style="margin-left: 10px">
+                            {{ t('createUser') }}
+                        </n-button>
+                    </template>
+                </n-pagination>
+            </div>
+            <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.n-pagination {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.n-data-table {
+    min-width: 800px;
+}
+</style>

frontend/src/views/admin/UserOauth2Settings.vue

@@ -0,0 +1,253 @@
+<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'
+import constant from '../../constant'
+import { UserOauth2Settings } from '../../models';
+
+const { loading } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            save: 'Save',
+            successTip: 'Save Success',
+            enable: 'Enable',
+            enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            mailAllowList: 'Mail Address Allow List',
+            addOauth2: 'Add Oauth2',
+            name: 'Name',
+            oauth2Type: 'Oauth2 Type',
+            tip: 'Third-party login will automatically use the user\'s email to register an account (the same email will be regarded as the same account), this account is the same as the registered account, and you can also set the password through the forget password',
+        },
+        zh: {
+            save: '保存',
+            successTip: '保存成功',
+            enable: '启用',
+            enableMailAllowList: '启用邮件地址白名单(可手动输入)',
+            mailAllowList: '邮件地址白名单',
+            addOauth2: '添加 Oauth2',
+            name: '名称',
+            oauth2Type: 'Oauth2 类型',
+            tip: '第三方登录会自动使用用户邮箱注册账号(邮箱相同将视为同一账号), 此账号和注册的账号相同, 也可以通过忘记密码设置密码',
+        }
+    }
+});
+
+const mailAllowOptions = constant.COMMOM_MAIL.map((item) => {
+    return { label: item, value: item }
+})
+
+const userOauth2Settings = ref([] as UserOauth2Settings[])
+const showAddOauth2 = ref(false)
+const newOauth2Name = ref('')
+const newOauth2Type = ref('custom')
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/user_oauth2_settings`)
+        Object.assign(userOauth2Settings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/user_oauth2_settings`, {
+            method: 'POST',
+            body: JSON.stringify(userOauth2Settings.value)
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const addNewOauth2 = () => {
+    const authorizationURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://github.com/login/oauth/authorize'
+            case 'authentik':
+                return 'https://youdomain/application/o/authorize/'
+            default:
+                return ''
+        }
+    }
+    const accessTokenURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://github.com/login/oauth/access_token'
+            case 'authentik':
+                return 'https://youdomain/application/o/token/'
+            default:
+                return ''
+        }
+    }
+    const accessTokenFormat = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'json'
+            case 'authentik':
+                return 'urlencoded'
+            default:
+                return ''
+        }
+    }
+    const userInfoURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://api.github.com/user'
+            case 'authentik':
+                return 'https://youdomain/application/o/userinfo/'
+            default:
+                return ''
+        }
+    }
+    const userEmailKey = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'email'
+            case 'authentik':
+                return 'email'
+            default:
+                return ''
+        }
+    }
+    const scope = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'user:email'
+            case 'authentik':
+                return 'email openid'
+            default:
+                return ''
+        }
+    }
+    userOauth2Settings.value.push({
+        name: newOauth2Name.value,
+        clientID: '',
+        clientSecret: '',
+        authorizationURL: authorizationURL(),
+        accessTokenURL: accessTokenURL(),
+        accessTokenFormat: accessTokenFormat(),
+        userInfoURL: userInfoURL(),
+        userEmailKey: userEmailKey(),
+        redirectURL: `${window.location.origin}/user/oauth2/callback`,
+        logoutURL: '',
+        scope: scope(),
+        enableMailAllowList: false,
+        mailAllowList: constant.COMMOM_MAIL
+    } as UserOauth2Settings)
+    newOauth2Name.value = ''
+    showAddOauth2.value = false
+}
+
+const accessTokenFormatOptions = [
+    { label: 'json', value: 'json' },
+    { label: 'urlencoded', value: 'urlencoded' },
+]
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-modal v-model:show="showAddOauth2" preset="dialog" :title="t('addOauth2')">
+            <n-form>
+                <n-form-item-row :label="t('name')" required>
+                    <n-input v-model:value="newOauth2Name" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('oauth2Type')" required>
+                    <n-radio-group v-model:value="newOauth2Type">
+                        <n-radio-button value="github" label="Github" />
+                        <n-radio-button value="authentik" label="Authentik" />
+                        <n-radio-button value="custom" label="Custom" />
+                    </n-radio-group>
+                </n-form-item-row>
+            </n-form>
+            <template #action>
+                <n-button :loading="loading" @click="addNewOauth2" size="small" tertiary type="primary">
+                    {{ t('addOauth2') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-alert :show-icon="false" type="warning" closable style="margin-bottom: 10px;">
+                {{ t("tip") }}
+            </n-alert>
+            <n-flex justify="end">
+                <n-button @click="showAddOauth2 = true" secondary :loading="loading">
+                    {{ t('addOauth2') }}
+                </n-button>
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
+            <n-collapse default-expanded-names="1" accordion>
+                <n-collapse-item v-for="(item, index) in userOauth2Settings" :key="index" :title="item.name">
+                    <n-form :model="item">
+                        <n-form-item-row :label="t('name')" required>
+                            <n-input v-model:value="item.name" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Client ID" required>
+                            <n-input v-model:value="item.clientID" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Client Secret" required>
+                            <n-input v-model:value="item.clientSecret" type="password" show-password-on="click" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Authorization URL" required>
+                            <n-input v-model:value="item.authorizationURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Access Token URL" required>
+                            <n-input v-model:value="item.accessTokenURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Access Token accessTokenFormat" required>
+                            <n-select v-model:value="item.accessTokenFormat" :options="accessTokenFormatOptions" />
+                        </n-form-item-row>
+                        <n-form-item-row label="User Info URL" required>
+                            <n-input v-model:value="item.userInfoURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="User Email Key" required>
+                            <n-input v-model:value="item.userEmailKey" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Redirect URL" required>
+                            <n-input v-model:value="item.redirectURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Scope" required>
+                            <n-input v-model:value="item.scope" />
+                        </n-form-item-row>
+                        <n-form-item-row :label="t('enableMailAllowList')">
+                            <n-input-group>
+                                <n-checkbox v-model:checked="item.enableMailAllowList" style="width: 20%;">
+                                    {{ t('enable') }}
+                                </n-checkbox>
+                                <n-select v-model:value="item.mailAllowList" v-if="item.enableMailAllowList" filterable
+                                    multiple tag style="width: 80%;" :options="mailAllowOptions"
+                                    :placeholder="t('mailAllowList')" />
+                            </n-input-group>
+                        </n-form-item-row>
+                    </n-form>
+                </n-collapse-item>
+            </n-collapse>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/admin/UserSettings.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { loading } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            save: 'Save',
+            successTip: 'Save Success',
+            enable: 'Enable',
+            enableUserRegister: 'Allow User Register',
+            enableMailVerify: 'Enable Mail Verify (Send address must be an address in the system with a balance and can send mail normally)',
+            verifyMailSender: 'Verify Mail Sender',
+            enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            mailAllowList: 'Mail Address Allow List',
+            maxAddressCount: 'Maximum number of email addresses that can be binded',
+        },
+        zh: {
+            save: '保存',
+            successTip: '保存成功',
+            enable: '启用',
+            enableUserRegister: "允许用户注册",
+            enableMailVerify: '启用邮件验证(发送地址必须是系统中能有余额且能正常发送邮件的地址)',
+            verifyMailSender: '验证邮件发送地址',
+            enableMailAllowList: '启用邮件地址白名单(可手动输入)',
+            mailAllowList: '邮件地址白名单',
+            maxAddressCount: '可绑定最大邮箱地址数量',
+        }
+    }
+});
+
+const commonMail = [
+    "gmail.com", "163.com", "126.com", "qq.com", "outlook.com", "hotmail.com",
+    "icloud.com", "yahoo.com", "foxmail.com"
+]
+
+const mailAllowOptions = commonMail.map((item) => {
+    return { label: item, value: item }
+})
+
+const userSettings = ref({
+    enable: false,
+    enableMailVerify: false,
+    verifyMailSender: "",
+    enableMailAllowList: false,
+    mailAllowList: commonMail,
+    maxAddressCount: 5,
+});
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/user_settings`)
+        Object.assign(userSettings.value, res)
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/user_settings`, {
+            method: 'POST',
+            body: JSON.stringify(userSettings.value)
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-form :model="userSettings">
+                <n-form-item-row :label="t('enableUserRegister')">
+                    <n-checkbox v-model:checked="userSettings.enable" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('enableMailVerify')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="userSettings.enableMailVerify" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-input v-model:value="userSettings.verifyMailSender" v-if="userSettings.enableMailVerify"
+                            style="width: 80%;" :placeholder="t('verifyMailSender')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-form-item-row :label="t('enableMailAllowList')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="userSettings.enableMailAllowList" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-select v-model:value="userSettings.mailAllowList" v-if="userSettings.enableMailAllowList"
+                            filterable multiple tag style="width: 80%;" :options="mailAllowOptions"
+                            :placeholder="t('mailAllowList')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-form-item-row :label="t('maxAddressCount')">
+                    <n-input-group>
+                        <n-input-number v-model:value="userSettings.maxAddressCount"
+                            :placeholder="t('maxAddressCount')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-button @click="save" type="primary" block :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-form>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/admin/Webhook.vue

@@ -0,0 +1,90 @@
+<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',
+            notEnabled: 'Webhook is not enabled',
+        },
+        zh: {
+            successTip: '成功',
+            webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址)',
+            save: '保存',
+            notEnabled: 'Webhook 未开启',
+        }
+    }
+});
+
+class WebhookSettings {
+    allowList: string[];
+
+    constructor(allowList: string[]) {
+        this.allowList = allowList;
+    }
+}
+
+const webhookSettings = ref(new WebhookSettings([]))
+const webhookEnabled = ref(false)
+const errorInfo = ref('')
+
+const getSettings = async () => {
+    try {
+        const res = await api.fetch(`/admin/webhook/settings`)
+        Object.assign(webhookSettings.value, res)
+        webhookEnabled.value = true
+    } catch (error) {
+        errorInfo.value = (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 v-if="webhookEnabled" :bordered="false" embedded 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>
+        <n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/admin/WorkerConfig.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { loading } = useGlobalState()
+const message = useMessage()
+
+const settings = ref({})
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/worker/configs`)
+        Object.assign(settings.value, res)
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <pre>{{ JSON.stringify(settings, null, 2) }}</pre>
+        </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 :bordered="false" embedded>
+            <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

@@ -0,0 +1,22 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../../store'
+const { openSettings } = useGlobalState()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            adminContact: 'If you need help, please contact the administrator ({msg})',
+        },
+        zh: {
+            adminContact: '如果你需要帮助，请联系管理员 ({msg})',
+        }
+    }
+});
+</script>
+
+<template>
+    <n-alert v-if="openSettings.adminContact" :show-icon="false" :bordered="false">
+        <span>{{ t('adminContact', { msg: openSettings.adminContact }) }}</span>
+    </n-alert>
+</template>

frontend/src/views/common/Appearance.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+import { useIsMobile } from '../../utils/composables'
+import { useGlobalState } from '../../store'
+
+const {
+    mailboxSplitSize, useIframeShowMail, preferShowTextMail,
+    globalTabplacement, useSideMargin, useUTCDate
+} = useGlobalState()
+const isMobile = useIsMobile()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            mailboxSplitSize: 'Mailbox Split Size',
+            useIframeShowMail: 'Use iframe Show HTML Mail',
+            preferShowTextMail: 'Display text Mail by default',
+            useSideMargin: 'Turn on the side margins on the left and right sides of the page',
+            globalTabplacement: 'Global Tab Placement',
+            left: 'left',
+            top: 'top',
+            right: 'right',
+            bottom: 'bottom',
+            useUTCDate: 'Use UTC Date',
+        },
+        zh: {
+            mailboxSplitSize: '邮箱界面分栏大小',
+            preferShowTextMail: '默认以文本显示邮件',
+            useIframeShowMail: '使用iframe显示HTML邮件',
+            globalTabplacement: '全局选项卡位置',
+            useSideMargin: '开启页面左右两侧侧边距',
+            left: '左侧',
+            top: '顶部',
+            right: '右侧',
+            bottom: '底部',
+            useUTCDate: '使用 UTC 时间',
+        }
+    }
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded>
+            <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',
+                    0.75: '0.75'
+                }" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('preferShowTextMail')">
+                <n-switch v-model:value="preferShowTextMail" :round="false" />
+            </n-form-item-row>
+            <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('useUTCDate')">
+                <n-switch v-model:value="useUTCDate" :round="false" />
+            </n-form-item-row>
+            <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')">
+                <n-radio-group v-model:value="globalTabplacement">
+                    <n-radio-button value="top" :label="t('top')" />
+                    <n-radio-button value="left" :label="t('left')" />
+                    <n-radio-button value="right" :label="t('right')" />
+                    <n-radio-button value="bottom" :label="t('bottom')" />
+                </n-radio-group>
+            </n-form-item-row>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+
+.n-card {
+    max-width: 800px;
+    text-align: left;
+}
+</style>

frontend/src/views/common/Login.vue

@@ -0,0 +1,277 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { NewLabelOutlined, EmailOutlined } from '@vicons/material'
+
+import AdminContact from '../common/AdminContact.vue'
+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(); },
+        required: 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,
+                }),
+            });
+        },
+        required: true
+    },
+})
+
+const message = useMessage()
+const router = useRouter()
+
+const {
+    jwt, loading, openSettings,
+    showAddressCredential, userSettings
+} = useGlobalState()
+
+const tabValue = ref('signin')
+const credential = ref('')
+const emailName = ref("")
+const emailDomain = ref("")
+const cfToken = ref("")
+
+const login = async () => {
+    if (!credential.value) {
+        message.error(t('credentialInput'));
+        return;
+    }
+    try {
+        jwt.value = credential.value;
+        await api.getSettings();
+        try {
+            await props.bindUserAddress();
+        } catch (error) {
+            message.error(`${t('bindUserAddressError')}: ${error.message}`);
+        }
+        await router.push(getRouterPathWithLang("/", locale.value));
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            login: 'Login',
+            pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
+            getNewEmail: 'Create New Email',
+            getNewEmailTip1: 'Please input the email you want to use. only allow: ',
+            getNewEmailTip2: 'Levaing it blank will generate a random email address.',
+            getNewEmailTip3: 'You can choose a domain from the dropdown list.',
+            credential: 'Email Address Credential',
+            ok: 'OK',
+            generateName: 'Generate Fake Name',
+            help: 'Help',
+            credentialInput: 'Please input the Mail Address Credential',
+            bindUserInfo: 'Logged in user, login without binding email or create new email address will bind to current user',
+            bindUserAddressError: 'Error when bind email address to user',
+        },
+        zh: {
+            login: '登录',
+            pleaseGetNewEmail: '请"登录"或点击 "注册新邮箱" 按钮来获取一个新的邮箱地址',
+            getNewEmail: '创建新邮箱',
+            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许: ',
+            getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
+            getNewEmailTip3: '你可以从下拉列表中选择一个域名。',
+            credential: '邮箱地址凭据',
+            ok: '确定',
+            generateName: '生成随机名字',
+            help: '帮助',
+            credentialInput: '请输入邮箱地址凭据',
+            bindUserInfo: '已登录用户, 登录未绑定邮箱或创建新邮箱地址将绑定到当前用户',
+            bindUserAddressError: '绑定邮箱地址到用户时错误',
+        }
+    }
+});
+
+const addressRegex = computed(() => {
+    try {
+        if (openSettings.value.addressRegex) {
+            return new RegExp(openSettings.value.addressRegex, 'g');
+        }
+    } catch (error) {
+        console.error(error);
+        message.error(`Invalid addressRegex: ${openSettings.value.addressRegex}`);
+    }
+    return /[^a-z0-9]/g;
+});
+
+const generateNameLoading = ref(false);
+const generateName = async () => {
+    try {
+        generateNameLoading.value = true;
+        const { faker } = await import('https://esm.sh/@faker-js/faker');
+        emailName.value = faker.internet.email()
+            .split('@')[0]
+            .replace(/\s+/g, '.')
+            .replace(/\.{2,}/g, '.')
+            .replace(addressRegex.value, '')
+            .toLowerCase();
+        // support maxAddressLen
+        if (emailName.value.length > openSettings.value.maxAddressLen) {
+            emailName.value = emailName.value.slice(0, openSettings.value.maxAddressLen);
+        }
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        generateNameLoading.value = false;
+    }
+};
+
+const newEmail = async () => {
+    try {
+        const res = await props.newAddressPath(
+            emailName.value,
+            emailDomain.value,
+            cfToken.value
+        );
+        jwt.value = res["jwt"];
+        await api.getSettings();
+        await router.push(getRouterPathWithLang("/", locale.value));
+        showAddressCredential.value = true;
+        try {
+            await props.bindUserAddress();
+        } catch (error) {
+            message.error(`${t('bindUserAddressError')}: ${error.message}`);
+        }
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
+
+const addressPrefix = computed(() => {
+    // if user has role, return role prefix
+    if (userSettings.value?.user_role) {
+        return userSettings.value.user_role.prefix || "";
+    }
+    // if user has no role, return default prefix
+    return openSettings.value.prefix;
+});
+
+const domainsOptions = computed(() => {
+    // if user has role, return role domains
+    if (userSettings.value.user_role) {
+        const allDomains = userSettings.value.user_role.domains;
+        if (!allDomains) return openSettings.value.domains;
+        return openSettings.value.domains.filter((domain) => {
+            return allDomains.includes(domain.value);
+        });
+    }
+    // if user has no role, return default domains
+    if (!openSettings.value.defaultDomains) {
+        return openSettings.value.domains;
+    }
+    // if user has no role and no default domains, return all domains
+    return openSettings.value.domains.filter((domain) => {
+        return openSettings.value.defaultDomains.includes(domain.value);
+    });
+});
+
+onMounted(async () => {
+    if (!openSettings.value.domains || openSettings.value.domains.length === 0) {
+        await api.getOpenSettings();
+    }
+    emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
+});
+</script>
+
+<template>
+    <div>
+        <n-alert v-if="userSettings.user_email" :show-icon="false" :bordered="false" closable>
+            <span>{{ t('bindUserInfo') }}</span>
+        </n-alert>
+        <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
+            <n-tab-pane name="signin" :tab="t('login')">
+                <n-form>
+                    <n-form-item-row :label="t('credential')" required>
+                        <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
+                    </n-form-item-row>
+                    <n-button @click="login" :loading="loading" type="primary" block secondary strong>
+                        <template #icon>
+                            <n-icon :component="EmailOutlined" />
+                        </template>
+                        {{ t('login') }}
+                    </n-button>
+                    <n-button v-if="openSettings.enableUserCreateEmail" @click="tabValue = 'register'" block secondary
+                        strong>
+                        <template #icon>
+                            <n-icon :component="NewLabelOutlined" />
+                        </template>
+                        {{ t('getNewEmail') }}
+                    </n-button>
+                </n-form>
+            </n-tab-pane>
+            <n-tab-pane v-if="openSettings.enableUserCreateEmail" name="register" :tab="t('getNewEmail')">
+                <n-spin :show="generateNameLoading">
+                    <n-form>
+                        <span>
+                            <p>{{ t("getNewEmailTip1") + addressRegex.source }}</p>
+                            <p>{{ t("getNewEmailTip2") }}</p>
+                            <p>{{ t("getNewEmailTip3") }}</p>
+                        </span>
+                        <n-button @click="generateName" style="margin-bottom: 10px;">
+                            {{ t('generateName') }}
+                        </n-button>
+                        <n-input-group>
+                            <n-input-group-label v-if="addressPrefix">
+                                {{ addressPrefix }}
+                            </n-input-group-label>
+                            <n-input v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
+                                :maxlength="openSettings.maxAddressLen" />
+                            <n-input-group-label>@</n-input-group-label>
+                            <n-select v-model:value="emailDomain" :consistent-menu-width="false"
+                                :options="domainsOptions" />
+                        </n-input-group>
+                        <Turnstile v-model:value="cfToken" />
+                        <n-button type="primary" block secondary strong @click="newEmail" :loading="loading">
+                            <template #icon>
+                                <n-icon :component="NewLabelOutlined" />
+                            </template>
+                            {{ t('getNewEmail') }}
+                        </n-button>
+                    </n-form>
+                </n-spin>
+            </n-tab-pane>
+            <n-tab-pane name="help" :tab="t('help')">
+                <n-alert :show-icon="false" :bordered="false">
+                    <span>{{ t('pleaseGetNewEmail') }}</span>
+                </n-alert>
+                <AdminContact />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>
+
+
+<style scoped>
+.n-alert {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.n-form .n-button {
+    margin-top: 10px;
+}
+
+.n-form {
+    text-align: left;
+}
+</style>

frontend/src/views/index/AccountSettings.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+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, settings, showAddressCredential, loading
+} = useGlobalState()
+const router = useRouter()
+const message = useMessage()
+
+const showLogout = ref(false)
+const showDelteAccount = ref(false)
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            logout: "Logout",
+            delteAccount: "Delete Account",
+            showAddressCredential: 'Show Address Credential',
+            logoutConfirm: 'Are you sure to logout?',
+            delteAccount: "Delete Account",
+            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
+        },
+        zh: {
+            logout: '退出登录',
+            delteAccount: "删除账户",
+            showAddressCredential: '查看邮箱地址凭证',
+            logoutConfirm: '确定要退出登录吗？',
+            delteAccount: "删除账户",
+            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+        }
+    }
+});
+
+const logout = async () => {
+    jwt.value = '';
+    await router.push(getRouterPathWithLang("/", locale.value))
+    location.reload()
+}
+
+const deleteAccount = async () => {
+    try {
+        await api.fetch(`/api/delete_address`, {
+            method: 'DELETE'
+        });
+        jwt.value = '';
+        await router.push(getRouterPathWithLang("/", locale.value))
+        location.reload()
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
+</script>
+
+<template>
+    <div class="center" v-if="settings.address">
+        <n-card :bordered="false" embedded>
+            <Appearance />
+            <n-button @click="showAddressCredential = true" type="primary" secondary block strong>
+                {{ t('showAddressCredential') }}
+            </n-button>
+            <n-button @click="showLogout = true" secondary block strong>
+                {{ t('logout') }}
+            </n-button>
+            <n-button @click="showDelteAccount = true" type="error" secondary block strong>
+                {{ t('delteAccount') }}
+            </n-button>
+        </n-card>
+        <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
+            <p>{{ t('logoutConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                    {{ t('logout') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showDelteAccount" preset="dialog" :title="t('delteAccount')">
+            <p>{{ t('delteAccountConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="deleteAccount" size="small" tertiary type="error">
+                    {{ t('delteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+
+.n-card {
+    max-width: 800px;
+    text-align: left;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/src/views/index/AddressBar.vue

@@ -0,0 +1,168 @@
+<script setup>
+import useClipboard from 'vue-clipboard3'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+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, settings, showAddressCredential, userJwt,
+    isTelegram, openSettings
+} = useGlobalState()
+
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            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.',
+            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: {
+            addressManage: '地址管理',
+            changeAddress: '更换地址',
+            ok: '确定',
+            copy: '复制',
+            copied: '已复制',
+            fetchAddressError: '邮箱地址凭证无效或邮箱地址不存在，也可能是网络连接异常，请稍后再尝试。',
+            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            userLogin: '用户登录',
+        }
+    }
+});
+
+const showChangeAddress = ref(false)
+const showTelegramChangeAddress = ref(false)
+const showLocalAddress = ref(false)
+const addressLabel = computed(() => {
+    if (settings.value.address) {
+        const domain = settings.value.address.split('@')[1]
+        const domainLabel = openSettings.value.domains.find(
+            d => d.value === domain
+        )?.label;
+        if (!domainLabel) return settings.value.address;
+        return settings.value.address.replace('@' + domain, `@${domainLabel}`);
+    }
+    return settings.value.address;
+})
+
+const copy = async () => {
+    try {
+        await toClipboard(settings.value.address)
+        message.success(t('copied'));
+    } catch (e) {
+        message.error(e.message || "error");
+    }
+}
+
+const onUserLogin = async () => {
+    await router.push(getRouterPathWithLang("/user", locale.value))
+}
+
+onMounted(async () => {
+    await api.getSettings();
+});
+</script>
+
+<template>
+    <div>
+        <n-card :bordered="false" embedded v-if="!settings.fetched">
+            <n-skeleton style="height: 50vh" />
+        </n-card>
+        <div v-else-if="settings.address">
+            <n-alert type="info" :show-icon="false" :bordered="false">
+                <span>
+                    <b>{{ addressLabel }}</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 :bordered="false" embedded style="max-width: 600px;">
+                <n-alert v-if="jwt" type="warning" :show-icon="false" :bordered="false" closable>
+                    <span>{{ t('fetchAddressError') }}</span>
+                </n-alert>
+                <Login />
+                <n-divider />
+                <n-button @click="onUserLogin" type="primary" block secondary strong>
+                    <template #icon>
+                        <n-icon :component="User" />
+                    </template>
+                    {{ t('userLogin') }}
+                </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>
+            </span>
+            <n-card :bordered="false" embedded>
+                <b>{{ jwt }}</b>
+            </n-card>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.n-alert {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.n-card {
+    margin-top: 10px;
+}
+
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+</style>

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" embedded />
+    </div>
+</template>

frontend/src/views/index/AutoReply.vue

@@ -2,8 +2,8 @@
 import { useI18n } from 'vue-i18n'
 import { onMounted, ref } from 'vue'
 
-import { useGlobalState } from '../store'
-import { api } from '../api'
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
 
 const message = useMessage()
 const sourcePrefix = ref("")
@@ -41,17 +41,22 @@ const { t } = useI18n({
     }
 });
 
-const getSettings = async () => {
-    sourcePrefix.value = settings.value.auto_reply.source_prefix || ""
-    enableAutoReply.value = settings.value.auto_reply.enabled || false
-    name.value = settings.value.auto_reply.name || ""
-    autoReplyMessage.value = settings.value.auto_reply.message || ""
-    subject.value = settings.value.auto_reply.subject || ""
+const fetchData = async () => {
+    try {
+        const res = await api.fetch("/api/auto_reply")
+        sourcePrefix.value = res.source_prefix || ""
+        enableAutoReply.value = res.enabled || false
+        name.value = res.name || ""
+        autoReplyMessage.value = res.message || ""
+        subject.value = res.subject || ""
+    } catch (error) {
+        message.error(error.message || "error");
+    }
 }
 
-const saveSettings = async () => {
+const saveData = async () => {
     try {
-        await api.fetch("/api/settings", {
+        await api.fetch("/api/auto_reply", {
             method: "POST",
             body: JSON.stringify({
                 auto_reply: {
@@ -70,15 +75,15 @@ const saveSettings = async () => {
 }
 
 onMounted(async () => {
-    await getSettings()
+    await fetchData()
 })
 </script>
 
 <template>
     <div class="center">
-        <n-card v-if="settings.address" :title='t("settings")'>
+        <n-card :bordered="false" embedded v-if="settings.address" :title='t("settings")'>
             <div class="right">
-                <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>
+                <n-button type="primary" @click="saveData">{{ t('save') }}</n-button>
             </div>
             <div class="left">
                 <n-form-item :label="t('enableAutoReply')" label-placement="left">

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" :bordered="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" embedded />
+            </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/SendMail.vue

@@ -1,25 +1,19 @@
 <script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
-import { useStorage } from '@vueuse/core'
+import { onMounted, onBeforeUnmount, ref, shallowRef } from 'vue'
+import AdminContact from '../common/AdminContact.vue'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import router from '../../router'
 
 const message = useMessage()
 const isPreview = ref(false)
+const editorRef = shallowRef()
 
-const mailModel = useStorage('mailModelCache', {
-    fromName: "",
-    toName: "",
-    toMail: "",
-    subject: "",
-    isHtml: false,
-    content: "",
-})
 
-const { settings } = useGlobalState()
+const { settings, sendMailModel, indexTab, userSettings } = useGlobalState()
 
 const { t } = useI18n({
     locale: 'zh',
@@ -30,14 +24,17 @@ const { t } = useI18n({
             toName: 'Recipient Name and Address, leave Name blank to use email address',
             subject: 'Subject',
             options: 'Options',
-            isHtml: 'Enable HTML',
             edit: 'Edit',
             preview: 'Preview',
             content: 'Content',
             send: 'Send',
             requestAccess: 'Request Access',
-            requestAccessTip: 'You need to request access to send mail',
+            requestAccessTip: 'You need to request access to send mail, if have request, please contact admin.',
             send_balance: 'Send Mail Balance Left',
+            text: 'Text',
+            html: 'HTML',
+            'rich text': 'Rich Text',
+            tooLarge: 'Too large file, please upload file less than 1MB.',
         },
         zh: {
             successSend: '请查看您的发件箱, 如果失败, 请检查您的余额或稍后重试。',
@@ -45,18 +42,27 @@ const { t } = useI18n({
             toName: '收件人名称和地址，名称不填写则使用邮箱地址',
             subject: '主题',
             options: '选项',
-            isHtml: '启用HTML',
             edit: '编辑',
             preview: '预览',
             content: '内容',
             send: '发送',
             requestAccess: '申请权限',
-            requestAccessTip: '您需要申请权限才能发送邮件',
+            requestAccessTip: '您需要申请权限才能发送邮件, 如果已经申请过, 请联系管理员提升额度。',
             send_balance: '剩余发送邮件额度',
+            text: '文本',
+            html: 'HTML',
+            'rich text': '富文本',
+            tooLarge: '文件过大, 请上传小于1MB的文件。',
         }
     }
 });
 
+const contentTypes = [
+    { label: t('text'), value: 'text' },
+    { label: t('html'), value: 'html' },
+    { label: t('rich text'), value: 'rich' },
+]
+
 const send = async () => {
     try {
         await api.fetch(`/api/send_mail`,
@@ -64,27 +70,27 @@ const send = async () => {
                 method: 'POST',
                 body:
                     JSON.stringify({
-                        from_name: mailModel.value.fromName,
-                        to_name: mailModel.value.toName,
-                        to_mail: mailModel.value.toMail,
-                        subject: mailModel.value.subject,
-                        is_html: mailModel.value.isHtml,
-                        content: mailModel.value.content,
+                        from_name: sendMailModel.value.fromName,
+                        to_name: sendMailModel.value.toName,
+                        to_mail: sendMailModel.value.toMail,
+                        subject: sendMailModel.value.subject,
+                        is_html: sendMailModel.value.contentType != 'text',
+                        content: sendMailModel.value.content,
                     })
             })
-        mailModel.value = {
+        sendMailModel.value = {
             fromName: "",
             toName: "",
             toMail: "",
             subject: "",
-            isHtml: false,
+            contentType: 'text',
             content: "",
         }
     } catch (error) {
         message.error(error.message || "error");
     } finally {
         message.success(t("successSend"));
-        router.push('/');
+        indexTab.value = 'sendbox'
     }
 }
 
@@ -97,57 +103,101 @@ const requestAccess = async () => {
             }
         )
         message.success(t("success"))
+        await api.getSettings();
     } catch (error) {
         message.error(error.message || "error");
     }
 }
+
+const toolbarConfig = {
+    excludeKeys: ["uploadVideo"]
+}
+
+const editorConfig = {
+    MENU_CONF: {
+        'uploadImage': {
+            async customUpload() {
+                message.error(t('tooLarge'))
+            },
+            maxFileSize: 1 * 1024 * 1024,
+            base64LimitSize: 1 * 1024 * 1024,
+        }
+    }
+}
+
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+})
+
+const handleCreated = (editor) => {
+    editorRef.value = editor;
+}
+
+onMounted(async () => {
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
+    await api.getSettings();
+})
 </script>
 
 <template>
     <div class="center" v-if="settings.address">
-        <n-card>
+        <n-card :bordered="false" embedded>
             <div v-if="!settings.send_balance || settings.send_balance <= 0">
-                <n-alert type="warning" show-icon>
+                <n-alert type="warning" :show-icon="false" :bordered="false">
                     {{ t('requestAccessTip') }}
-                    <n-button type="primary" ghost @click="requestAccess">{{ t('requestAccess') }}</n-button>
+                    <n-button type="primary" tertiary @click="requestAccess" size="small">{{ t('requestAccess')
+                        }}</n-button>
                 </n-alert>
-                <br />
+                <AdminContact />
             </div>
             <div v-else>
-                <n-alert type="info" show-icon>
+                <n-alert type="info" :show-icon="false" :bordered="false" closable>
                     {{ t('send_balance') }}: {{ settings.send_balance }}
                 </n-alert>
-                <div class="right">
+                <n-flex justify="end">
                     <n-button type="primary" @click="send">{{ t('send') }}</n-button>
-                </div>
+                </n-flex>
                 <div class="left">
-                    <n-form :model="mailModel">
+                    <n-form :model="sendMailModel">
                         <n-form-item :label="t('fromName')" label-placement="top">
                             <n-input-group>
-                                <n-input v-model:value="mailModel.fromName" />
+                                <n-input v-model:value="sendMailModel.fromName" />
                                 <n-input :value="settings.address" disabled />
                             </n-input-group>
                         </n-form-item>
                         <n-form-item :label="t('toName')" label-placement="top">
                             <n-input-group>
-                                <n-input v-model:value="mailModel.toName" />
-                                <n-input v-model:value="mailModel.toMail" />
+                                <n-input v-model:value="sendMailModel.toName" />
+                                <n-input v-model:value="sendMailModel.toMail" />
                             </n-input-group>
                         </n-form-item>
                         <n-form-item :label="t('subject')" label-placement="top">
-                            <n-input v-model:value="mailModel.subject" />
+                            <n-input v-model:value="sendMailModel.subject" />
                         </n-form-item>
                         <n-form-item :label="t('options')" label-placement="top">
-                            <n-checkbox v-model:checked="mailModel.isHtml">
-                                {{ t('isHtml') }}
-                            </n-checkbox>
-                            <n-button v-if="mailModel.isHtml" @click="isPreview = !isPreview">
+                            <n-radio-group v-model:value="sendMailModel.contentType">
+                                <n-radio-button v-for="option in contentTypes" :key="option.value" :value="option.value"
+                                    :label="option.label" />
+                            </n-radio-group>
+                            <n-button v-if="sendMailModel.contentType != 'text'" @click="isPreview = !isPreview"
+                                style="margin-left: 10px;">
                                 {{ isPreview ? t('edit') : t('preview') }}
                             </n-button>
                         </n-form-item>
                         <n-form-item :label="t('content')" label-placement="top">
-                            <div v-if="isPreview" v-html="mailModel.content" />
-                            <n-input v-else type="textarea" v-model:value="mailModel.content" :autosize="{
+                            <n-card :bordered="false" embedded v-if="isPreview">
+                                <div v-html="sendMailModel.content" />
+                            </n-card>
+                            <div v-else-if="sendMailModel.contentType == 'rich'" style="border: 1px solid #ccc">
+                                <Toolbar style="border-bottom: 1px solid #ccc" :defaultConfig="toolbarConfig"
+                                    :editor="editorRef" mode="default" />
+                                <Editor style="height: 500px; overflow-y: hidden;" v-model="sendMailModel.content"
+                                    :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
+                            </div>
+                            <n-input v-else type="textarea" v-model:value="sendMailModel.content" :autosize="{
                                 minRows: 3
                             }" />
                         </n-form-item>
@@ -181,9 +231,7 @@ const requestAccess = async () => {
     justify-content: left;
 }
 
-.right {
-    text-align: right;
-    place-items: right;
-    justify-content: right;
+.n-alert {
+    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" embedded />
+            </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,28 @@
+<script setup lang="ts">
+// @ts-ignore
+import { api } from '../../api'
+// @ts-ignore
+import WebhookComponent from '../../components/WebhookComponent.vue'
+
+const fetchData = async () => {
+    return await api.fetch(`/api/webhook/settings`)
+}
+
+const saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+</script>
+
+<template>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
+</template>

frontend/src/views/send/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">
-            <pre>{{ 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" ghost>
-                        {{ 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/telegram/Mail.vue

@@ -0,0 +1,75 @@
+<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'
+import { utcToLocalDate } from '../../utils';
+
+const { telegramApp, loading, useUTCDate } = 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
+            })
+        });
+        loading.value = true;
+        return await processItem(res);
+    }
+    catch (error) {
+        console.error(error);
+        return {};
+    }
+    finally {
+        loading.value = false;
+    }
+};
+
+onMounted(async () => {
+    curMail.value = await fetchMailData();
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded v-if="curMail.message" style="max-width: 800px; overflow: auto;">
+            <n-tag type="info">
+                ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+                Date: {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
+            </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

@@ -0,0 +1,239 @@
+<script setup>
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router';
+import { NBadge, NPopconfirm, NButton } from 'naive-ui'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import { getRouterPathWithLang } from '../../utils'
+
+const { jwt } = useGlobalState()
+const message = useMessage()
+const router = useRouter()
+
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            success: 'success',
+            name: 'Name',
+            mail_count: 'Mail Count',
+            send_count: 'Send Count',
+            actions: 'Actions',
+            changeMailAddress: 'Change Address',
+            unbindAddress: 'Unbind Address',
+            unbindAddressTip: 'Before unbinding, please switch to this email address and save the email address credential.',
+            transferAddress: 'Transfer Address',
+            targetUserEmail: 'Target User Email',
+            transferAddressTip: 'Transfer address to another user will remove the address from your account and transfer it to another user. Are you sure to transfer the address?'
+        },
+        zh: {
+            success: '成功',
+            name: '名称',
+            mail_count: '邮件数量',
+            send_count: '发送数量',
+            actions: '操作',
+            changeMailAddress: '切换地址',
+            unbindAddress: '解绑地址',
+            unbindAddressTip: '解绑前请切换到此邮箱地址并保存邮箱地址凭证。',
+            transferAddress: '转移地址',
+            targetUserEmail: '目标用户邮箱',
+            transferAddressTip: '转移地址到其他用户将会从你的账户中移除此地址并转移给其他用户。确定要转移地址吗？'
+        }
+    }
+});
+
+const data = ref([])
+const showTranferAddress = ref(false)
+const currentAddress = ref("")
+const currentAddressId = ref(0)
+const targetUserEmail = ref('')
+
+const changeMailAddress = async (address_id) => {
+    try {
+        const res = await api.fetch(`/user_api/bind_address_jwt/${address_id}`);
+        message.success(t('changeMailAddress') + " " + t('success'));
+        if (!res.jwt) {
+            message.error("jwt not found");
+            return;
+        }
+        jwt.value = res.jwt;
+        await router.push(getRouterPathWithLang("/", locale.value))
+        location.reload();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const unbindAddress = async (address_id) => {
+    try {
+        const res = await api.fetch(`/user_api/unbind_address`, {
+            method: 'POST',
+            body: JSON.stringify({ address_id })
+        });
+        message.success(t('unbindAddress') + " " + t('success'));
+        await fetchData();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const transferAddress = async () => {
+    if (!targetUserEmail.value) {
+        message.error("targetUserEmail is required");
+        return;
+    }
+    if (!currentAddressId.value) {
+        message.error("currentAddressId is required");
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/transfer_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                address_id: currentAddressId.value,
+                target_user_email: targetUserEmail.value
+            })
+        });
+        message.success(t('transferAddress') + " " + t('success'));
+        await fetchData();
+        showTranferAddress.value = false;
+        currentAddressId.value = 0;
+        currentAddress.value = "";
+        targetUserEmail.value = "";
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const fetchData = async () => {
+    try {
+        const { results, count: addressCount } = await api.fetch(
+            `/user_api/bind_address`
+        );
+        data.value = results;
+        if (addressCount > 0) {
+            count.value = addressCount;
+        }
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "ID",
+        key: "id"
+    },
+    {
+        title: t('name'),
+        key: "name"
+    },
+    {
+        title: t('mail_count'),
+        key: "mail_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.mail_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('send_count'),
+        key: "send_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.send_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => changeMailAddress(row.id)
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NButton,
+                    {
+                        tertiary: true,
+                        type: "primary",
+                        onClick: () => {
+                            currentAddressId.value = row.id;
+                            currentAddress.value = row.name;
+                            showTranferAddress.value = true;
+                        }
+                    },
+                    { default: () => t('transferAddress') }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => unbindAddress(row.id)
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "error",
+                            },
+                            { default: () => t('unbindAddress') }
+                        ),
+                        default: () => t('unbindAddressTip')
+                    }
+                ),
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <n-modal v-model:show="showTranferAddress" preset="dialog" :title="t('transferAddress')">
+        <span>
+            <p>{{ t("transferAddressTip") }}</p>
+            <p>{{ t('transferAddress') + ": " + currentAddress }}</p>
+            <n-input v-model:value="targetUserEmail" :placeholder="t('targetUserEmail')" />
+        </span>
+        <template #action>
+            <n-button :loading="loading" @click="transferAddress" size="small" tertiary type="error">
+                {{ t('transferAddress') }}
+            </n-button>
+        </template>
+    </n-modal>
+    <div style="overflow: auto;">
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+    </div>
+</template>
+
+<style scoped>
+.n-data-table {
+    min-width: 700px;
+}
+</style>

frontend/src/views/user/BindAddress.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import Login from '../common/Login.vue'
+
+const { userJwt, userSettings, } = useGlobalState()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            logout: 'Logout',
+        },
+        zh: {
+            logout: '退出登录',
+        }
+    }
+});
+
+const fetchData = async () => {
+}
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div class="center" v-if="userSettings.user_email">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <Login />
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/user/UserBar.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import UserLogin from './UserLogin.vue'
+
+const message = useMessage()
+const router = useRouter()
+
+const {
+    userSettings, userJwt, userOpenSettings
+} = useGlobalState()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            currentUser: 'Current Login User',
+            fetchUserSettingsError: 'Login password is invalid or account not exist, it may be network connection issue, please try again later.',
+        },
+        zh: {
+            currentUser: '当前登录用户',
+            fetchUserSettingsError: '登录信息已过期或账号不存在，也可能是网络连接异常，请稍后再尝试。',
+
+        }
+    }
+});
+
+
+onMounted(async () => {
+    await api.getUserOpenSettings(message);
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
+});
+</script>
+
+<template>
+    <div>
+        <n-card :bordered="false" embedded v-if="!userSettings.fetched">
+            <n-skeleton style="height: 50vh" />
+        </n-card>
+        <div v-else-if="userSettings.user_email">
+            <n-alert type="success" :show-icon="false" :bordered="false">
+                <span>
+                    <b>{{ t('currentUser') }} <b>{{ userSettings.user_email }}</b></b>
+                </span>
+            </n-alert>
+        </div>
+        <div v-else class="center">
+            <n-card :bordered="false" embedded style="max-width: 600px;">
+                <n-alert v-if="userJwt" type="warning" :show-icon="false" :bordered="false" closable>
+                    <span>{{ t('fetchUserSettingsError') }}</span>
+                </n-alert>
+                <UserLogin />
+            </n-card>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.n-alert {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+</style>

frontend/src/views/user/UserLogin.vue

@@ -0,0 +1,308 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+import { onMounted, ref } from "vue";
+import { useI18n } from 'vue-i18n'
+import { KeyFilled } from '@vicons/material'
+
+import { api } from '../../api';
+import { useGlobalState } from '../../store'
+import { hashPassword } from '../../utils';
+import { startAuthentication } from '@simplewebauthn/browser';
+
+import Turnstile from '../../components/Turnstile.vue';
+
+const {
+    userJwt, userOpenSettings, openSettings,
+    userOauth2SessionState, userOauth2SessionClientID
+} = useGlobalState()
+const message = useMessage();
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            login: 'Login',
+            register: 'Register',
+            email: 'Email',
+            password: 'Password',
+            verifyCode: 'Verification Code',
+            verifyCodeSent: 'Verification Code Sent, expires in {timeout} seconds',
+            waitforVerifyCode: 'Wait for {timeout} seconds',
+            sendVerificationCode: 'Send Verification Code',
+            forgotPassword: 'Forgot Password',
+            cannotForgotPassword: 'Mail verification is disabled or register is disabled, cannot reset password, please contact administrator',
+            resetPassword: 'Reset Password',
+            pleaseInput: 'Please input email and password',
+            pleaseInputEmail: 'Please input email',
+            pleaseInputCode: 'Please input code',
+            pleaseCompleteTurnstile: 'Please complete turnstile',
+            pleaseLogin: 'Please login',
+            loginWithPasskey: 'Login with Passkey',
+            loginWith: 'Login with {provider}',
+        },
+        zh: {
+            login: '登录',
+            register: '注册',
+            email: '邮箱',
+            password: '密码',
+            verifyCode: '验证码',
+            sendVerificationCode: '发送验证码',
+            verifyCodeSent: '验证码已发送, {timeout} 秒后失效',
+            waitforVerifyCode: '等待{timeout}秒',
+            forgotPassword: '忘记密码',
+            cannotForgotPassword: '未开启邮箱验证或未开启注册功能，无法重置密码，请联系管理员',
+            resetPassword: '重置密码',
+            pleaseInput: '请输入邮箱和密码',
+            pleaseInputEmail: '请输入邮箱',
+            pleaseInputCode: '请输入验证码',
+            pleaseCompleteTurnstile: '请完成人机验证',
+            pleaseLogin: '请登录',
+            loginWithPasskey: '使用 Passkey 登录',
+            loginWith: '使用 {provider} 登录',
+        }
+    }
+});
+
+const tabValue = ref("signin");
+const showModal = ref(false);
+const user = ref({
+    email: "",
+    password: "",
+    code: ""
+});
+const cfToken = ref("")
+
+const emailLogin = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/login`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                // hash password
+                password: await hashPassword(user.value.password)
+            })
+        });
+        userJwt.value = res.jwt;
+        location.reload();
+    } catch (error) {
+        message.error(error.message || "login failed");
+    }
+};
+
+const verifyCodeExpire = ref(0);
+const verifyCodeTimeout = ref(0);
+
+const getVerifyCodeTimeout = () => {
+    if (!verifyCodeExpire.value || verifyCodeExpire.value < new Date().getTime()) return 0;
+    return Math.round((verifyCodeExpire.value - new Date().getTime()) / 1000);
+};
+
+const sendVerificationCode = async () => {
+    if (!user.value.email) {
+        message.error(t('pleaseInputEmail'));
+        return;
+    }
+    if (openSettings.value.cfTurnstileSiteKey && !cfToken.value && userOpenSettings.value.enableMailVerify) {
+        message.error(t('pleaseCompleteTurnstile'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/verify_code`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                cf_token: cfToken.value
+            })
+        });
+        if (res && res.expirationTtl) {
+            message.success(t('verifyCodeSent', { timeout: res.expirationTtl }));
+            verifyCodeExpire.value = new Date().getTime() + res.expirationTtl * 1000;
+            const intervalId = setInterval(() => {
+                verifyCodeTimeout.value = getVerifyCodeTimeout();
+                if (verifyCodeTimeout.value <= 0) {
+                    clearInterval(intervalId);
+                    verifyCodeTimeout.value = 0;
+                }
+            }, 1000);
+        }
+    } catch (error) {
+        message.error(error.message || "send verification code failed");
+    }
+};
+
+const emailSignup = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    if (!user.value.code && userOpenSettings.value.enableMailVerify) {
+        message.error(t('pleaseInputCode'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/register`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                // hash password
+                password: await hashPassword(user.value.password),
+                code: user.value.code
+            }),
+            message: message
+        });
+        if (res) {
+            tabValue.value = "signin";
+            message.success(t('pleaseLogin'));
+        }
+        showModal.value = false;
+    } catch (error) {
+        message.error(error.message || "register failed");
+    }
+};
+
+const passkeyLogin = async () => {
+    try {
+        const options = await api.fetch(`/user_api/passkey/authenticate_request`, {
+            method: 'POST',
+            body: JSON.stringify({
+                domain: location.hostname,
+            })
+        })
+        const credential = await startAuthentication(options)
+
+        // Send the result to the server and return the promise.
+        const res = await api.fetch(`/user_api/passkey/authenticate_response`, {
+            method: 'POST',
+            body: JSON.stringify({
+                origin: location.origin,
+                domain: location.hostname,
+                credential
+            })
+        })
+        userJwt.value = res.jwt;
+        location.reload();
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    }
+};
+
+const oauth2Login = async (clientID) => {
+    try {
+        userOauth2SessionClientID.value = clientID;
+        userOauth2SessionState.value = Math.random().toString(36).substring(2);
+        const res = await api.fetch(`/user_api/oauth2/login_url?clientID=${clientID}&state=${userOauth2SessionState.value}`);
+        // redirect to oauth2 login page
+        location.href = res.url;
+    } catch (error) {
+        message.error(error.message || "login failed");
+    }
+};
+
+onMounted(async () => {
+
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-tabs v-model:value="tabValue" size="large" v-if="userOpenSettings.fetched" justify-content="space-evenly">
+            <n-tab-pane name="signin" :tab="t('login')">
+                <n-form>
+                    <n-form-item-row :label="t('email')" required>
+                        <n-input v-model:value="user.email" />
+                    </n-form-item-row>
+                    <n-form-item-row :label="t('password')" required>
+                        <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                    </n-form-item-row>
+                    <n-button @click="emailLogin" type="primary" block secondary strong>
+                        {{ t('login') }}
+                    </n-button>
+                    <n-button @click="showModal = true" type="info" quaternary size="tiny">
+                        {{ t('forgotPassword') }}
+                    </n-button>
+                    <n-divider />
+                    <n-button @click="passkeyLogin" type="primary" block secondary strong>
+                        <template #icon>
+                            <n-icon :component="KeyFilled" />
+                        </template>
+                        {{ t('loginWithPasskey') }}
+                    </n-button>
+                    <n-button @click="oauth2Login(item.clientID)" v-for="item in userOpenSettings.oauth2ClientIDs"
+                        :key="item.clientID" block secondary strong>
+                        {{ t('loginWith', { provider: item.name }) }}
+                    </n-button>
+                </n-form>
+            </n-tab-pane>
+            <n-tab-pane v-if="userOpenSettings.enable" name="signup" :tab="t('register')">
+                <n-form>
+                    <n-form-item-row :label="t('email')" required>
+                        <n-input v-model:value="user.email" />
+                    </n-form-item-row>
+                    <n-form-item-row :label="t('password')" required>
+                        <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                    </n-form-item-row>
+                    <Turnstile v-if="userOpenSettings.enableMailVerify" v-model:value="cfToken" />
+                    <n-form-item-row v-if="userOpenSettings.enableMailVerify" :label="t('verifyCode')" required>
+                        <n-input-group>
+                            <n-input v-model:value="user.code" />
+                            <n-button @click="sendVerificationCode" style="margin-bottom: 0" type="primary" ghost
+                                :disabled="verifyCodeTimeout > 0">
+                                {{ verifyCodeTimeout > 0 ? t('waitforVerifyCode', { timeout: verifyCodeTimeout })
+                                    : t('sendVerificationCode') }}
+                            </n-button>
+                        </n-input-group>
+                    </n-form-item-row>
+                </n-form>
+                <n-button @click="emailSignup" type="primary" block secondary strong>
+                    {{ t('register') }}
+                </n-button>
+            </n-tab-pane>
+        </n-tabs>
+        <n-modal v-model:show="showModal" style="max-width: 600px;" preset="card" :title="t('forgotPassword')">
+            <n-form v-if="userOpenSettings.enable && userOpenSettings.enableMailVerify">
+                <n-form-item-row :label="t('email')" required>
+                    <n-input v-model:value="user.email" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('password')" required>
+                    <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                </n-form-item-row>
+                <Turnstile v-model:value="cfToken" />
+                <n-form-item-row :label="t('verifyCode')" required>
+                    <n-input-group>
+                        <n-input v-model:value="user.code" />
+                        <n-button @click="sendVerificationCode" style="margin-bottom: 0" type="primary" ghost
+                            :disabled="verifyCodeTimeout > 0">
+                            {{ verifyCodeTimeout > 0 ? t('waitforVerifyCode', { timeout: verifyCodeTimeout })
+                                : t('sendVerificationCode') }}
+                        </n-button>
+                    </n-input-group>
+                </n-form-item-row>
+                <n-button @click="emailSignup" type="primary" block secondary strong>
+                    {{ t('resetPassword') }}
+                </n-button>
+            </n-form>
+            <n-alert v-else :show-icon="false" :bordered="false">
+                <span>
+                    {{ t('cannotForgotPassword') }}
+                </span>
+            </n-alert>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/src/views/user/UserOauth2Callback.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router';
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api';
+
+const {
+    userJwt, userOauth2SessionState, userOauth2SessionClientID
+} = useGlobalState()
+
+const message = useMessage();
+const route = useRoute()
+const router = useRouter()
+const errorInfo = ref('')
+const { t } = useI18n({
+    messages: {
+        en: {
+            logging: 'Logging in...',
+            stateNotMatch: 'state not match',
+        },
+        zh: {
+            logging: '登录中...',
+            stateNotMatch: 'state 不匹配',
+        }
+    }
+});
+
+onMounted(async () => {
+    const state = route.query.state;
+    if (state != userOauth2SessionState.value) {
+        console.error('state not match');
+        message.error(t('stateNotMatch'));
+        return;
+    }
+    const code = route.query.code;
+    if (!code) {
+        console.error('code not found');
+        message.error('code not found');
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/oauth2/callback`, {
+            method: 'POST',
+            body: JSON.stringify({
+                code: code,
+                clientID: userOauth2SessionClientID.value
+            })
+        });
+        userJwt.value = res.jwt;
+        router.push('/user');
+    } catch (error) {
+        console.error(error);
+        message.error(error.message || 'error');
+    }
+});
+</script>
+
+<template>
+    <n-card :bordered="false" embedded>
+        <n-result status="info" :title="t('logging')" :description="errorInfo">
+        </n-result>
+    </n-card>
+</template>

frontend/src/views/user/UserSettings.vue

@@ -0,0 +1,259 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { startRegistration } from '@simplewebauthn/browser';
+import { NButton, NPopconfirm } from 'naive-ui'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { userJwt, userSettings, } = useGlobalState()
+const message = useMessage()
+
+const showLogout = ref(false)
+const showCreatePasskey = ref(false)
+const passkeyName = ref('')
+const showPasskeyList = ref(false)
+const showRenamePasskey = ref(false)
+const currentPasskeyId = ref(null)
+const currentPasskeyName = ref('')
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            logout: 'Logout',
+            logoutConfirm: 'Are you sure you want to logout?',
+            passordTip: 'The server will only receive the hash value of the password, and will not receive the plaintext password, so it cannot view or retrieve your password. If the administrator enables email verification, you can reset the password in incognito mode',
+            createPasskey: 'Create Passkey',
+            showPasskeyList: 'Show Passkey List',
+            passkeyCreated: 'Passkey created successfully',
+            passkeyNamePlaceholder: 'Please enter the passkey name or leave it empty to generate a random one',
+            renamePasskey: 'Rename Passkey',
+            deletePasskey: 'Delete Passkey',
+            passkey_name: 'Passkey Name',
+            created_at: 'Created At',
+            updated_at: 'Updated At',
+            actions: 'Actions',
+            renamePasskey: 'Rename Passkey',
+            renamePasskeyNamePlaceholder: 'Please enter the new passkey name',
+        },
+        zh: {
+            logout: '退出登录',
+            logoutConfirm: '确定要退出登录吗？',
+            passordTip: '服务器只会接收到密码的哈希值，不会接收到明文密码，因此无法查看或者找回您的密码, 如果管理员启用了邮件验证您可以在无痕模式重置密码',
+            createPasskey: '创建 Passkey',
+            showPasskeyList: '查看 Passkey 列表',
+            passkeyCreated: 'Passkey 创建成功',
+            passkeyNamePlaceholder: '请输入 Passkey 名称或者留空自动生成',
+            renamePasskey: '重命名 Passkey',
+            deletePasskey: '删除 Passkey',
+            passkey_name: 'Passkey 名称',
+            created_at: '创建时间',
+            updated_at: '更新时间',
+            actions: '操作',
+            renamePasskey: '重命名 Passkey',
+            renamePasskeyNamePlaceholder: '请输入新的 Passkey 名称',
+        }
+    }
+});
+
+
+const logout = async () => {
+    userJwt.value = '';
+    location.reload()
+}
+
+const createPasskey = async () => {
+    try {
+        const options = await api.fetch(`/user_api/passkey/register_request`, {
+            method: 'POST',
+            body: JSON.stringify({
+                domain: location.hostname,
+            })
+        })
+        const credential = await startRegistration(options)
+
+        // Send the result to the server and return the promise.
+        await api.fetch(`/user_api/passkey/register_response`, {
+            method: 'POST',
+            body: JSON.stringify({
+                origin: location.origin,
+                passkey_name: passkeyName.value || (
+                    (window.navigator.userAgentData?.platform || "Unknown")
+                    + ": " + Math.random().toString(36).substring(7)
+                ),
+                credential
+            })
+        })
+        message.success(t('passkeyCreated'));
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    } finally {
+        passkeyName.value = ''
+        showCreatePasskey.value = false
+    }
+}
+
+const passkeyColumns = [
+    {
+        title: "Passkey ID",
+        key: "passkey_id"
+    },
+    {
+        title: t('passkey_name'),
+        key: "passkey_name"
+    },
+    {
+        title: t('created_at'),
+        key: "created_at"
+    },
+    {
+        title: t('updated_at'),
+        key: "updated_at"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                [
+                    h(NButton,
+                        {
+                            tertiary: true,
+                            type: "primary",
+                            onClick: () => {
+                                showRenamePasskey.value = true;
+                                currentPasskeyId.value = row.passkey_id;
+                            }
+                        },
+                        { default: () => t('renamePasskey') }
+                    ),
+                    h(NPopconfirm,
+                        {
+                            onPositiveClick: async () => {
+                                try {
+                                    await api.fetch(`/user_api/passkey/${row.passkey_id}`, {
+                                        method: 'DELETE'
+                                    })
+                                    await fetchPasskeyList()
+                                } catch (e) {
+                                    console.error(e)
+                                    message.error(e.message)
+                                }
+                            }
+                        },
+                        {
+                            trigger: () => h(NButton,
+                                {
+                                    tertiary: true,
+                                    type: "error",
+                                },
+                                { default: () => t('deletePasskey') }
+                            ),
+                            default: () => `${t('deletePasskey')}?`
+                        }
+                    ),
+                ]
+            ])
+        }
+    }
+]
+
+const passkeyData = ref([])
+
+const fetchPasskeyList = async () => {
+    try {
+        const data = await api.fetch(`/user_api/passkey`)
+        passkeyData.value = data
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    }
+}
+
+const renamePasskey = async () => {
+    try {
+        await api.fetch(`/user_api/passkey/rename`, {
+            method: 'POST',
+            body: JSON.stringify({
+                passkey_name: currentPasskeyName.value,
+                passkey_id: currentPasskeyId.value
+            })
+        })
+        await fetchPasskeyList()
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    } finally {
+        currentPasskeyName.value = ''
+        showRenamePasskey.value = false
+    }
+}
+</script>
+
+<template>
+    <div class="center" v-if="userSettings.user_email">
+        <n-card :bordered="false" embedded>
+            <n-button @click="showPasskeyList = true; fetchPasskeyList();" secondary block strong>
+                {{ t('showPasskeyList') }}
+            </n-button>
+            <n-button @click="showCreatePasskey = true" type="primary" secondary block strong>
+                {{ t('createPasskey') }}
+            </n-button>
+            <n-alert :show-icon="false" :bordered="false">
+                <span>
+                    {{ t('passordTip') }}
+                </span>
+            </n-alert>
+            <n-button @click="showLogout = true" secondary block strong>
+                {{ t('logout') }}
+            </n-button>
+        </n-card>
+        <n-modal v-model:show="showCreatePasskey" preset="dialog" :title="t('createPasskey')">
+            <n-input v-model:value="passkeyName" :placeholder="t('passkeyNamePlaceholder')" />
+            <template #action>
+                <n-button :loading="loading" @click="createPasskey" size="small" tertiary type="primary">
+                    {{ t('createPasskey') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showRenamePasskey" preset="dialog" :title="t('renamePasskey')">
+            <n-input v-model:value="currentPasskeyName" :placeholder="t('renamePasskeyNamePlaceholder')" />
+            <template #action>
+                <n-button :loading="loading" @click="renamePasskey" size="small" tertiary type="primary">
+                    {{ t('renamePasskey') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showPasskeyList" preset="card" :title="t('showPasskeyList')">
+            <n-data-table :columns="passkeyColumns" :data="passkeyData" :bordered="false" embedded />
+        </n-modal>
+        <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
+            <p>{{ t('logoutConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                    {{ t('logout') }}
+                </n-button>
+            </template>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+
+.n-card {
+    max-width: 800px;
+    text-align: left;
+}
+
+.n-button {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+</style>

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

@@ -3,7 +3,6 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
-import { splitVendorChunkPlugin } from 'vite';
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
@@ -19,7 +18,6 @@ export default defineConfig({
     vue(),
     wasm(),
     topLevelAwait(),
-    splitVendorChunkPlugin(),
     AutoImport({
       imports: [
         'vue',
@@ -37,13 +35,16 @@ export default defineConfig({
       resolvers: [NaiveUiResolver()]
     }),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: null,
       devOptions: {
         enabled: true
       },
       workbox: {
         disableDevLogs: true,
-        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        globPatterns: [],
+        runtimeCaching: [],
+        navigateFallback: null,
+        cleanupOutdatedCaches: true,
       },
       manifest: {
         name: 'Temp Email',
@@ -64,5 +65,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),
   }
 })

mail-parser-wasm/.gitignore

@@ -12,3 +12,4 @@ Cargo.lock
 
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
+web/

mail-parser-wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mail-parser-wasm"
-version = "0.1.6"
+version = "0.1.8"
 edition = "2021"
 description = "A simple mail parser for wasm"
 license = "MIT"

mail-parser-wasm/README.md

@@ -1,16 +1,45 @@
-# mail-parser-wasm
+# mail-parser-wasm web and cf worker
 
-## usage
+## [mail-parser-wasm](https://www.npmjs.com/package/mail-parser-wasm)
+
+### mail-parser-wasm usage
+
+```bash
+pnpm add mail-parser-wasm
+```
 
 ```js
 import { parse_message } from 'mail-parser-wasm'
 
-const parsedEmail = parse_message(item.raw);
+const parsedEmail = parse_message(rawEmail);
 ```
 
-## build
+### mail-parser-wasm build
 
 ```bash
 wasm-pack build --release
 wasm-pack publish
 ```
+
+## [mail-parser-wasm-worker](https://www.npmjs.com/package/mail-parser-wasm-worker)
+
+### mail-parser-wasm-worker usage
+
+```bash
+pnpm add mail-parser-wasm-worker
+```
+
+```js
+import { parse_message_wrapper } from 'mail-parser-wasm-worker'
+
+const parsedEmail = parse_message_wrapper(rawEmail);
+```
+
+### mail-parser-wasm-worker build
+
+```bash
+wasm-pack build --out-dir web --target web --release
+find web/ -type f ! -name '*.json' ! -name '.gitignore' -exec cp {} worker/ \;
+# modify worker/package.json version or whatever
+pnpm publish worker --no-git-checks
+```

mail-parser-wasm/worker/index.d.ts

@@ -0,0 +1,9 @@
+import initAsync, { MessageResult } from './mail_parser_wasm';
+import MODULE from './mail_parser_wasm_bg.wasm';
+export { initAsync, MODULE };
+export * from './mail_parser_wasm';
+/**
+* @param {string} raw_message
+* @returns {MessageResult}
+*/
+export function parse_message_wrapper(raw_message: string): MessageResult;

mail-parser-wasm/worker/index.js

@@ -0,0 +1,12 @@
+import initAsync, { initSync, parse_message } from './mail_parser_wasm';
+import MODULE from './mail_parser_wasm_bg.wasm';
+
+initSync(MODULE);
+
+
+export { initAsync, MODULE };
+export * from './mail_parser_wasm';
+export const parse_message_wrapper = (raw_message) => {
+    initSync(MODULE);
+    return parse_message(raw_message);
+}

mail-parser-wasm/worker/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "mail-parser-wasm-worker",
+  "description": "A simple mail parser for worker",
+  "homepage": "https://github.com/dreamhunter2333/cloudflare_temp_email/tree/main/mail-parser-wasm",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dreamhunter2333/cloudflare_temp_email",
+    "directory": "mail-parser-wasm"
+  },
+  "version": "0.1.8",
+  "license": "MIT",
+  "files": [
+    "mail_parser_wasm_bg.wasm",
+    "mail_parser_wasm.js",
+    "mail_parser_wasm.d.ts",
+    "index.js",
+    "index.d.ts"
+  ],
+  "module": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}

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,15 @@
+const API_PATHS = [
+    "/api/",
+    "/open_api/",
+    "/user_api/",
+    "/admin/",
+    "/telegram/"
+];
+
+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": "0.8.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "wrangler pages dev",
+    "deploy": "wrangler pages deploy --branch production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "wrangler": "^3.85.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/.env.example

@@ -0,0 +1,2 @@
+proxy_url=https://temp-email-api.xxx.xxx
+port=8025

smtp_proxy_server/.gitignore

@@ -0,0 +1,161 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+test*

smtp_proxy_server/config.py

@@ -0,0 +1,22 @@
+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
+    basic_password: str = ""
+
+    class Config:
+        env_file = ".env"
+
+
+settings = Settings()

smtp_proxy_server/docker-compose.yaml

@@ -0,0 +1,14 @@
+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

smtp_proxy_server/dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+COPY requirements.txt /requirements.txt
+RUN python3 -m pip install -r /requirements.txt
+COPY . /app
+ENTRYPOINT [ "python3", "main.py" ]

smtp_proxy_server/imap_server.py

@@ -0,0 +1,251 @@
+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}",
+                "x-custom-auth": f"{settings.basic_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}",
+                "x-custom-auth": f"{settings.basic_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