courrier multi account
This commit is contained in:
parent
92440af7da
commit
e647499bb6
@ -680,6 +680,228 @@ export default function CourrierPage() {
|
||||
|
||||
{/* Display all accounts */}
|
||||
<div className="mt-1">
|
||||
{/* Form for adding a new account */}
|
||||
{showAddAccountForm && (
|
||||
<div className="mb-3 p-2 border border-gray-200 rounded-md bg-gray-50">
|
||||
<h4 className="text-xs font-medium mb-2 text-gray-700">Add IMAP Account</h4>
|
||||
<form onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
// Pull values from form with proper type handling
|
||||
const formValues = {
|
||||
email: formData.get('email')?.toString() || '',
|
||||
password: formData.get('password')?.toString() || '',
|
||||
host: formData.get('host')?.toString() || '',
|
||||
port: parseInt(formData.get('port')?.toString() || '993'),
|
||||
secure: formData.get('secure') === 'on',
|
||||
display_name: formData.get('display_name')?.toString() || '',
|
||||
smtp_host: formData.get('smtp_host')?.toString() || '',
|
||||
smtp_port: formData.get('smtp_port')?.toString() ?
|
||||
parseInt(formData.get('smtp_port')?.toString() || '587') : undefined,
|
||||
smtp_secure: formData.get('smtp_secure') === 'on'
|
||||
};
|
||||
|
||||
// If display_name is empty, use email
|
||||
if (!formValues.display_name) {
|
||||
formValues.display_name = formValues.email;
|
||||
}
|
||||
|
||||
try {
|
||||
// First test the connection
|
||||
const testResponse = await fetch('/api/courrier/test-connection', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: formValues.email,
|
||||
password: formValues.password,
|
||||
host: formValues.host,
|
||||
port: formValues.port,
|
||||
secure: formValues.secure
|
||||
})
|
||||
});
|
||||
|
||||
const testResult = await testResponse.json();
|
||||
|
||||
if (!testResponse.ok) {
|
||||
throw new Error(testResult.error || 'Connection test failed');
|
||||
}
|
||||
|
||||
console.log('Connection test successful:', testResult);
|
||||
|
||||
// If connection test is successful, save the account
|
||||
const saveResponse = await fetch('/api/courrier/account', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formValues)
|
||||
});
|
||||
|
||||
const saveResult = await saveResponse.json();
|
||||
|
||||
if (!saveResponse.ok) {
|
||||
throw new Error(saveResult.error || 'Failed to add account');
|
||||
}
|
||||
|
||||
// Update accounts list
|
||||
const newAccountObj = {
|
||||
id: `account-${Date.now()}`, // generate unique string ID
|
||||
name: formValues.display_name,
|
||||
email: formValues.email,
|
||||
color: `bg-blue-500`, // Default color class
|
||||
folders: testResult.details.sampleFolders || ['INBOX', 'Sent', 'Drafts', 'Trash'] // Use discovered folders or defaults
|
||||
};
|
||||
|
||||
setAccounts(prev => [...prev, newAccountObj]);
|
||||
setShowAddAccountForm(false);
|
||||
toast({
|
||||
title: "Account added successfully",
|
||||
description: `Your email account ${formValues.email} has been added.`,
|
||||
duration: 5000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error adding account:', error);
|
||||
toast({
|
||||
title: "Failed to add account",
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: "destructive",
|
||||
duration: 5000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}}>
|
||||
<div className="space-y-2">
|
||||
<Tabs defaultValue="imap" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 h-7">
|
||||
<TabsTrigger value="imap" className="text-xs">IMAP Settings</TabsTrigger>
|
||||
<TabsTrigger value="smtp" className="text-xs">SMTP Settings</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="imap" className="mt-2 space-y-2">
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-xs">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="email@example.com"
|
||||
className="h-7 text-xs"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="password" className="text-xs">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="•••••••••"
|
||||
className="h-7 text-xs"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="display_name" className="text-xs">Display Name</Label>
|
||||
<Input
|
||||
id="display_name"
|
||||
name="display_name"
|
||||
placeholder="John Doe"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="host" className="text-xs">IMAP Server</Label>
|
||||
<Input
|
||||
id="host"
|
||||
name="host"
|
||||
placeholder="imap.example.com"
|
||||
className="h-7 text-xs"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="port" className="text-xs">Port</Label>
|
||||
<Input
|
||||
id="port"
|
||||
name="port"
|
||||
placeholder="993"
|
||||
className="h-7 text-xs"
|
||||
defaultValue="993"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="secure" name="secure" defaultChecked />
|
||||
<Label htmlFor="secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="smtp" className="mt-2 space-y-2">
|
||||
<div>
|
||||
<Label htmlFor="smtp_host" className="text-xs">SMTP Server</Label>
|
||||
<Input
|
||||
id="smtp_host"
|
||||
name="smtp_host"
|
||||
placeholder="smtp.example.com"
|
||||
className="h-7 text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<Label htmlFor="smtp_port" className="text-xs">Port</Label>
|
||||
<Input
|
||||
id="smtp_port"
|
||||
name="smtp_port"
|
||||
placeholder="587"
|
||||
className="h-7 text-xs"
|
||||
defaultValue="587"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end pb-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
<Checkbox id="smtp_secure" name="smtp_secure" defaultChecked />
|
||||
<Label htmlFor="smtp_secure" className="text-xs">SSL</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 italic">
|
||||
Note: SMTP settings are only needed for sending emails
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
type="submit"
|
||||
className="flex-1 h-7 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded-md"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
|
||||
Test & Add
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="h-7 text-xs"
|
||||
onClick={() => setShowAddAccountForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="mb-1">
|
||||
<Button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user