From 43d9a9dfe94ab03aadf4237f2d35f1937d9d4a8f Mon Sep 17 00:00:00 2001 From: dreamhunter2333 Date: Sun, 23 Aug 2026 17:44:21 +0800 Subject: [PATCH] feat: add user send mail client --- CHANGELOG.md | 2 + CHANGELOG_EN.md | 2 + e2e/tests/api/user-send-mail.spec.ts | 167 ++++++++++++++++++ e2e/tests/browser/user-send-mail.spec.ts | 114 ++++++++++++ frontend/src/components/SendBox.vue | 2 +- frontend/src/i18n/locales/source/de.ts | 8 +- frontend/src/i18n/locales/source/es.ts | 8 +- frontend/src/i18n/locales/source/ja.ts | 8 +- frontend/src/i18n/locales/source/ptBR.ts | 8 +- frontend/src/i18n/message-registry.ts | 26 +++ frontend/src/views/User.vue | 6 +- frontend/src/views/index/SendMail.vue | 58 ++++-- frontend/src/views/user/UserMailClient.vue | 131 ++++++++++++++ .../docs/en/guide/feature/send-mail-api.md | 38 +++- .../docs/zh/guide/feature/send-mail-api.md | 38 +++- worker/src/mails_api/send_mail_api.ts | 12 +- worker/src/user_api/index.ts | 8 + worker/src/user_api/user_send_mail_api.ts | 115 ++++++++++++ 18 files changed, 728 insertions(+), 23 deletions(-) create mode 100644 e2e/tests/api/user-send-mail.spec.ts create mode 100644 e2e/tests/browser/user-send-mail.spec.ts create mode 100644 frontend/src/views/user/UserMailClient.vue create mode 100644 worker/src/user_api/user_send_mail_api.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 736c48e..2edb248 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Features - feat: |Admin| 数据库页面新增 D1 存储容量展示，支持选择并保存 Free 或 Workers Paid 套餐，对比当前数据库大小和容量上限 +- feat: |用户系统| 用户中心新增绑定邮箱选择、发送邮件和发件箱，提供使用用户 JWT 的地址设置、发信权限申请、发信及发件箱 API ### Bug Fixes @@ -25,6 +26,7 @@ - test: |E2E| 覆盖 D1 数据库大小响应、配置键隔离，以及数据库页面套餐选择的持久化与刷新恢复 - fix: |E2E| 覆盖发信页面草稿编辑、正文格式切换及 HTML 预览 +- test: |E2E| 覆盖用户 JWT 发信接口的地址归属、额度扣减、实际投递和发件箱操作，以及用户中心选择绑定邮箱后发信的完整流程 ## v1.11.0 diff --git a/CHANGELOG_EN.md b/CHANGELOG_EN.md index de558f7..5c15a49 100644 --- a/CHANGELOG_EN.md +++ b/CHANGELOG_EN.md @@ -11,6 +11,7 @@ ### Features - feat: |Admin| Add D1 storage capacity details to the database page, with persistent Free and Workers Paid plan selection and a comparison between the current database size and capacity limit +- feat: |User| Add bound-address selection, mail composition, and sent items to the user center, backed by User JWT APIs for address settings, send-access requests, sending, and sent-item management ### Bug Fixes @@ -25,6 +26,7 @@ - test: |E2E| Cover the D1 database-size response, config-key isolation, and persistence of the database-page plan selection across reloads - fix: |E2E| Cover draft editing, content-format switching, and HTML preview in the send-mail composer +- test: |E2E| Cover address ownership, balance decrement, delivery, and sent-item operations through the User JWT API, plus the complete user-center address selection and send flow ## v1.11.0 diff --git a/e2e/tests/api/user-send-mail.spec.ts b/e2e/tests/api/user-send-mail.spec.ts new file mode 100644 index 0000000..d164f1b --- /dev/null +++ b/e2e/tests/api/user-send-mail.spec.ts @@ -0,0 +1,167 @@ +import { expect, test, type APIRequestContext } from '@playwright/test'; + +import { + WORKER_URL, + createTestAddress, + deleteAddress, + deleteAllMailpitMessages, + hashPassword, + onMailpitMessage, +} from '../../fixtures/test-helpers'; + +async function createUser(request: APIRequestContext) { + const email = `user-send-${Date.now()}@test.example.com`; + const password = hashPassword('test-password-123'); + const registerRes = await request.post(`${WORKER_URL}/user_api/register`, { + data: { email, password }, + }); + expect(registerRes.ok()).toBe(true); + + const loginRes = await request.post(`${WORKER_URL}/user_api/login`, { + data: { email, password }, + }); + expect(loginRes.ok()).toBe(true); + const { jwt } = await loginRes.json(); + const payload = JSON.parse(Buffer.from(jwt.split('.')[1], 'base64url').toString('utf8')); + return { jwt, userId: payload.user_id as number }; +} + +async function bindAddress( + request: APIRequestContext, + userJwt: string, + addressJwt: string, +) { + const response = await request.post(`${WORKER_URL}/user_api/bind_address`, { + headers: { + Authorization: `Bearer ${addressJwt}`, + 'x-user-token': userJwt, + }, + }); + expect(response.ok()).toBe(true); +} + +test.describe('User send mail API', () => { + test('sends and manages sent items for a bound address only', async ({ request }) => { + const addresses: Awaited>[] = []; + let userId: number | undefined; + let originalUserSettings: Record | undefined; + + try { + const settingsRes = await request.get(`${WORKER_URL}/admin/user_settings`); + expect(settingsRes.ok()).toBe(true); + originalUserSettings = await settingsRes.json(); + const enableUserRes = await request.post(`${WORKER_URL}/admin/user_settings`, { + data: { + ...originalUserSettings, + enable: true, + enableMailVerify: false, + maxAddressCount: 0, + }, + }); + expect(enableUserRes.ok()).toBe(true); + + const user = await createUser(request); + userId = user.userId; + const bound = await createTestAddress(request, 'user-send-bound-'); + const accessRequest = await createTestAddress(request, 'user-send-access-'); + const outsider = await createTestAddress(request, 'user-send-outsider-'); + addresses.push(bound, accessRequest, outsider); + await bindAddress(request, user.jwt, bound.jwt); + await bindAddress(request, user.jwt, accessRequest.jwt); + + const outsiderSettingsRes = await request.get( + `${WORKER_URL}/user_api/address/${outsider.address_id}/settings`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(outsiderSettingsRes.status()).toBe(400); + + const requestAccessRes = await request.post( + `${WORKER_URL}/user_api/address/${accessRequest.address_id}/request_send_mail_access`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(requestAccessRes.ok()).toBe(true); + + const addressSettingsRes = await request.get( + `${WORKER_URL}/user_api/address/${bound.address_id}/settings`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(addressSettingsRes.ok()).toBe(true); + const addressSettings = await addressSettingsRes.json(); + expect(addressSettings.address).toBe(bound.address); + expect(addressSettings.send_balance).toBe(10); + + await deleteAllMailpitMessages(request); + const subject = `User API send ${Date.now()}`; + const listener = onMailpitMessage((mail) => mail.Subject === subject); + await listener.ready; + + const sendRes = await request.post( + `${WORKER_URL}/user_api/address/${bound.address_id}/send_mail`, + { + headers: { 'x-user-token': user.jwt }, + data: { + from_name: 'User Sender', + from_mail: outsider.address, + to_name: 'Recipient', + to_mail: 'recipient@test.example.com', + subject, + content: 'Sent through the user API', + is_html: false, + }, + }, + ); + expect(sendRes.ok()).toBe(true); + const delivered = await listener.message; + expect(delivered.From.Address).toBe(bound.address); + + const updatedSettingsRes = await request.get( + `${WORKER_URL}/user_api/address/${bound.address_id}/settings`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect((await updatedSettingsRes.json()).send_balance).toBe(9); + + const sendboxRes = await request.get( + `${WORKER_URL}/user_api/address/${bound.address_id}/sendbox?limit=20&offset=0`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(sendboxRes.ok()).toBe(true); + const sendbox = await sendboxRes.json(); + expect(sendbox.count).toBe(1); + expect(sendbox.results).toHaveLength(1); + expect(JSON.parse(sendbox.results[0].raw).subject).toBe(subject); + + const outsiderSendboxRes = await request.get( + `${WORKER_URL}/user_api/address/${outsider.address_id}/sendbox?limit=20&offset=0`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(outsiderSendboxRes.status()).toBe(400); + + const deleteRes = await request.delete( + `${WORKER_URL}/user_api/address/${bound.address_id}/sendbox/${sendbox.results[0].id}`, + { headers: { 'x-user-token': user.jwt } }, + ); + expect(deleteRes.ok()).toBe(true); + + const emptySendboxRes = await request.get( + `${WORKER_URL}/user_api/address/${bound.address_id}/sendbox?limit=20&offset=0`, + { headers: { 'x-user-token': user.jwt } }, + ); + const emptySendbox = await emptySendboxRes.json(); + expect(emptySendbox.count).toBe(0); + expect(emptySendbox.results).toHaveLength(0); + } finally { + try { + await Promise.allSettled(addresses.map((address) => deleteAddress(request, address.jwt))); + if (userId !== undefined) { + await request.delete(`${WORKER_URL}/admin/users/${userId}`); + } + } finally { + if (originalUserSettings) { + await request.post(`${WORKER_URL}/admin/user_settings`, { + data: originalUserSettings, + }); + } + } + } + }); +}); diff --git a/e2e/tests/browser/user-send-mail.spec.ts b/e2e/tests/browser/user-send-mail.spec.ts new file mode 100644 index 0000000..dc3911c --- /dev/null +++ b/e2e/tests/browser/user-send-mail.spec.ts @@ -0,0 +1,114 @@ +import { expect, request as apiRequest, test, type APIRequestContext } from '@playwright/test'; + +import { + FRONTEND_URL, + WORKER_URL, + createTestAddress, + deleteAddress, + hashPassword, +} from '../../fixtures/test-helpers'; + +async function createUser(request: APIRequestContext) { + const email = `user-send-browser-${Date.now()}@test.example.com`; + const password = hashPassword('test-password-123'); + const registerRes = await request.post(`${WORKER_URL}/user_api/register`, { + data: { email, password }, + }); + expect(registerRes.ok()).toBe(true); + + const loginRes = await request.post(`${WORKER_URL}/user_api/login`, { + data: { email, password }, + }); + expect(loginRes.ok()).toBe(true); + const { jwt } = await loginRes.json(); + const payload = JSON.parse(Buffer.from(jwt.split('.')[1], 'base64url').toString('utf8')); + return { email, jwt, userId: payload.user_id as number }; +} + +test.describe('User send mail page', () => { + test('selects a bound address, sends mail, and opens its sent items', async ({ page }) => { + const request = await apiRequest.newContext(); + let address: Awaited> | undefined; + let userId: number | undefined; + let originalUserSettings: Record | undefined; + + try { + const settingsRes = await request.get(`${WORKER_URL}/admin/user_settings`); + expect(settingsRes.ok()).toBe(true); + originalUserSettings = await settingsRes.json(); + const enableUserRes = await request.post(`${WORKER_URL}/admin/user_settings`, { + data: { + ...originalUserSettings, + enable: true, + enableMailVerify: false, + maxAddressCount: 0, + }, + }); + expect(enableUserRes.ok()).toBe(true); + + const user = await createUser(request); + userId = user.userId; + address = await createTestAddress(request, 'user-send-browser-address-'); + const bindRes = await request.post(`${WORKER_URL}/user_api/bind_address`, { + headers: { + Authorization: `Bearer ${address.jwt}`, + 'x-user-token': user.jwt, + }, + }); + expect(bindRes.ok()).toBe(true); + + await page.goto(`${FRONTEND_URL}/en/`); + await page.evaluate((userJwt) => { + localStorage.setItem('userJwt', userJwt); + }, user.jwt); + await page.goto(`${FRONTEND_URL}/en/user`); + + await expect(page.getByText(user.email)).toBeVisible({ timeout: 15_000 }); + await page.getByText('Send Mail', { exact: true }).click(); + + const addressSelect = page.locator('.address-picker-select'); + await addressSelect.click(); + const settingsResponse = page.waitForResponse((response) => ( + new URL(response.url()).pathname + === `/user_api/address/${address!.address_id}/settings` + )); + await page.locator('.n-base-select-menu:visible') + .getByText(address.address, { exact: true }) + .click(); + expect((await settingsResponse).ok()).toBe(true); + + await expect(page.getByRole('heading', { name: 'Compose email', exact: true })).toBeVisible(); + await expect(page.locator('.composer-title')).toContainText(address.address); + + const subject = `Browser user send ${Date.now()}`; + await page.getByRole('textbox', { name: /^Recipient address/ }) + .fill('recipient@test.example.com'); + await page.getByRole('textbox', { name: /^Subject/ }).fill(subject); + await page.locator('.compose-textarea textarea').fill('Sent from the user page'); + + const sendResponse = page.waitForResponse((response) => ( + response.request().method() === 'POST' + && new URL(response.url()).pathname + === `/user_api/address/${address!.address_id}/send_mail` + )); + await page.getByRole('button', { name: 'Send', exact: true }).click(); + expect((await sendResponse).ok()).toBe(true); + + await expect(page.getByText(subject, { exact: true })).toBeVisible({ timeout: 15_000 }); + } finally { + try { + if (address) await deleteAddress(request, address.jwt); + if (userId !== undefined) { + await request.delete(`${WORKER_URL}/admin/users/${userId}`); + } + } finally { + if (originalUserSettings) { + await request.post(`${WORKER_URL}/admin/user_settings`, { + data: originalUserSettings, + }); + } + await request.dispose(); + } + } + }); +}); diff --git a/frontend/src/components/SendBox.vue b/frontend/src/components/SendBox.vue index 03c623a..21ed79a 100644 --- a/frontend/src/components/SendBox.vue +++ b/frontend/src/components/SendBox.vue @@ -82,7 +82,7 @@ const refresh = async () => { } return item; }); - if (totalCount > 0) { + if (page.value === 1) { count.value = totalCount; } if (!isMobile.value && !curMail.value && data.value.length > 0) { diff --git a/frontend/src/i18n/locales/source/de.ts b/frontend/src/i18n/locales/source/de.ts index 8c88449..ded74ec 100644 --- a/frontend/src/i18n/locales/source/de.ts +++ b/frontend/src/i18n/locales/source/de.ts @@ -650,5 +650,11 @@ export const deMessages = { "components.AddressCredentialModal.starttls": "STARTTLS", "components.AddressCredentialModal.tip": "Verwende diese Zugangsdaten nur mit Clients und Agents, denen du vertraust.", "components.AddressCredentialModal.title": "Adresszugangsdaten & Verbindungsmethoden", - "components.AddressCredentialModal.username": "Benutzername" + "components.AddressCredentialModal.username": "Benutzername", + "views.User.send_mail": "E-Mail senden", + "views.user.UserMailClient.noAddress": "Wähle eine verknüpfte E-Mail-Adresse aus", + "views.user.UserMailClient.selectAddress": "Absenderadresse", + "views.user.UserMailClient.selectAddressTip": "Wähle eine verknüpfte Adresse, um E-Mails zu schreiben und gesendete Nachrichten anzuzeigen", + "views.user.UserMailClient.sendbox": "Gesendet", + "views.user.UserMailClient.sendMail": "Verfassen" } diff --git a/frontend/src/i18n/locales/source/es.ts b/frontend/src/i18n/locales/source/es.ts index c2b8e35..ee79a98 100644 --- a/frontend/src/i18n/locales/source/es.ts +++ b/frontend/src/i18n/locales/source/es.ts @@ -650,5 +650,11 @@ export const esMessages = { "components.AddressCredentialModal.starttls": "STARTTLS", "components.AddressCredentialModal.tip": "Usa estas credenciales solo con clientes y agentes de confianza.", "components.AddressCredentialModal.title": "Credenciales de dirección y métodos de conexión", - "components.AddressCredentialModal.username": "Usuario" + "components.AddressCredentialModal.username": "Usuario", + "views.User.send_mail": "Enviar correo", + "views.user.UserMailClient.noAddress": "Selecciona una dirección de correo vinculada", + "views.user.UserMailClient.selectAddress": "Dirección del remitente", + "views.user.UserMailClient.selectAddressTip": "Elige una dirección vinculada para redactar correos y ver los enviados", + "views.user.UserMailClient.sendbox": "Enviados", + "views.user.UserMailClient.sendMail": "Redactar" } diff --git a/frontend/src/i18n/locales/source/ja.ts b/frontend/src/i18n/locales/source/ja.ts index 46bb77e..b130b27 100644 --- a/frontend/src/i18n/locales/source/ja.ts +++ b/frontend/src/i18n/locales/source/ja.ts @@ -650,5 +650,11 @@ export const jaMessages = { "components.AddressCredentialModal.starttls": "STARTTLS", "components.AddressCredentialModal.tip": "これらの認証情報は信頼できるクライアントと Agent でのみ使用してください。", "components.AddressCredentialModal.title": "アドレス認証情報と接続方法", - "components.AddressCredentialModal.username": "ユーザー名" + "components.AddressCredentialModal.username": "ユーザー名", + "views.User.send_mail": "メール送信", + "views.user.UserMailClient.noAddress": "紐付け済みのメールアドレスを選択してください", + "views.user.UserMailClient.selectAddress": "送信元アドレス", + "views.user.UserMailClient.selectAddressTip": "紐付け済みアドレスを選択して、メール作成と送信済みメールの確認ができます", + "views.user.UserMailClient.sendbox": "送信済み", + "views.user.UserMailClient.sendMail": "作成" } diff --git a/frontend/src/i18n/locales/source/ptBR.ts b/frontend/src/i18n/locales/source/ptBR.ts index 3954523..3affcb7 100644 --- a/frontend/src/i18n/locales/source/ptBR.ts +++ b/frontend/src/i18n/locales/source/ptBR.ts @@ -650,5 +650,11 @@ export const ptBRMessages = { "components.AddressCredentialModal.starttls": "STARTTLS", "components.AddressCredentialModal.tip": "Use estas credenciais somente com clientes e agents confiáveis.", "components.AddressCredentialModal.title": "Credenciais do endereço e métodos de conexão", - "components.AddressCredentialModal.username": "Nome de usuário" + "components.AddressCredentialModal.username": "Nome de usuário", + "views.User.send_mail": "Enviar e-mail", + "views.user.UserMailClient.noAddress": "Selecione um endereço de e-mail vinculado", + "views.user.UserMailClient.selectAddress": "Endereço do remetente", + "views.user.UserMailClient.selectAddressTip": "Escolha um endereço vinculado para escrever e ver e-mails enviados", + "views.user.UserMailClient.sendbox": "Enviados", + "views.user.UserMailClient.sendMail": "Escrever" } diff --git a/frontend/src/i18n/message-registry.ts b/frontend/src/i18n/message-registry.ts index e5d6246..c7e2ef6 100644 --- a/frontend/src/i18n/message-registry.ts +++ b/frontend/src/i18n/message-registry.ts @@ -738,6 +738,10 @@ export const MESSAGE_REGISTRY = { "en": "Bind Mail Address", "zh": "绑定邮箱地址" }, + "send_mail": { + "en": "Send Mail", + "zh": "发送邮件" + }, "user_mail_box_tab": { "en": "Mail Box", "zh": "收件箱" @@ -747,6 +751,28 @@ export const MESSAGE_REGISTRY = { "zh": "用户设置" } }, + "views.user.UserMailClient": { + "noAddress": { + "en": "Select a bound email address to continue", + "zh": "请选择一个已绑定的邮箱地址" + }, + "selectAddress": { + "en": "Sender address", + "zh": "发件邮箱" + }, + "selectAddressTip": { + "en": "Choose a bound address to compose mail and view its sent items", + "zh": "选择已绑定邮箱后，可发送邮件并查看该邮箱的发件箱" + }, + "sendbox": { + "en": "Sent", + "zh": "发件箱" + }, + "sendMail": { + "en": "Compose", + "zh": "写邮件" + } + }, "views.user.UserLogin": { "cannotForgotPassword": { "en": "Mail verification is disabled or register is disabled, cannot reset password, please contact administrator", diff --git a/frontend/src/views/User.vue b/frontend/src/views/User.vue index 70b323e..d58da9c 100644 --- a/frontend/src/views/User.vue +++ b/frontend/src/views/User.vue @@ -8,9 +8,10 @@ import UserSettingsPage from './user/UserSettings.vue'; import UserBar from './user/UserBar.vue'; import BindAddress from './user/BindAddress.vue'; import UserMailBox from './user/UserMailBox.vue'; +import UserMailClient from './user/UserMailClient.vue'; const { - userTab, globalTabplacement, userSettings + userTab, globalTabplacement, userSettings, openSettings } = useGlobalState() const { t } = useScopedI18n('views.User') @@ -27,6 +28,9 @@ const { t } = useScopedI18n('views.User') + + + diff --git a/frontend/src/views/index/SendMail.vue b/frontend/src/views/index/SendMail.vue index 7acdb87..c73d60c 100644 --- a/frontend/src/views/index/SendMail.vue +++ b/frontend/src/views/index/SendMail.vue @@ -16,6 +16,19 @@ const message = useMessage() const isPreview = ref(false) const editorRef = shallowRef() const sending = ref(false) +const userAddressSettings = ref({ + address: '', + send_balance: 0, +}) + +const props = defineProps({ + addressId: { + type: Number, + default: 0, + }, +}) + +const emit = defineEmits(['sent']) const { @@ -25,6 +38,23 @@ const { const { t } = useScopedI18n('views.index.SendMail') +const isUserAddressMode = computed(() => props.addressId > 0) +const mailSettings = computed(() => ( + isUserAddressMode.value ? userAddressSettings.value : settings.value +)) + +const getApiPath = (path) => isUserAddressMode.value + ? `/user_api/address/${props.addressId}/${path}` + : `/api/${path}` + +const refreshSettings = async () => { + if (!isUserAddressMode.value) { + await api.getSettings() + return + } + userAddressSettings.value = await api.fetch(getApiPath('settings')) +} + const contentTypes = computed(() => [ { label: t('text'), value: 'text' }, { label: t('html'), value: 'html' }, @@ -99,7 +129,7 @@ const send = async () => { sending.value = true try { - await api.fetch(`/api/send_mail`, + await api.fetch(getApiPath('send_mail'), { method: 'POST', body: JSON.stringify(payload) @@ -114,7 +144,11 @@ const send = async () => { } isPreview.value = false message.success(t("successSend")); - indexTab.value = 'sendbox' + if (isUserAddressMode.value) { + emit('sent') + } else { + indexTab.value = 'sendbox' + } } catch (error) { message.error(error.message || "error"); } finally { @@ -124,14 +158,14 @@ const send = async () => { const requestAccess = async () => { try { - await api.fetch(`/api/request_send_mail_access`, + await api.fetch(getApiPath('request_send_mail_access'), { method: 'POST', body: JSON.stringify({}) } ) message.success(t("requestSuccess")) - await api.getSettings(); + await refreshSettings(); } catch (error) { message.error(error.message || "error"); } @@ -166,30 +200,30 @@ const handleCreated = (editor) => { onMounted(async () => { // make sure user_id is fetched if (!userSettings.value.user_id) await api.getUserSettings(message); - await api.getSettings(); + await refreshSettings(); })