feat(email): add 'Test connection' to incoming mail + tidy IMAP label

- emailIntakeService.testConnection(): logs in, opens the configured folder,
  reports message/unread counts (non-destructive). Accepts current form creds
  so it works before saving; masked password falls back to stored.
- route POST /admin/email/incoming-config/test
- IMAP card: 'Test connection' button beside Save; toast shows folder + counts
- capitalize 'IMAP Host' label to match 'SMTP Host'

Note: incoming uses IMAP (receiving) vs outgoing SMTP (sending) — genuinely
different servers/credentials, hence the distinct field set (Folder; no From).
This commit is contained in:
Luca
2026-06-12 14:47:14 +02:00
parent d04a6978e9
commit f017649bd5
6 changed files with 104 additions and 6 deletions
@@ -11,7 +11,7 @@ import React, { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import { Save, Server, User, Lock, Eye, EyeOff, FolderSearch } from 'lucide-react';
import { Save, Server, User, Lock, Eye, EyeOff, FolderSearch, PlugZap } from 'lucide-react';
import { Button, Card, Input, Loading } from '../common';
import { emailService, type IncomingMailConfig, type ImapFolder } from '../../services/email.service';
@@ -44,6 +44,12 @@ export const IncomingMailConfigCard: React.FC = () => {
onError: (e: any) => toast.error(e?.response?.data?.error || e?.response?.data?.errors?.[0]?.msg || e.message || 'Failed'),
});
const test = useMutation({
mutationFn: () => emailService.testIncoming(cfg),
onSuccess: (r) => toast.success(t('email.incoming.testOk', 'Connected to {{folder}} — {{messages}} messages, {{unseen}} unread.', { folder: r.folder, messages: r.messages, unseen: r.unseen })),
onError: (e: any) => toast.error(e?.response?.data?.error || e.message || t('email.incoming.testFailed', 'Connection failed.')),
});
const detect = useMutation({
mutationFn: () => emailService.listIncomingFolders(cfg),
onSuccess: (list) => {
@@ -152,9 +158,21 @@ export const IncomingMailConfigCard: React.FC = () => {
<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">{t('email.incoming.folderHint', 'Enter host, username and password, then Detect to list the mailbox folders.')}</p>
</div>
<Button variant="primary" onClick={() => save.mutate()} isLoading={save.isPending} leftIcon={<Save className="w-5 h-5" />} className="w-full">
{t('email.incoming.save', 'Save Incoming Mail Settings')}
</Button>
<div className="flex gap-2">
<Button
variant="outline"
onClick={() => test.mutate()}
isLoading={test.isPending}
disabled={!cfg.imap_host || !cfg.imap_user}
leftIcon={<PlugZap className="w-5 h-5" />}
className="whitespace-nowrap"
>
{t('email.incoming.test', 'Test connection')}
</Button>
<Button variant="primary" onClick={() => save.mutate()} isLoading={save.isPending} leftIcon={<Save className="w-5 h-5" />} className="flex-1">
{t('email.incoming.save', 'Save Incoming Mail Settings')}
</Button>
</div>
</div>
</Card>
);
+3
View File
@@ -2479,6 +2479,9 @@
"title": "Eingehende E-Mails (IMAP)",
"subtitle": "Ein dediziertes Postfach, jede Minute abgerufen; Anhänge landen in Buchhaltung → Eingangsrechnungen.",
"host": "IMAP-Host",
"test": "Verbindung testen",
"testOk": "Verbunden mit {{folder}} — {{messages}} Nachrichten, {{unseen}} ungelesen.",
"testFailed": "Verbindung fehlgeschlagen.",
"port": "Port",
"security": "Sicherheit",
"ssl": "SSL/TLS",
+4 -1
View File
@@ -2051,7 +2051,10 @@
"incoming": {
"title": "Incoming mail (IMAP)",
"subtitle": "A dedicated mailbox polled every minute; attachments land in Accounting → Incoming invoices.",
"host": "IMAP host",
"host": "IMAP Host",
"test": "Test connection",
"testOk": "Connected to {{folder}} — {{messages}} messages, {{unseen}} unread.",
"testFailed": "Connection failed.",
"port": "Port",
"security": "Security",
"ssl": "SSL/TLS",
+12
View File
@@ -95,6 +95,13 @@ export interface ImapFolder {
specialUse: string | null;
}
export interface ImapTestResult {
ok: boolean;
folder: string;
messages: number;
unseen: number;
}
export interface ReceivedEmail {
id: number;
message_id: string | null;
@@ -138,6 +145,11 @@ export const emailService = {
const response = await api.post<{ folders: ImapFolder[] }>('/admin/email/incoming-config/folders', config || {});
return response.data.folders;
},
// Test the IMAP connection: opens the configured folder, reports counts.
async testIncoming(config?: Partial<IncomingMailConfig>): Promise<ImapTestResult> {
const response = await api.post<ImapTestResult>('/admin/email/incoming-config/test', config || {});
return response.data;
},
async listReceived(params: { page?: number; pageSize?: number } = {}): Promise<ReceivedEmailsResponse> {
const response = await api.get<ReceivedEmailsResponse>('/admin/email/received', { params });
return response.data;