alma/NeahFront9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mail page imap connection mime 5 bis rest 16 login page 3

Browse Source
This commit is contained in:
alma 2025-04-15 23:36:57 +02:00
parent fae693d06e
commit 8b0773cfb9
1 changed files with 79 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
app/mail/page.tsx
View File

@ -1,25 +1,13 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
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 { Label } from "@/components/ui/label";
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 } from 'lucide-react';
import { useRouter } from 'next/navigation'; 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 { 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 } from 'lucide-react';
interface Account { interface Account {
id: number; id: number;
@ -30,17 +18,15 @@ interface Account {
interface Email { interface Email {
id: string; id: string;
accountId: string;
from: string; from: string;
fromName?: string; fromName?: string;
to: string; to: string;
subject: string; subject: string;
body: string; body: string;
preview: string; date: string;
category: string;
date: Date;
read: boolean; read: boolean;
starred: boolean; starred: boolean;
category?: string;
} }
// Improved MIME Decoder Implementation for Infomaniak // Improved MIME Decoder Implementation for Infomaniak
@ -337,7 +323,7 @@ function cleanHtml(html: string): string {
.replace(/=C3=AB/g, 'ë') .replace(/=C3=AB/g, 'ë')
.replace(/=C3=B4/g, 'ô') .replace(/=C3=B4/g, 'ô')
.replace(/=C3=B9/g, 'ù') .replace(/=C3=B9/g, 'ù')
.replace(/=C3=BB/g, 'û') .replace(/=C3=xBB/g, 'û')
.replace(/=C3=80/g, 'À') .replace(/=C3=80/g, 'À')
.replace(/=C3=89/g, 'É') .replace(/=C3=89/g, 'É')
.replace(/=C3=87/g, 'Ç') .replace(/=C3=87/g, 'Ç')
@ -389,9 +375,32 @@ function decodeMimeContent(content: string): string {
export default function MailPage() { export default function MailPage() {
const router = useRouter(); const router = useRouter();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [accounts, setAccounts] = useState<Account[]>([
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' },
{ id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
]);
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
const [currentView, setCurrentView] = useState('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 [error, setError] = useState<string | null>(null);
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('');
// Check for stored credentials
useEffect(() => { useEffect(() => {
// Check for stored credentials
const storedCredentials = localStorage.getItem('imapCredentials'); const storedCredentials = localStorage.getItem('imapCredentials');
if (!storedCredentials) { if (!storedCredentials) {
router.push('/mail/login'); router.push('/mail/login');
@ -400,6 +409,7 @@ export default function MailPage() {
} }
}, [router]); }, [router]);
// Show loading state if credentials are not loaded
if (loading) { if (loading) {
return ( return (
<div className="flex min-h-screen items-center justify-center"> <div className="flex min-h-screen items-center justify-center">
@ -411,36 +421,6 @@ export default function MailPage() {
); );
} }
// Single IMAP account for now
const [accounts, setAccounts] = useState<Account[]>([
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' },
{ id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
]);
// State declarations
const [selectedAccount, setSelectedAccount] = useState(1);
const [currentView, setCurrentView] = useState('inbox');
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
const [sidebarOpen, setSidebarOpen] = useState(true);
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 [selectedEmails, setSelectedEmails] = useState<string[]>([]);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
const [showBulkActions, setShowBulkActions] = useState(false);
const [showCc, setShowCc] = useState(false);
const [showBcc, setShowBcc] = useState(false);
const [emails, setEmails] = useState<Email[]>([]);
const [error, setError] = useState<string | null>(null);
const [composeSubject, setComposeSubject] = useState('');
const [composeRecipient, setComposeRecipient] = useState('');
const [composeContent, setComposeContent] = useState('');
// Fetch emails from IMAP API // Fetch emails from IMAP API
const loadEmails = async () => { const loadEmails = async () => {
setLoading(true); setLoading(true);
@ -512,22 +492,22 @@ export default function MailPage() {
...accounts ...accounts
]; ];
// Filter emails based on current view // Filter emails based on selected account and current view
const filteredEmails = emails.filter(email => { const filteredEmails = emails.filter(email => {
if (selectedAccount === 0) return true; if (selectedAccount) {
// Use the email address to match instead of accountId return email.to === selectedAccount.email;
const selectedAccountEmail = accounts.find(acc => acc.id === selectedAccount)?.email; }
return email.from === selectedAccountEmail || email.to === selectedAccountEmail; return true;
}).filter(email => { }).filter(email => {
switch (currentView) { switch (currentView) {
case "inbox": case 'inbox':
return email.category === "inbox"; return true;
case "starred": case 'starred':
return email.starred; return email.starred;
case "sent": case 'sent':
return email.category === "sent"; return email.category === 'sent';
case "trash": case 'trash':
return email.category === "trash"; return email.category === 'trash';
default: default:
return true; return true;
} }
@ -552,8 +532,13 @@ export default function MailPage() {
}; };
// Update email click handler to work without mark-read endpoint // Update email click handler to work without mark-read endpoint
const handleEmailSelect = (email: Email) => { const handleEmailSelect = (emailId: string) => {
setSelectedEmail(selectedEmail?.id === email.id ? null : email); setSelectedEmails(prev => {
if (prev.includes(emailId)) {
return prev.filter(id => id !== emailId);
}
return [...prev, emailId];
});
}; };
// Toggle starred status // Toggle starred status
@ -578,45 +563,23 @@ export default function MailPage() {
}; };
// Handle bulk selection // Handle bulk selection
const toggleEmailSelection = (emailId: string, e: React.MouseEvent) => {
e.stopPropagation();
setSelectedEmails(prev =>
prev.includes(emailId)
? prev.filter(id => id !== emailId)
: [...prev, emailId]
);
setShowBulkActions(true);
};
// Handle select all
const toggleSelectAll = () => { const toggleSelectAll = () => {
if (selectedEmails.length === filteredEmails.length) { if (selectedEmails.length === filteredEmails.length) {
setSelectedEmails([]); setSelectedEmails([]);
setShowBulkActions(false);
} else { } else {
setSelectedEmails(filteredEmails.map(email => email.id)); setSelectedEmails(filteredEmails.map(email => email.id));
setShowBulkActions(true);
} }
}; };
// Handle bulk delete // Handle bulk delete
const handleBulkDelete = () => { const handleBulkDelete = () => {
setDeleteType('emails');
setShowDeleteConfirm(true); setShowDeleteConfirm(true);
}; };
// Handle delete confirmation // Handle delete confirmation
const handleDeleteConfirm = async () => { const handleDeleteConfirm = async () => {
try { try {
if (deleteType === 'email' && itemToDelete) { if (selectedEmails.length > 0) {
await fetch('/api/mail/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ emailIds: [itemToDelete.toString()] })
});
setEmails(emails.filter(email => email.id !== itemToDelete.toString()));
setSelectedEmail(null);
} else if (deleteType === 'emails') {
await fetch('/api/mail/delete', { await fetch('/api/mail/delete', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@ -667,7 +630,7 @@ export default function MailPage() {
const selectedEmailData = getSelectedEmail(); const selectedEmailData = getSelectedEmail();
if (!selectedEmailData) return; if (!selectedEmailData) return;
setComposeOpen(true); setShowCompose(true);
const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`; const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
let to = ''; let to = '';
let content = ''; let content = '';
@ -687,21 +650,10 @@ export default function MailPage() {
} }
setComposeSubject(subject); setComposeSubject(subject);
setComposeRecipient(to); setComposeTo(to);
setComposeContent(content); setComposeBody(content);
}; };
if (loading) {
return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
<div className="text-center">
<Mail className="h-12 w-12 mb-4 text-gray-400 animate-pulse mx-auto" />
<p className="text-gray-600">Loading your emails...</p>
</div>
</div>
);
}
if (error) { if (error) {
return ( return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12"> <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@ -724,7 +676,7 @@ export default function MailPage() {
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12"> <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
{/* Sidebar */} {/* Sidebar */}
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}> ${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
{/* Courrier Title */} {/* Courrier Title */}
<div className="p-3 border-b border-gray-100"> <div className="p-3 border-b border-gray-100">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -737,7 +689,7 @@ export default function MailPage() {
<div className="p-3 border-b border-gray-100"> <div className="p-3 border-b border-gray-100">
<Button <Button
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2" className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
onClick={() => setComposeOpen(true)} onClick={() => setShowCompose(true)}
> >
<div className="flex items-center"> <div className="flex items-center">
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
@ -752,19 +704,19 @@ export default function MailPage() {
<Button <Button
variant="ghost" variant="ghost"
className="w-full justify-between mb-2 text-sm font-medium text-gray-500" className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)} onClick={() => setFoldersOpen(!foldersOpen)}
> >
<span>Accounts</span> <span>Accounts</span>
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />} {foldersOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button> </Button>
{accountsDropdownOpen && ( {foldersOpen && (
<div className="space-y-1 pl-2"> <div className="space-y-1 pl-2">
{/* All Accounts Option */} {/* All Accounts Option */}
<Button <Button
variant="ghost" variant="ghost"
className="w-full justify-start px-2 py-1.5 text-sm" className="w-full justify-start px-2 py-1.5 text-sm"
onClick={() => setSelectedAccount(0)} onClick={() => setSelectedAccount(null)}
> >
<div className="flex items-center gap-2 w-full"> <div className="flex items-center gap-2 w-full">
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div> <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
@ -778,7 +730,7 @@ export default function MailPage() {
<Button <Button
variant="ghost" variant="ghost"
className="w-full justify-between px-2 py-1.5 text-sm group" className="w-full justify-between px-2 py-1.5 text-sm group"
onClick={() => setSelectedAccount(account.id)} onClick={() => setSelectedAccount(account)}
> >
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -793,7 +745,7 @@ export default function MailPage() {
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setShowAccountActions(account.id); setShowSettings(true);
}} }}
> >
<MoreVertical className="h-4 w-4" /> <MoreVertical className="h-4 w-4" />
@ -801,14 +753,14 @@ export default function MailPage() {
</Button> </Button>
{/* Account Actions Dropdown */} {/* Account Actions Dropdown */}
{showAccountActions === account.id && ( {showSettings && (
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10"> <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
<button <button
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
onClick={() => { onClick={() => {
const newName = prompt('Enter new account name:', account.name); const newName = prompt('Enter new account name:', account.name);
if (newName) handleEditAccount(account.id, newName); if (newName) handleEditAccount(account.id, newName);
setShowAccountActions(null); setShowSettings(false);
}} }}
> >
<Edit className="h-4 w-4 inline-block mr-2" /> <Edit className="h-4 w-4 inline-block mr-2" />
@ -817,10 +769,7 @@ export default function MailPage() {
<button <button
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100" className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
onClick={() => { onClick={() => {
setDeleteType('account'); setShowSettings(false);
setItemToDelete(account.id);
setShowDeleteConfirm(true);
setShowAccountActions(null);
}} }}
> >
<Trash2 className="h-4 w-4 inline-block mr-2" /> <Trash2 className="h-4 w-4 inline-block mr-2" />
@ -895,17 +844,17 @@ export default function MailPage() {
<Button <Button
variant="ghost" variant="ghost"
className="w-full justify-between py-2 text-gray-600 hover:text-gray-900" className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)} onClick={() => setFoldersOpen(!foldersOpen)}
> >
<div className="flex items-center"> <div className="flex items-center">
<Folder className="h-4 w-4 mr-2" /> <Folder className="h-4 w-4 mr-2" />
{sidebarOpen && <span>Folders</span>} {sidebarOpen && <span>Folders</span>}
</div> </div>
{sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)} {foldersOpen && (foldersOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
</Button> </Button>
{/* Folders Dropdown */} {/* Folders Dropdown */}
{foldersDropdownOpen && sidebarOpen && ( {foldersOpen && sidebarOpen && (
<ul className="mt-1 space-y-1"> <ul className="mt-1 space-y-1">
{folders.map(folder => ( {folders.map(folder => (
<li key={folder.id}> <li key={folder.id}>
@ -937,9 +886,11 @@ export default function MailPage() {
<div className="p-4 border-b border-gray-100 flex justify-between items-center"> <div className="p-4 border-b border-gray-100 flex justify-between items-center">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{filteredEmails.length > 0 && ( {filteredEmails.length > 0 && (
<Checkbox <input
type="checkbox"
checked={selectedEmails.length === filteredEmails.length} checked={selectedEmails.length === filteredEmails.length}
onCheckedChange={toggleSelectAll} onChange={toggleSelectAll}
className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
/> />
)} )}
<h2 className="text-lg font-semibold text-gray-800 capitalize"> <h2 className="text-lg font-semibold text-gray-800 capitalize">
@ -1010,7 +961,7 @@ export default function MailPage() {
className={`flex items-center p-4 hover:bg-gray-50 transition-colors duration-150 cursor-pointer ${ className={`flex items-center p-4 hover:bg-gray-50 transition-colors duration-150 cursor-pointer ${
selectedEmail?.id === email.id ? 'bg-blue-50' : '' selectedEmail?.id === email.id ? 'bg-blue-50' : ''
} ${!email.read ? 'bg-blue-50/20' : ''}`} } ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email)} onClick={() => handleEmailSelect(email.id)}
> >
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between space-x-4"> <div className="flex items-center justify-between space-x-4">
@ -1031,7 +982,7 @@ export default function MailPage() {
{email.subject} {email.subject}
</p> </p>
<span className="text-xs text-gray-500 whitespace-nowrap"> <span className="text-xs text-gray-500 whitespace-nowrap">
{formatDate(email.date.toISOString())} {formatDate(email.date)}
</span> </span>
</div> </div>
</div> </div>
@ -1110,8 +1061,6 @@ export default function MailPage() {
size="icon" size="icon"
className="text-gray-400 hover:text-gray-900" className="text-gray-400 hover:text-gray-900"
onClick={() => { onClick={() => {
setDeleteType('email');
setItemToDelete(parseInt(selectedEmail.id));
setShowDeleteConfirm(true); setShowDeleteConfirm(true);
}} }}
> >
@ -1135,7 +1084,7 @@ export default function MailPage() {
</p> </p>
</div> </div>
<div className="ml-auto text-sm text-gray-500"> <div className="ml-auto text-sm text-gray-500">
{formatDate(selectedEmail.date.toISOString())} {formatDate(selectedEmail.date)}
</div> </div>
</div> </div>