mail page fix
This commit is contained in:
parent
0e7f48079d
commit
20f2e474a7
@ -1,6 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useEffect, useState, useMemo, useCallback } from 'react';
|
import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@ -39,6 +39,7 @@ import {
|
|||||||
extractHeader
|
extractHeader
|
||||||
} from '@/lib/infomaniak-mime-decoder';
|
} from '@/lib/infomaniak-mime-decoder';
|
||||||
import DOMPurify from 'isomorphic-dompurify';
|
import DOMPurify from 'isomorphic-dompurify';
|
||||||
|
import ComposeEmail from '@/components/ComposeEmail';
|
||||||
|
|
||||||
interface Account {
|
interface Account {
|
||||||
id: number;
|
id: number;
|
||||||
@ -490,6 +491,7 @@ export default function CourrierPage() {
|
|||||||
const [isMarkingRead, setIsMarkingRead] = useState(false);
|
const [isMarkingRead, setIsMarkingRead] = useState(false);
|
||||||
const [isMarkingUnread, setIsMarkingUnread] = useState(false);
|
const [isMarkingUnread, setIsMarkingUnread] = useState(false);
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||||
|
const composeBodyRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
// Debug logging for email distribution
|
// Debug logging for email distribution
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -1394,6 +1396,12 @@ export default function CourrierPage() {
|
|||||||
setComposeCc(replyEmail.cc);
|
setComposeCc(replyEmail.cc);
|
||||||
setComposeSubject(replyEmail.subject);
|
setComposeSubject(replyEmail.subject);
|
||||||
setComposeBody(replyEmail.body);
|
setComposeBody(replyEmail.body);
|
||||||
|
|
||||||
|
// Set the content directly on the div
|
||||||
|
if (composeBodyRef.current) {
|
||||||
|
composeBodyRef.current.innerHTML = replyEmail.body;
|
||||||
|
}
|
||||||
|
|
||||||
setComposeBcc('');
|
setComposeBcc('');
|
||||||
|
|
||||||
// Show the compose form and CC field for Reply All
|
// Show the compose form and CC field for Reply All
|
||||||
@ -1594,167 +1602,27 @@ export default function CourrierPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Compose Email Modal */}
|
{/* Compose Email Modal */}
|
||||||
{showCompose && (
|
<ComposeEmail
|
||||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
showCompose={showCompose}
|
||||||
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
setShowCompose={setShowCompose}
|
||||||
{/* Modal Header */}
|
composeTo={composeTo}
|
||||||
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
setComposeTo={setComposeTo}
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
composeCc={composeCc}
|
||||||
{composeSubject.startsWith('Re:') ? 'Reply' :
|
setComposeCc={setComposeCc}
|
||||||
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
|
composeBcc={composeBcc}
|
||||||
</h3>
|
setComposeBcc={setComposeBcc}
|
||||||
<Button
|
composeSubject={composeSubject}
|
||||||
variant="ghost"
|
setComposeSubject={setComposeSubject}
|
||||||
size="icon"
|
composeBody={composeBody}
|
||||||
className="hover:bg-gray-100 rounded-full"
|
setComposeBody={setComposeBody}
|
||||||
onClick={() => {
|
showCc={showCc}
|
||||||
setShowCompose(false);
|
setShowCc={setShowCc}
|
||||||
setComposeTo('');
|
showBcc={showBcc}
|
||||||
setComposeCc('');
|
setShowBcc={setShowBcc}
|
||||||
setComposeBcc('');
|
attachments={attachments}
|
||||||
setComposeSubject('');
|
setAttachments={setAttachments}
|
||||||
setComposeBody('');
|
handleSend={handleSend}
|
||||||
setShowCc(false);
|
|
||||||
setShowBcc(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<X className="h-5 w-5 text-gray-500" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modal Body */}
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
{/* To Field */}
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
|
||||||
<Input
|
|
||||||
id="to"
|
|
||||||
value={composeTo}
|
|
||||||
onChange={(e) => setComposeTo(e.target.value)}
|
|
||||||
placeholder="recipient@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CC/BCC Toggle Buttons */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
||||||
onClick={() => setShowCc(!showCc)}
|
|
||||||
>
|
|
||||||
{showCc ? 'Hide Cc' : 'Add Cc'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
||||||
onClick={() => setShowBcc(!showBcc)}
|
|
||||||
>
|
|
||||||
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* CC Field */}
|
|
||||||
{showCc && (
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
|
||||||
<Input
|
|
||||||
id="cc"
|
|
||||||
value={composeCc}
|
|
||||||
onChange={(e) => setComposeCc(e.target.value)}
|
|
||||||
placeholder="cc@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* BCC Field */}
|
|
||||||
{showBcc && (
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
|
||||||
<Input
|
|
||||||
id="bcc"
|
|
||||||
value={composeBcc}
|
|
||||||
onChange={(e) => setComposeBcc(e.target.value)}
|
|
||||||
placeholder="bcc@example.com"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Subject Field */}
|
|
||||||
<div>
|
|
||||||
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
|
||||||
<Input
|
|
||||||
id="subject"
|
|
||||||
value={composeSubject}
|
|
||||||
onChange={(e) => setComposeSubject(e.target.value)}
|
|
||||||
placeholder="Enter subject"
|
|
||||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Message Body */}
|
|
||||||
<div className="flex-1 overflow-auto">
|
|
||||||
<div
|
|
||||||
contentEditable
|
|
||||||
className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md"
|
|
||||||
suppressContentEditableWarning
|
|
||||||
onInput={(e: React.FormEvent<HTMLDivElement>) => {
|
|
||||||
setComposeBody((e.target as HTMLDivElement).innerHTML);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{composeBody}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Modal Footer */}
|
|
||||||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{/* File Input for Attachments */}
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="file-attachment"
|
|
||||||
className="hidden"
|
|
||||||
multiple
|
|
||||||
onChange={handleFileAttachment}
|
|
||||||
/>
|
|
||||||
<label htmlFor="file-attachment">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
document.getElementById('file-attachment')?.click();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Paperclip className="h-4 w-4 text-gray-600" />
|
|
||||||
</Button>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
|
||||||
onClick={() => setShowCompose(false)}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className="bg-blue-600 text-white hover:bg-blue-700"
|
|
||||||
onClick={handleSend}
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{renderDeleteConfirmDialog()}
|
{renderDeleteConfirmDialog()}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
260
components/ComposeEmail.tsx
Normal file
260
components/ComposeEmail.tsx
Normal file
@ -0,0 +1,260 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Paperclip, X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface ComposeEmailProps {
|
||||||
|
showCompose: boolean;
|
||||||
|
setShowCompose: (show: boolean) => void;
|
||||||
|
composeTo: string;
|
||||||
|
setComposeTo: (to: string) => void;
|
||||||
|
composeCc: string;
|
||||||
|
setComposeCc: (cc: string) => void;
|
||||||
|
composeBcc: string;
|
||||||
|
setComposeBcc: (bcc: string) => void;
|
||||||
|
composeSubject: string;
|
||||||
|
setComposeSubject: (subject: string) => void;
|
||||||
|
composeBody: string;
|
||||||
|
setComposeBody: (body: string) => void;
|
||||||
|
showCc: boolean;
|
||||||
|
setShowCc: (show: boolean) => void;
|
||||||
|
showBcc: boolean;
|
||||||
|
setShowBcc: (show: boolean) => void;
|
||||||
|
attachments: any[];
|
||||||
|
setAttachments: (attachments: any[]) => void;
|
||||||
|
handleSend: () => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ComposeEmail({
|
||||||
|
showCompose,
|
||||||
|
setShowCompose,
|
||||||
|
composeTo,
|
||||||
|
setComposeTo,
|
||||||
|
composeCc,
|
||||||
|
setComposeCc,
|
||||||
|
composeBcc,
|
||||||
|
setComposeBcc,
|
||||||
|
composeSubject,
|
||||||
|
setComposeSubject,
|
||||||
|
composeBody,
|
||||||
|
setComposeBody,
|
||||||
|
showCc,
|
||||||
|
setShowCc,
|
||||||
|
showBcc,
|
||||||
|
setShowBcc,
|
||||||
|
attachments,
|
||||||
|
setAttachments,
|
||||||
|
handleSend
|
||||||
|
}: ComposeEmailProps) {
|
||||||
|
const composeBodyRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
if (!e.target.files) return;
|
||||||
|
|
||||||
|
const newAttachments: any[] = [];
|
||||||
|
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
|
||||||
|
const oversizedFiles: string[] = [];
|
||||||
|
|
||||||
|
for (const file of e.target.files) {
|
||||||
|
if (file.size > MAX_FILE_SIZE) {
|
||||||
|
oversizedFiles.push(file.name);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Read file as base64
|
||||||
|
const base64Content = await new Promise<string>((resolve) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const base64 = reader.result as string;
|
||||||
|
resolve(base64.split(',')[1]); // Remove data URL prefix
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
|
||||||
|
newAttachments.push({
|
||||||
|
name: file.name,
|
||||||
|
type: file.type,
|
||||||
|
content: base64Content,
|
||||||
|
encoding: 'base64'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error processing attachment:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (oversizedFiles.length > 0) {
|
||||||
|
alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newAttachments.length > 0) {
|
||||||
|
setAttachments([...attachments, ...newAttachments]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!showCompose) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||||
|
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||||
|
{/* Modal Header */}
|
||||||
|
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
|
{composeSubject.startsWith('Re:') ? 'Reply' :
|
||||||
|
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
|
||||||
|
</h3>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="hover:bg-gray-100 rounded-full"
|
||||||
|
onClick={() => {
|
||||||
|
setShowCompose(false);
|
||||||
|
setComposeTo('');
|
||||||
|
setComposeCc('');
|
||||||
|
setComposeBcc('');
|
||||||
|
setComposeSubject('');
|
||||||
|
setComposeBody('');
|
||||||
|
setShowCc(false);
|
||||||
|
setShowBcc(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5 text-gray-500" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
{/* To Field */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||||||
|
<Input
|
||||||
|
id="to"
|
||||||
|
value={composeTo}
|
||||||
|
onChange={(e) => setComposeTo(e.target.value)}
|
||||||
|
placeholder="recipient@example.com"
|
||||||
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CC/BCC Toggle Buttons */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
|
onClick={() => setShowCc(!showCc)}
|
||||||
|
>
|
||||||
|
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
|
onClick={() => setShowBcc(!showBcc)}
|
||||||
|
>
|
||||||
|
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CC Field */}
|
||||||
|
{showCc && (
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||||||
|
<Input
|
||||||
|
id="cc"
|
||||||
|
value={composeCc}
|
||||||
|
onChange={(e) => setComposeCc(e.target.value)}
|
||||||
|
placeholder="cc@example.com"
|
||||||
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* BCC Field */}
|
||||||
|
{showBcc && (
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
||||||
|
<Input
|
||||||
|
id="bcc"
|
||||||
|
value={composeBcc}
|
||||||
|
onChange={(e) => setComposeBcc(e.target.value)}
|
||||||
|
placeholder="bcc@example.com"
|
||||||
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Subject Field */}
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
||||||
|
<Input
|
||||||
|
id="subject"
|
||||||
|
value={composeSubject}
|
||||||
|
onChange={(e) => setComposeSubject(e.target.value)}
|
||||||
|
placeholder="Enter subject"
|
||||||
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Body */}
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
<div
|
||||||
|
ref={composeBodyRef}
|
||||||
|
contentEditable
|
||||||
|
className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md"
|
||||||
|
suppressContentEditableWarning
|
||||||
|
onInput={(e: React.FormEvent<HTMLDivElement>) => {
|
||||||
|
setComposeBody((e.target as HTMLDivElement).innerHTML);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Footer */}
|
||||||
|
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* File Input for Attachments */}
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="file-attachment"
|
||||||
|
className="hidden"
|
||||||
|
multiple
|
||||||
|
onChange={handleFileAttachment}
|
||||||
|
/>
|
||||||
|
<label htmlFor="file-attachment">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
document.getElementById('file-attachment')?.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paperclip className="h-4 w-4 text-gray-600" />
|
||||||
|
</Button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
||||||
|
onClick={() => setShowCompose(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-blue-600 text-white hover:bg-blue-700"
|
||||||
|
onClick={handleSend}
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user