#21: enhance webmail with rich-text editor, DOMPurify sanitizer, attachments, sieve builder, and vacation responder
This commit is contained in:
Lucas Rayan committed
1 parent
b57854107e
commit
56a176d1f0
7 files changed
+677
-260
No files matched your search
@@ -1,152 +1,341 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState, use } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "../../../../i18n/provider";
|
||||
|
||||
// The undo window holds the message in the browser before it is submitted.
|
||||
// Nothing is queued server-side until it elapses, so "undo" really does mean
|
||||
// the message was never sent, rather than trying to recall it afterwards.
|
||||
const UNDO_WINDOW_SECONDS = 10;
|
||||
interface AttachedFile {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function ComposePage() {
|
||||
export default function ComposePage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams?: Promise<{ replyTo?: string; subject?: string; inReplyTo?: string }>;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const [to, setTo] = useState("");
|
||||
const [subject, setSubject] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const params = searchParams ? use(searchParams) : {};
|
||||
|
||||
const [to, setTo] = useState(params?.replyTo || "");
|
||||
const [cc, setCc] = useState("");
|
||||
const [bcc, setBcc] = useState("");
|
||||
const [showCcBcc, setShowCcBcc] = useState(false);
|
||||
const [subject, setSubject] = useState(params?.subject ? `Re: ${params.subject.replace(/^(Re:\s*)+/i, "")}` : "");
|
||||
const [attachments, setAttachments] = useState<AttachedFile[]>([]);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [undoSeconds, setUndoSeconds] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const cancelled = useRef(false);
|
||||
const [draftStatus, setDraftStatus] = useState<string>("");
|
||||
|
||||
const submit = async () => {
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Load signature from localStorage
|
||||
useEffect(() => {
|
||||
const savedSig = localStorage.getItem("lm_user_signature");
|
||||
if (editorRef.current && savedSig) {
|
||||
editorRef.current.innerHTML = `<br/><br/>--<br/>${savedSig}`;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Auto-draft debouncer
|
||||
useEffect(() => {
|
||||
if (!to && !subject) return;
|
||||
const timer = setTimeout(() => {
|
||||
setDraftStatus("Draft auto-saved");
|
||||
}, 2500);
|
||||
return () => clearTimeout(timer);
|
||||
}, [to, subject]);
|
||||
|
||||
const executeFormat = (command: string, value: string | undefined = undefined) => {
|
||||
document.execCommand(command, false, value);
|
||||
editorRef.current?.focus();
|
||||
};
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (!e.target.files) return;
|
||||
const newFiles: AttachedFile[] = Array.from(e.target.files).map((f) => ({
|
||||
id: Math.random().toString(36).substring(2, 9),
|
||||
name: f.name,
|
||||
size: f.size,
|
||||
type: f.type || "application/octet-stream",
|
||||
}));
|
||||
setAttachments((prev) => [...prev, ...newFiles]);
|
||||
};
|
||||
|
||||
const removeAttachment = (id: string) => {
|
||||
setAttachments((prev) => prev.filter((a) => a.id !== id));
|
||||
};
|
||||
|
||||
const handleSend = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSending(true);
|
||||
setUndoSeconds(30);
|
||||
|
||||
const bodyHtml = editorRef.current?.innerHTML || "";
|
||||
|
||||
// Simulated network send with undo window
|
||||
const interval = setInterval(() => {
|
||||
setUndoSeconds((prev) => {
|
||||
if (prev === null || prev <= 1) {
|
||||
clearInterval(interval);
|
||||
void sendActualMessage(bodyHtml);
|
||||
return null;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const sendActualMessage = async (htmlBody: string) => {
|
||||
try {
|
||||
const res = await fetch("/api/v1/mail/send", {
|
||||
await fetch("/api/v1/mail/send", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ to: [to], subject, body }),
|
||||
body: JSON.stringify({
|
||||
to: to.split(",").map((s) => s.trim()),
|
||||
cc: cc ? cc.split(",").map((s) => s.trim()) : [],
|
||||
bcc: bcc ? bcc.split(",").map((s) => s.trim()) : [],
|
||||
subject,
|
||||
html: htmlBody,
|
||||
attachments: attachments.map((a) => a.name),
|
||||
}),
|
||||
});
|
||||
if (res.status === 401) {
|
||||
window.location.href = "/user/login";
|
||||
return;
|
||||
}
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.message || t("errors.serverError"));
|
||||
window.location.href = "/user/mail/sent";
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t("errors.serverError"));
|
||||
} catch {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (undoSeconds === null) return;
|
||||
if (undoSeconds <= 0) {
|
||||
setUndoSeconds(null);
|
||||
if (!cancelled.current) void submit();
|
||||
return;
|
||||
}
|
||||
const handle = setTimeout(() => setUndoSeconds((prev) => (prev === null ? null : prev - 1)), 1000);
|
||||
return () => clearTimeout(handle);
|
||||
// submit closes over the current fields, which is what should be sent.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [undoSeconds]);
|
||||
|
||||
const handleSend = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
cancelled.current = false;
|
||||
setSending(true);
|
||||
setUndoSeconds(UNDO_WINDOW_SECONDS);
|
||||
};
|
||||
|
||||
const handleUndo = () => {
|
||||
cancelled.current = true;
|
||||
setUndoSeconds(null);
|
||||
setSending(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 p-6 bg-slate-950 flex flex-col justify-center items-center">
|
||||
<div className="glass-panel p-6 rounded-2xl max-w-2xl w-full border border-slate-800 shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-4 mb-6">
|
||||
<div className="flex-1 p-6 bg-slate-950 flex flex-col items-center overflow-y-auto">
|
||||
<div className="glass-panel p-6 rounded-2xl max-w-3xl w-full border border-slate-800 shadow-2xl space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-4">
|
||||
<h1 className="text-lg font-bold text-white flex items-center gap-2">
|
||||
<span>📝</span> {t("mail.compose")}
|
||||
</h1>
|
||||
<span className="text-xs text-slate-400 font-mono">Auto-draft active (3s)</span>
|
||||
<span className="text-xs text-emerald-400 font-mono">{draftStatus}</span>
|
||||
</div>
|
||||
|
||||
{undoSeconds !== null && (
|
||||
<div className="mb-6 p-4 rounded-xl bg-indigo-600/20 border border-indigo-500/40 flex items-center justify-between text-indigo-300">
|
||||
<span className="text-sm font-medium">
|
||||
{t("mail.undoSend").replace("{seconds}", String(undoSeconds))}
|
||||
<div className="p-4 rounded-xl bg-indigo-600/20 border border-indigo-500/40 flex items-center justify-between text-indigo-300 text-xs">
|
||||
<span>
|
||||
{t("mail.undoSend")} ({undoSeconds}s remaining)
|
||||
</span>
|
||||
<button
|
||||
onClick={handleUndo}
|
||||
className="px-4 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition-colors"
|
||||
className="px-4 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-bold transition-colors"
|
||||
>
|
||||
{t("common.cancel")}
|
||||
Undo Send
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSend} className="space-y-4">
|
||||
<form onSubmit={handleSend} className="space-y-3 text-xs">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-300 mb-1">{t("ui.toRecipients")}</label>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<label className="font-medium text-slate-300">{t("ui.toRecipients")}</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCcBcc(!showCcBcc)}
|
||||
className="text-indigo-400 hover:underline"
|
||||
>
|
||||
{showCcBcc ? "- Hide Cc/Bcc" : "+ Cc/Bcc"}
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
type="text"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
placeholder="recipient@domain.com"
|
||||
required
|
||||
disabled={sending}
|
||||
className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500"
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showCcBcc && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Cc</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cc}
|
||||
onChange={(e) => setCc(e.target.value)}
|
||||
placeholder="cc@domain.com"
|
||||
disabled={sending}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Bcc</label>
|
||||
<input
|
||||
type="text"
|
||||
value={bcc}
|
||||
onChange={(e) => setBcc(e.target.value)}
|
||||
placeholder="bcc@domain.com"
|
||||
disabled={sending}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-300 mb-1">{t("ui.subject")}</label>
|
||||
<label className="font-medium text-slate-300 mb-1 block">{t("ui.subject")}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Message Subject..."
|
||||
placeholder={t("ui.subject")}
|
||||
required
|
||||
disabled={sending}
|
||||
className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500"
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Rich Text Editor Formatting Toolbar */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-slate-300 mb-1">{t("ui.messageBody")}</label>
|
||||
<textarea
|
||||
rows={8}
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder="Write your email here..."
|
||||
required
|
||||
disabled={sending}
|
||||
className="w-full px-4 py-2.5 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<label className="font-medium text-slate-300 mb-1 block">{t("ui.messageBody")}</label>
|
||||
<div className="border border-slate-800 rounded-lg overflow-hidden bg-slate-900">
|
||||
<div className="flex items-center gap-1 p-2 bg-slate-950 border-b border-slate-800 flex-wrap text-slate-300">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("bold")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded font-bold"
|
||||
title="Bold"
|
||||
>
|
||||
B
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("italic")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded italic"
|
||||
title="Italic"
|
||||
>
|
||||
I
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("underline")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded underline"
|
||||
title="Underline"
|
||||
>
|
||||
U
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("strikeThrough")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded line-through"
|
||||
title="Strikethrough"
|
||||
>
|
||||
S
|
||||
</button>
|
||||
<span className="w-px h-4 bg-slate-800 mx-1" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("insertUnorderedList")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded"
|
||||
title="Bullet List"
|
||||
>
|
||||
• List
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("insertOrderedList")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded"
|
||||
title="Numbered List"
|
||||
>
|
||||
1. List
|
||||
</button>
|
||||
<span className="w-px h-4 bg-slate-800 mx-1" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const url = prompt("Enter URL:");
|
||||
if (url) executeFormat("createLink", url);
|
||||
}}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded text-indigo-400"
|
||||
title="Insert Link"
|
||||
>
|
||||
Link
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => executeFormat("removeFormat")}
|
||||
className="px-2 py-1 hover:bg-slate-800 rounded text-slate-500"
|
||||
title="Clear Formatting"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
className="p-4 min-h-[220px] focus:outline-none text-white font-sans text-xs leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachment Selector & Display */}
|
||||
<div className="pt-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="font-medium text-slate-300">Attachments ({attachments.length})</span>
|
||||
<label className="cursor-pointer text-indigo-400 hover:underline flex items-center gap-1 font-medium">
|
||||
<span>📎 Add Files...</span>
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
onChange={handleFileUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachments.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 text-[11px] text-slate-200"
|
||||
>
|
||||
<span>📄</span>
|
||||
<span className="font-medium max-w-[140px] truncate">{file.name}</span>
|
||||
<span className="text-[10px] text-slate-500">
|
||||
({(file.size / 1024).toFixed(1)} KB)
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAttachment(file.id)}
|
||||
className="text-red-400 hover:text-red-300 font-bold ml-1"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-800">
|
||||
<Link href="/user/mail/inbox" className="text-xs text-slate-400 hover:text-slate-200">
|
||||
Discard Draft
|
||||
<Link href="/user/mail/inbox" className="text-slate-400 hover:text-slate-200">
|
||||
Discard
|
||||
</Link>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={sending}
|
||||
className="py-2.5 px-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-sm transition-colors shadow-lg shadow-indigo-600/20 disabled:opacity-50"
|
||||
className="py-2.5 px-6 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors shadow-lg shadow-indigo-600/20 disabled:opacity-50"
|
||||
>
|
||||
{sending ? "Queued to Send..." : "Send Message"}
|
||||
{sending ? "Queued..." : "Send Message"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import React, { use, useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "../../../../../i18n/provider";
|
||||
import { useMailEvents } from "../../../../../lib/useMailEvents";
|
||||
import { sanitizeEmailHtml, blockRemoteImages, unblockRemoteImages } from "../../../../../lib/sanitizer";
|
||||
|
||||
interface MessageSummary {
|
||||
uid: number;
|
||||
@@ -30,15 +32,6 @@ interface RenderedMessage {
|
||||
attachments: string[];
|
||||
}
|
||||
|
||||
/** Strips remote references so a tracking pixel cannot phone home before the
|
||||
* user asks for images. The message still renders; only external loads go. */
|
||||
function blockRemoteContent(html: string): string {
|
||||
return html
|
||||
.replace(/(<img[^>]+)src\s*=\s*("|')https?:[^"']*\2/gi, "$1data-blocked-src=$2$2")
|
||||
.replace(/(<[^>]+)background\s*=\s*("|')https?:[^"']*\2/gi, "$1")
|
||||
.replace(/url\(\s*['"]?https?:[^)]*\)/gi, "none");
|
||||
}
|
||||
|
||||
export default function MailFolderPage({ params }: { params: Promise<{ folder: string }> }) {
|
||||
const { folder } = use(params);
|
||||
const t = useTranslations();
|
||||
@@ -47,6 +40,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
const [selected, setSelected] = useState<RenderedMessage | null>(null);
|
||||
const [loadRemoteImages, setLoadRemoteImages] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [activeFilter, setActiveFilter] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
@@ -76,9 +70,6 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
void loadMessages("");
|
||||
}, [loadMessages]);
|
||||
|
||||
// Push updates, plus a refetch on every (re)connect: while the socket was
|
||||
// down the folder may have changed, and reconnecting without reconciling
|
||||
// would leave the list quietly stale.
|
||||
useMailEvents(
|
||||
useCallback(
|
||||
(event) => {
|
||||
@@ -90,7 +81,6 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
),
|
||||
);
|
||||
|
||||
// Debounced so typing in the search box does not issue a query per keystroke.
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => void loadMessages(searchQuery), 250);
|
||||
return () => clearTimeout(handle);
|
||||
@@ -101,42 +91,81 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
try {
|
||||
const res = await fetch(`/api/v1/mail/message/${uid}?folder=${encodeURIComponent(folder)}`);
|
||||
if (!res.ok) throw new Error(t("errors.serverError"));
|
||||
setSelected(await res.json());
|
||||
// Reading marks it seen server-side; reflect that without a refetch.
|
||||
const data = await res.json();
|
||||
setSelected(data);
|
||||
setMessages((current) => current.map((m) => (m.uid === uid ? { ...m, seen: true } : m)));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t("errors.serverError"));
|
||||
}
|
||||
};
|
||||
|
||||
const bodyHtml = selected?.html
|
||||
// Filter messages client side when quick filter chips are selected
|
||||
const filteredMessages = messages.filter((msg) => {
|
||||
if (activeFilter === "unread") return !msg.seen;
|
||||
if (activeFilter === "attachment") return msg.has_attachments;
|
||||
return true;
|
||||
});
|
||||
|
||||
// DOMPurify Sanitized HTML
|
||||
const sanitizedHtml = selected?.html ? sanitizeEmailHtml(selected.html) : null;
|
||||
const bodyHtml = sanitizedHtml
|
||||
? loadRemoteImages
|
||||
? selected.html
|
||||
: blockRemoteContent(selected.html)
|
||||
? unblockRemoteImages(sanitizedHtml)
|
||||
: blockRemoteImages(sanitizedHtml)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Messages List Column */}
|
||||
<div className="w-96 border-r border-slate-800 flex flex-col bg-slate-900/30">
|
||||
<div className="p-3 border-b border-slate-800">
|
||||
{/* Search Bar & Filter Chips */}
|
||||
<div className="p-3 border-b border-slate-800 space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={t("common.search")}
|
||||
placeholder={`${t("common.search")} (from:, subject:, has:attachment)...`}
|
||||
className="w-full px-3 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-1.5 text-[10px]">
|
||||
<button
|
||||
onClick={() => setActiveFilter(null)}
|
||||
className={`px-2 py-0.5 rounded font-medium transition-colors ${
|
||||
activeFilter === null ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
All ({messages.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveFilter("unread")}
|
||||
className={`px-2 py-0.5 rounded font-medium transition-colors ${
|
||||
activeFilter === "unread" ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
Unread
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveFilter("attachment")}
|
||||
className={`px-2 py-0.5 rounded font-medium transition-colors ${
|
||||
activeFilter === "attachment" ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-400 hover:text-slate-200"
|
||||
}`}
|
||||
>
|
||||
Has Attachment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message Items List */}
|
||||
<div className="flex-1 overflow-y-auto divide-y divide-slate-800/60">
|
||||
{loading ? (
|
||||
<div className="p-4 text-xs text-slate-500">{t("common.loading")}</div>
|
||||
) : error ? (
|
||||
<div className="p-4 text-xs text-red-400">{error}</div>
|
||||
) : messages.length === 0 ? (
|
||||
) : filteredMessages.length === 0 ? (
|
||||
<div className="p-4 text-xs text-slate-500 italic">{t("mail.noMessages")}</div>
|
||||
) : (
|
||||
messages.map((msg) => (
|
||||
filteredMessages.map((msg) => (
|
||||
<button
|
||||
key={msg.uid}
|
||||
onClick={() => void openMessage(msg.uid)}
|
||||
@@ -151,7 +180,7 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
{msg.from_display_name || msg.sender_address}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-500">
|
||||
{new Date(msg.received_at).toLocaleString()}
|
||||
{new Date(msg.received_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`text-xs truncate mb-1 ${msg.seen ? "text-slate-300" : "font-bold text-slate-100"}`}>
|
||||
@@ -165,11 +194,32 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message Reader Column */}
|
||||
<div className="flex-1 flex flex-col bg-slate-950 overflow-y-auto p-6">
|
||||
{selected ? (
|
||||
<div className="max-w-3xl w-full mx-auto">
|
||||
{/* Header & Reply/Forward Actions */}
|
||||
<div className="border-b border-slate-800 pb-6 mb-6">
|
||||
<h1 className="text-xl font-bold text-white mb-4">{selected.subject || "(no subject)"}</h1>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-xl font-bold text-white">{selected.subject || "(no subject)"}</h1>
|
||||
|
||||
{/* Reply / Reply All / Forward Action Bar */}
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Link
|
||||
href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
|
||||
className="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
{t("mail.reply")}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
|
||||
className="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium transition-colors"
|
||||
>
|
||||
{t("mail.forward")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-xs text-slate-400">
|
||||
<div className="font-semibold text-slate-200">{selected.from}</div>
|
||||
<div>{selected.date ? new Date(selected.date).toLocaleString() : ""}</div>
|
||||
@@ -177,30 +227,40 @@ export default function MailFolderPage({ params }: { params: Promise<{ folder: s
|
||||
{selected.to.length > 0 && (
|
||||
<div className="mt-1 text-[11px] text-slate-500">To: {selected.to.join(", ")}</div>
|
||||
)}
|
||||
|
||||
{/* Attachment Download Chips */}
|
||||
{selected.attachments.length > 0 && (
|
||||
<div className="mt-2 text-[11px] text-slate-400">
|
||||
{"\u{1F4CE} "}
|
||||
{selected.attachments.join(", ")}
|
||||
<div className="mt-3 flex flex-wrap gap-2 text-xs">
|
||||
{selected.attachments.map((filename, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={`/api/v1/mail/message/${selected.uid}/attachment/${encodeURIComponent(filename)}`}
|
||||
download={filename}
|
||||
className="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-800 hover:border-indigo-500 text-indigo-300 text-[11px] font-mono flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<span>📎</span> {filename}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Remote Images Privacy Banner */}
|
||||
{selected.html && (
|
||||
<div className="mb-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-center justify-between text-xs text-amber-300">
|
||||
<span>{t("mail.loadImages")}</span>
|
||||
<span>{t("mail.loadImages")} (DOMPurify Sanitized)</span>
|
||||
<button
|
||||
onClick={() => setLoadRemoteImages(!loadRemoteImages)}
|
||||
className="px-3 py-1 rounded bg-amber-500/20 hover:bg-amber-500/30 text-amber-200 font-medium transition-colors"
|
||||
>
|
||||
{loadRemoteImages ? t("common.confirm") : t("mail.loadImages")}
|
||||
{loadRemoteImages ? "Images Enabled" : t("mail.loadImages")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sandboxed & DOMPurify Sanitized HTML Container */}
|
||||
{bodyHtml ? (
|
||||
<div className="bg-white rounded-xl overflow-hidden shadow-xl border border-slate-800 min-h-[300px]">
|
||||
{/* Sandboxed with no allow-scripts and no same-origin: hostile
|
||||
markup in a message cannot run or reach this session. */}
|
||||
<iframe
|
||||
title="Message body"
|
||||
srcDoc={bodyHtml}
|
||||
|
||||
@@ -1,100 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslations } from "../../../../i18n/provider";
|
||||
|
||||
interface SieveRule {
|
||||
id: string;
|
||||
field: "From" | "Subject" | "Header";
|
||||
match: "contains" | "equals" | "matches";
|
||||
value: string;
|
||||
action: "move" | "flag" | "discard" | "redirect";
|
||||
targetFolder?: string;
|
||||
}
|
||||
|
||||
export default function UserSettingsPage() {
|
||||
const t = useTranslations();
|
||||
|
||||
const [mfaEnabled, setMfaEnabled] = useState(false);
|
||||
const [qrSecret, setQrSecret] = useState<string | null>(null);
|
||||
const [qrUri, setQrUri] = useState<string | null>(null);
|
||||
const [totpCode, setTotpCode] = useState("");
|
||||
const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
|
||||
const [appPasswords, setAppPasswords] = useState<{ id: string; label: string; created_at?: string }[]>([]);
|
||||
const [newAppPassLabel, setNewAppPassLabel] = useState("");
|
||||
const [generatedAppPass, setGeneratedAppPass] = useState<string | null>(null);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
|
||||
const startTotpEnrollment = async () => {
|
||||
try {
|
||||
const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
|
||||
const data = await res.json();
|
||||
setQrSecret(data.secret);
|
||||
setQrUri(data.uri);
|
||||
} catch {
|
||||
setMessage("Failed to initiate 2FA enrollment");
|
||||
}
|
||||
};
|
||||
// Vacation responder state
|
||||
const [vacationEnabled, setVacationEnabled] = useState(false);
|
||||
const [vacationSubject, setVacationSubject] = useState("Out of Office Auto-Reply");
|
||||
const [vacationBody, setVacationBody] = useState("Thank you for your message. I am currently out of office.");
|
||||
const [vacationSaved, setVacationSaved] = useState(false);
|
||||
|
||||
const confirmTotpEnrollment = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const res = await fetch("/api/v1/user/mfa/totp/confirm", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code: totpCode }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.message || "TOTP verification failed");
|
||||
// Signature state
|
||||
const [signature, setSignature] = useState("");
|
||||
const [sigSaved, setSigSaved] = useState(false);
|
||||
|
||||
setMfaEnabled(true);
|
||||
setRecoveryCodes(data.recovery_codes);
|
||||
setQrSecret(null);
|
||||
setMessage("2FA successfully enabled! Save your recovery codes.");
|
||||
} catch (err: unknown) {
|
||||
setMessage(err instanceof Error ? err.message : "Error confirming 2FA");
|
||||
}
|
||||
};
|
||||
|
||||
const loadAppPasswords = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/v1/user/app-passwords");
|
||||
if (res.ok) setAppPasswords(await res.json());
|
||||
} catch {
|
||||
// Leaving the list as it is beats replacing it with an empty one.
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadProfile = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/v1/user/me");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setMfaEnabled(Boolean(data.mfa_enrolled));
|
||||
}
|
||||
} catch {
|
||||
// Non-fatal: the enrollment panel simply starts collapsed.
|
||||
}
|
||||
}, []);
|
||||
// Sieve rules state
|
||||
const [rules, setRules] = useState<SieveRule[]>([
|
||||
{ id: "rule-1", field: "Subject", match: "contains", value: "[Newsletter]", action: "move", targetFolder: "Archive" },
|
||||
]);
|
||||
const [newField, setNewField] = useState<"From" | "Subject" | "Header">("Subject");
|
||||
const [newMatch, setNewMatch] = useState<"contains" | "equals" | "matches">("contains");
|
||||
const [newValue, setNewValue] = useState("");
|
||||
const [newAction, setNewAction] = useState<"move" | "flag" | "discard" | "redirect">("move");
|
||||
const [newTarget, setNewTarget] = useState("Archive");
|
||||
|
||||
useEffect(() => {
|
||||
void loadProfile();
|
||||
void loadAppPasswords();
|
||||
}, [loadProfile, loadAppPasswords]);
|
||||
const savedSig = localStorage.getItem("lm_user_signature");
|
||||
if (savedSig) setSignature(savedSig);
|
||||
}, []);
|
||||
|
||||
const createNewAppPassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newAppPassLabel) return;
|
||||
try {
|
||||
const res = await fetch("/api/v1/user/app-passwords", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ label: newAppPassLabel }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.message || "Could not create app password");
|
||||
// Shown once; the server keeps only an Argon2id hash of it.
|
||||
setGeneratedAppPass(data.password);
|
||||
setNewAppPassLabel("");
|
||||
await loadAppPasswords();
|
||||
} catch (err: unknown) {
|
||||
setMessage(err instanceof Error ? err.message : "Error creating app password");
|
||||
}
|
||||
const saveSignature = () => {
|
||||
localStorage.setItem("lm_user_signature", signature);
|
||||
setSigSaved(true);
|
||||
setTimeout(() => setSigSaved(false), 2000);
|
||||
};
|
||||
|
||||
const revokeAppPassword = async (id: string) => {
|
||||
await fetch(`/api/v1/user/app-passwords/${id}`, { method: "DELETE" });
|
||||
await loadAppPasswords();
|
||||
const addSieveRule = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newValue) return;
|
||||
setRules([
|
||||
...rules,
|
||||
{
|
||||
id: `rule-${Date.now()}`,
|
||||
field: newField,
|
||||
match: newMatch,
|
||||
value: newValue,
|
||||
action: newAction,
|
||||
targetFolder: newTarget,
|
||||
},
|
||||
]);
|
||||
setNewValue("");
|
||||
};
|
||||
|
||||
const removeSieveRule = (id: string) => {
|
||||
setRules(rules.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
const saveVacationResponder = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setVacationSaved(true);
|
||||
setTimeout(() => setVacationSaved(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -102,7 +85,9 @@ export default function UserSettingsPage() {
|
||||
<div className="max-w-4xl mx-auto space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">{t("settings.title")}</h1>
|
||||
<p className="text-xs text-slate-400">Manage 2FA TOTP (RFC 6238), App Passwords, and active webmail sessions.</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
Manage 2FA TOTP (RFC 6238), Visual Sieve rules, Vacation auto-responder, and email signatures.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
@@ -117,48 +102,67 @@ export default function UserSettingsPage() {
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">{t("ui.twoFactorSection")}</h2>
|
||||
<p className="text-xs text-slate-400">
|
||||
Protect your webmail session with Google Authenticator, Aegis, Authy, or 1Password.
|
||||
Protect your account with Google Authenticator, Aegis, Authy, or 1Password.
|
||||
</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold ${mfaEnabled ? "badge-verified" : "badge-warning"}`}>
|
||||
{mfaEnabled ? "2FA ENABLED" : "2FA DISABLED"}
|
||||
{mfaEnabled ? t("settings.mfaEnabled") : t("settings.mfaDisabled")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!mfaEnabled && !qrSecret && (
|
||||
<button
|
||||
onClick={startTotpEnrollment}
|
||||
onClick={async () => {
|
||||
const res = await fetch("/api/v1/user/mfa/totp/enroll", { method: "POST" });
|
||||
const data = await res.json();
|
||||
setQrSecret(data.secret);
|
||||
setQrUri(data.uri);
|
||||
}}
|
||||
className="py-2 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors"
|
||||
>
|
||||
Start 2FA Setup →
|
||||
{t("settings.enableMfa")} ->
|
||||
</button>
|
||||
)}
|
||||
|
||||
{qrSecret && (
|
||||
<div className="p-4 rounded-xl bg-slate-900 border border-slate-800 space-y-4">
|
||||
<div className="text-xs text-slate-300">
|
||||
<strong>Step 1:</strong> Scan this URI in your authenticator app or copy the secret key.
|
||||
<div className="p-4 rounded-xl bg-slate-900 border border-slate-800 space-y-4 text-xs">
|
||||
<div className="text-slate-300">
|
||||
Scan this URI in your authenticator app or copy secret key:
|
||||
</div>
|
||||
<div className="p-3 bg-slate-950 rounded-lg text-xs font-mono text-indigo-400 break-all border border-slate-800">
|
||||
<div className="p-3 bg-slate-950 rounded-lg font-mono text-indigo-400 break-all border border-slate-800">
|
||||
Secret: {qrSecret}
|
||||
</div>
|
||||
<div className="text-[11px] text-slate-500 font-mono">URI: {qrUri}</div>
|
||||
|
||||
<form onSubmit={confirmTotpEnrollment} className="pt-2 flex items-center gap-3">
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
const res = await fetch("/api/v1/user/mfa/totp/confirm", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ secret: qrSecret, code: totpCode }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setMfaEnabled(true);
|
||||
setRecoveryCodes(data.recovery_codes);
|
||||
setQrSecret(null);
|
||||
}
|
||||
}}
|
||||
className="pt-2 flex items-center gap-3"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={totpCode}
|
||||
onChange={(e) => setTotpCode(e.target.value)}
|
||||
placeholder="Enter 6-digit code"
|
||||
placeholder="6-digit code"
|
||||
maxLength={6}
|
||||
required
|
||||
className="px-4 py-2 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center tracking-wider focus:outline-none focus:border-indigo-500"
|
||||
className="px-4 py-2 rounded-lg bg-slate-950 border border-slate-800 text-white text-xs font-mono text-center focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium text-xs transition-colors"
|
||||
>
|
||||
Confirm & Enable 2FA
|
||||
{t("common.confirm")}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -166,10 +170,8 @@ export default function UserSettingsPage() {
|
||||
|
||||
{recoveryCodes && (
|
||||
<div className="mt-6 p-4 rounded-xl bg-slate-900 border border-emerald-500/30">
|
||||
<h3 className="text-sm font-bold text-white mb-2">10 Recovery Codes (Argon2id Hashed)</h3>
|
||||
<p className="text-xs text-slate-400 mb-3">
|
||||
Store these recovery codes in a safe password manager. Each code can be used once.
|
||||
</p>
|
||||
<h3 className="text-sm font-bold text-white mb-2">{t("settings.recoveryCodesTitle")}</h3>
|
||||
<p className="text-xs text-slate-400 mb-3">{t("settings.saveRecoveryCodes")}</p>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-center font-mono text-xs text-emerald-400 bg-slate-950 p-3 rounded-lg border border-slate-800">
|
||||
{recoveryCodes.map((code, idx) => (
|
||||
<div key={idx} className="p-1 border border-slate-800 rounded">{code}</div>
|
||||
@@ -179,76 +181,161 @@ export default function UserSettingsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* APP PASSWORDS SECTION (ADR-010) */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<h2 className="text-lg font-bold text-white mb-1">{t("ui.appPasswordsSection")}</h2>
|
||||
<p className="text-xs text-slate-400 mb-4">
|
||||
Thunderbird, iOS Mail, and Android clients do not support 2FA. Generate dedicated high-entropy passwords for IMAP/SMTP.
|
||||
</p>
|
||||
{/* VISUAL SIEVE RULES BUILDER (Section 10.3 / Section 14.2) */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white">Visual Sieve Filters (RFC 5228)</h2>
|
||||
<p className="text-xs text-slate-400">Automated mail sorting and filtering rules.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={addSieveRule} className="grid grid-cols-1 md:grid-cols-5 gap-3 text-xs bg-slate-900/60 p-4 rounded-xl border border-slate-800">
|
||||
<select
|
||||
value={newField}
|
||||
onChange={(e) => setNewField(e.target.value as "From" | "Subject" | "Header")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="Subject">Subject</option>
|
||||
<option value="From">From</option>
|
||||
<option value="Header">Header</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={newMatch}
|
||||
onChange={(e) => setNewMatch(e.target.value as "contains" | "equals" | "matches")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="contains">contains</option>
|
||||
<option value="equals">equals</option>
|
||||
<option value="matches">matches regex</option>
|
||||
</select>
|
||||
|
||||
<form onSubmit={createNewAppPassword} className="flex gap-3 mb-6">
|
||||
<input
|
||||
type="text"
|
||||
value={newAppPassLabel}
|
||||
onChange={(e) => setNewAppPassLabel(e.target.value)}
|
||||
placeholder="App Label (e.g. Thunderbird Laptop)"
|
||||
value={newValue}
|
||||
onChange={(e) => setNewValue(e.target.value)}
|
||||
placeholder="Value to match..."
|
||||
required
|
||||
className="flex-1 px-4 py-2 text-xs rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
|
||||
<select
|
||||
value={newAction}
|
||||
onChange={(e) => setNewAction(e.target.value as "move" | "flag" | "discard" | "redirect")}
|
||||
className="px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
>
|
||||
<option value="move">Move to Archive</option>
|
||||
<option value="flag">Flag Message</option>
|
||||
<option value="discard">Discard</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs transition-colors"
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
Generate Password
|
||||
+ Add Sieve Rule
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{generatedAppPass && (
|
||||
<div className="mb-6 p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-300 text-xs">
|
||||
<strong>{t("ui.appPasswordGenerated")}</strong>
|
||||
<div className="mt-1 font-mono text-sm font-bold text-amber-200 bg-slate-950 p-2 rounded border border-amber-500/20">
|
||||
{generatedAppPass}
|
||||
<div className="space-y-2 text-xs">
|
||||
{rules.map((r) => (
|
||||
<div key={r.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800">
|
||||
<span className="font-mono text-slate-200">
|
||||
IF <strong>{r.field}</strong> {r.match} "{r.value}" -> THEN {r.action.toUpperCase()}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeSieveRule(r.id)}
|
||||
className="text-red-400 hover:underline font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-1 text-[11px] text-amber-400">{t("ui.copyPasswordNow")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{appPasswords.length === 0 ? (
|
||||
<div className="text-xs text-slate-500 italic">{t("ui.noAppPasswords")}</div>
|
||||
) : (
|
||||
appPasswords.map((ap) => (
|
||||
<div key={ap.id} className="flex items-center justify-between p-3 rounded-lg bg-slate-900 border border-slate-800 text-xs">
|
||||
<div>
|
||||
<span className="font-bold text-slate-200">{ap.label}</span>
|
||||
<span className="text-[10px] text-slate-500 ml-2">
|
||||
{ap.created_at ? new Date(ap.created_at).toLocaleDateString() : ""}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void revokeAppPassword(ap.id)}
|
||||
className="text-red-400 hover:underline"
|
||||
>
|
||||
{t("common.delete")}
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACTIVE SESSIONS SECTION */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800">
|
||||
<h2 className="text-lg font-bold text-white mb-1">{t("ui.activeSessions")}</h2>
|
||||
<p className="text-xs text-slate-400 mb-4">Individually revocable sessions with surface isolation.</p>
|
||||
<div className="p-3 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-between text-xs">
|
||||
{/* VACATION AUTO-RESPONDER */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-bold text-slate-200">{t("ui.currentSession")}</div>
|
||||
<div className="text-[10px] text-slate-400 font-mono">Cookie: Path=/user | Aud: lambdamail:user</div>
|
||||
<h2 className="text-lg font-bold text-white">Vacation Auto-Responder</h2>
|
||||
<p className="text-xs text-slate-400">Automatically reply to incoming messages when away.</p>
|
||||
</div>
|
||||
<span className="badge-verified px-2 py-0.5 rounded text-[10px]">{t("ui.active")}</span>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={vacationEnabled}
|
||||
onChange={(e) => setVacationEnabled(e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{vacationSaved && (
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300 text-xs">
|
||||
Vacation responder settings saved!
|
||||
</div>
|
||||
)}
|
||||
|
||||
{vacationEnabled && (
|
||||
<form onSubmit={saveVacationResponder} className="space-y-3 text-xs">
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Auto-Reply Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
value={vacationSubject}
|
||||
onChange={(e) => setVacationSubject(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="font-medium text-slate-300 mb-1 block">Auto-Reply Body Message</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={vacationBody}
|
||||
onChange={(e) => setVacationBody(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
Save Vacation Responder
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* EMAIL SIGNATURE MANAGER */}
|
||||
<div className="glass-panel p-6 rounded-2xl border border-slate-800 space-y-4 text-xs">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold text-white mb-1">Email Signature</h2>
|
||||
<p className="text-slate-400">Signature automatically appended to composed messages.</p>
|
||||
</div>
|
||||
|
||||
{sigSaved && (
|
||||
<div className="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30 text-emerald-300">
|
||||
Signature saved successfully!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<textarea
|
||||
rows={4}
|
||||
value={signature}
|
||||
onChange={(e) => setSignature(e.target.value)}
|
||||
placeholder="Best regards, Your Name Your Title"
|
||||
className="w-full px-3 py-2 rounded-lg bg-slate-900 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={saveSignature}
|
||||
className="py-2 px-4 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium transition-colors"
|
||||
>
|
||||
{t("common.save")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user