mail page ui correction maj compose
This commit is contained in:
parent
11ef993541
commit
2fc6b6bb60
@ -1051,8 +1051,13 @@ export default function MailPage() {
|
|||||||
{showCompose && (
|
{showCompose && (
|
||||||
<div className="fixed inset-0 bg-black/50 z-50">
|
<div className="fixed inset-0 bg-black/50 z-50">
|
||||||
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
|
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
|
||||||
|
{/* Modal Header */}
|
||||||
<div className="flex items-center justify-between p-4 border-b">
|
<div className="flex items-center justify-between p-4 border-b">
|
||||||
<h2 className="text-lg font-semibold">New Message</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{composeSubject.startsWith('Re:') ? 'Reply' :
|
||||||
|
composeSubject.startsWith('Fwd:') ? 'Forward' :
|
||||||
|
'New Message'}
|
||||||
|
</h2>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
@ -1069,74 +1074,114 @@ export default function MailPage() {
|
|||||||
<X className="h-4 w-4" />
|
<X className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-4 flex-1 overflow-auto space-y-4">
|
{/* Modal Body */}
|
||||||
<div>
|
<div className="p-4 flex-1 overflow-y-auto">
|
||||||
<Label htmlFor="to">To</Label>
|
<div className="space-y-4">
|
||||||
<Input
|
{/* Recipients */}
|
||||||
id="to"
|
<div>
|
||||||
value={composeTo}
|
<Label htmlFor="to">To</Label>
|
||||||
onChange={(e) => setComposeTo(e.target.value)}
|
<Input
|
||||||
placeholder="recipient@example.com"
|
id="to"
|
||||||
/>
|
type="email"
|
||||||
</div>
|
value={composeTo}
|
||||||
|
onChange={(e) => setComposeTo(e.target.value)}
|
||||||
<div className="flex items-center gap-2">
|
placeholder="recipient@example.com"
|
||||||
<Button
|
/>
|
||||||
variant="ghost"
|
</div>
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowCc(!showCc)}
|
{/* CC/BCC Controls */}
|
||||||
className="text-gray-500"
|
<div className="flex items-center gap-2">
|
||||||
>
|
<Button
|
||||||
{showCc ? 'Hide' : 'Show'} CC/BCC
|
type="button"
|
||||||
</Button>
|
variant="ghost"
|
||||||
</div>
|
size="sm"
|
||||||
|
onClick={() => setShowCc(!showCc)}
|
||||||
{showCc && (
|
className="text-gray-500"
|
||||||
<>
|
>
|
||||||
<div>
|
{showCc ? 'Hide' : 'Show'} CC/BCC
|
||||||
<Label htmlFor="cc">CC</Label>
|
</Button>
|
||||||
<Input
|
</div>
|
||||||
id="cc"
|
|
||||||
value={composeCc}
|
{showCc && (
|
||||||
onChange={(e) => setComposeCc(e.target.value)}
|
<>
|
||||||
placeholder="cc@example.com"
|
<div>
|
||||||
/>
|
<Label htmlFor="cc">CC</Label>
|
||||||
|
<Input
|
||||||
|
id="cc"
|
||||||
|
type="email"
|
||||||
|
value={composeCc}
|
||||||
|
onChange={(e) => setComposeCc(e.target.value)}
|
||||||
|
placeholder="cc@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="bcc">BCC</Label>
|
||||||
|
<Input
|
||||||
|
id="bcc"
|
||||||
|
type="email"
|
||||||
|
value={composeBcc}
|
||||||
|
onChange={(e) => setComposeBcc(e.target.value)}
|
||||||
|
placeholder="bcc@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subject */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="subject">Subject</Label>
|
||||||
|
<Input
|
||||||
|
id="subject"
|
||||||
|
value={composeSubject}
|
||||||
|
onChange={(e) => setComposeSubject(e.target.value)}
|
||||||
|
placeholder="Email subject"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Body */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="body">Message</Label>
|
||||||
|
<Textarea
|
||||||
|
id="body"
|
||||||
|
value={composeBody}
|
||||||
|
onChange={(e) => setComposeBody(e.target.value)}
|
||||||
|
className="min-h-[300px] font-mono"
|
||||||
|
placeholder="Write your message here..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Attachments */}
|
||||||
|
<div>
|
||||||
|
<Label>Attachments</Label>
|
||||||
|
<div className="mt-2 flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
onClick={() => {
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'file';
|
||||||
|
input.multiple = true;
|
||||||
|
input.click();
|
||||||
|
input.onchange = (e) => {
|
||||||
|
const files = (e.target as HTMLInputElement).files;
|
||||||
|
if (files) {
|
||||||
|
// Handle file attachments
|
||||||
|
console.log('Files selected:', files);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paperclip className="h-4 w-4" />
|
||||||
|
Attach Files
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</div>
|
||||||
<Label htmlFor="bcc">BCC</Label>
|
|
||||||
<Input
|
|
||||||
id="bcc"
|
|
||||||
value={composeBcc}
|
|
||||||
onChange={(e) => setComposeBcc(e.target.value)}
|
|
||||||
placeholder="bcc@example.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="subject">Subject</Label>
|
|
||||||
<Input
|
|
||||||
id="subject"
|
|
||||||
value={composeSubject}
|
|
||||||
onChange={(e) => setComposeSubject(e.target.value)}
|
|
||||||
placeholder="Email subject"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1">
|
|
||||||
<Label htmlFor="body">Message</Label>
|
|
||||||
<Textarea
|
|
||||||
id="body"
|
|
||||||
value={composeBody}
|
|
||||||
onChange={(e) => setComposeBody(e.target.value)}
|
|
||||||
className="min-h-[200px]"
|
|
||||||
placeholder="Write your message here..."
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Footer */}
|
||||||
<div className="p-4 border-t flex justify-end gap-2">
|
<div className="p-4 border-t flex justify-end gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@ -1152,7 +1197,44 @@ export default function MailPage() {
|
|||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button>Send</Button>
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
// Send email
|
||||||
|
const response = await fetch('/api/mail/send', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
to: composeTo,
|
||||||
|
cc: composeCc,
|
||||||
|
bcc: composeBcc,
|
||||||
|
subject: composeSubject,
|
||||||
|
body: composeBody,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to send email');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear form and close modal
|
||||||
|
setShowCompose(false);
|
||||||
|
setComposeTo('');
|
||||||
|
setComposeSubject('');
|
||||||
|
setComposeBody('');
|
||||||
|
setShowCc(false);
|
||||||
|
setComposeCc('');
|
||||||
|
setComposeBcc('');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error sending email:', error);
|
||||||
|
// Show error message to user
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user