Add Gmail API injection, provider presets, delivery method, and frontend wizard
- 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
This commit is contained in:
copilot-swe-agent[bot]
@@ -4,17 +4,21 @@ import { useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { mailAccountsApi, MailAccount, MailAccountCreate } from '@/lib/api';
|
||||
import { X, Loader2, CheckCircle, XCircle } from 'lucide-react';
|
||||
import { ProviderWizard } from './ProviderWizard';
|
||||
|
||||
interface AddMailAccountModalProps {
|
||||
account?: MailAccount | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type WizardStep = 'provider' | 'form';
|
||||
|
||||
export function AddMailAccountModal({ account, onClose }: AddMailAccountModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [testStatus, setTestStatus] = useState<'idle' | 'testing' | 'success' | 'error'>('idle');
|
||||
const [testMessage, setTestMessage] = useState('');
|
||||
const [autoDetecting, setAutoDetecting] = useState(false);
|
||||
const [wizardStep, setWizardStep] = useState<WizardStep>(account ? 'form' : 'provider');
|
||||
|
||||
const [formData, setFormData] = useState<MailAccountCreate>({
|
||||
name: account?.name || '',
|
||||
@@ -46,6 +50,18 @@ export function AddMailAccountModal({ account, onClose }: AddMailAccountModalPro
|
||||
}));
|
||||
};
|
||||
|
||||
const handleProviderSelect = (config: { name: string; protocol: string; host: string; port: number; use_ssl: boolean }) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
name: config.name,
|
||||
protocol: config.protocol,
|
||||
host: config.host,
|
||||
port: config.port,
|
||||
use_ssl: config.use_ssl,
|
||||
}));
|
||||
setWizardStep('form');
|
||||
};
|
||||
|
||||
const handleAutoDetect = async () => {
|
||||
if (!formData.username) {
|
||||
alert('Please enter an email address first');
|
||||
@@ -131,208 +147,236 @@ export function AddMailAccountModal({ account, onClose }: AddMailAccountModalPro
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Account Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="My Email Account"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email Address / Username
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
{wizardStep === 'provider' && !account ? (
|
||||
<ProviderWizard
|
||||
onSelect={handleProviderSelect}
|
||||
onManual={() => setWizardStep('form')}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{!account && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAutoDetect}
|
||||
disabled={autoDetecting}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
onClick={() => setWizardStep('provider')}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 mb-2"
|
||||
>
|
||||
{autoDetecting ? 'Detecting...' : 'Auto-Detect'}
|
||||
← Back to provider selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
required={!account}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={account ? 'Leave blank to keep current password' : 'Password'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Protocol
|
||||
</label>
|
||||
<select
|
||||
name="protocol"
|
||||
value={formData.protocol}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="pop3">POP3</option>
|
||||
<option value="imap">IMAP</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Host
|
||||
Account Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="host"
|
||||
value={formData.host}
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="pop.gmail.com"
|
||||
placeholder="My Email Account"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Port
|
||||
Email Address / Username
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="port"
|
||||
value={formData.port}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="use_ssl"
|
||||
id="use_ssl"
|
||||
checked={formData.use_ssl}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="use_ssl" className="ml-2 block text-sm text-gray-700">
|
||||
Use SSL/TLS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Check Interval (minutes)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="check_interval_minutes"
|
||||
value={formData.check_interval_minutes}
|
||||
onChange={handleChange}
|
||||
required
|
||||
min="1"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAutoDetect}
|
||||
disabled={autoDetecting}
|
||||
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 disabled:opacity-50"
|
||||
>
|
||||
{autoDetecting ? 'Detecting...' : 'Auto-Detect'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Max Emails Per Check
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="max_emails_per_check"
|
||||
value={formData.max_emails_per_check}
|
||||
type="password"
|
||||
name="password"
|
||||
value={formData.password}
|
||||
onChange={handleChange}
|
||||
min="1"
|
||||
required={!account}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder={account ? 'Leave blank to keep current password' : 'Password'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{testStatus !== 'idle' && (
|
||||
<div
|
||||
className={`p-3 rounded-md flex items-start ${
|
||||
testStatus === 'success'
|
||||
? 'bg-green-50 border border-green-200'
|
||||
: testStatus === 'error'
|
||||
? 'bg-red-50 border border-red-200'
|
||||
: 'bg-blue-50 border border-blue-200'
|
||||
}`}
|
||||
>
|
||||
{testStatus === 'testing' && <Loader2 className="h-5 w-5 text-blue-500 animate-spin mr-2" />}
|
||||
{testStatus === 'success' && <CheckCircle className="h-5 w-5 text-green-500 mr-2" />}
|
||||
{testStatus === 'error' && <XCircle className="h-5 w-5 text-red-500 mr-2" />}
|
||||
<span
|
||||
className={`text-sm ${
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Protocol
|
||||
</label>
|
||||
<select
|
||||
name="protocol"
|
||||
value={formData.protocol}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="pop3">POP3</option>
|
||||
<option value="pop3_ssl">POP3 (SSL)</option>
|
||||
<option value="imap">IMAP</option>
|
||||
<option value="imap_ssl">IMAP (SSL)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Host
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="host"
|
||||
value={formData.host}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="pop.gmail.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Port
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="port"
|
||||
value={formData.port}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="use_ssl"
|
||||
id="use_ssl"
|
||||
checked={formData.use_ssl}
|
||||
onChange={handleChange}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="use_ssl" className="ml-2 block text-sm text-gray-700">
|
||||
Use SSL/TLS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Check Interval (minutes)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="check_interval_minutes"
|
||||
value={formData.check_interval_minutes}
|
||||
onChange={handleChange}
|
||||
required
|
||||
min="1"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Max Emails Per Check
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="max_emails_per_check"
|
||||
value={formData.max_emails_per_check}
|
||||
onChange={handleChange}
|
||||
min="1"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-md p-3">
|
||||
<p className="text-sm text-green-800">
|
||||
<strong>Gmail API Injection:</strong> Emails will be injected directly into your Gmail
|
||||
account via the Gmail API. Make sure you have configured your Gmail credentials in Settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{testStatus !== 'idle' && (
|
||||
<div
|
||||
className={`p-3 rounded-md flex items-start ${
|
||||
testStatus === 'success'
|
||||
? 'text-green-700'
|
||||
? 'bg-green-50 border border-green-200'
|
||||
: testStatus === 'error'
|
||||
? 'text-red-700'
|
||||
: 'text-blue-700'
|
||||
? 'bg-red-50 border border-red-200'
|
||||
: 'bg-blue-50 border border-blue-200'
|
||||
}`}
|
||||
>
|
||||
{testStatus === 'testing' ? 'Testing connection...' : testMessage}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{testStatus === 'testing' && <Loader2 className="h-5 w-5 text-blue-500 animate-spin mr-2" />}
|
||||
{testStatus === 'success' && <CheckCircle className="h-5 w-5 text-green-500 mr-2" />}
|
||||
{testStatus === 'error' && <XCircle className="h-5 w-5 text-red-500 mr-2" />}
|
||||
<span
|
||||
className={`text-sm ${
|
||||
testStatus === 'success'
|
||||
? 'text-green-700'
|
||||
: testStatus === 'error'
|
||||
? 'text-red-700'
|
||||
: 'text-blue-700'
|
||||
}`}
|
||||
>
|
||||
{testStatus === 'testing' ? 'Testing connection...' : testMessage}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 px-6 py-4 flex items-center justify-between gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleTestConnection}
|
||||
disabled={testStatus === 'testing'}
|
||||
className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Test Connection
|
||||
</button>
|
||||
<div className="flex gap-3">
|
||||
{wizardStep === 'form' && (
|
||||
<div className="bg-gray-50 px-6 py-4 flex items-center justify-between gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
|
||||
onClick={handleTestConnection}
|
||||
disabled={testStatus === 'testing'}
|
||||
className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? 'Saving...' : 'Save'}
|
||||
Test Connection
|
||||
</button>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{createMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,279 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user