557 lines
18 KiB
TypeScript
557 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useMemo, useCallback } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import {
|
|
MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail,
|
|
Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight,
|
|
Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll,
|
|
MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff,
|
|
AlertOctagon, Archive, RefreshCw
|
|
} from 'lucide-react';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { MailList } from "@/components/mail/mail-list";
|
|
import { MailToolbar } from "@/components/mail/mail-toolbar";
|
|
import { useMail } from "@/hooks/use-mail";
|
|
|
|
interface Account {
|
|
id: number;
|
|
name: string;
|
|
email: string;
|
|
color: string;
|
|
folders?: string[];
|
|
}
|
|
|
|
interface Email {
|
|
id: number;
|
|
accountId: number;
|
|
from: string;
|
|
fromName?: string;
|
|
to: string;
|
|
subject: string;
|
|
body: string;
|
|
date: string;
|
|
read: boolean;
|
|
starred: boolean;
|
|
folder: string;
|
|
cc?: string;
|
|
bcc?: string;
|
|
flags?: string[];
|
|
}
|
|
|
|
interface Attachment {
|
|
name: string;
|
|
type: string;
|
|
content: string;
|
|
encoding: string;
|
|
}
|
|
|
|
// Improved MIME Decoder Implementation for Infomaniak
|
|
function extractBoundary(headers: string): string | null {
|
|
const boundaryMatch = headers.match(/boundary="?([^"\r\n;]+)"?/i) ||
|
|
headers.match(/boundary=([^\r\n;]+)/i);
|
|
|
|
return boundaryMatch ? boundaryMatch[1].trim() : null;
|
|
}
|
|
|
|
function decodeQuotedPrintable(text: string, charset: string): string {
|
|
if (!text) return '';
|
|
|
|
// Replace soft line breaks (=\r\n or =\n or =\r)
|
|
let decoded = text.replace(/=(?:\r\n|\n|\r)/g, '');
|
|
|
|
// Replace quoted-printable encoded characters (including non-ASCII characters)
|
|
decoded = decoded.replace(/=([0-9A-F]{2})/gi, (match, p1) => {
|
|
return String.fromCharCode(parseInt(p1, 16));
|
|
});
|
|
|
|
// Handle character encoding
|
|
try {
|
|
// For browsers with TextDecoder support
|
|
if (typeof TextDecoder !== 'undefined') {
|
|
// Convert string to array of byte values
|
|
const bytes = new Uint8Array(Array.from(decoded).map(c => c.charCodeAt(0)));
|
|
return new TextDecoder(charset).decode(bytes);
|
|
}
|
|
|
|
// Fallback for older browsers or when charset handling is not critical
|
|
return decoded;
|
|
} catch (e) {
|
|
console.warn('Charset conversion error:', e);
|
|
return decoded;
|
|
}
|
|
}
|
|
|
|
function parseFullEmail(emailRaw: string) {
|
|
// Check if this is a multipart message by looking for boundary definition
|
|
const boundaryMatch = emailRaw.match(/boundary="?([^"\r\n;]+)"?/i) ||
|
|
emailRaw.match(/boundary=([^\r\n;]+)/i);
|
|
|
|
if (boundaryMatch) {
|
|
const boundary = boundaryMatch[1].trim();
|
|
|
|
// Check if there's a preamble before the first boundary
|
|
let mainHeaders = '';
|
|
let mainContent = emailRaw;
|
|
|
|
// Extract the headers before the first boundary if they exist
|
|
const firstBoundaryPos = emailRaw.indexOf('--' + boundary);
|
|
if (firstBoundaryPos > 0) {
|
|
const headerSeparatorPos = emailRaw.indexOf('\r\n\r\n');
|
|
if (headerSeparatorPos > 0 && headerSeparatorPos < firstBoundaryPos) {
|
|
mainHeaders = emailRaw.substring(0, headerSeparatorPos);
|
|
}
|
|
}
|
|
|
|
return processMultipartEmail(emailRaw, boundary, mainHeaders);
|
|
} else {
|
|
// This is a single part message
|
|
return processSinglePartEmail(emailRaw);
|
|
}
|
|
}
|
|
|
|
function processMultipartEmail(emailRaw: string, boundary: string, mainHeaders: string = ''): {
|
|
text: string;
|
|
html: string;
|
|
attachments: { filename: string; contentType: string; encoding: string; content: string; }[];
|
|
headers?: string;
|
|
} {
|
|
const result = {
|
|
text: '',
|
|
html: '',
|
|
attachments: [] as { filename: string; contentType: string; encoding: string; content: string; }[],
|
|
headers: mainHeaders
|
|
};
|
|
|
|
// Split by boundary (more robust pattern)
|
|
const boundaryRegex = new RegExp(`--${boundary}(?:--)?(\\r?\\n|$)`, 'g');
|
|
|
|
// Get all boundary positions
|
|
const matches = Array.from(emailRaw.matchAll(boundaryRegex));
|
|
const boundaryPositions = matches.map(match => match.index!);
|
|
|
|
// Extract content between boundaries
|
|
for (let i = 0; i < boundaryPositions.length - 1; i++) {
|
|
const startPos = boundaryPositions[i] + matches[i][0].length;
|
|
const endPos = boundaryPositions[i + 1];
|
|
|
|
if (endPos > startPos) {
|
|
const partContent = emailRaw.substring(startPos, endPos).trim();
|
|
|
|
if (partContent) {
|
|
const decoded = processSinglePartEmail(partContent);
|
|
|
|
if (decoded.contentType.includes('text/plain')) {
|
|
result.text = decoded.text || '';
|
|
} else if (decoded.contentType.includes('text/html')) {
|
|
result.html = cleanHtml(decoded.html || '');
|
|
} else if (
|
|
decoded.contentType.startsWith('image/') ||
|
|
decoded.contentType.startsWith('application/')
|
|
) {
|
|
const filename = extractFilename(partContent);
|
|
result.attachments.push({
|
|
filename,
|
|
contentType: decoded.contentType,
|
|
encoding: decoded.raw?.headers ? parseEmailHeaders(decoded.raw.headers).encoding : '7bit',
|
|
content: decoded.raw?.body || ''
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function processSinglePartEmail(rawEmail: string) {
|
|
// Split headers and body
|
|
const headerBodySplit = rawEmail.split(/\r?\n\r?\n/);
|
|
const headers = headerBodySplit[0];
|
|
const body = headerBodySplit.slice(1).join('\n\n');
|
|
|
|
// Parse headers to get content type, encoding, etc.
|
|
const emailInfo = parseEmailHeaders(headers);
|
|
|
|
// Decode the body based on its encoding
|
|
const decodedBody = decodeMIME(body, emailInfo.encoding, emailInfo.charset);
|
|
|
|
return {
|
|
subject: extractHeader(headers, 'Subject'),
|
|
from: extractHeader(headers, 'From'),
|
|
to: extractHeader(headers, 'To'),
|
|
date: extractHeader(headers, 'Date'),
|
|
contentType: emailInfo.contentType,
|
|
text: emailInfo.contentType.includes('html') ? null : decodedBody,
|
|
html: emailInfo.contentType.includes('html') ? decodedBody : null,
|
|
raw: {
|
|
headers,
|
|
body
|
|
}
|
|
};
|
|
}
|
|
|
|
function extractHeader(headers: string, headerName: string): string {
|
|
const regex = new RegExp(`^${headerName}:\\s*(.+?)(?:\\r?\\n(?!\\s)|$)`, 'im');
|
|
const match = headers.match(regex);
|
|
return match ? match[1].trim() : '';
|
|
}
|
|
|
|
function extractFilename(headers: string): string {
|
|
const filenameMatch = headers.match(/filename="?([^"\r\n;]+)"?/i);
|
|
return filenameMatch ? filenameMatch[1].trim() : 'attachment';
|
|
}
|
|
|
|
function parseEmailHeaders(headers: string): { contentType: string; encoding: string; charset: string } {
|
|
const result = {
|
|
contentType: 'text/plain',
|
|
encoding: '7bit',
|
|
charset: 'utf-8'
|
|
};
|
|
|
|
// Extract content type and charset
|
|
const contentTypeMatch = headers.match(/Content-Type:\s*([^;]+)(?:;\s*charset=([^;"\r\n]+)|(?:;\s*charset="([^"]+)"))?/i);
|
|
if (contentTypeMatch) {
|
|
result.contentType = contentTypeMatch[1].trim().toLowerCase();
|
|
if (contentTypeMatch[2]) {
|
|
result.charset = contentTypeMatch[2].trim().toLowerCase();
|
|
} else if (contentTypeMatch[3]) {
|
|
result.charset = contentTypeMatch[3].trim().toLowerCase();
|
|
}
|
|
}
|
|
|
|
// Extract content transfer encoding
|
|
const encodingMatch = headers.match(/Content-Transfer-Encoding:\s*([^\s;\r\n]+)/i);
|
|
if (encodingMatch) {
|
|
result.encoding = encodingMatch[1].trim().toLowerCase();
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function decodeMIME(text: string, encoding?: string, charset: string = 'utf-8'): string {
|
|
if (!text) return '';
|
|
|
|
// Normalize encoding and charset
|
|
encoding = (encoding || '').toLowerCase();
|
|
charset = (charset || 'utf-8').toLowerCase();
|
|
|
|
try {
|
|
// Handle different encoding types
|
|
if (encoding === 'quoted-printable') {
|
|
return decodeQuotedPrintable(text, charset);
|
|
} else if (encoding === 'base64') {
|
|
return decodeBase64(text, charset);
|
|
} else if (encoding === '7bit' || encoding === '8bit' || encoding === 'binary') {
|
|
// For these encodings, we still need to handle the character set
|
|
return convertCharset(text, charset);
|
|
} else {
|
|
// Unknown encoding, return as is but still handle charset
|
|
return convertCharset(text, charset);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error decoding MIME:', error);
|
|
return text;
|
|
}
|
|
}
|
|
|
|
function decodeBase64(text: string, charset: string): string {
|
|
const cleanText = text.replace(/\s/g, '');
|
|
|
|
let binaryString;
|
|
try {
|
|
binaryString = atob(cleanText);
|
|
} catch (e) {
|
|
console.error('Base64 decoding error:', e);
|
|
return text;
|
|
}
|
|
|
|
return convertCharset(binaryString, charset);
|
|
}
|
|
|
|
function convertCharset(text: string, fromCharset: string): string {
|
|
try {
|
|
if (typeof TextDecoder !== 'undefined') {
|
|
const bytes = new Uint8Array(text.length);
|
|
for (let i = 0; i < text.length; i++) {
|
|
bytes[i] = text.charCodeAt(i) & 0xFF;
|
|
}
|
|
|
|
let normalizedCharset = fromCharset.toLowerCase();
|
|
|
|
// Normalize charset names
|
|
if (normalizedCharset === 'iso-8859-1' || normalizedCharset === 'latin1') {
|
|
normalizedCharset = 'iso-8859-1';
|
|
} else if (normalizedCharset === 'windows-1252' || normalizedCharset === 'cp1252') {
|
|
normalizedCharset = 'windows-1252';
|
|
}
|
|
|
|
const decoder = new TextDecoder(normalizedCharset);
|
|
return decoder.decode(bytes);
|
|
}
|
|
|
|
// Fallback for older browsers or unsupported charsets
|
|
if (fromCharset.toLowerCase() === 'iso-8859-1' || fromCharset.toLowerCase() === 'windows-1252') {
|
|
return text
|
|
.replace(/\xC3\xA0/g, 'à')
|
|
.replace(/\xC3\xA2/g, 'â')
|
|
.replace(/\xC3\xA9/g, 'é')
|
|
.replace(/\xC3\xA8/g, 'è')
|
|
.replace(/\xC3\xAA/g, 'ê')
|
|
.replace(/\xC3\xAB/g, 'ë')
|
|
.replace(/\xC3\xB4/g, 'ô')
|
|
.replace(/\xC3\xB9/g, 'ù')
|
|
.replace(/\xC3\xBB/g, 'û')
|
|
.replace(/\xC3\x80/g, 'À')
|
|
.replace(/\xC3\x89/g, 'É')
|
|
.replace(/\xC3\x87/g, 'Ç')
|
|
// Clean up HTML entities
|
|
.replace(/ç/g, 'ç')
|
|
.replace(/é/g, 'é')
|
|
.replace(/è/g, 'ë')
|
|
.replace(/ê/g, 'ª')
|
|
.replace(/ë/g, '«')
|
|
.replace(/û/g, '»')
|
|
.replace(/ /g, ' ')
|
|
.replace(/\xA0/g, ' ');
|
|
}
|
|
|
|
return text;
|
|
} catch (e) {
|
|
console.error('Character set conversion error:', e, 'charset:', fromCharset);
|
|
return text;
|
|
}
|
|
}
|
|
|
|
function extractHtmlBody(htmlContent: string): string {
|
|
const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
|
|
return bodyMatch ? bodyMatch[1] : htmlContent;
|
|
}
|
|
|
|
function cleanHtml(html: string): string {
|
|
if (!html) return '';
|
|
|
|
return html
|
|
// Fix common Infomaniak-specific character encodings
|
|
.replace(/=C2=A0/g, ' ') // non-breaking space
|
|
.replace(/=E2=80=93/g, '\u2013') // en dash
|
|
.replace(/=E2=80=94/g, '\u2014') // em dash
|
|
.replace(/=E2=80=98/g, '\u2018') // left single quote
|
|
.replace(/=E2=80=99/g, '\u2019') // right single quote
|
|
.replace(/=E2=80=9C/g, '\u201C') // left double quote
|
|
.replace(/=E2=80=9D/g, '\u201D') // right double quote
|
|
.replace(/=C3=A0/g, 'à')
|
|
.replace(/=C3=A2/g, 'â')
|
|
.replace(/=C3=A9/g, 'é')
|
|
.replace(/=C3=A8/g, 'è')
|
|
.replace(/=C3=AA/g, 'ê')
|
|
.replace(/=C3=AB/g, 'ë')
|
|
.replace(/=C3=B4/g, 'ô')
|
|
.replace(/=C3=B9/g, 'ù')
|
|
.replace(/=C3=xBB/g, 'û')
|
|
.replace(/=C3=80/g, 'À')
|
|
.replace(/=C3=89/g, 'É')
|
|
.replace(/=C3=87/g, 'Ç')
|
|
// Clean up HTML entities
|
|
.replace(/ç/g, 'ç')
|
|
.replace(/é/g, 'é')
|
|
.replace(/è/g, 'ë')
|
|
.replace(/ê/g, 'ª')
|
|
.replace(/ë/g, '«')
|
|
.replace(/û/g, '»')
|
|
.replace(/ /g, ' ')
|
|
.replace(/\xA0/g, ' ');
|
|
}
|
|
|
|
function decodeMimeContent(content: string): string {
|
|
if (!content) return '';
|
|
|
|
// Check if this is an Infomaniak multipart message
|
|
if (content.includes('Content-Type: multipart/')) {
|
|
const boundary = content.match(/boundary="([^"]+)"/)?.[1];
|
|
if (boundary) {
|
|
const parts = content.split('--' + boundary);
|
|
let htmlContent = '';
|
|
let textContent = '';
|
|
|
|
parts.forEach(part => {
|
|
if (part.includes('Content-Type: text/html')) {
|
|
const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
|
|
if (match) {
|
|
htmlContent = cleanHtml(match[1]);
|
|
}
|
|
} else if (part.includes('Content-Type: text/plain')) {
|
|
const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
|
|
if (match) {
|
|
textContent = cleanHtml(match[1]);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prefer HTML content if available
|
|
return htmlContent || textContent;
|
|
}
|
|
}
|
|
|
|
// If not multipart or no boundary found, clean the content directly
|
|
return cleanHtml(content);
|
|
}
|
|
|
|
// Add this helper function
|
|
const renderEmailContent = (email: Email) => {
|
|
const decodedContent = decodeMimeContent(email.body);
|
|
if (email.body.includes('Content-Type: text/html')) {
|
|
return <div dangerouslySetInnerHTML={{ __html: decodedContent }} />;
|
|
}
|
|
return <div className="whitespace-pre-wrap">{decodedContent}</div>;
|
|
};
|
|
|
|
// Add this helper function
|
|
const decodeEmailContent = (content: string, charset: string = 'utf-8') => {
|
|
return convertCharset(content, charset);
|
|
};
|
|
|
|
function cleanEmailContent(content: string): string {
|
|
// Remove or fix malformed URLs
|
|
return content.replace(/=3D"(http[^"]+)"/g, (match, url) => {
|
|
try {
|
|
return `"${decodeURIComponent(url)}"`;
|
|
} catch {
|
|
return '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Define the exact folder names from IMAP
|
|
type MailFolder = string;
|
|
|
|
// Map IMAP folders to sidebar items with icons
|
|
const getFolderIcon = (folder: string) => {
|
|
switch (folder.toLowerCase()) {
|
|
case 'inbox':
|
|
return Inbox;
|
|
case 'sent':
|
|
return Send;
|
|
case 'drafts':
|
|
return Edit;
|
|
case 'trash':
|
|
return Trash;
|
|
case 'spam':
|
|
return AlertOctagon;
|
|
case 'archive':
|
|
case 'archives':
|
|
return Archive;
|
|
default:
|
|
return Folder;
|
|
}
|
|
};
|
|
|
|
// Initial sidebar items - only INBOX
|
|
const initialSidebarItems = [
|
|
{
|
|
view: 'INBOX' as MailFolder,
|
|
label: 'Inbox',
|
|
icon: Inbox,
|
|
folder: 'INBOX'
|
|
}
|
|
];
|
|
|
|
export default function MailPage() {
|
|
const router = useRouter();
|
|
const { mails, isLoading, error, fetchMails } = useMail();
|
|
const [loading, setLoading] = useState(true);
|
|
const [accounts, setAccounts] = useState<Account[]>([
|
|
{ id: 0, name: 'All', email: '', color: 'bg-gray-500' },
|
|
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
|
|
]);
|
|
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
|
const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
|
|
const [showCompose, setShowCompose] = useState(false);
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
|
const [showBulkActions, setShowBulkActions] = useState(false);
|
|
const [showBcc, setShowBcc] = useState(false);
|
|
const [emails, setEmails] = useState<Email[]>([]);
|
|
const [composeSubject, setComposeSubject] = useState('');
|
|
const [composeTo, setComposeTo] = useState('');
|
|
const [composeCc, setComposeCc] = useState('');
|
|
const [composeBcc, setComposeBcc] = useState('');
|
|
const [composeBody, setComposeBody] = useState('');
|
|
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
|
|
const [sidebarOpen, setSidebarOpen] = useState(true);
|
|
const [foldersOpen, setFoldersOpen] = useState(true);
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
|
const [composeOpen, setComposeOpen] = useState(false);
|
|
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
|
|
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
|
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
|
const [showEmailActions, setShowEmailActions] = useState(false);
|
|
const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
|
|
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
|
|
const [showCc, setShowCc] = useState(false);
|
|
const [contentLoading, setContentLoading] = useState(false);
|
|
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
|
const [folders, setFolders] = useState<string[]>([]);
|
|
const [unreadCount, setUnreadCount] = useState(0);
|
|
const [availableFolders, setAvailableFolders] = useState<string[]>([]);
|
|
const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
const emailsPerPage = 24;
|
|
|
|
useEffect(() => {
|
|
// Check if we have mail credentials
|
|
const checkCredentials = async () => {
|
|
try {
|
|
const response = await fetch("/api/mail/login");
|
|
if (!response.ok) {
|
|
// No credentials found, redirect to login
|
|
router.push("/mail/login");
|
|
return;
|
|
}
|
|
// We have credentials, fetch mails
|
|
fetchMails();
|
|
} catch (err) {
|
|
console.error("Error checking credentials:", err);
|
|
router.push("/mail/login");
|
|
}
|
|
};
|
|
|
|
checkCredentials();
|
|
}, [router, fetchMails]);
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div>Error: {error}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<MailToolbar />
|
|
<MailList mails={mails} />
|
|
</div>
|
|
);
|
|
} |