feat: Add runtime config, trusted senders, JMAP identities, and UI improvements
- Runtime environment variables for Docker-friendly configuration - Trusted senders list for automatic image loading - JMAP identities for proper sender address - Improved email composer readability - Horizontal scroll for wide HTML emails
This commit is contained in:
Matthieu MALVACHE
@@ -45,6 +45,7 @@ This webmail client is designed to work seamlessly with [**Stalwart Mail Server*
|
||||
|
||||
### Security & Privacy
|
||||
- External content blocked by default
|
||||
- Trusted senders list for automatic image loading
|
||||
- HTML sanitization with DOMPurify
|
||||
- SPF/DKIM/DMARC status indicators
|
||||
- No password storage (session-based auth)
|
||||
@@ -92,12 +93,14 @@ Edit `.env.local` with your settings:
|
||||
|
||||
```env
|
||||
# App name displayed in the UI
|
||||
NEXT_PUBLIC_APP_NAME=My Webmail
|
||||
APP_NAME=My Webmail
|
||||
|
||||
# Your JMAP server URL
|
||||
NEXT_PUBLIC_JMAP_SERVER_URL=https://mail.example.com
|
||||
# Your JMAP server URL (required)
|
||||
JMAP_SERVER_URL=https://mail.example.com
|
||||
```
|
||||
|
||||
**Note:** These are runtime environment variables, read at request time. This enables Docker deployments to be configured without rebuilding the image. Legacy `NEXT_PUBLIC_*` variables are still supported as fallbacks.
|
||||
|
||||
### Development
|
||||
|
||||
```bash
|
||||
|
||||
@@ -16,6 +16,7 @@ This document tracks the development status and planned features for JMAP Webmai
|
||||
- [x] Username autocomplete with history
|
||||
- [x] Logout functionality
|
||||
- [x] Authentication error handling
|
||||
- [x] JMAP identities for sender address
|
||||
|
||||
### JMAP Server Connection
|
||||
- [x] Session establishment and keep-alive
|
||||
@@ -76,6 +77,10 @@ This document tracks the development status and planned features for JMAP Webmai
|
||||
- [x] External content blocked by default
|
||||
- [x] HTML sanitization with DOMPurify
|
||||
- [x] User control for loading external content
|
||||
- [x] Trusted senders list for automatic image loading
|
||||
|
||||
### Deployment
|
||||
- [x] Runtime environment variables (Docker-friendly configuration)
|
||||
|
||||
## Planned Features
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { useConfig } from "@/hooks/use-config";
|
||||
import { Mail, AlertCircle, Loader2, X } from "lucide-react";
|
||||
|
||||
export default function LoginPage() {
|
||||
@@ -13,9 +14,7 @@ export default function LoginPage() {
|
||||
const params = useParams();
|
||||
const t = useTranslations("login");
|
||||
const { login, isLoading, error, clearError, isAuthenticated } = useAuthStore();
|
||||
|
||||
const serverUrl = process.env.NEXT_PUBLIC_JMAP_SERVER_URL;
|
||||
const appName = process.env.NEXT_PUBLIC_APP_NAME || 'Webmail';
|
||||
const { appName, jmapServerUrl: serverUrl, isLoading: configLoading, error: configError } = useConfig();
|
||||
|
||||
// All hooks must be called unconditionally at the top
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -100,6 +99,35 @@ export default function LoginPage() {
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [serverUrl]);
|
||||
|
||||
// Show loading state while config is being fetched
|
||||
if (configLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
|
||||
<div className="w-full max-w-sm mx-auto px-4 text-center" role="status">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary mx-auto" />
|
||||
<span className="sr-only">{t("loading")}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error if config fetch failed
|
||||
if (configError) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted/20">
|
||||
<div className="w-full max-w-sm mx-auto px-4 text-center">
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
|
||||
<AlertCircle className="w-10 h-10 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-xl font-medium text-foreground mb-2">{t("config_error.title")}</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("config_error.fetch_failed")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error if JMAP server URL is not configured
|
||||
if (!serverUrl) {
|
||||
return (
|
||||
@@ -108,9 +136,9 @@ export default function LoginPage() {
|
||||
<div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-6">
|
||||
<AlertCircle className="w-10 h-10 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-xl font-medium text-foreground mb-2">Configuration Error</h1>
|
||||
<h1 className="text-xl font-medium text-foreground mb-2">{t("config_error.title")}</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
NEXT_PUBLIC_JMAP_SERVER_URL environment variable is not set.
|
||||
{t("config_error.server_not_configured")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,7 +296,7 @@ export default function LoginPage() {
|
||||
type="button"
|
||||
onClick={(e) => removeUsername(username, e)}
|
||||
className="p-1 hover:bg-background rounded transition-colors"
|
||||
title="Remove from history"
|
||||
title={t("remove_from_history")}
|
||||
>
|
||||
<X className="w-3 h-3 text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
@@ -353,11 +353,13 @@ export default function Home() {
|
||||
subject: string;
|
||||
body: string;
|
||||
draftId?: string;
|
||||
fromEmail?: string;
|
||||
identityId?: string;
|
||||
}) => {
|
||||
if (!client) return;
|
||||
|
||||
try {
|
||||
await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.draftId);
|
||||
await sendEmail(client, data.to, data.subject, data.body, data.cc, data.bcc, data.draftId, data.fromEmail, data.identityId);
|
||||
setShowComposer(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
@@ -810,7 +812,7 @@ export default function Home() {
|
||||
{showComposer && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 md:p-0">
|
||||
<div className={cn(
|
||||
"w-full h-full md:h-auto md:max-w-3xl md:max-h-[600px]",
|
||||
"w-full h-full md:h-[600px] md:max-w-3xl",
|
||||
"max-md:flex max-md:flex-col"
|
||||
)}>
|
||||
<ErrorBoundary
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
/**
|
||||
* Runtime configuration endpoint
|
||||
*
|
||||
* This endpoint serves configuration values that can be set at runtime
|
||||
* via environment variables, enabling post-build configuration for
|
||||
* Docker deployments.
|
||||
*
|
||||
* Priority order:
|
||||
* 1. Runtime env vars (APP_NAME, JMAP_SERVER_URL)
|
||||
* 2. Build-time env vars (NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_JMAP_SERVER_URL)
|
||||
* 3. Default values
|
||||
*/
|
||||
export async function GET() {
|
||||
return NextResponse.json({
|
||||
appName: process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME || 'Webmail',
|
||||
jmapServerUrl: process.env.JMAP_SERVER_URL || process.env.NEXT_PUBLIC_JMAP_SERVER_URL || '',
|
||||
});
|
||||
}
|
||||
@@ -16,6 +16,8 @@ interface EmailComposerProps {
|
||||
subject: string;
|
||||
body: string;
|
||||
draftId?: string;
|
||||
fromEmail?: string;
|
||||
identityId?: string;
|
||||
}) => void;
|
||||
onClose?: () => void;
|
||||
onDiscardDraft?: (draftId: string) => void;
|
||||
@@ -97,8 +99,9 @@ export function EmailComposer({
|
||||
const lastSavedDataRef = useRef<string>("");
|
||||
const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean }>>([]);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(null);
|
||||
|
||||
const { client } = useAuthStore();
|
||||
const { client, identities, primaryIdentity } = useAuthStore();
|
||||
|
||||
// Handle file selection
|
||||
const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -255,6 +258,11 @@ export function EmailComposer({
|
||||
}
|
||||
}
|
||||
|
||||
// Get the selected identity or primary identity
|
||||
const currentIdentity = selectedIdentityId
|
||||
? identities.find(id => id.id === selectedIdentityId)
|
||||
: primaryIdentity;
|
||||
|
||||
onSend?.({
|
||||
to: toAddresses,
|
||||
cc: ccAddresses,
|
||||
@@ -262,6 +270,8 @@ export function EmailComposer({
|
||||
subject,
|
||||
body,
|
||||
draftId: finalDraftId || undefined,
|
||||
fromEmail: currentIdentity?.email,
|
||||
identityId: currentIdentity?.id,
|
||||
});
|
||||
|
||||
// Reset form
|
||||
@@ -301,7 +311,7 @@ export function EmailComposer({
|
||||
<div className={cn("flex flex-col h-full bg-background border rounded-lg", className)}>
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold">New Message</h3>
|
||||
<h3 className="font-semibold">{t('new_message')}</h3>
|
||||
{saveStatus === 'saving' && (
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Save className="w-3 h-3 animate-pulse" />
|
||||
@@ -328,8 +338,32 @@ export function EmailComposer({
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="space-y-2 px-4 py-3 border-b">
|
||||
{/* From field - show dropdown if multiple identities, otherwise display email */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground w-16">To:</span>
|
||||
<span className="text-sm text-muted-foreground w-16">{t('from')}:</span>
|
||||
{identities.length > 1 ? (
|
||||
<select
|
||||
value={selectedIdentityId || primaryIdentity?.id || ''}
|
||||
onChange={(e) => setSelectedIdentityId(e.target.value)}
|
||||
className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
{identities.map((identity) => (
|
||||
<option key={identity.id} value={identity.id}>
|
||||
{identity.name ? `${identity.name} <${identity.email}>` : identity.email}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-sm text-foreground">
|
||||
{primaryIdentity?.name
|
||||
? `${primaryIdentity.name} <${primaryIdentity.email}>`
|
||||
: primaryIdentity?.email || ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground w-16">{t('to')}:</span>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Recipient email addresses (comma separated)"
|
||||
@@ -395,9 +429,9 @@ export function EmailComposer({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 px-4 py-3">
|
||||
<div className="flex-1 px-4 py-3 min-h-0">
|
||||
<textarea
|
||||
className="w-full h-full resize-none outline-none text-sm"
|
||||
className="w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
|
||||
placeholder="Compose email..."
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
@@ -413,7 +447,7 @@ export function EmailComposer({
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-3 py-1 rounded-md text-sm",
|
||||
att.error ? "bg-red-50 text-red-700" : "bg-gray-100 text-gray-700"
|
||||
att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
{att.uploading ? (
|
||||
@@ -424,12 +458,12 @@ export function EmailComposer({
|
||||
<Paperclip className="w-3 h-3" />
|
||||
)}
|
||||
<span className="max-w-[200px] truncate">{att.file.name}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({(att.file.size / 1024).toFixed(1)} KB)
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeAttachment(index)}
|
||||
className="ml-1 hover:text-red-600"
|
||||
className="ml-1 hover:text-red-500"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
@@ -440,7 +474,17 @@ export function EmailComposer({
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t">
|
||||
<div>
|
||||
{/* Left side - Discard button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
className="text-sm text-muted-foreground hover:text-red-500 transition-colors"
|
||||
>
|
||||
{t('discard')}
|
||||
</button>
|
||||
|
||||
{/* Right side - Attach and Send */}
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
@@ -455,15 +499,15 @@ export function EmailComposer({
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<Paperclip className="w-4 h-4 mr-2" />
|
||||
Attach
|
||||
{t('attach')}
|
||||
</Button>
|
||||
</div>
|
||||
<Button onClick={handleSend}>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Send
|
||||
{t('send')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -134,6 +134,8 @@ export function EmailViewer({
|
||||
const t = useTranslations('email_viewer');
|
||||
const tNotifications = useTranslations('notifications');
|
||||
const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
|
||||
const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
|
||||
const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
|
||||
const [showFullHeaders, setShowFullHeaders] = useState(false);
|
||||
const [allowExternalContent, setAllowExternalContent] = useState(false);
|
||||
const [hasBlockedContent, setHasBlockedContent] = useState(false);
|
||||
@@ -353,10 +355,16 @@ export function EmailViewer({
|
||||
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur'],
|
||||
};
|
||||
|
||||
// Check if sender is trusted
|
||||
const senderEmail = email.from?.[0]?.email?.toLowerCase();
|
||||
const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
|
||||
|
||||
// Block external content based on policy:
|
||||
// 'allow' = never block, 'block' = always block, 'ask' = block until user allows
|
||||
const shouldBlockExternal = externalContentPolicy === 'block' ||
|
||||
(externalContentPolicy === 'ask' && !allowExternalContent);
|
||||
// 'allow' = never block, 'block' = always block (unless trusted), 'ask' = block until user allows or trusted
|
||||
const shouldBlockExternal = !senderIsTrusted && (
|
||||
externalContentPolicy === 'block' ||
|
||||
(externalContentPolicy === 'ask' && !allowExternalContent)
|
||||
);
|
||||
|
||||
if (shouldBlockExternal) {
|
||||
sanitizeConfig.FORBID_TAGS.push('link');
|
||||
@@ -451,7 +459,7 @@ export function EmailViewer({
|
||||
html: '<p style="color: #999;">No content available</p>',
|
||||
isHtml: false
|
||||
};
|
||||
}, [email, allowExternalContent, hasBlockedContent, externalContentPolicy]);
|
||||
}, [email, allowExternalContent, hasBlockedContent, externalContentPolicy, isSenderTrusted]);
|
||||
|
||||
// Show loading skeleton while email is being fetched
|
||||
if (isLoading && !email) {
|
||||
@@ -1094,17 +1102,38 @@ export function EmailViewer({
|
||||
|
||||
{/* Email Content Area */}
|
||||
<div className="flex-1 overflow-auto bg-muted/30">
|
||||
{/* Ultra Minimalist External Content Banner - only show in 'ask' mode */}
|
||||
{hasBlockedContent && !allowExternalContent && externalContentPolicy === 'ask' && (
|
||||
{/* External Content Banner - show in 'ask' or 'block' mode */}
|
||||
{hasBlockedContent && !allowExternalContent && externalContentPolicy !== 'allow' && (
|
||||
<div className="border-b border-border">
|
||||
<div className="max-w-4xl mx-auto px-6 py-2">
|
||||
<div className="max-w-4xl mx-auto px-6 py-2 flex items-center justify-center gap-4">
|
||||
{/* Load images button - only in 'ask' mode */}
|
||||
{externalContentPolicy === 'ask' && (
|
||||
<button
|
||||
onClick={() => setAllowExternalContent(true)}
|
||||
className="mx-auto flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<Image className="w-3.5 h-3.5" />
|
||||
Show images
|
||||
{t('load_external_content')}
|
||||
</button>
|
||||
)}
|
||||
{/* Trust sender button - in both 'ask' and 'block' modes */}
|
||||
{email.from?.[0]?.email && (
|
||||
<>
|
||||
{externalContentPolicy === 'ask' && <span className="text-muted-foreground/50">|</span>}
|
||||
<button
|
||||
onClick={() => {
|
||||
const senderEmail = email.from?.[0]?.email;
|
||||
if (senderEmail) {
|
||||
addTrustedSender(senderEmail);
|
||||
setAllowExternalContent(true);
|
||||
}
|
||||
}}
|
||||
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{t('trust_sender')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -75,6 +75,8 @@ export function ThreadConversationView({
|
||||
}: ThreadConversationViewProps) {
|
||||
const t = useTranslations();
|
||||
const externalContentPolicy = useSettingsStore((state) => state.externalContentPolicy);
|
||||
const addTrustedSender = useSettingsStore((state) => state.addTrustedSender);
|
||||
const isSenderTrusted = useSettingsStore((state) => state.isSenderTrusted);
|
||||
|
||||
// Track which emails are expanded (most recent by default)
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
|
||||
@@ -153,22 +155,30 @@ export function ThreadConversationView({
|
||||
{/* Email Cards */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-4 space-y-3">
|
||||
{emails.map((email, index) => (
|
||||
{emails.map((email, index) => {
|
||||
const senderEmail = email.from?.[0]?.email?.toLowerCase();
|
||||
const senderIsTrusted = senderEmail ? isSenderTrusted(senderEmail) : false;
|
||||
return (
|
||||
<EmailCard
|
||||
key={email.id}
|
||||
email={email}
|
||||
isExpanded={expandedIds.has(email.id)}
|
||||
isLatest={index === 0}
|
||||
allowExternal={externalContentPolicy === 'allow' || allowExternalContent.has(email.id)}
|
||||
allowExternal={externalContentPolicy === 'allow' || senderIsTrusted || allowExternalContent.has(email.id)}
|
||||
onToggleExpanded={() => toggleExpanded(email.id)}
|
||||
onAllowExternal={() => toggleAllowExternal(email.id)}
|
||||
onTrustSender={senderEmail ? () => {
|
||||
addTrustedSender(senderEmail);
|
||||
toggleAllowExternal(email.id);
|
||||
} : undefined}
|
||||
onReply={onReply ? () => onReply(email) : undefined}
|
||||
onReplyAll={onReplyAll ? () => onReplyAll(email) : undefined}
|
||||
onForward={onForward ? () => onForward(email) : undefined}
|
||||
onDownloadAttachment={onDownloadAttachment}
|
||||
onMarkAsRead={onMarkAsRead}
|
||||
/>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,6 +193,7 @@ interface EmailCardProps {
|
||||
allowExternal: boolean;
|
||||
onToggleExpanded: () => void;
|
||||
onAllowExternal: () => void;
|
||||
onTrustSender?: () => void;
|
||||
onReply?: () => void;
|
||||
onReplyAll?: () => void;
|
||||
onForward?: () => void;
|
||||
@@ -197,6 +208,7 @@ function EmailCard({
|
||||
allowExternal,
|
||||
onToggleExpanded,
|
||||
onAllowExternal,
|
||||
onTrustSender,
|
||||
onReply,
|
||||
onReplyAll,
|
||||
onForward,
|
||||
@@ -382,6 +394,7 @@ function EmailCard({
|
||||
<span className="text-muted-foreground">
|
||||
{t("email_viewer.external_content_warning")}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@@ -392,6 +405,19 @@ function EmailCard({
|
||||
>
|
||||
{t("email_viewer.load_external_content")}
|
||||
</Button>
|
||||
{onTrustSender && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTrustSender();
|
||||
}}
|
||||
>
|
||||
{t("email_viewer.trust_sender")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,20 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
import { SettingsSection, SettingItem, Select, ToggleSwitch } from './settings-section';
|
||||
import { TrustedSendersModal } from '@/components/trusted-senders-modal';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
|
||||
export function EmailSettings() {
|
||||
const t = useTranslations('settings.email_behavior');
|
||||
const [showTrustedModal, setShowTrustedModal] = useState(false);
|
||||
|
||||
const {
|
||||
markAsReadDelay,
|
||||
deleteAction,
|
||||
showPreview,
|
||||
emailsPerPage,
|
||||
externalContentPolicy,
|
||||
trustedSenders,
|
||||
updateSetting,
|
||||
} = useSettingsStore();
|
||||
|
||||
// Get count label for trusted senders button
|
||||
const getTrustedSendersCount = () => {
|
||||
const count = trustedSenders.length;
|
||||
if (count === 0) return t('trusted_senders.count_zero');
|
||||
if (count === 1) return t('trusted_senders.count_one');
|
||||
return t('trusted_senders.count_other', { count });
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsSection title={t('title')} description={t('description')}>
|
||||
{/* Mark as Read */}
|
||||
@@ -75,6 +89,23 @@ export function EmailSettings() {
|
||||
]}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
{/* Trusted Senders */}
|
||||
<SettingItem label={t('trusted_senders.label')} description={t('trusted_senders.description')}>
|
||||
<button
|
||||
onClick={() => setShowTrustedModal(true)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-muted hover:bg-accent rounded-md transition-colors"
|
||||
>
|
||||
<span className="text-sm text-foreground">{getTrustedSendersCount()}</span>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
||||
</button>
|
||||
</SettingItem>
|
||||
|
||||
{/* Trusted Senders Modal */}
|
||||
<TrustedSendersModal
|
||||
isOpen={showTrustedModal}
|
||||
onClose={() => setShowTrustedModal(false)}
|
||||
/>
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useMemo } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { X, ShieldCheck, Search, Trash2, Plus } from "lucide-react";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TrustedSendersModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TrustedSendersModal({ isOpen, onClose }: TrustedSendersModalProps) {
|
||||
const t = useTranslations("settings.email_behavior.trusted_senders");
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { trustedSenders, addTrustedSender, removeTrustedSender } = useSettingsStore();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [newEmail, setNewEmail] = useState("");
|
||||
const [emailError, setEmailError] = useState("");
|
||||
|
||||
// Filter senders based on search query
|
||||
const filteredSenders = useMemo(() => {
|
||||
if (!searchQuery.trim()) return trustedSenders;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return trustedSenders.filter((email) => email.toLowerCase().includes(query));
|
||||
}, [trustedSenders, searchQuery]);
|
||||
|
||||
// Show search only when 5+ senders
|
||||
const showSearch = trustedSenders.length >= 5;
|
||||
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (isAdding) {
|
||||
setIsAdding(false);
|
||||
setNewEmail("");
|
||||
setEmailError("");
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}
|
||||
}, [isOpen, isAdding, onClose]);
|
||||
|
||||
// Close on click outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// Focus input when adding mode is enabled
|
||||
useEffect(() => {
|
||||
if (isAdding && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [isAdding]);
|
||||
|
||||
// Reset state when modal closes
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setSearchQuery("");
|
||||
setIsAdding(false);
|
||||
setNewEmail("");
|
||||
setEmailError("");
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const validateEmail = (email: string): boolean => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
};
|
||||
|
||||
const handleAddSender = () => {
|
||||
const trimmedEmail = newEmail.trim().toLowerCase();
|
||||
|
||||
if (!trimmedEmail) {
|
||||
setEmailError(t("invalid_email"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateEmail(trimmedEmail)) {
|
||||
setEmailError(t("invalid_email"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (trustedSenders.includes(trimmedEmail)) {
|
||||
setEmailError(t("already_added"));
|
||||
return;
|
||||
}
|
||||
|
||||
addTrustedSender(trimmedEmail);
|
||||
setNewEmail("");
|
||||
setIsAdding(false);
|
||||
setEmailError("");
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleAddSender();
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
|
||||
<div
|
||||
ref={modalRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="trusted-senders-title"
|
||||
className={cn(
|
||||
"bg-background border border-border rounded-lg shadow-xl",
|
||||
"w-full max-w-md max-h-[60vh] overflow-hidden flex flex-col",
|
||||
"animate-in zoom-in-95 duration-200"
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="w-5 h-5 text-primary" />
|
||||
<h2 id="trusted-senders-title" className="text-lg font-semibold text-foreground">
|
||||
{t("modal_title")}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label={t("close")}
|
||||
className="p-2 rounded-md hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search (only when 5+ senders) */}
|
||||
{showSearch && (
|
||||
<div className="px-6 py-3 border-b border-border flex-shrink-0">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t("search_placeholder")}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-9 pr-3 py-2 text-sm bg-muted border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{trustedSenders.length === 0 ? (
|
||||
/* Empty State */
|
||||
<div className="flex flex-col items-center justify-center py-12 px-6 text-center">
|
||||
<ShieldCheck className="w-12 h-12 text-muted-foreground/50 mb-4" />
|
||||
<h3 className="text-base font-medium text-foreground mb-2">
|
||||
{t("empty_title")}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground max-w-[280px] mb-6">
|
||||
{t("empty_description")}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setIsAdding(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t("add_manually")}
|
||||
</button>
|
||||
</div>
|
||||
) : filteredSenders.length === 0 ? (
|
||||
/* No search results */
|
||||
<div className="flex flex-col items-center justify-center py-12 px-6 text-center">
|
||||
<Search className="w-10 h-10 text-muted-foreground/50 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("no_results")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
/* Sender list */
|
||||
<div className="divide-y divide-border">
|
||||
{filteredSenders.map((email) => (
|
||||
<div
|
||||
key={email}
|
||||
className="flex items-center gap-3 px-6 py-3 hover:bg-muted/50 transition-colors group"
|
||||
>
|
||||
<Avatar email={email} size="sm" />
|
||||
<span className="flex-1 text-sm text-foreground truncate">
|
||||
{email}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeTrustedSender(email)}
|
||||
className="p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100"
|
||||
aria-label={`${t("remove")} ${email}`}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer - Add sender */}
|
||||
{trustedSenders.length > 0 && (
|
||||
<div className="px-6 py-4 border-t border-border flex-shrink-0">
|
||||
{isAdding ? (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="email"
|
||||
placeholder={t("add_placeholder")}
|
||||
value={newEmail}
|
||||
onChange={(e) => {
|
||||
setNewEmail(e.target.value);
|
||||
setEmailError("");
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={cn(
|
||||
"flex-1 px-3 py-2 text-sm bg-background border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50",
|
||||
emailError ? "border-destructive" : "border-border"
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddSender}
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors text-sm font-medium"
|
||||
>
|
||||
{t("add_button")}
|
||||
</button>
|
||||
</div>
|
||||
{emailError && (
|
||||
<p className="text-xs text-destructive">{emailError}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setIsAdding(true)}
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t("add_manually")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface AppConfig {
|
||||
appName: string;
|
||||
jmapServerUrl: string;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// Cache the config to avoid multiple fetches
|
||||
let configCache: { appName: string; jmapServerUrl: string } | null = null;
|
||||
let configPromise: Promise<{ appName: string; jmapServerUrl: string }> | null = null;
|
||||
|
||||
async function fetchConfig(): Promise<{ appName: string; jmapServerUrl: string }> {
|
||||
// Return cached config if available
|
||||
if (configCache) {
|
||||
return configCache;
|
||||
}
|
||||
|
||||
// If a fetch is already in progress, wait for it
|
||||
if (configPromise) {
|
||||
return configPromise;
|
||||
}
|
||||
|
||||
// Start a new fetch
|
||||
configPromise = fetch('/api/config')
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch config');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
configCache = data;
|
||||
return data;
|
||||
})
|
||||
.finally(() => {
|
||||
configPromise = null;
|
||||
});
|
||||
|
||||
return configPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to fetch runtime configuration
|
||||
*
|
||||
* Fetches app configuration from /api/config endpoint, which reads
|
||||
* environment variables at runtime (not build time).
|
||||
*
|
||||
* The config is cached after first fetch to avoid unnecessary requests.
|
||||
*/
|
||||
export function useConfig(): AppConfig {
|
||||
const [config, setConfig] = useState<AppConfig>({
|
||||
appName: configCache?.appName || 'Webmail',
|
||||
jmapServerUrl: configCache?.jmapServerUrl || '',
|
||||
isLoading: !configCache,
|
||||
error: null,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// If already cached, no need to fetch
|
||||
if (configCache) {
|
||||
setConfig({
|
||||
appName: configCache.appName,
|
||||
jmapServerUrl: configCache.jmapServerUrl,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
fetchConfig()
|
||||
.then((data) => {
|
||||
setConfig({
|
||||
appName: data.appName,
|
||||
jmapServerUrl: data.jmapServerUrl,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
setConfig((prev) => ({
|
||||
...prev,
|
||||
isLoading: false,
|
||||
error: err.message,
|
||||
}));
|
||||
});
|
||||
}, []);
|
||||
|
||||
return config;
|
||||
}
|
||||
+36
-9
@@ -1,4 +1,4 @@
|
||||
import type { Email, Mailbox, StateChange, AccountStates, Thread } from "./types";
|
||||
import type { Email, Mailbox, StateChange, AccountStates, Thread, Identity } from "./types";
|
||||
|
||||
// JMAP protocol types - these are intentionally flexible due to server variations
|
||||
interface JMAPSession {
|
||||
@@ -900,6 +900,26 @@ export class JMAPClient {
|
||||
}
|
||||
}
|
||||
|
||||
async getIdentities(): Promise<Identity[]> {
|
||||
try {
|
||||
const response = await this.request([
|
||||
["Identity/get", {
|
||||
accountId: this.accountId,
|
||||
}, "0"]
|
||||
]);
|
||||
|
||||
if (response.methodResponses?.[0]?.[0] === "Identity/get") {
|
||||
const identities = (response.methodResponses[0][1].list || []) as Identity[];
|
||||
return identities;
|
||||
}
|
||||
|
||||
return [];
|
||||
} catch (error) {
|
||||
console.error('Failed to get identities:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async createDraft(
|
||||
to: string[],
|
||||
subject: string,
|
||||
@@ -907,7 +927,8 @@ export class JMAPClient {
|
||||
cc?: string[],
|
||||
bcc?: string[],
|
||||
draftId?: string,
|
||||
attachments?: Array<{ blobId: string; name: string; type: string; size: number }>
|
||||
attachments?: Array<{ blobId: string; name: string; type: string; size: number }>,
|
||||
fromEmail?: string
|
||||
): Promise<string> {
|
||||
// Find the drafts mailbox
|
||||
const mailboxes = await this.getMailboxes();
|
||||
@@ -933,7 +954,7 @@ export class JMAPClient {
|
||||
attachments?: { blobId: string; type: string; name: string; disposition: string }[];
|
||||
}
|
||||
const emailData: EmailDraft = {
|
||||
from: [{ email: this.username }],
|
||||
from: [{ email: fromEmail || this.username }],
|
||||
to: to.map(email => ({ email })),
|
||||
cc: cc?.map(email => ({ email })),
|
||||
bcc: bcc?.map(email => ({ email })),
|
||||
@@ -1025,7 +1046,9 @@ export class JMAPClient {
|
||||
body: string,
|
||||
cc?: string[],
|
||||
bcc?: string[],
|
||||
draftId?: string
|
||||
draftId?: string,
|
||||
fromEmail?: string,
|
||||
selectedIdentityId?: string
|
||||
): Promise<void> {
|
||||
const emailId = draftId || `draft-${Date.now()}`;
|
||||
|
||||
@@ -1037,24 +1060,28 @@ export class JMAPClient {
|
||||
throw new Error('No sent mailbox found');
|
||||
}
|
||||
|
||||
// Get the identity ID - fetch identities from server
|
||||
// Use provided identity ID or fetch from server as fallback
|
||||
let identityId = selectedIdentityId;
|
||||
|
||||
if (!identityId) {
|
||||
const identityResponse = await this.request([
|
||||
["Identity/get", {
|
||||
accountId: this.accountId,
|
||||
}, "0"]
|
||||
]);
|
||||
|
||||
let identityId = this.accountId; // fallback
|
||||
identityId = this.accountId; // fallback
|
||||
|
||||
if (identityResponse.methodResponses?.[0]?.[0] === "Identity/get") {
|
||||
const identities = (identityResponse.methodResponses[0][1].list || []) as { id: string; email: string }[];
|
||||
|
||||
if (identities.length > 0) {
|
||||
// Use the first identity (or find one matching the username)
|
||||
const matchingIdentity = identities.find((id) => id.email === this.username);
|
||||
// Use the first identity (or find one matching the fromEmail/username)
|
||||
const matchingIdentity = identities.find((id) => id.email === (fromEmail || this.username));
|
||||
identityId = matchingIdentity?.id || identities[0].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const methodCalls: JMAPMethodCall[] = [];
|
||||
|
||||
@@ -1085,7 +1112,7 @@ export class JMAPClient {
|
||||
accountId: this.accountId,
|
||||
create: {
|
||||
[emailId]: {
|
||||
from: [{ email: this.username }],
|
||||
from: [{ email: fromEmail || this.username }],
|
||||
to: to.map(email => ({ email })),
|
||||
cc: cc?.map(email => ({ email })),
|
||||
bcc: bcc?.map(email => ({ email })),
|
||||
|
||||
+31
-2
@@ -7,11 +7,18 @@
|
||||
"password_placeholder": "Enter your password",
|
||||
"sign_in": "Sign in",
|
||||
"signing_in": "Signing in...",
|
||||
"loading": "Loading...",
|
||||
"error": {
|
||||
"invalid_credentials": "Invalid email or password",
|
||||
"connection_failed": "Failed to connect to the server",
|
||||
"generic": "An error occurred. Please try again."
|
||||
}
|
||||
},
|
||||
"config_error": {
|
||||
"title": "Configuration Error",
|
||||
"fetch_failed": "Unable to load application configuration. Please try again later.",
|
||||
"server_not_configured": "The mail server has not been configured. Please contact your administrator."
|
||||
},
|
||||
"remove_from_history": "Remove from history"
|
||||
},
|
||||
"sidebar": {
|
||||
"compose": "Compose",
|
||||
@@ -82,6 +89,7 @@
|
||||
"hide_details": "Hide details",
|
||||
"external_content_warning": "Images and external content have been blocked",
|
||||
"load_external_content": "Load images",
|
||||
"trust_sender": "Always trust this sender",
|
||||
"message_details": "Message Details",
|
||||
"authentication": {
|
||||
"title": "Authentication",
|
||||
@@ -132,6 +140,7 @@
|
||||
"reply_to": "Reply",
|
||||
"reply_all_to": "Reply All",
|
||||
"forward_message": "Forward",
|
||||
"from": "From",
|
||||
"to": "To",
|
||||
"cc": "CC",
|
||||
"bcc": "BCC",
|
||||
@@ -139,7 +148,8 @@
|
||||
"body_placeholder": "Write your message...",
|
||||
"send": "Send",
|
||||
"cancel": "Cancel",
|
||||
"attach": "Attach files",
|
||||
"attach": "Attach",
|
||||
"discard": "Discard",
|
||||
"discard_draft_confirm": "You have unsaved changes. Do you want to discard this draft?",
|
||||
"quote": {
|
||||
"reply_header": "On {{date}}, {{sender}} wrote:",
|
||||
@@ -313,6 +323,25 @@
|
||||
"ask": "Always ask",
|
||||
"block": "Always block",
|
||||
"allow": "Always allow"
|
||||
},
|
||||
"trusted_senders": {
|
||||
"label": "Trusted Senders",
|
||||
"description": "Manage senders whose images load automatically",
|
||||
"count_zero": "None",
|
||||
"count_one": "1 sender",
|
||||
"count_other": "{count} senders",
|
||||
"modal_title": "Trusted Senders",
|
||||
"empty_title": "No trusted senders yet",
|
||||
"empty_description": "When viewing an email with blocked images, click \"Always trust this sender\" to add them here.",
|
||||
"add_manually": "Add sender manually",
|
||||
"add_button": "Add",
|
||||
"add_placeholder": "Enter email address",
|
||||
"search_placeholder": "Search senders...",
|
||||
"no_results": "No senders match your search",
|
||||
"remove": "Remove",
|
||||
"close": "Close",
|
||||
"invalid_email": "Please enter a valid email address",
|
||||
"already_added": "This sender is already trusted"
|
||||
}
|
||||
},
|
||||
"composer": {
|
||||
|
||||
+31
-2
@@ -7,11 +7,18 @@
|
||||
"password_placeholder": "Entrez votre mot de passe",
|
||||
"sign_in": "Se connecter",
|
||||
"signing_in": "Connexion en cours...",
|
||||
"loading": "Chargement...",
|
||||
"error": {
|
||||
"invalid_credentials": "Email ou mot de passe invalide",
|
||||
"connection_failed": "Échec de la connexion au serveur",
|
||||
"generic": "Une erreur s'est produite. Veuillez réessayer."
|
||||
}
|
||||
},
|
||||
"config_error": {
|
||||
"title": "Erreur de configuration",
|
||||
"fetch_failed": "Impossible de charger la configuration de l'application. Veuillez réessayer plus tard.",
|
||||
"server_not_configured": "Le serveur de messagerie n'a pas été configuré. Veuillez contacter votre administrateur."
|
||||
},
|
||||
"remove_from_history": "Supprimer de l'historique"
|
||||
},
|
||||
"sidebar": {
|
||||
"compose": "Composer",
|
||||
@@ -82,6 +89,7 @@
|
||||
"hide_details": "Masquer les détails",
|
||||
"external_content_warning": "Les images et le contenu externe ont été bloqués",
|
||||
"load_external_content": "Charger les images",
|
||||
"trust_sender": "Toujours faire confiance à cet expéditeur",
|
||||
"message_details": "Détails du message",
|
||||
"authentication": {
|
||||
"title": "Authentification",
|
||||
@@ -132,6 +140,7 @@
|
||||
"reply_to": "Répondre",
|
||||
"reply_all_to": "Répondre à tous",
|
||||
"forward_message": "Transférer",
|
||||
"from": "De",
|
||||
"to": "À",
|
||||
"cc": "CC",
|
||||
"bcc": "CCI",
|
||||
@@ -139,7 +148,8 @@
|
||||
"body_placeholder": "Écrivez votre message...",
|
||||
"send": "Envoyer",
|
||||
"cancel": "Annuler",
|
||||
"attach": "Joindre des fichiers",
|
||||
"attach": "Joindre",
|
||||
"discard": "Supprimer",
|
||||
"discard_draft_confirm": "Vous avez des modifications non enregistrées. Voulez-vous supprimer ce brouillon ?",
|
||||
"quote": {
|
||||
"reply_header": "Le {{date}}, {{sender}} a écrit :",
|
||||
@@ -313,6 +323,25 @@
|
||||
"ask": "Toujours demander",
|
||||
"block": "Toujours bloquer",
|
||||
"allow": "Toujours autoriser"
|
||||
},
|
||||
"trusted_senders": {
|
||||
"label": "Expéditeurs de confiance",
|
||||
"description": "Gérer les expéditeurs dont les images se chargent automatiquement",
|
||||
"count_zero": "Aucun",
|
||||
"count_one": "1 expéditeur",
|
||||
"count_other": "{count} expéditeurs",
|
||||
"modal_title": "Expéditeurs de confiance",
|
||||
"empty_title": "Aucun expéditeur de confiance",
|
||||
"empty_description": "Lorsque vous consultez un email avec des images bloquées, cliquez sur « Toujours faire confiance à cet expéditeur » pour l'ajouter ici.",
|
||||
"add_manually": "Ajouter manuellement",
|
||||
"add_button": "Ajouter",
|
||||
"add_placeholder": "Entrez une adresse email",
|
||||
"search_placeholder": "Rechercher...",
|
||||
"no_results": "Aucun expéditeur ne correspond à votre recherche",
|
||||
"remove": "Supprimer",
|
||||
"close": "Fermer",
|
||||
"invalid_email": "Veuillez entrer une adresse email valide",
|
||||
"already_added": "Cet expéditeur est déjà de confiance"
|
||||
}
|
||||
},
|
||||
"composer": {
|
||||
|
||||
+10
-10
@@ -37,28 +37,28 @@
|
||||
"dompurify": "^3.2.7",
|
||||
"jmap-jam": "^0.13.1",
|
||||
"lucide-react": "^0.562.0",
|
||||
"next": "^16.1.1",
|
||||
"next": "^16.0.8",
|
||||
"next-auth": "^4.24.11",
|
||||
"next-intl": "^4.6.1",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"next-intl": "^4.5.8",
|
||||
"react": "^19.2.1",
|
||||
"react-dom": "^19.2.1",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"zustand": "^5.0.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@typescript-eslint/eslint-plugin": "^8.50.1",
|
||||
"@typescript-eslint/parser": "^8.50.1",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-config-next": "^16.1.1",
|
||||
"@typescript-eslint/eslint-plugin": "^8.49.0",
|
||||
"@typescript-eslint/parser": "^8.49.0",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-config-next": "^16.0.8",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"globals": "^16.5.0",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^16.2.7",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"tailwindcss": "^4.1.17",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
import { JMAPClient } from '@/lib/jmap/client';
|
||||
import { useEmailStore } from './email-store';
|
||||
import type { Identity } from '@/lib/jmap/types';
|
||||
|
||||
interface AuthState {
|
||||
isAuthenticated: boolean;
|
||||
@@ -10,6 +11,8 @@ interface AuthState {
|
||||
serverUrl: string | null;
|
||||
username: string | null;
|
||||
client: JMAPClient | null;
|
||||
identities: Identity[];
|
||||
primaryIdentity: Identity | null;
|
||||
|
||||
login: (serverUrl: string, username: string, password: string) => Promise<boolean>;
|
||||
logout: () => void;
|
||||
@@ -26,6 +29,8 @@ export const useAuthStore = create<AuthState>()(
|
||||
serverUrl: null,
|
||||
username: null,
|
||||
client: null,
|
||||
identities: [],
|
||||
primaryIdentity: null,
|
||||
|
||||
login: async (serverUrl, username, password) => {
|
||||
set({ isLoading: true, error: null });
|
||||
@@ -37,6 +42,10 @@ export const useAuthStore = create<AuthState>()(
|
||||
// Try to connect
|
||||
await client.connect();
|
||||
|
||||
// Fetch identities from the server
|
||||
const identities = await client.getIdentities();
|
||||
const primaryIdentity = identities.length > 0 ? identities[0] : null;
|
||||
|
||||
// Success - save state (but NOT the password)
|
||||
set({
|
||||
isAuthenticated: true,
|
||||
@@ -44,6 +53,8 @@ export const useAuthStore = create<AuthState>()(
|
||||
serverUrl,
|
||||
username,
|
||||
client,
|
||||
identities,
|
||||
primaryIdentity,
|
||||
error: null,
|
||||
});
|
||||
|
||||
@@ -87,6 +98,8 @@ export const useAuthStore = create<AuthState>()(
|
||||
serverUrl: null,
|
||||
username: null,
|
||||
client: null,
|
||||
identities: [],
|
||||
primaryIdentity: null,
|
||||
error: null,
|
||||
});
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ interface EmailStore {
|
||||
loadMoreEmails: (client: JMAPClient) => Promise<void>;
|
||||
fetchEmailContent: (client: JMAPClient, emailId: string) => Promise<Email | null>;
|
||||
fetchQuota: (client: JMAPClient) => Promise<void>;
|
||||
sendEmail: (client: JMAPClient, to: string[], subject: string, body: string, cc?: string[], bcc?: string[], draftId?: string) => Promise<void>;
|
||||
sendEmail: (client: JMAPClient, to: string[], subject: string, body: string, cc?: string[], bcc?: string[], draftId?: string, fromEmail?: string, identityId?: string) => Promise<void>;
|
||||
deleteEmail: (client: JMAPClient, emailId: string) => Promise<void>;
|
||||
markAsRead: (client: JMAPClient, emailId: string, read: boolean) => Promise<void>;
|
||||
moveToMailbox: (client: JMAPClient, emailId: string, mailboxId: string) => Promise<void>;
|
||||
@@ -282,10 +282,10 @@ export const useEmailStore = create<EmailStore>((set, get) => ({
|
||||
}
|
||||
},
|
||||
|
||||
sendEmail: async (client, to, subject, body, cc, bcc, draftId) => {
|
||||
sendEmail: async (client, to, subject, body, cc, bcc, draftId, fromEmail, identityId) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
await client.sendEmail(to, subject, body, cc, bcc, draftId);
|
||||
await client.sendEmail(to, subject, body, cc, bcc, draftId, fromEmail, identityId);
|
||||
// Refresh emails after sending
|
||||
await get().fetchEmails(client);
|
||||
set({ isLoading: false });
|
||||
|
||||
@@ -35,6 +35,7 @@ interface SettingsState {
|
||||
|
||||
// Privacy & Security
|
||||
sessionTimeout: number; // minutes (0 = never)
|
||||
trustedSenders: string[]; // Email addresses that can load external content
|
||||
|
||||
// Advanced
|
||||
debugMode: boolean;
|
||||
@@ -47,6 +48,11 @@ interface SettingsState {
|
||||
resetToDefaults: () => void;
|
||||
exportSettings: () => string;
|
||||
importSettings: (json: string) => boolean;
|
||||
|
||||
// Trusted senders
|
||||
addTrustedSender: (email: string) => void;
|
||||
removeTrustedSender: (email: string) => void;
|
||||
isSenderTrusted: (email: string) => boolean;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
@@ -74,6 +80,7 @@ const DEFAULT_SETTINGS = {
|
||||
|
||||
// Privacy & Security
|
||||
sessionTimeout: 0, // Never
|
||||
trustedSenders: [] as string[],
|
||||
|
||||
// Advanced
|
||||
debugMode: false,
|
||||
@@ -124,6 +131,7 @@ export const useSettingsStore = create<SettingsState>()(
|
||||
showPreview: state.showPreview,
|
||||
emailsPerPage: state.emailsPerPage,
|
||||
externalContentPolicy: state.externalContentPolicy,
|
||||
trustedSenders: state.trustedSenders,
|
||||
autoSaveDraftInterval: state.autoSaveDraftInterval,
|
||||
sendConfirmation: state.sendConfirmation,
|
||||
defaultReplyMode: state.defaultReplyMode,
|
||||
@@ -160,6 +168,27 @@ export const useSettingsStore = create<SettingsState>()(
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Trusted senders methods
|
||||
addTrustedSender: (email: string) => {
|
||||
const normalizedEmail = email.toLowerCase().trim();
|
||||
const current = get().trustedSenders;
|
||||
if (!current.includes(normalizedEmail)) {
|
||||
set({ trustedSenders: [...current, normalizedEmail] });
|
||||
}
|
||||
},
|
||||
|
||||
removeTrustedSender: (email: string) => {
|
||||
const normalizedEmail = email.toLowerCase().trim();
|
||||
set({
|
||||
trustedSenders: get().trustedSenders.filter(e => e !== normalizedEmail)
|
||||
});
|
||||
},
|
||||
|
||||
isSenderTrusted: (email: string) => {
|
||||
const normalizedEmail = email.toLowerCase().trim();
|
||||
return get().trustedSenders.includes(normalizedEmail);
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'settings-storage',
|
||||
|
||||
Reference in New Issue
Block a user