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';
import { useState, useEffect } 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 { useEffect, useState } 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 { 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 {
id: number;
@ -30,17 +18,15 @@ interface Account {
interface Email {
id: string;
accountId: string;
from: string;
fromName?: string;
to: string;
subject: string;
body: string;
preview: string;
category: string;
date: Date;
date: string;
read: boolean;
starred: boolean;
category?: string;
}
// Improved MIME Decoder Implementation for Infomaniak
@ -337,7 +323,7 @@ function cleanHtml(html: string): string {
.replace(/=C3=AB/g, 'ë')
.replace(/=C3=B4/g, 'ô')
.replace(/=C3=B9/g, 'ù')
.replace(/=C3=BB/g, 'û')
.replace(/=C3=xBB/g, 'û')
.replace(/=C3=80/g, 'À')
.replace(/=C3=89/g, 'É')
.replace(/=C3=87/g, 'Ç')
@ -389,9 +375,32 @@ function decodeMimeContent(content: string): string {
export default function MailPage() {
const router = useRouter();
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(() => {
// Check for stored credentials
const storedCredentials = localStorage.getItem('imapCredentials');
if (!storedCredentials) {
router.push('/mail/login');
@ -400,6 +409,7 @@ export default function MailPage() {
}
}, [router]);
// Show loading state if credentials are not loaded
if (loading) {
return (
<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
const loadEmails = async () => {
setLoading(true);
@ -512,22 +492,22 @@ export default function MailPage() {
...accounts
];
// Filter emails based on current view
// Filter emails based on selected account and current view
const filteredEmails = emails.filter(email => {
if (selectedAccount === 0) return true;
// Use the email address to match instead of accountId
const selectedAccountEmail = accounts.find(acc => acc.id === selectedAccount)?.email;
return email.from === selectedAccountEmail || email.to === selectedAccountEmail;
if (selectedAccount) {
return email.to === selectedAccount.email;
}
return true;
}).filter(email => {
switch (currentView) {
case "inbox":
return email.category === "inbox";
case "starred":
case 'inbox':
return true;
case 'starred':
return email.starred;
case "sent":
return email.category === "sent";
case "trash":
return email.category === "trash";
case 'sent':
return email.category === 'sent';
case 'trash':
return email.category === 'trash';
default:
return true;
}
@ -552,8 +532,13 @@ export default function MailPage() {
};
// Update email click handler to work without mark-read endpoint
const handleEmailSelect = (email: Email) => {
setSelectedEmail(selectedEmail?.id === email.id ? null : email);
const handleEmailSelect = (emailId: string) => {
setSelectedEmails(prev => {
if (prev.includes(emailId)) {
return prev.filter(id => id !== emailId);
}
return [...prev, emailId];
});
};
// Toggle starred status
@ -578,45 +563,23 @@ export default function MailPage() {
};
// 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 = () => {
if (selectedEmails.length === filteredEmails.length) {
setSelectedEmails([]);
setShowBulkActions(false);
} else {
setSelectedEmails(filteredEmails.map(email => email.id));
setShowBulkActions(true);
}
};
// Handle bulk delete
const handleBulkDelete = () => {
setDeleteType('emails');
setShowDeleteConfirm(true);
};
// Handle delete confirmation
const handleDeleteConfirm = async () => {
try {
if (deleteType === 'email' && itemToDelete) {
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') {
if (selectedEmails.length > 0) {
await fetch('/api/mail/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@ -667,7 +630,7 @@ export default function MailPage() {
const selectedEmailData = getSelectedEmail();
if (!selectedEmailData) return;
setComposeOpen(true);
setShowCompose(true);
const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
let to = '';
let content = '';
@ -687,21 +650,10 @@ export default function MailPage() {
}
setComposeSubject(subject);
setComposeRecipient(to);
setComposeContent(content);
setComposeTo(to);
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) {
return (
<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">
{/* 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
${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 */}
<div className="p-3 border-b border-gray-100">
<div className="flex items-center gap-2">
@ -737,7 +689,7 @@ export default function MailPage() {
<div className="p-3 border-b border-gray-100">
<Button
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">
<PlusIcon className="h-4 w-4" />
@ -752,19 +704,19 @@ export default function MailPage() {
<Button
variant="ghost"
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
onClick={() => setFoldersOpen(!foldersOpen)}
>
<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>
{accountsDropdownOpen && (
{foldersOpen && (
<div className="space-y-1 pl-2">
{/* All Accounts Option */}
<Button
variant="ghost"
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="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
@ -778,7 +730,7 @@ export default function MailPage() {
<Button
variant="ghost"
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 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"
onClick={(e) => {
e.stopPropagation();
setShowAccountActions(account.id);
setShowSettings(true);
}}
>
<MoreVertical className="h-4 w-4" />
@ -801,14 +753,14 @@ export default function MailPage() {
</Button>
{/* 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">
<button
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
onClick={() => {
const newName = prompt('Enter new account name:', account.name);
if (newName) handleEditAccount(account.id, newName);
setShowAccountActions(null);
setShowSettings(false);
}}
>
<Edit className="h-4 w-4 inline-block mr-2" />
@ -817,10 +769,7 @@ export default function MailPage() {
<button
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
onClick={() => {
setDeleteType('account');
setItemToDelete(account.id);
setShowDeleteConfirm(true);
setShowAccountActions(null);
setShowSettings(false);
}}
>
<Trash2 className="h-4 w-4 inline-block mr-2" />
@ -895,17 +844,17 @@ export default function MailPage() {
<Button
variant="ghost"
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">
<Folder className="h-4 w-4 mr-2" />
{sidebarOpen && <span>Folders</span>}
</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>
{/* Folders Dropdown */}
{foldersDropdownOpen && sidebarOpen && (
{foldersOpen && sidebarOpen && (
<ul className="mt-1 space-y-1">
{folders.map(folder => (
<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="flex items-center gap-4">
{filteredEmails.length > 0 && (
<Checkbox
<input
type="checkbox"
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">
@ -1010,7 +961,7 @@ export default function MailPage() {
className={`flex items-center p-4 hover:bg-gray-50 transition-colors duration-150 cursor-pointer ${
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
} ${!email.read ? 'bg-blue-50/20' : ''}`}
onClick={() => handleEmailSelect(email)}
onClick={() => handleEmailSelect(email.id)}
>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between space-x-4">
@ -1031,7 +982,7 @@ export default function MailPage() {
{email.subject}
</p>
<span className="text-xs text-gray-500 whitespace-nowrap">
{formatDate(email.date.toISOString())}
{formatDate(email.date)}
</span>
</div>
</div>
@ -1110,8 +1061,6 @@ export default function MailPage() {
size="icon"
className="text-gray-400 hover:text-gray-900"
onClick={() => {
setDeleteType('email');
setItemToDelete(parseInt(selectedEmail.id));
setShowDeleteConfirm(true);
}}
>
@ -1135,7 +1084,7 @@ export default function MailPage() {
</p>
</div>
<div className="ml-auto text-sm text-gray-500">
{formatDate(selectedEmail.date.toISOString())}
{formatDate(selectedEmail.date)}
</div>
</div>