${error.message || 'Failed to load message.'}
` + }); + } finally { + if (requestToken !== messageRequestTokenRef.current) return; + setIsLoadingMessage(false); + } + }; + + const handleOpenMessageWindow = () => { + if (!selectedEmailInfo) return; + const popup = window.open('about:blank', '_blank', 'width=1200,height=800'); + if (!popup) return; + + const escapeHtml = (value) => String(value || '') + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); + + const subject = escapeHtml(selectedEmailInfo.subject || '(No Subject)'); + const sender = escapeHtml(selectedEmailInfo.sender || 'Unknown'); + const body = activeMessageData?.html || 'No content.
'; + + const popupHtml = ` + + + +
+
+
+`;
+
+ try {
+ popup.document.open();
+ popup.document.write(popupHtml);
+ popup.document.close();
+ } catch {
+ popup.location.href = `data:text/html;charset=utf-8,${encodeURIComponent(popupHtml)}`;
+ }
+ };
+
+ const handleDeleteMessage = async () => {
+ if (!selectedEmailInfo?.id) return;
+ const confirmed = window.confirm('Delete this email?');
+ if (!confirmed) return;
+
+ try {
+ const uid = Number(selectedEmailInfo.id);
+ await postJson('/api/webmail/delete', {
+ ...authPayload,
+ folder: activeFolder || 'INBOX',
+ uid
+ });
+
+ setEmails((prev) => prev.filter((msg) => Number(msg?.id) !== uid));
+ setSelectedEmailInfo(null);
+ setActiveMessageData(null);
+ setSelectedEmailIds((prev) => prev.filter((id) => Number(id) !== uid));
+
+ const accountId = makeAccountId(authPayload);
+ setViewCacheByAccount((prev) => {
+ const accountCache = prev?.[accountId];
+ if (!accountCache) return prev;
+ const folderCache = accountCache?.[activeFolder];
+ if (!folderCache) return prev;
+
+ const nextFolderCache = {};
+ for (const directionKey of Object.keys(folderCache)) {
+ const directionView = folderCache[directionKey];
+ const directionEmails = Array.isArray(directionView?.emails) ? directionView.emails : [];
+ const filtered = directionEmails.filter((msg) => Number(msg?.id) !== uid);
+ const total = Math.max(0, Number(directionView?.paging?.total || filtered.length) - 1);
+ const nextOffset = Math.min(Number(directionView?.paging?.nextOffset || filtered.length), filtered.length);
+ const hasMore = nextOffset < total;
+ nextFolderCache[directionKey] = {
+ ...directionView,
+ emails: filtered,
+ paging: {
+ ...(directionView?.paging || {}),
+ total,
+ nextOffset,
+ hasMore,
+ loadedAll: !hasMore
+ }
+ };
+ }
+
+ return {
+ ...prev,
+ [accountId]: {
+ ...accountCache,
+ [activeFolder]: nextFolderCache
+ }
+ };
+ });
+
+ await fetchInbox(activeFolder, authPayload, true, credentials, {
+ keepSelection: false,
+ silent: true,
+ syncOnly: true
+ });
+ } catch (error) {
+ setLoginError(error.message || 'Failed to delete email.');
+ }
+ };
+
+ const handleEmptyTrash = async () => {
+ if (!isTrashFolder) return;
+ const confirmed = window.confirm('Permanently delete all emails in Trash?');
+ if (!confirmed) return;
+
+ setIsEmptyingTrash(true);
+ try {
+ await postJson('/api/webmail/empty-trash', {
+ ...authPayload,
+ folder: activeFolder || 'INBOX.Trash'
+ });
+
+ setEmails([]);
+ setSelectedEmailInfo(null);
+ setActiveMessageData(null);
+ setSelectedEmailIds([]);
+
+ const accountId = makeAccountId(authPayload);
+ setViewCacheByAccount((prev) => {
+ const accountCache = prev?.[accountId];
+ if (!accountCache) return prev;
+ const folderCache = accountCache?.[activeFolder] || {};
+ const nextFolderCache = {};
+ for (const key of Object.keys(folderCache)) {
+ nextFolderCache[key] = {
+ ...(folderCache[key] || {}),
+ emails: [],
+ paging: {
+ ...(folderCache[key]?.paging || {}),
+ total: 0,
+ nextOffset: 0,
+ hasMore: false,
+ loadedAll: true
+ }
+ };
+ }
+ return {
+ ...prev,
+ [accountId]: {
+ ...accountCache,
+ [activeFolder]: nextFolderCache
+ }
+ };
+ });
+ } catch (error) {
+ setLoginError(error.message || 'Failed to empty trash.');
+ } finally {
+ setIsEmptyingTrash(false);
+ }
+ };
+
+ const fetchQuota = async (authOverride = authPayload) => {
+ const accountId = makeAccountId(authOverride);
+ try {
+ const data = await postJson('/api/webmail/quota', authOverride);
+ setQuotaByAccount((prev) => ({
+ ...prev,
+ [accountId]: data?.supported
+ ? {
+ supported: true,
+ usedBytes: Number(data.usedBytes || 0),
+ limitBytes: Number(data.limitBytes || 0),
+ percent: Number.isFinite(data.percent) ? data.percent : 0
+ }
+ : data?.estimated
+ ? {
+ supported: false,
+ estimated: true,
+ usedBytes: Number(data.usedBytes || 0)
+ }
+ : { supported: false }
+ }));
+ } catch {
+ setQuotaByAccount((prev) => ({ ...prev, [accountId]: { supported: false } }));
+ }
+ };
+
+ const fetchFolderSizes = async (authOverride = authPayload) => {
+ const accountId = makeAccountId(authOverride);
+ try {
+ const data = await postJson('/api/webmail/folder-sizes', authOverride);
+ const sizes = data?.sizes && typeof data.sizes === 'object' ? data.sizes : {};
+ setFolderSizesByAccount((prev) => ({ ...prev, [accountId]: sizes }));
+ } catch {
+ setFolderSizesByAccount((prev) => ({ ...prev, [accountId]: {} }));
+ }
+ };
+
+ const sendReply = async () => {
+ if (!replyText.trim() || !selectedEmailInfo) return;
+
+ setIsSending(true);
+ try {
+ const smtpHost = authPayload.host.replace(/^imap\./i, 'smtp.');
+ const to = extractEmail(selectedEmailInfo.sender);
+
+ await postJson('/api/webmail/send', {
+ user: authPayload.user,
+ password: credentials.password,
+ host: smtpHost,
+ port: 465,
+ to,
+ subject: `Re: ${selectedEmailInfo.subject || ''}`,
+ body: `
+
+ ${subject}
+ +${body}
+ ${replyText.replace(/\n/g, '
')}
+
+ );
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ {(folders.length ? folders : [{ name: 'INBOX', unseen: 0, total: 0 }]).map((folder, index) => {
+ const folderName = typeof folder === 'string' ? folder : folder.name;
+ const displayFolderName = folderName === 'INBOX'
+ ? 'INBOX'
+ : String(folderName || '').replace(/^INBOX\./i, '');
+ const unseen = folder.unseen || 0;
+ const total = folder.total || 0;
+ const isActive = activeFolder === folderName;
+ const sizeBytes = Number(activeFolderSizes[folderName] || 0);
+ const sizeLabel = sizeBytes > 0 ? formatBytes(sizeBytes) : '';
+
+ return (
+
+
+ fetchInbox(folderName, authPayload, true, credentials, {
+ resetToFirstPage: true,
+ syncOnly: true
+ })}
+ >
+
+ {displayFolderName}
+ {unseen > 0 && {unseen}}
+ {total > 0 && {total}}
+ {sizeLabel && {sizeLabel}}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ {activeQuota?.supported ? (
+
+
+ ) : activeQuota?.estimated ? (
+
+ Storage {formatBytes(activeQuota.usedBytes)} / {formatBytes(activeQuota.limitBytes)}
+
+
+
+
+ ) : (
+
+ Total mailbox size: {formatBytes(activeQuota.usedBytes)}
+
+ Checking storage usage...
+ )}
+ {savedAccounts.length > 1 ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+ setSearchQuery(e.target.value)}
+ />
+
+
+
+
+ {activeFolder || 'INBOX'}
+
+
+
+ {selectedCount > 0 && (
+
+ )}
+ {isTrashFolder && selectedCount === 0 && (
+
+ )}
+
+
+ {isLoadingInbox ? (
+
+ Loading messages...
+ ) : filteredEmails.length === 0 ? (
+
+ {emails.length === 0 ? 'No emails found.' : 'No results for your search.'}
+
+ ) : (
+ displayedEmails.map((email) => {
+ const isSelected = selectedEmailInfo?.id === email.id;
+ const isChecked = selectedEmailIds.includes(Number(email.id));
+ const simpleSender = String(email.sender || '').split('<')[0].trim() || email.sender;
+ const senderInitial = getSenderInitial(simpleSender);
+
+ return (
+ fetchMessage(email)}
+ >
+
+ toggleEmailSelection(email.id)}
+ onClick={(e) => e.stopPropagation()}
+ aria-label="Select email"
+ />
+
+ );
+ })
+ )}
+ {canShowLoadMore && (
+
+
+
+ {simpleSender || 'Unknown'}
+
+ {String(email.time || '').split(',')[0]}
+
+ {email.subject || '(No Subject)'}
+
+
+
+
+ )}
+
+ {!selectedEmailInfo ? (
+
+
+
+ ) : (
+ <>
+ Select a message from the list.
+
+
+
+
+
+
+
+
+
+
+
+
+ {(() => {
+ const rawSender = String(selectedEmailInfo.sender || 'Unknown');
+ const senderMatch = rawSender.match(/^(.*?)\s*<([^>]+)>$/);
+ const senderName = (senderMatch?.[1] || rawSender).trim().replace(/^"(.*)"$/, '$1') || 'Unknown';
+ const senderEmail = (senderMatch?.[2] || rawSender).trim();
+ return (
+ <>
+
+
+
+
+ {selectedEmailInfo.subject || '(No Subject)'}
+
+
+
+
+
+
+
+ {senderName}
+ {senderEmail}
+
+
+
+ );
+ })()}
+
+ {isLoadingMessage ? (
+
+ Loading message...
+ ) : activeMessageData?.html ? (
+
+ ) : (
+ No content.
+ )}
+
+
+
+ )}
+
+ setReplyText(e.target.value)}
+ onKeyDown={(e) => e.key === 'Enter' && sendReply()}
+ />
+
+
+ {isSending ? (
+ Sending...
+ ) : (
+
+ )}
+
+
+
+
+ {!isLoggedIn ? (
+ Webmail
+Mailbox and message management
+This layout uses the same page frame as the homepage.
+
+
+ ) : (
+ {loginForm}
+
+
+
+
+ Login notes
+-
+
- Use your IMAP credentials including server and port. +
- Your login stays saved in this browser until you click logout. +
- After login, your mailbox is loaded automatically. +
- Errors are shown directly in the form. +
{webmailWorkspace}
+ )}
+
+ {isRestoringSession && (
+ Restoring saved session...
+ )} + + ); +} + + + + + + + + diff --git a/nx-webmail/src/main.jsx b/nx-webmail/src/main.jsx new file mode 100644 index 0000000..d2ad0a9 --- /dev/null +++ b/nx-webmail/src/main.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; +import Webmail from './components/Webmail.jsx'; +import './styles/webmail.css'; +import 'remixicon/fonts/remixicon.css'; + +createRoot(document.getElementById('root')).render(