copilot-swe-agent[bot]
40150da3a9
- Add gmail_service.py with Gmail API users.messages.insert() for direct email injection - Add DeliveryMethod enum and GmailCredential model to database models - Add delivery_method field to MailAccount schema and model - Create providers.py endpoint with 12 provider presets (Gmail, GMX, WEB.DE, Outlook, Yahoo, AOL, T-Online, 1&1/IONOS, Freenet, Posteo, mail.de, iCloud) - Expand MailServerAutoDetect with 30+ domain mappings - Update Celery tasks to prefer Gmail API injection, with SMTP fallback - Add ProviderWizard.tsx frontend component for quick provider setup - Update AddMailAccountModal.tsx with wizard integration - Add Google API Python client libraries to requirements.txt - Add Gmail API config settings - Add unit tests for Gmail service and provider presets Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com> Agent-Logs-Url: https://github.com/christianlouis/pop_puller_to_gmail/sessions/de3ef930-a980-4958-8a9d-a2c802918e81
280 lines
8.9 KiB
TypeScript
280 lines
8.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ChevronRight, Mail, ArrowLeft } from 'lucide-react';
|
|
|
|
interface ProviderPreset {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
domains: string[];
|
|
imap_ssl?: { host: string; port: number } | null;
|
|
pop3_ssl?: { host: string; port: number } | null;
|
|
notes?: string;
|
|
}
|
|
|
|
interface ProviderConfig {
|
|
name: string;
|
|
protocol: string;
|
|
host: string;
|
|
port: number;
|
|
use_ssl: boolean;
|
|
}
|
|
|
|
interface ProviderWizardProps {
|
|
onSelect: (config: ProviderConfig) => void;
|
|
onManual: () => void;
|
|
}
|
|
|
|
const PROVIDERS: ProviderPreset[] = [
|
|
{
|
|
id: 'gmail',
|
|
name: 'Gmail',
|
|
icon: '📧',
|
|
domains: ['gmail.com', 'googlemail.com'],
|
|
imap_ssl: { host: 'imap.gmail.com', port: 993 },
|
|
pop3_ssl: { host: 'pop.gmail.com', port: 995 },
|
|
notes: 'Enable IMAP/POP3 in Gmail settings. Use an App Password if 2FA is enabled.',
|
|
},
|
|
{
|
|
id: 'gmx',
|
|
name: 'GMX',
|
|
icon: '📮',
|
|
domains: ['gmx.de', 'gmx.net', 'gmx.at', 'gmx.ch', 'gmx.com'],
|
|
imap_ssl: { host: 'imap.gmx.net', port: 993 },
|
|
pop3_ssl: { host: 'pop.gmx.net', port: 995 },
|
|
notes: 'Enable POP3/IMAP in GMX settings under E-Mail > POP3/IMAP Abruf.',
|
|
},
|
|
{
|
|
id: 'webde',
|
|
name: 'WEB.DE',
|
|
icon: '📬',
|
|
domains: ['web.de'],
|
|
imap_ssl: { host: 'imap.web.de', port: 993 },
|
|
pop3_ssl: { host: 'pop3.web.de', port: 995 },
|
|
notes: 'Enable POP3/IMAP in WEB.DE settings under E-Mail > POP3/IMAP Abruf.',
|
|
},
|
|
{
|
|
id: 'outlook',
|
|
name: 'Outlook / Hotmail',
|
|
icon: '📨',
|
|
domains: ['outlook.com', 'hotmail.com', 'live.com', 'msn.com', 'outlook.de'],
|
|
imap_ssl: { host: 'outlook.office365.com', port: 993 },
|
|
pop3_ssl: { host: 'outlook.office365.com', port: 995 },
|
|
notes: 'Use your Microsoft account credentials.',
|
|
},
|
|
{
|
|
id: 'yahoo',
|
|
name: 'Yahoo Mail',
|
|
icon: '💌',
|
|
domains: ['yahoo.com', 'yahoo.de', 'yahoo.co.uk', 'ymail.com'],
|
|
imap_ssl: { host: 'imap.mail.yahoo.com', port: 993 },
|
|
pop3_ssl: { host: 'pop.mail.yahoo.com', port: 995 },
|
|
notes: 'Generate an App Password in Yahoo account security settings.',
|
|
},
|
|
{
|
|
id: 'aol',
|
|
name: 'AOL Mail',
|
|
icon: '📪',
|
|
domains: ['aol.com', 'aim.com'],
|
|
imap_ssl: { host: 'imap.aol.com', port: 993 },
|
|
pop3_ssl: { host: 'pop.aol.com', port: 995 },
|
|
notes: 'Generate an App Password in AOL account security settings.',
|
|
},
|
|
{
|
|
id: 'tonline',
|
|
name: 'T-Online',
|
|
icon: '🇩🇪',
|
|
domains: ['t-online.de'],
|
|
imap_ssl: { host: 'secureimap.t-online.de', port: 993 },
|
|
pop3_ssl: { host: 'securepop.t-online.de', port: 995 },
|
|
notes: 'Use your T-Online E-Mail-Passwort (not your Telekom login password).',
|
|
},
|
|
{
|
|
id: 'ionos',
|
|
name: '1&1 / IONOS',
|
|
icon: '🌐',
|
|
domains: ['online.de', 'onlinehome.de', '1und1.de'],
|
|
imap_ssl: { host: 'imap.ionos.de', port: 993 },
|
|
pop3_ssl: { host: 'pop.ionos.de', port: 995 },
|
|
notes: 'Use your IONOS email credentials.',
|
|
},
|
|
{
|
|
id: 'freenet',
|
|
name: 'Freenet',
|
|
icon: '📫',
|
|
domains: ['freenet.de'],
|
|
imap_ssl: { host: 'mx.freenet.de', port: 993 },
|
|
pop3_ssl: { host: 'mx.freenet.de', port: 995 },
|
|
notes: 'Use your Freenet email credentials.',
|
|
},
|
|
{
|
|
id: 'icloud',
|
|
name: 'iCloud Mail',
|
|
icon: '☁️',
|
|
domains: ['icloud.com', 'me.com', 'mac.com'],
|
|
imap_ssl: { host: 'imap.mail.me.com', port: 993 },
|
|
pop3_ssl: null,
|
|
notes: 'Generate an app-specific password at appleid.apple.com. IMAP only.',
|
|
},
|
|
{
|
|
id: 'posteo',
|
|
name: 'Posteo',
|
|
icon: '🌿',
|
|
domains: ['posteo.de', 'posteo.net'],
|
|
imap_ssl: { host: 'posteo.de', port: 993 },
|
|
pop3_ssl: null,
|
|
notes: 'Posteo supports IMAP only.',
|
|
},
|
|
];
|
|
|
|
export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
|
|
const [selectedProvider, setSelectedProvider] = useState<ProviderPreset | null>(null);
|
|
const [selectedProtocol, setSelectedProtocol] = useState<'imap_ssl' | 'pop3_ssl'>('imap_ssl');
|
|
|
|
const handleProviderClick = (provider: ProviderPreset) => {
|
|
setSelectedProvider(provider);
|
|
|
|
// If only one protocol, auto-select it
|
|
if (!provider.pop3_ssl && provider.imap_ssl) {
|
|
setSelectedProtocol('imap_ssl');
|
|
} else if (provider.pop3_ssl && !provider.imap_ssl) {
|
|
setSelectedProtocol('pop3_ssl');
|
|
}
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
if (!selectedProvider) return;
|
|
|
|
const config = selectedProvider[selectedProtocol];
|
|
if (!config) return;
|
|
|
|
onSelect({
|
|
name: selectedProvider.name,
|
|
protocol: selectedProtocol === 'imap_ssl' ? 'imap_ssl' : 'pop3_ssl',
|
|
host: config.host,
|
|
port: config.port,
|
|
use_ssl: true,
|
|
});
|
|
};
|
|
|
|
if (selectedProvider) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedProvider(null)}
|
|
className="flex items-center text-sm text-blue-600 hover:text-blue-800"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
|
Back to providers
|
|
</button>
|
|
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-blue-900 mb-2">
|
|
{selectedProvider.icon} {selectedProvider.name}
|
|
</h4>
|
|
<p className="text-sm text-blue-700 mb-1">
|
|
Domains: {selectedProvider.domains.join(', ')}
|
|
</p>
|
|
{selectedProvider.notes && (
|
|
<p className="text-sm text-blue-600 mt-2 italic">{selectedProvider.notes}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Select Protocol
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{selectedProvider.imap_ssl && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedProtocol('imap_ssl')}
|
|
className={`p-3 rounded-lg border-2 text-left transition-colors ${
|
|
selectedProtocol === 'imap_ssl'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-gray-900">IMAP (Recommended)</div>
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
{selectedProvider.imap_ssl.host}:{selectedProvider.imap_ssl.port}
|
|
</div>
|
|
</button>
|
|
)}
|
|
{selectedProvider.pop3_ssl && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedProtocol('pop3_ssl')}
|
|
className={`p-3 rounded-lg border-2 text-left transition-colors ${
|
|
selectedProtocol === 'pop3_ssl'
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className="font-medium text-gray-900">POP3</div>
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
{selectedProvider.pop3_ssl.host}:{selectedProvider.pop3_ssl.port}
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirm}
|
|
className="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
Use {selectedProvider.name} Settings
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-gray-700 mb-3">
|
|
Quick Setup — Select Your Email Provider
|
|
</h4>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
|
{PROVIDERS.map((provider) => (
|
|
<button
|
|
key={provider.id}
|
|
type="button"
|
|
onClick={() => handleProviderClick(provider)}
|
|
className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-left"
|
|
>
|
|
<span className="text-xl">{provider.icon}</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 truncate">{provider.name}</div>
|
|
</div>
|
|
<ChevronRight className="h-4 w-4 text-gray-400 flex-shrink-0" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<div className="w-full border-t border-gray-200" />
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-2 bg-white text-gray-500">or</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onManual}
|
|
className="w-full flex items-center justify-center gap-2 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<Mail className="h-4 w-4" />
|
|
Configure Manually
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|