Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2f5b133000 | ||
|
|
1f21a5213f | ||
|
|
d4c066622b | ||
|
|
e141abc849 | ||
|
|
1f4afe082b | ||
|
|
e0747c12ee | ||
|
|
f90cd6abc4 | ||
|
|
63e087f3ef | ||
|
|
f8b8e0b108 | ||
|
|
512adab7e3 | ||
|
|
4cdc15fc3c | ||
|
|
5e67671f57 | ||
|
|
155d99a069 | ||
|
|
d863b1fd4b | ||
|
|
70aaf0aac1 | ||
|
|
de56229ef2 | ||
|
|
1ff23790ae | ||
|
|
198407ebf5 | ||
|
|
de68d68fb7 | ||
|
|
f285a2bd64 | ||
|
|
84b6d0fd8b | ||
|
|
f972068143 | ||
|
|
7882b254a0 | ||
|
|
ae5d397512 | ||
|
|
7a022596c3 | ||
|
|
8c575e8ed8 | ||
|
|
85fbab9eb4 | ||
|
|
1119d8ed73 | ||
|
|
32f0a67dbc | ||
|
|
baf094d026 | ||
|
|
f1b9f4ba50 | ||
|
|
cc20d29636 | ||
|
|
5f713a033b | ||
|
|
079ec57204 | ||
|
|
cd247e9c47 | ||
|
|
8af6694152 | ||
|
|
751f3c1685 | ||
|
|
5c2f206c74 | ||
|
|
acc61db6f2 | ||
|
|
d671c606a1 | ||
|
|
fa3c57467b | ||
|
|
befee332d2 | ||
|
|
a29c33b50a | ||
|
|
3dd596ba50 | ||
|
|
e50fe0d4db | ||
|
|
3d3ad8f0ef | ||
|
|
d0ed4b4dfe | ||
|
|
5306f7c548 | ||
|
|
ddb596affc | ||
|
|
bfc8ba851a | ||
|
|
3f9e60843d | ||
|
|
2fac6ebfb8 | ||
|
|
dda9fd1433 | ||
|
|
3516d3c727 | ||
|
|
0b7203df0f | ||
|
|
344795a8d9 | ||
|
|
638fc7db4e | ||
|
|
ab3e0e717a | ||
|
|
c9eae3b3a1 | ||
|
|
6f615f4c32 | ||
|
|
52eacf87b9 | ||
|
|
c4f1cc23d7 | ||
|
|
4f1390fdeb | ||
|
|
c0ca6d3102 | ||
|
|
0872d3dc8d | ||
|
|
1f889b0965 | ||
|
|
0b9fe5451f | ||
|
|
fd700f412e | ||
|
|
f7d4f9d53c | ||
|
|
84aced7b4e | ||
|
|
94b1f5aa48 | ||
|
|
c51c3655d5 | ||
|
|
404a1e847c | ||
|
|
dcea4fdd5e | ||
|
|
701f96adb3 | ||
|
|
1ebfb286ad | ||
|
|
b5f15dfdb7 | ||
|
|
aee4bd78db | ||
|
|
798a33495e | ||
|
|
4c6c1aab60 | ||
|
|
848ed9774d | ||
|
|
b32e102ff9 | ||
|
|
e8feb11983 | ||
|
|
3e12fca517 | ||
|
|
8df483d8c7 | ||
|
|
1e63e2469a | ||
|
|
e1c28e767a | ||
|
|
fe5645c818 | ||
|
|
38570b1723 | ||
|
|
a4f476945d | ||
|
|
20fd9ff4de | ||
|
|
569dde9985 | ||
|
|
08f344403b | ||
|
|
be58cee989 | ||
|
|
7c11e2b3c9 | ||
|
|
f2913a7c7d | ||
|
|
a27a5be3dd | ||
|
|
964136b540 | ||
|
|
569f688fbf | ||
|
|
1d050f8469 | ||
|
|
2e4c0f9eea | ||
|
|
fd0b866339 | ||
|
|
1518ba04dd | ||
|
|
c5672c64fb | ||
|
|
5997579f54 | ||
|
|
f77d2e9103 | ||
|
|
6350e9dabc | ||
|
|
7723c134ff | ||
|
|
d11ed904a9 |
+13
-4
@@ -49,6 +49,11 @@ JMAP_SERVER_URL=https://your-jmap-server.com
|
||||
# OpenID Connect issuer URL for discovery
|
||||
# OAUTH_ISSUER_URL=https://your-idp.example.com
|
||||
|
||||
# Overrides only the user-facing authorize endpoint (e.g. a per-brand login
|
||||
# host). Discovery, token exchange and refresh keep using OAUTH_ISSUER_URL.
|
||||
# Leave unset to use the authorization_endpoint from discovery.
|
||||
# OAUTH_AUTHORIZE_URL=https://login.your-brand.example.com/application/o/authorize/
|
||||
|
||||
# Allow OAuth discovery to resolve to private (RFC-1918 / loopback) addresses.
|
||||
# Off by default as an SSRF guard. Enable for split-DNS deployments where the
|
||||
# OAuth issuer's public hostname resolves to an internal IP from this server.
|
||||
@@ -110,12 +115,16 @@ JMAP_SERVER_URL=https://your-jmap-server.com
|
||||
# Anonymous Telemetry
|
||||
# =============================================================================
|
||||
|
||||
# Anonymous instance telemetry is enabled by default. Heartbeats contain no PII:
|
||||
# version, platform, bucketed account counts, and feature toggles only. See
|
||||
# Anonymous instance telemetry is OPT-IN and disabled by default. Enabling it
|
||||
# helps us understand how Bulwark is used so we can make the product better.
|
||||
# Heartbeats contain no PII: version, platform, bucketed account counts, and
|
||||
# feature toggles only - never email addresses, hostnames, or IPs. See
|
||||
# https://bulwarkmail.org/docs/legal/privacy/telemetry for the full schema.
|
||||
#
|
||||
# Disable telemetry entirely (overrides the admin UI):
|
||||
# BULWARK_TELEMETRY=off
|
||||
# Enable telemetry (also toggleable in the admin UI):
|
||||
# BULWARK_TELEMETRY=on
|
||||
#
|
||||
# Setting this (on or off) locks the choice and disables the admin UI toggle.
|
||||
|
||||
# Directory for telemetry state: instance id, consent, login HMACs
|
||||
# (default: ./data/telemetry). For Docker, the default resolves to
|
||||
|
||||
+104
@@ -1,5 +1,109 @@
|
||||
# Changelog
|
||||
|
||||
## 1.7.6 (2026-06-28)
|
||||
|
||||
### Breaking Changes
|
||||
|
||||
- **S/MIME**: The built-in S/MIME implementation has been removed from core and re-delivered through the new generic crypto plugin hooks (privileged same-origin plugin tier). S/MIME signing, encryption, decryption, certificate management, and the related settings UI now live in a plugin rather than the main app. Deployments that relied on built-in S/MIME must install the S/MIME crypto plugin to retain those features.
|
||||
|
||||
### Features
|
||||
|
||||
- **Plugins**: Privileged same-origin plugin tier with a crypto API surface
|
||||
- **Plugins**: Plugin hooks for email details, headers, and source
|
||||
- **Mail**: Option to hide the total message count on folders (#498)
|
||||
|
||||
### Fixes
|
||||
|
||||
- **Mail**: Hide the server scheduled folder when the virtual one is shown (#495)
|
||||
- **Mail**: Stop the unified mailbox from mutating client-returned email objects
|
||||
- **Composer**: HTML-escape sender and subject in the reply/forward quote header (#482)
|
||||
- **Calendar**: Send calendar invites by setting `organizerCalendarAddress`
|
||||
- **Identity**: Sync the default identity (`preferredPrimaryId`) to server settings (#507)
|
||||
- **Auth**: Support MFA login via the structured auth endpoint
|
||||
- **Admin**: Show all built-in themes in the admin theme controls (#496)
|
||||
- **i18n**: Add missing translation keys across 19 locales
|
||||
|
||||
## 1.7.5 (2026-06-24)
|
||||
|
||||
### Features
|
||||
|
||||
- **Mail**: Cross-account "All accounts" views with full group/shared-account support
|
||||
- **Mail**: Per-account "All Mail" folder selection
|
||||
- **Mail**: "Download all" button to bundle attachments into a zip (#466)
|
||||
- **Mail**: Return to the list after deleting or marking the open message unread — configurable (default on)
|
||||
- **Mail**: Collapse-all-threads action in thread-list selection
|
||||
- **Calendar**: Option to disable the calendar
|
||||
- **Composer**: Send-now button on scheduled/delayed messages
|
||||
- **Composer**: Email a contact or group via the in-app composer
|
||||
- **Composer**: Split a pasted address list into recipient chips
|
||||
- **Contacts**: "New address book" creation UI (#415)
|
||||
- **OAuth**: `OAUTH_AUTHORIZE_URL` to override the authorize endpoint
|
||||
- **i18n**: Farsi (fa) locale — complete (2654 strings)
|
||||
- **i18n**: Romanian (ro) locale
|
||||
|
||||
### Fixes
|
||||
|
||||
- **Composer**: Keep HTML signature styling in the editor and on send
|
||||
- **Composer**: Guard Send against double-submit
|
||||
- **Composer**: Strip display names from the `EmailSubmission` envelope addresses
|
||||
- **Calendar**: Disable iMIP scheduling on calendar import (#411)
|
||||
- **Mail**: Localize special-folder names by JMAP role (#404)
|
||||
- **Mail**: Block remaining email tracking vectors (#457)
|
||||
- **Mail**: Route counter and unread updates to the email's own account in aggregate views
|
||||
- **Mail**: Fix blank space in plain-text emails
|
||||
- **Mail**: Fix toolbar re-render when opening emails
|
||||
- **Mail**: Truncate long subjects so they don't overlap the timestamp
|
||||
- **Mail**: Strip reply/forward prefixes followed by a full-width colon
|
||||
- **Mail**: Add breathing room between the unread dot and the avatar
|
||||
- **Mail**: Isolate per-account state snapshots from leakage and mutation
|
||||
- **Mail**: Cap filename tokens at the full 200-char limit
|
||||
- **Spam**: Fetch mailboxes with `accountId` in `markAsSpam`
|
||||
- **Filters**: Load mailboxes when opened directly (#485)
|
||||
- **Settings**: Surface server errors on password change and TOTP toggle
|
||||
- **Send now**: Gate the toolbar label and translate `send_now` across locales
|
||||
- **Directory**: Fix fetching display names
|
||||
- **Push**: Reap only relay-confirmed-dead leftover subscriptions
|
||||
- **i18n**: Add the missing fa locale to the client `IntlProvider` messages map
|
||||
- **i18n**: Add missing translation keys across 19 locales
|
||||
|
||||
## 1.7.4 (2026-06-15)
|
||||
|
||||
### Features
|
||||
|
||||
- **Mail**: New "All Mail" view across folders and accounts
|
||||
- **Mail**: Edit contact directly from the email viewer contact sidebar
|
||||
- **Calendar**: Recurrence editor, set-default calendar, and timezone-aware calendar queries
|
||||
- **Calendar**: Agenda plugin sidecar
|
||||
- **Composer**: Email display name support
|
||||
- **Composer**: Drag-and-drop recipient chips between To/CC/BCC fields, with the address shown in the drag preview
|
||||
- **Composer**: Avatars in recipient autocomplete suggestions, including directory users
|
||||
- **Files**: JMAP file/folder sharing in the Files app (#408)
|
||||
- **Auth**: QR-code SSO login and device pairing between webmail and the mobile app
|
||||
- **Auth**: Require re-authentication for device pairing and SSO
|
||||
- **Accounts**: Manage shared/group account settings from the Accounts page
|
||||
- **Setup**: Opt-in telemetry in the web setup wizard
|
||||
- **Mail**: Persist the email detail sidebar state
|
||||
|
||||
### Fixes
|
||||
|
||||
- **Mail**: Preserve line breaks in the generated `text/plain` alternative (#421)
|
||||
- **Mail**: Fix inconsistent threading of email messages in the inbox and folders
|
||||
- **Mail**: Stop draft emails from being marked as unread
|
||||
- **Mail**: Prevent wide email tables from rendering with rotated headers (#409)
|
||||
- **Mail**: Preserve the folder list when a mailbox refetch hits the concurrent-request limit
|
||||
- **Mail**: Correct dark-mode background-image inversion and height clipping in the email viewer
|
||||
- **Calendar**: Dedupe scheduling emails and use Stalwart-compatible calendar filters
|
||||
- **Calendar**: Redesign the custom recurrence editor to match the modal UI
|
||||
- **Files**: Don't send the connected-account key as the JMAP `accountId` when sharing files (#408)
|
||||
- **Routing**: Strip the build-time `basePath` from `router.push` redirects after login (#390)
|
||||
- **Nav**: Open recent contact emails at `/` instead of 404ing on `/mail`
|
||||
- **Nav**: Hide the Add App button when `sidebarAppsEnabled` is false
|
||||
- **Settings**: Move the "Plain Text Only" setting from Reading to Composing (#422)
|
||||
- **Privacy**: Make telemetry opt-in
|
||||
- **UI**: Fix the context menu being invisible on first right-click after page load
|
||||
- **Admin**: Remove the JMAP status from the admin dashboard
|
||||
- **i18n**: Add missing translation keys across 17 locales
|
||||
|
||||
## 1.7.3 (2026-06-04)
|
||||
|
||||
### Features
|
||||
|
||||
+8
-3
@@ -4,7 +4,9 @@
|
||||
|
||||
- Read, compose, reply, reply-all, and forward with a Tiptap rich text editor (inline images, drag-and-drop embedding, tables)
|
||||
- Gmail-style threading with inline expansion and an optional conversation toggle
|
||||
- Unified mailbox view across all connected accounts
|
||||
- Unified mailbox view across all connected accounts – combined Inbox, Sent, Drafts, Junk, Archive, and Trash, with group/shared accounts optionally merged in
|
||||
- Cross-account "All accounts" views – All unread, All starred, and All mail spanning every account (including shared/group folders); each aggregate list labels the source folder of every message
|
||||
- "All Mail" view that merges an account's folders (with a configurable folder selection) into a single list
|
||||
- Three selectable mail layouts: split (three-pane), focused list, and reading pane at bottom
|
||||
- Draft auto-save with identity preservation, persisted HTML body, and proper `In-Reply-To` / `References` headers on replies
|
||||
- Attachment upload, download, drag-out to local file system, and inline preview – images, inline PDF on desktop and mobile, composer attachments (click to open), and `.eml` (`message/rfc822`) attachments rendered like an email; image thumbnails and forgotten-attachment warning
|
||||
@@ -69,6 +71,7 @@
|
||||
- Grid and list views with sorting by name, size, or date
|
||||
- Previews for images, text, audio, and video
|
||||
- Clipboard operations (cut, copy, paste, duplicate), favorites, and recent files
|
||||
- JMAP sharing (RFC 9670) for files and folders – share with users or groups at read, read/write, or manager levels via a principal picker, with share indicators and a "Shared with me" sidebar section for folders other principals have shared with you
|
||||
|
||||
## Security & Privacy
|
||||
|
||||
@@ -102,7 +105,7 @@
|
||||
|
||||
## Internationalization
|
||||
|
||||
18 languages: Česky · Dansk · Deutsch · English · Español · Français · Italiano · Latviešu · Magyar · Nederlands · Polski · Português · Türkçe · Русский · Українська · 한국어 · 日本語 · 简体中文
|
||||
19 languages: Česky · Dansk · Deutsch · English · Español · Français · Italiano · Latviešu · Magyar · Nederlands · Polski · Português · Română · Türkçe · Русский · Українська · 한국어 · 日本語 · 简体中文
|
||||
|
||||
Automatic browser detection with persistent preference. Configurable locale URL prefix via `NEXT_PUBLIC_LOCALE_PREFIX`.
|
||||
|
||||
@@ -114,6 +117,7 @@ Automatic browser detection with persistent preference. Configurable locale URL
|
||||
- Configurable signature position (above or below quoted text)
|
||||
- Sub-addressing (`user+tag@domain.com`) with configurable delimiter and contextual tag suggestions
|
||||
- Shared folders across accounts
|
||||
- Shared / group (delegated) accounts: their folders appear alongside your own and can be merged into the unified and "All accounts" views ("Include group inboxes"); their messages are fully actionable there – open, mark read, spam / not-spam, move, delete, and archive – with folder unread counts kept in sync
|
||||
- Multiple JMAP servers per deployment with optional auto-pick by email domain
|
||||
- Optional custom JMAP endpoints on the login form (`ALLOW_CUSTOM_JMAP_ENDPOINT`)
|
||||
|
||||
@@ -121,6 +125,7 @@ Automatic browser detection with persistent preference. Configurable locale URL
|
||||
|
||||
- Web setup wizard for first launch – guides through JMAP server(s), OAuth/OIDC, session secret, logging, branding (with file upload), and admin password; persists to the admin config dir, no `.env.local` editing required
|
||||
- Stalwart admin dashboard with dedicated policy sections, collapsed into a single tabbed page
|
||||
- Admin policy gates for the aggregate mail views – enable or disable the "All Mail" and the cross-account "All unread / starred / all" entries org-wide; each gated view still respects the user's own toggle
|
||||
- Split admin storage: `ADMIN_CONFIG_DIR` (operator-authored, mountable read-only after setup) and `ADMIN_STATE_DIR` (runtime audit log and login timestamps)
|
||||
- File-based secrets for JSON config: `passwordHashFile` (admin password), `sessionSecretFile`, and `oauthClientSecretFile` for Docker/Kubernetes secret mounts
|
||||
- Admin toggle for search-engine indexing (`robots.txt` / `noindex`)
|
||||
@@ -135,7 +140,7 @@ Automatic browser detection with persistent preference. Configurable locale URL
|
||||
- Progressive Web App with service worker, install prompt, web push notifications for inbox mail, dynamic manifest, and configurable (per-domain) install screenshots
|
||||
- Automatic update check with server-side logging of new releases and a non-dismissible update notice
|
||||
- Structured logging (`text` or `json`) with category-based levels
|
||||
- Anonymous instance telemetry (opt-out via admin UI or `BULWARK_TELEMETRY=off`) – version, platform, bucketed account counts, feature toggles only
|
||||
- Anonymous instance telemetry (opt-in via admin UI, the installer, or `BULWARK_TELEMETRY=on`; off by default) – version, platform, bucketed account counts, feature toggles only
|
||||
- Release (`main`) and development (`dev`) Docker images on GHCR
|
||||
- Subpath deployment via `NEXT_PUBLIC_BASE_PATH` for mounting behind a reverse proxy
|
||||
- Demo mode with fixture data – no mail server required
|
||||
|
||||
@@ -12,7 +12,7 @@ A modern, self-hosted webmail client for [Stalwart Mail Server](https://stalw.ar
|
||||
|
||||
[](LICENSE)
|
||||
[](https://discord.gg/tYCujymGrT)
|
||||
[](CHANGELOG.md)
|
||||
[](CHANGELOG.md)
|
||||
[](https://ghcr.io/bulwarkmail/webmail)
|
||||
[](https://grafana.external.bulwarkmail.org/)
|
||||
|
||||
@@ -81,7 +81,7 @@ The wizard writes to `ADMIN_CONFIG_DIR` (`./data/admin` by default). Setting `JM
|
||||
|
||||
Bulwark is a full webmail suite, not just an inbox. It bundles the four apps most self-hosters end up wanting on the same login:
|
||||
|
||||
- **Mail** – threading, unified inbox, full-text search, Sieve filters, S/MIME, templates
|
||||
- **Mail** – threading, unified inbox, cross-account "All accounts" views, full-text search, Sieve filters, S/MIME, templates
|
||||
- **Calendar** – month/week/day/agenda, recurring events, iMIP invitations, CalDAV subscriptions
|
||||
- **Contacts** – multiple address books, groups, vCard import/export
|
||||
- **Files** – Stalwart's JMAP FileNode storage with previews and folder upload
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Suspense, useEffect, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { apiFetch, getPathPrefix } from "@/lib/browser-navigation";
|
||||
import { apiFetch, getPathPrefix, toRouterPath } from "@/lib/browser-navigation";
|
||||
import { Loader2, AlertCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useParams } from "next/navigation";
|
||||
@@ -32,6 +32,42 @@ function OAuthCallbackInner() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Step-up re-auth for device pairing: the QR generator sent the user here
|
||||
// via prompt=login. Don't create a login session — just confirm the fresh
|
||||
// auth (sets the short-lived pairing proof cookie) and bounce back to the
|
||||
// Security settings, where the QR generation auto-resumes.
|
||||
let pairReauthResume = false;
|
||||
try {
|
||||
pairReauthResume = sessionStorage.getItem("pair_reauth_resume") === "1";
|
||||
} catch { /* sessionStorage unavailable */ }
|
||||
if (pairReauthResume && state) {
|
||||
try { sessionStorage.removeItem("pair_reauth_resume"); } catch { /* ignore */ }
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch("/api/auth/reauth/sso/complete", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ code, state }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
setError("token_exchange_failed");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
sessionStorage.setItem("pair_reauth_done", "1");
|
||||
// Land back on the Security tab (readPersistedTab reads this key).
|
||||
sessionStorage.setItem("settings-deep-link-tab", "security");
|
||||
} catch { /* ignore */ }
|
||||
const prefix = getPathPrefix(params.locale as string);
|
||||
router.push(toRouterPath(`${prefix}/${params.locale}/settings`));
|
||||
} catch {
|
||||
setError("token_exchange_failed");
|
||||
}
|
||||
})();
|
||||
return;
|
||||
}
|
||||
|
||||
const savedState = sessionStorage.getItem("oauth_state");
|
||||
|
||||
if (savedState) {
|
||||
@@ -69,7 +105,7 @@ function OAuthCallbackInner() {
|
||||
redirectTo = saved;
|
||||
}
|
||||
} catch { /* sessionStorage may be unavailable */ }
|
||||
router.push(redirectTo);
|
||||
router.push(toRouterPath(redirectTo));
|
||||
} else {
|
||||
setError("token_exchange_failed");
|
||||
}
|
||||
@@ -153,7 +189,7 @@ function OAuthCallbackInner() {
|
||||
redirectTo = saved;
|
||||
}
|
||||
} catch { /* sessionStorage may be unavailable */ }
|
||||
router.push(redirectTo);
|
||||
router.push(toRouterPath(redirectTo));
|
||||
} else {
|
||||
setError("token_exchange_failed");
|
||||
}
|
||||
@@ -181,7 +217,7 @@ function OAuthCallbackInner() {
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.push(`${getPathPrefix(params.locale as string)}/${params.locale}/login`)}
|
||||
onClick={() => router.push(toRouterPath(`${getPathPrefix(params.locale as string)}/${params.locale}/login`))}
|
||||
>
|
||||
{t("oauth_error.back_to_login")}
|
||||
</Button>
|
||||
|
||||
@@ -16,6 +16,7 @@ import { useEmailStore } from "@/stores/email-store";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import { useIdentityStore } from "@/stores/identity-store";
|
||||
import { useAccountStore } from "@/stores/account-store";
|
||||
import { usePolicyStore } from "@/stores/policy-store";
|
||||
import { toast } from "@/stores/toast-store";
|
||||
import { useIsDesktop, useIsMobile } from "@/hooks/use-media-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -97,6 +98,7 @@ export default function CalendarPage() {
|
||||
removeCalendar, clearCalendarEvents,
|
||||
refreshAllSubscriptions, icalSubscriptions,
|
||||
} = useCalendarStore();
|
||||
const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
|
||||
const { firstDayOfWeek, timeFormat, showWeekNumbers, enableCalendarTasks, showTasksOnCalendar, calendarHoverPreview, showBirthdayCalendar, birthdayCalendarColor, updateSetting } = useSettingsStore();
|
||||
const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
|
||||
const setSharedCalendarColor = useSettingsStore((s) => s.setSharedCalendarColor);
|
||||
@@ -179,10 +181,13 @@ export default function CalendarPage() {
|
||||
if (initialCheckDone && !isAuthenticated && !authLoading) {
|
||||
try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
|
||||
redirectToLogin();
|
||||
} else if (client && !calendarEnabled) {
|
||||
// Calendar disabled by admin policy - send the user back to mail.
|
||||
router.push("/");
|
||||
} else if (client && !supportsCalendar && !pendingWebcalAccountChoice && !isProtocolAccountSwitching && !pendingSubscription && !showWebcalActionChoice && !hasPendingWebcal()) {
|
||||
router.push("/");
|
||||
}
|
||||
}, [initialCheckDone, isAuthenticated, authLoading, client, supportsCalendar, pendingWebcalAccountChoice, isProtocolAccountSwitching, pendingSubscription, showWebcalActionChoice, router]);
|
||||
}, [initialCheckDone, isAuthenticated, authLoading, client, calendarEnabled, supportsCalendar, pendingWebcalAccountChoice, isProtocolAccountSwitching, pendingSubscription, showWebcalActionChoice, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
@@ -1164,6 +1169,7 @@ export default function CalendarPage() {
|
||||
) : null;
|
||||
|
||||
if (!isAuthenticated) return null;
|
||||
if (!calendarEnabled) return null;
|
||||
if (!supportsCalendar) return renderWebcalAccountPicker();
|
||||
|
||||
const renderView = () => {
|
||||
|
||||
@@ -18,7 +18,9 @@ import { ContactImportDialog } from "@/components/contacts/contact-import-dialog
|
||||
import { RenameDialog } from "@/components/files/rename-dialog";
|
||||
import { exportContacts } from "@/components/contacts/contact-export";
|
||||
import { AppTopBannerSlot } from "@/components/plugins/app-top-banner-slot";
|
||||
import { useContactStore, getContactDisplayName } from "@/stores/contact-store";
|
||||
import { useContactStore, getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
|
||||
import { savePendingMailto } from "@/lib/protocol-handlers/session";
|
||||
import { formatRecipient } from "@/lib/email-composer-utils";
|
||||
import { useAuthStore, redirectToLogin } from "@/stores/auth-store";
|
||||
import { useEmailStore } from "@/stores/email-store";
|
||||
import { usePolicyStore } from "@/stores/policy-store";
|
||||
@@ -82,6 +84,7 @@ export default function ContactsPage() {
|
||||
bulkDeleteContacts,
|
||||
bulkAddToGroup,
|
||||
moveContactToAddressBook,
|
||||
createAddressBook,
|
||||
renameAddressBook,
|
||||
removeAddressBook,
|
||||
shareAddressBook,
|
||||
@@ -93,6 +96,7 @@ export default function ContactsPage() {
|
||||
const [activeCategory, setActiveCategory] = useState<ContactCategory>("all");
|
||||
const [showImportDialog, setShowImportDialog] = useState(false);
|
||||
const [renamingAddressBook, setRenamingAddressBook] = useState<AddressBook | null>(null);
|
||||
const [creatingAddressBook, setCreatingAddressBook] = useState(false);
|
||||
const [sharingAddressBookId, setSharingAddressBookId] = useState<string | null>(null);
|
||||
const [defaultBookIdForCreate, setDefaultBookIdForCreate] = useState<string | undefined>(undefined);
|
||||
const [createPrefill, setCreatePrefill] = useState<{ email?: string; name?: string } | undefined>(undefined);
|
||||
@@ -173,12 +177,13 @@ export default function ContactsPage() {
|
||||
const addEmail = searchParams.get('addEmail');
|
||||
const addName = searchParams.get('addName');
|
||||
const from = searchParams.get('from');
|
||||
const viewParam = searchParams.get('view');
|
||||
if (!contactId && !addEmail && !from) return;
|
||||
intentAppliedRef.current = true;
|
||||
if (from === 'email') setReturnToEmail(true);
|
||||
if (contactId) {
|
||||
setSelectedContact(contactId);
|
||||
setView('detail');
|
||||
setView(viewParam === 'edit' ? 'edit' : 'detail');
|
||||
} else if (addEmail) {
|
||||
setCreatePrefill({ email: addEmail, name: addName ?? undefined });
|
||||
setSelectedContact(null);
|
||||
@@ -297,6 +302,34 @@ export default function ContactsPage() {
|
||||
}
|
||||
}, [client, supportsSync, contacts, updateContact, updateLocalContact, t]);
|
||||
|
||||
// Refresh address books (and contacts) after a structural change, staying
|
||||
// multi-account aware so a freshly created book lands in the sidebar.
|
||||
const refreshAddressBooks = useCallback(async () => {
|
||||
if (!client) return;
|
||||
if (multiAccountEnabled && accountClients.length > 0) {
|
||||
const activeId = useAuthStore.getState().activeAccountId;
|
||||
if (activeId) {
|
||||
const { fetchAllAccountsAddressBooks } = useContactStore.getState();
|
||||
await fetchAllAccountsAddressBooks(accountClients, activeId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
await useContactStore.getState().fetchAddressBooks(client);
|
||||
}, [client, multiAccountEnabled, accountClients]);
|
||||
|
||||
const handleCreateAddressBook = useCallback(async (name: string) => {
|
||||
if (!client) return;
|
||||
try {
|
||||
await createAddressBook(client, name);
|
||||
await refreshAddressBooks();
|
||||
toast.success(t("address_books.created"));
|
||||
setCreatingAddressBook(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to create address book:', error);
|
||||
toast.error(t("address_books.create_failed"));
|
||||
}
|
||||
}, [client, createAddressBook, refreshAddressBooks, t]);
|
||||
|
||||
const handleImportContacts = useCallback(async (importedContacts: ContactCard[]) => {
|
||||
return importContacts(
|
||||
supportsSync && client ? client : null,
|
||||
@@ -460,6 +493,51 @@ export default function ContactsPage() {
|
||||
setView("group-edit");
|
||||
}, []);
|
||||
|
||||
// Open the in-app composer in the current session rather than routing through
|
||||
// a mailto: URL. `window.location='mailto:'` hands off to the OS handler
|
||||
// (which may open a different mail app), and the mailto protocol round-trip
|
||||
// reloads the app - dropping the in-memory per-account JMAP clients of a
|
||||
// multi-account session, which reads as a logout. Stashing the recipients and
|
||||
// doing a client-side router.push keeps the session and the active account
|
||||
// intact; the main route consumes the pending compose and opens the composer
|
||||
// (see consumePendingMailto in page.tsx).
|
||||
const openComposeInApp = useCallback((recipients: string[], field: "to" | "cc" | "bcc") => {
|
||||
savePendingMailto({
|
||||
to: field === "to" ? recipients : [],
|
||||
cc: field === "cc" ? recipients : [],
|
||||
bcc: field === "bcc" ? recipients : [],
|
||||
subject: "",
|
||||
body: "",
|
||||
});
|
||||
router.push("/");
|
||||
}, [router]);
|
||||
|
||||
const handleComposeGroupFromSidebar = useCallback((groupId: string, field: "to" | "cc" | "bcc") => {
|
||||
// Format each member as "Name <email>" so the composer keeps the display
|
||||
// name (round-trips via formatRecipient -> parseRecipientList). Dedupe by
|
||||
// email, case-insensitively; members without an email are skipped.
|
||||
const seen = new Set<string>();
|
||||
const recipients: string[] = [];
|
||||
for (const member of getGroupMembers(groupId)) {
|
||||
const email = getContactPrimaryEmail(member).trim();
|
||||
const key = email.toLowerCase();
|
||||
if (!email || seen.has(key)) continue;
|
||||
seen.add(key);
|
||||
recipients.push(formatRecipient(getContactDisplayName(member), email));
|
||||
}
|
||||
if (recipients.length === 0) {
|
||||
toast.error(t("groups.no_member_emails"));
|
||||
return;
|
||||
}
|
||||
openComposeInApp(recipients, field);
|
||||
}, [getGroupMembers, t, openComposeInApp]);
|
||||
|
||||
const handleComposeContact = useCallback((contact: ContactCard) => {
|
||||
const email = getContactPrimaryEmail(contact).trim();
|
||||
if (!email) return;
|
||||
openComposeInApp([formatRecipient(getContactDisplayName(contact), email)], "to");
|
||||
}, [openComposeInApp]);
|
||||
|
||||
const handleDeleteGroupFromSidebar = useCallback(async (groupId: string) => {
|
||||
const confirmed = await confirmDialog({
|
||||
title: t("groups.delete_confirm_title"),
|
||||
@@ -624,6 +702,7 @@ export default function ContactsPage() {
|
||||
onEdit={handleEditGroup}
|
||||
onDelete={handleDeleteGroup}
|
||||
onRemoveMember={handleRemoveGroupMember}
|
||||
onComposeGroup={(field) => handleComposeGroupFromSidebar(selectedGroup.id, field)}
|
||||
isMobile={isMobile}
|
||||
onSelectMember={(id) => {
|
||||
setSelectedContact(id);
|
||||
@@ -701,6 +780,11 @@ export default function ContactsPage() {
|
||||
contact={selectedContact}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onCompose={
|
||||
selectedContact
|
||||
? () => handleComposeContact(selectedContact)
|
||||
: undefined
|
||||
}
|
||||
onAddToGroup={
|
||||
selectedContact
|
||||
? () => handleAddContactToGroup(selectedContact.id)
|
||||
@@ -803,9 +887,11 @@ export default function ContactsPage() {
|
||||
onSelectCategory={handleSelectCategory}
|
||||
onCreateGroup={handleCreateGroup}
|
||||
onCreateContact={handleCreateNew}
|
||||
onCreateAddressBook={client ? () => setCreatingAddressBook(true) : undefined}
|
||||
onImport={() => setShowImportDialog(true)}
|
||||
onEditGroup={handleEditGroupFromSidebar}
|
||||
onDeleteGroup={handleDeleteGroupFromSidebar}
|
||||
onComposeGroup={handleComposeGroupFromSidebar}
|
||||
onDropContacts={handleDropContacts}
|
||||
onDropContactsToCategory={handleDropContactsToCategory}
|
||||
onRenameAddressBook={client ? (book) => setRenamingAddressBook(book) : undefined}
|
||||
@@ -951,6 +1037,15 @@ export default function ContactsPage() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{creatingAddressBook && (
|
||||
<RenameDialog
|
||||
currentName=""
|
||||
title={t("address_books.create")}
|
||||
label={t("address_books.name_label")}
|
||||
onCancel={() => setCreatingAddressBook(false)}
|
||||
onConfirm={handleCreateAddressBook}
|
||||
/>
|
||||
)}
|
||||
{renamingAddressBook && (
|
||||
<RenameDialog
|
||||
currentName={renamingAddressBook.name}
|
||||
|
||||
@@ -22,6 +22,7 @@ import { useIsMobile } from "@/hooks/use-media-query";
|
||||
import { useRefreshGesture } from "@/hooks/use-refresh-gesture";
|
||||
import { usePolicyStore } from "@/stores/policy-store";
|
||||
import { FileBrowser } from "@/components/files/file-browser";
|
||||
import type { FileNodeRights } from "@/lib/jmap/types";
|
||||
import { ImagePreviewModal } from "@/components/files/image-preview-modal";
|
||||
import { FilePreviewModal } from "@/components/files/file-preview-modal";
|
||||
import { loadFilesSettings } from "@/components/files/files-settings-dialog";
|
||||
@@ -88,6 +89,7 @@ export default function FilesPage() {
|
||||
cancelUpload,
|
||||
undoLastAction,
|
||||
lastAction,
|
||||
shareResource,
|
||||
} = useFileStore();
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
@@ -401,6 +403,14 @@ export default function FilesPage() {
|
||||
|
||||
const currentFilesAccountId = useFileStore((s) => s.currentAccountId);
|
||||
|
||||
// Sharing: the browsing client (store-attached) drives the principal picker
|
||||
// and share mutations. supportsPrincipals() gates the whole Share affordance.
|
||||
const sharingEnabled = !!storeClient?.supportsPrincipals();
|
||||
const filesAccountId = storeClient?.getFilesAccountId() ?? null;
|
||||
const handleShare = useCallback(async (id: string, principalId: string, rights: FileNodeRights | null) => {
|
||||
await shareResource(id, principalId, rights);
|
||||
}, [shareResource]);
|
||||
|
||||
// Pro shell only: all connected accounts are equal top-level entries at
|
||||
// the root. The root path "/" itself is a cross-account picker - no
|
||||
// account's files are shown until the user enters one.
|
||||
@@ -540,6 +550,10 @@ export default function FilesPage() {
|
||||
onSelectAccount={handleSelectAccount}
|
||||
accountPickerMode={isAccountPicker}
|
||||
accountLabel={currentAccountLabel}
|
||||
client={storeClient}
|
||||
ownAccountId={filesAccountId}
|
||||
sharingEnabled={sharingEnabled}
|
||||
onShare={handleShare}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -11,7 +11,7 @@ import { useAccountStore } from "@/stores/account-store";
|
||||
import { useThemeStore } from "@/stores/theme-store";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { useConfig } from "@/hooks/use-config";
|
||||
import { apiFetch, getPathPrefix, withBasePath } from "@/lib/browser-navigation";
|
||||
import { apiFetch, getPathPrefix, toRouterPath, withBasePath } from "@/lib/browser-navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AlertCircle, Loader2, X, Info, Eye, EyeOff, LogIn, Sun, Moon, Monitor, Check, Shield, Play, Copy } from "lucide-react";
|
||||
import { type OAuthMetadata } from "@/lib/oauth/discovery";
|
||||
@@ -279,7 +279,7 @@ export default function LoginPage() {
|
||||
redirectTo = saved;
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
router.push(redirectTo);
|
||||
router.push(toRouterPath(redirectTo));
|
||||
}
|
||||
}, [isAuthenticated, router, isAddAccountMode, isMobileHandoff, mobileRedirectUri, mobileState]);
|
||||
|
||||
@@ -655,7 +655,7 @@ export default function LoginPage() {
|
||||
redirectTo = saved;
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
router.push(redirectTo);
|
||||
router.push(toRouterPath(redirectTo));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+209
-49
@@ -11,8 +11,9 @@ import type { ComposerDraftData } from "@/components/email/email-composer";
|
||||
import { ProtocolAccountPicker } from "@/components/protocol/protocol-account-picker";
|
||||
import { ThreadConversationView } from "@/components/email/thread-conversation-view";
|
||||
import { MobileHeader } from "@/components/layout/mobile-header";
|
||||
import { ThreadGroup, Email, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID } from "@/lib/jmap/types";
|
||||
import { ThreadGroup, Email, Mailbox, isUnifiedMailboxId, UNIFIED_ROLE_BY_ID, ALL_MAIL_MAILBOX_ID, CROSS_VIEW_BY_ID, isCrossViewId } from "@/lib/jmap/types";
|
||||
import { useAccountStore } from "@/stores/account-store";
|
||||
import { usePolicyStore } from "@/stores/policy-store";
|
||||
import type { UnifiedAccountClient } from "@/lib/unified-mailbox";
|
||||
import { KeyboardShortcutsModal } from "@/components/keyboard-shortcuts-modal";
|
||||
import { useEmailStore, buildUnifiedAccountClients } from "@/stores/email-store";
|
||||
@@ -31,6 +32,7 @@ import { useBrowserNavigation, type NavSnapshot } from "@/hooks/use-browser-navi
|
||||
import { debug } from "@/lib/debug";
|
||||
import { playNotificationSound } from "@/lib/notification-sound";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { localizeMailboxName } from "@/lib/mailbox-label";
|
||||
import {
|
||||
ErrorBoundary,
|
||||
SidebarErrorFallback,
|
||||
@@ -318,7 +320,10 @@ export default function Home() {
|
||||
clearPendingUndoSend,
|
||||
pendingUndoSend,
|
||||
fetchUnifiedEmails: fetchUnifiedEmailsAction,
|
||||
fetchCrossView: fetchCrossViewAction,
|
||||
refreshUnifiedCounts,
|
||||
refreshCrossCounts,
|
||||
crossUnreadCount,
|
||||
exitUnifiedView,
|
||||
emptyMailbox,
|
||||
markMailboxAsRead,
|
||||
@@ -334,6 +339,7 @@ export default function Home() {
|
||||
viewingAccountId,
|
||||
selectAccountMailbox,
|
||||
setViewingAccount,
|
||||
refreshCurrentMailbox,
|
||||
} = useEmailStore();
|
||||
|
||||
// Pro shell: populate per-account mailbox cache so the sidebar can render
|
||||
@@ -341,7 +347,23 @@ export default function Home() {
|
||||
useProMultiAccountMailboxes();
|
||||
|
||||
const enableUnifiedMailbox = useSettingsStore((s) => s.enableUnifiedMailbox);
|
||||
const enableAllMailView = useSettingsStore((s) => s.enableAllMailView);
|
||||
const delayedSendSupported = client?.hasDelayedSend() ?? true;
|
||||
const allMailViewEnabled = usePolicyStore((s) => s.isFeatureEnabled('allMailViewEnabled'));
|
||||
const showAllMailMailbox = allMailViewEnabled && enableAllMailView;
|
||||
|
||||
// Cross-account "All accounts" views: a sub-feature of the unified mailbox, so
|
||||
// they require Unified Mailbox to be enabled, plus the admin gate and the
|
||||
// per-user setting. Hooks are called unconditionally.
|
||||
const crossUnreadGate = usePolicyStore((s) => s.isFeatureEnabled('crossUnreadViewEnabled'));
|
||||
const crossStarredGate = usePolicyStore((s) => s.isFeatureEnabled('crossStarredViewEnabled'));
|
||||
const crossAllGate = usePolicyStore((s) => s.isFeatureEnabled('crossAllViewEnabled'));
|
||||
const enableCrossUnreadView = useSettingsStore((s) => s.enableCrossUnreadView);
|
||||
const enableCrossStarredView = useSettingsStore((s) => s.enableCrossStarredView);
|
||||
const enableCrossAllView = useSettingsStore((s) => s.enableCrossAllView);
|
||||
const showCrossUnread = enableUnifiedMailbox && crossUnreadGate && enableCrossUnreadView;
|
||||
const showCrossStarred = enableUnifiedMailbox && crossStarredGate && enableCrossStarredView;
|
||||
const showCrossAll = enableUnifiedMailbox && crossAllGate && enableCrossAllView;
|
||||
const activeEmails = isScheduledView ? scheduledEmails : emails;
|
||||
const activeHasMore = isScheduledView ? scheduledHasMore : hasMoreEmails;
|
||||
const activeIsLoading = isScheduledView ? isLoadingScheduled : isLoading;
|
||||
@@ -713,7 +735,7 @@ export default function Home() {
|
||||
// Mailbox view
|
||||
const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
|
||||
if (mailbox) {
|
||||
const mailboxName = mailbox.name;
|
||||
const mailboxName = localizeMailboxName(mailbox.role, mailbox.name, (k) => t(`sidebar.mailboxes.${k}`));
|
||||
const unreadCount = mailbox.unreadEmails || 0;
|
||||
title = unreadCount > 0
|
||||
? `${mailboxName} (${unreadCount}) - ${appName}`
|
||||
@@ -981,14 +1003,16 @@ export default function Home() {
|
||||
// recounting happened"). The Pro shell always renders the unified mailbox
|
||||
// regardless of the user setting, so refresh when embedded too.
|
||||
useEffect(() => {
|
||||
if (!enableUnifiedMailbox && !isEmbedded) return;
|
||||
const anyCross = showCrossUnread || showCrossStarred || showCrossAll;
|
||||
if (!enableUnifiedMailbox && !isEmbedded && !anyCross) return;
|
||||
if (!isAuthenticated || !client) return;
|
||||
buildPopulatedUnifiedAccounts().then((built) => {
|
||||
const hasGroupEntry = built.some((b) => b.isShared);
|
||||
if (anyCross) refreshCrossCounts(built);
|
||||
if (built.length < 2 && !hasGroupEntry && !isEmbedded) return;
|
||||
refreshUnifiedCounts(built);
|
||||
});
|
||||
}, [enableUnifiedMailbox, includeGroupInUnified, isEmbedded, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildPopulatedUnifiedAccounts, refreshUnifiedCounts]);
|
||||
}, [enableUnifiedMailbox, includeGroupInUnified, isEmbedded, isAuthenticated, client, mailboxes, connectedAccountsSignature, buildPopulatedUnifiedAccounts, refreshUnifiedCounts, refreshCrossCounts, showCrossUnread, showCrossStarred, showCrossAll]);
|
||||
|
||||
// System-notification click handler. The push SW navigates the user back
|
||||
// here with `?email=<id>` (specific email it built the toast from) or
|
||||
@@ -1034,8 +1058,8 @@ export default function Home() {
|
||||
// Skip when handleEmailSelect already started a fetch (it sets isLoadingEmail before
|
||||
// calling selectEmail on the stub), to avoid a duplicate request.
|
||||
if (!selectedEmail.bodyValues && !isLoadingEmail) {
|
||||
const perAccountClient = isUnifiedView && selectedEmail.accountId
|
||||
? useAuthStore.getState().getClientForAccount(selectedEmail.accountId)
|
||||
const perAccountClient = isUnifiedView && selectedEmail.sourceClientAccountId
|
||||
? useAuthStore.getState().getClientForAccount(selectedEmail.sourceClientAccountId)
|
||||
: undefined;
|
||||
const fetchClient = perAccountClient ?? client;
|
||||
setLoadingEmail(true);
|
||||
@@ -1164,7 +1188,33 @@ export default function Home() {
|
||||
}
|
||||
|
||||
// Refresh the current mailbox to update the UI
|
||||
if (!isScheduledView) await fetchEmails(client, selectedMailbox);
|
||||
if (!isScheduledView) {
|
||||
await refreshCurrentMailbox(client);
|
||||
// Re-fetch the replied thread's cross-folder data so the expanded
|
||||
// view shows the newly sent reply without collapsing.
|
||||
if (originalEmailId) {
|
||||
const emailState = useEmailStore.getState();
|
||||
const repliedEmail = emailState.emails.find(e => e.id === originalEmailId);
|
||||
if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
|
||||
// Route to the email's own account so shared/group threads refresh
|
||||
// from the right server, not the active one. (#281)
|
||||
const threadClient = emailState.isUnifiedView && repliedEmail.sourceClientAccountId
|
||||
? (useAuthStore.getState().getClientForAccount(repliedEmail.sourceClientAccountId) ?? client)
|
||||
: client;
|
||||
const accountId = emailState.isUnifiedView && repliedEmail.sourceAccountId
|
||||
? repliedEmail.sourceAccountId
|
||||
: client.getAccountId();
|
||||
const fullEmails = await threadClient.getThreadEmails(repliedEmail.threadId, accountId);
|
||||
if (fullEmails.length > 0) {
|
||||
useEmailStore.setState((state) => {
|
||||
const c = new Map(state.threadEmailsCache);
|
||||
c.set(repliedEmail.threadId!, fullEmails);
|
||||
return { threadEmailsCache: c };
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
@@ -1390,10 +1440,11 @@ export default function Home() {
|
||||
if (!client || !emailToDelete) return;
|
||||
|
||||
// In unified view the trash destination and current-folder check must come
|
||||
// from the email's own account, not the active one. (#281)
|
||||
// from the email's own account, not the active one. The owning account's
|
||||
// mailbox list is cached under its JMAP id (`sourceAccountId`). (#281)
|
||||
const actionMailboxes =
|
||||
isUnifiedView && emailToDelete.accountId
|
||||
? (accountMailboxes[emailToDelete.accountId] ?? mailboxes)
|
||||
isUnifiedView && emailToDelete.sourceAccountId
|
||||
? (accountMailboxes[emailToDelete.sourceAccountId] ?? mailboxes)
|
||||
: mailboxes;
|
||||
|
||||
// Check if we're currently in the trash or junk folder. In unified view the
|
||||
@@ -1422,11 +1473,17 @@ export default function Home() {
|
||||
console.error("Failed to permanently delete email:", error);
|
||||
}
|
||||
} else {
|
||||
// Not in trash: always move to trash (in the email's own account).
|
||||
// Not in trash: always move to trash (in the email's own account). Scope
|
||||
// the trash lookup to the email's account: for a shared/group source every
|
||||
// mailbox in the list is `isShared`, so we match by accountId instead of
|
||||
// excluding shared (otherwise no trash is found and the delete fails). (#281)
|
||||
const sourceAccountId = isUnifiedView ? emailToDelete.sourceAccountId : undefined;
|
||||
const matchesScope = (m: Mailbox) =>
|
||||
sourceAccountId ? m.accountId === sourceAccountId : !m.isShared;
|
||||
const trashMailbox =
|
||||
actionMailboxes.find(m => m.role === 'trash' && !m.isShared) ??
|
||||
actionMailboxes.find(m => m.role === 'trash' && matchesScope(m)) ??
|
||||
actionMailboxes.find(m => {
|
||||
if (m.isShared) return false;
|
||||
if (!matchesScope(m)) return false;
|
||||
const lower = m.name.toLowerCase();
|
||||
return lower.includes('trash') || lower.includes('deleted');
|
||||
});
|
||||
@@ -1449,11 +1506,14 @@ export default function Home() {
|
||||
if (!client || !emailToArchive) return;
|
||||
|
||||
// In unified view the archive folder (and any year/month subfolders we
|
||||
// create) must live in the email's own account, reached through that
|
||||
// account's client. (#281)
|
||||
const archiveAccountId = isUnifiedView ? emailToArchive.accountId : undefined;
|
||||
const archiveClient = archiveAccountId
|
||||
? (useAuthStore.getState().getClientForAccount(archiveAccountId) ?? client)
|
||||
// create) must live in the email's own account, reached through the login it
|
||||
// is reachable via (`sourceClientAccountId`) and routed to its owning JMAP
|
||||
// account (`sourceAccountId`). For personal sources these resolve to the
|
||||
// account itself, so behavior is unchanged. (#281)
|
||||
const archiveClientId = isUnifiedView ? emailToArchive.sourceClientAccountId : undefined;
|
||||
const archiveAccountId = isUnifiedView ? emailToArchive.sourceAccountId : undefined;
|
||||
const archiveClient = archiveClientId
|
||||
? (useAuthStore.getState().getClientForAccount(archiveClientId) ?? client)
|
||||
: client;
|
||||
// Read fresh mailboxes from the store – batch archive calls this in a loop,
|
||||
// and each iteration needs to see folders created by prior iterations.
|
||||
@@ -1488,7 +1548,7 @@ export default function Home() {
|
||||
m => m.name === year && m.parentId === archiveId
|
||||
);
|
||||
if (!yearMailbox) {
|
||||
yearMailbox = await archiveClient.createMailbox(year, archiveId);
|
||||
yearMailbox = await archiveClient.createMailbox(year, archiveId, archiveAccountId);
|
||||
await refreshMailboxes();
|
||||
}
|
||||
|
||||
@@ -1501,7 +1561,7 @@ export default function Home() {
|
||||
m => m.name === month && m.parentId === yearId
|
||||
);
|
||||
if (!monthMailbox) {
|
||||
monthMailbox = await archiveClient.createMailbox(month, yearId);
|
||||
monthMailbox = await archiveClient.createMailbox(month, yearId, archiveAccountId);
|
||||
await refreshMailboxes();
|
||||
}
|
||||
await moveThreadToMailbox(client, emailToArchive.id, monthMailbox.id);
|
||||
@@ -1594,7 +1654,7 @@ export default function Home() {
|
||||
});
|
||||
} else {
|
||||
const jmapKey = `$label:${color}`;
|
||||
if (keywords[jmapKey] === true) {
|
||||
if (keywords[jmapKey]) {
|
||||
// Toggle off if already active
|
||||
keywords[jmapKey] = false;
|
||||
} else {
|
||||
@@ -1690,6 +1750,28 @@ export default function Home() {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isCrossViewId(mailboxId)) {
|
||||
setScheduledView(false);
|
||||
const view = CROSS_VIEW_BY_ID[mailboxId];
|
||||
if (!view) return;
|
||||
|
||||
selectMailbox(mailboxId);
|
||||
selectEmail(null);
|
||||
|
||||
if (isMobile) {
|
||||
setSidebarOpen(false);
|
||||
setActiveView("list");
|
||||
}
|
||||
if (isTablet) {
|
||||
setTabletListVisible(true);
|
||||
}
|
||||
|
||||
const populated = await buildPopulatedUnifiedAccounts();
|
||||
await fetchCrossViewAction(populated, view);
|
||||
refreshCrossCounts(populated);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isUnifiedView) {
|
||||
exitUnifiedView();
|
||||
}
|
||||
@@ -2197,7 +2279,29 @@ export default function Home() {
|
||||
}
|
||||
|
||||
// Refresh emails to show the sent reply
|
||||
await fetchEmails(client, selectedMailbox);
|
||||
await refreshCurrentMailbox(client);
|
||||
// Re-fetch the replied thread's cross-folder data so the expanded
|
||||
// view shows the newly sent reply without collapsing.
|
||||
const emailState = useEmailStore.getState();
|
||||
const repliedEmail = emailState.emails.find(e => e.id === originalEmailId);
|
||||
if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
|
||||
// Route to the email's own account so shared/group threads refresh from
|
||||
// the right server, not the active one. (#281)
|
||||
const threadClient = emailState.isUnifiedView && repliedEmail.sourceClientAccountId
|
||||
? (useAuthStore.getState().getClientForAccount(repliedEmail.sourceClientAccountId) ?? client)
|
||||
: client;
|
||||
const accountId = emailState.isUnifiedView && repliedEmail.sourceAccountId
|
||||
? repliedEmail.sourceAccountId
|
||||
: client.getAccountId();
|
||||
const fullEmails = await threadClient.getThreadEmails(repliedEmail.threadId, accountId);
|
||||
if (fullEmails.length > 0) {
|
||||
useEmailStore.setState((state) => {
|
||||
const c = new Map(state.threadEmailsCache);
|
||||
c.set(repliedEmail.threadId!, fullEmails);
|
||||
return { threadEmailsCache: c };
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Show loading state while checking auth
|
||||
@@ -2213,7 +2317,16 @@ export default function Home() {
|
||||
}
|
||||
|
||||
// Get current mailbox name for mobile header
|
||||
const currentMailboxName = isScheduledView ? t('sidebar.scheduled') : mailboxes.find(m => m.id === selectedMailbox)?.name || "Inbox";
|
||||
const currentMailboxName = isScheduledView
|
||||
? t('sidebar.scheduled')
|
||||
: selectedMailbox === ALL_MAIL_MAILBOX_ID
|
||||
? t('sidebar.mailboxes.all_mail')
|
||||
: (() => {
|
||||
const mb = mailboxes.find(m => m.id === selectedMailbox);
|
||||
return mb
|
||||
? localizeMailboxName(mb.role, mb.name, (k) => t(`sidebar.mailboxes.${k}`))
|
||||
: "Inbox";
|
||||
})();
|
||||
const isFocusedMailLayout = mailLayout === 'focus';
|
||||
const isHorizontalMailLayout = mailLayout === 'horizontal' && !isMobile && !isTablet;
|
||||
const hasViewerContent = showComposer || Boolean(conversationThread) || Boolean(selectedEmail);
|
||||
@@ -2230,11 +2343,10 @@ export default function Home() {
|
||||
setShowComposer(false);
|
||||
}
|
||||
|
||||
// waiting for the body fetch - avoids the loading flicker.
|
||||
// Find the list-level email for metadata (accountId, scheduled flags, etc.)
|
||||
// but don't select it yet — wait for the full fetch to avoid a toolbar flash
|
||||
// caused by rendering with the stub (no bodyValues) then re-rendering with the full email.
|
||||
const listEmail = activeEmails.find(e => e.id === email.id);
|
||||
if (listEmail) {
|
||||
selectEmail(listEmail);
|
||||
}
|
||||
|
||||
setLoadingEmail(true);
|
||||
|
||||
@@ -2250,21 +2362,25 @@ export default function Home() {
|
||||
|
||||
// Fetch the full content
|
||||
try {
|
||||
// In unified view each email carries its own accountId. Use that
|
||||
// account's client so we fetch from the server that actually owns it.
|
||||
const emailAccountId = isUnifiedView ? listEmail?.accountId : undefined;
|
||||
const perAccountClient = emailAccountId
|
||||
? useAuthStore.getState().getClientForAccount(emailAccountId)
|
||||
// In unified view each email carries its source reference: the login it is
|
||||
// reachable through (`sourceClientAccountId`) and its owning JMAP account
|
||||
// (`sourceAccountId`). Resolve both so we fetch from the server that actually
|
||||
// owns it — works uniformly for personal and shared/group sources, since for
|
||||
// personal the owning account equals the client's primary (no-op). (#281)
|
||||
const sourceClientId = isUnifiedView ? listEmail?.sourceClientAccountId : undefined;
|
||||
const perAccountClient = sourceClientId
|
||||
? useAuthStore.getState().getClientForAccount(sourceClientId)
|
||||
: undefined;
|
||||
const fetchClient = perAccountClient ?? client;
|
||||
|
||||
// For shared folders on the primary client, we still need to pass the
|
||||
// shared account's id. In unified view we use the per-account client
|
||||
// directly, so no explicit accountId is needed.
|
||||
const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
|
||||
const accountId = perAccountClient
|
||||
? undefined
|
||||
: mailbox?.isShared ? mailbox.accountId : undefined;
|
||||
const accountId = isUnifiedView
|
||||
? listEmail?.sourceAccountId
|
||||
: (() => {
|
||||
// Non-unified: shared folders on the active client still need their
|
||||
// owner accountId passed explicitly.
|
||||
const mailbox = mailboxes.find(mb => mb.id === selectedMailbox);
|
||||
return mailbox?.isShared ? mailbox.accountId : undefined;
|
||||
})();
|
||||
|
||||
const fullEmail = await fetchClient.getEmail(email.id, accountId);
|
||||
if (fullEmail) {
|
||||
@@ -2276,9 +2392,13 @@ export default function Home() {
|
||||
fullEmail.isScheduled = true;
|
||||
fullEmail.isSmimeScheduled = listEmail.isSmimeScheduled;
|
||||
}
|
||||
if (emailAccountId) {
|
||||
fullEmail.accountId = emailAccountId;
|
||||
fullEmail.accountLabel = listEmail?.accountLabel;
|
||||
// Re-stamp the source reference so later actions on the open email
|
||||
// resolve to the right account (the fetched object lacks these).
|
||||
if (isUnifiedView && listEmail) {
|
||||
fullEmail.accountId = listEmail.accountId;
|
||||
fullEmail.accountLabel = listEmail.accountLabel;
|
||||
fullEmail.sourceClientAccountId = listEmail.sourceClientAccountId;
|
||||
fullEmail.sourceAccountId = listEmail.sourceAccountId;
|
||||
}
|
||||
selectEmail(fullEmail);
|
||||
// Mark-as-read logic is now handled by useEffect
|
||||
@@ -2327,8 +2447,27 @@ export default function Home() {
|
||||
setActiveView("viewer");
|
||||
|
||||
try {
|
||||
// Fetch complete thread emails
|
||||
const emails = await client.getThreadEmails(thread.threadId);
|
||||
// In unified/aggregate views the thread may belong to another (possibly
|
||||
// shared/group) account. Route the fetch to the login it's reachable
|
||||
// through (`sourceClientAccountId`) and pass its owning JMAP account
|
||||
// (`sourceAccountId`) so the thread loads from the right server instead of
|
||||
// the active one (which doesn't have it → empty/body-less). (#281)
|
||||
const ref = thread.emails?.[0];
|
||||
const threadClient = isUnifiedView && ref?.sourceClientAccountId
|
||||
? (useAuthStore.getState().getClientForAccount(ref.sourceClientAccountId) ?? client)
|
||||
: client;
|
||||
const threadAccountId = isUnifiedView ? ref?.sourceAccountId : undefined;
|
||||
const emails = await threadClient.getThreadEmails(thread.threadId, threadAccountId);
|
||||
// Re-stamp the source reference so conversation actions (reply/move/…)
|
||||
// resolve to the right account; the fetched objects don't carry it.
|
||||
if (isUnifiedView && ref) {
|
||||
for (const e of emails) {
|
||||
e.accountId = ref.accountId;
|
||||
e.accountLabel = ref.accountLabel;
|
||||
e.sourceClientAccountId = ref.sourceClientAccountId;
|
||||
e.sourceAccountId = ref.sourceAccountId;
|
||||
}
|
||||
}
|
||||
setConversationEmails(emails);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch thread emails:', error);
|
||||
@@ -2475,6 +2614,11 @@ export default function Home() {
|
||||
selectedKeyword={selectedKeyword}
|
||||
scheduledTotal={scheduledTotal}
|
||||
showScheduledMailbox={delayedSendSupported}
|
||||
showAllMailMailbox={showAllMailMailbox}
|
||||
showCrossUnread={showCrossUnread}
|
||||
showCrossStarred={showCrossStarred}
|
||||
showCrossAll={showCrossAll}
|
||||
crossUnreadCount={crossUnreadCount}
|
||||
onMailboxSelect={handleMailboxSelect}
|
||||
onTagSelect={handleTagSelect}
|
||||
onUnreadFilterClick={handleUnreadFilterClick}
|
||||
@@ -2642,19 +2786,19 @@ export default function Home() {
|
||||
icon={<Paperclip className="w-3.5 h-3.5" />}
|
||||
label={t("advanced_search.has_attachment")}
|
||||
value={searchFilters.hasAttachment}
|
||||
onClick={() => { const next = searchFilters.hasAttachment === null ? true : searchFilters.hasAttachment === true ? false : null; setSearchFilters({ hasAttachment: next }); handleAdvancedSearch(); }}
|
||||
onClick={() => { const next = searchFilters.hasAttachment === null ? true : searchFilters.hasAttachment ? false : null; setSearchFilters({ hasAttachment: next }); handleAdvancedSearch(); }}
|
||||
/>
|
||||
<ToggleChip
|
||||
icon={<Star className="w-3.5 h-3.5" />}
|
||||
label={t("advanced_search.starred")}
|
||||
value={searchFilters.isStarred}
|
||||
onClick={() => { const next = searchFilters.isStarred === null ? true : searchFilters.isStarred === true ? false : null; setSearchFilters({ isStarred: next }); handleAdvancedSearch(); }}
|
||||
onClick={() => { const next = searchFilters.isStarred === null ? true : searchFilters.isStarred ? false : null; setSearchFilters({ isStarred: next }); handleAdvancedSearch(); }}
|
||||
/>
|
||||
<ToggleChip
|
||||
icon={searchFilters.isUnread === false ? <MailOpen className="w-3.5 h-3.5" /> : <Mail className="w-3.5 h-3.5" />}
|
||||
label={searchFilters.isUnread === false ? t("advanced_search.read") : t("advanced_search.unread")}
|
||||
value={searchFilters.isUnread}
|
||||
onClick={() => { const next = searchFilters.isUnread === null ? true : searchFilters.isUnread === true ? false : null; setSearchFilters({ isUnread: next }); handleAdvancedSearch(); }}
|
||||
onClick={() => { const next = searchFilters.isUnread === null ? true : searchFilters.isUnread ? false : null; setSearchFilters({ isUnread: next }); handleAdvancedSearch(); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
@@ -3056,7 +3200,17 @@ export default function Home() {
|
||||
onReply={handleReply}
|
||||
onReplyAll={handleReplyAll}
|
||||
onForward={handleForward}
|
||||
onDelete={() => handleDelete()}
|
||||
onDelete={() => {
|
||||
// Deleting the open message returns to the list (Gmail-style),
|
||||
// not the next email — unless the user turned the setting off.
|
||||
// Deselect first so the store's remove-and-advance sees no
|
||||
// selection and doesn't auto-open the next message.
|
||||
const target = selectedEmail;
|
||||
if (useSettingsStore.getState().returnToListAfterAction) {
|
||||
handleMobileBack();
|
||||
}
|
||||
handleDelete(target);
|
||||
}}
|
||||
onArchive={() => handleArchive()}
|
||||
onToggleStar={handleToggleStar}
|
||||
onSetColorTag={handleSetColorTag}
|
||||
@@ -3065,6 +3219,12 @@ export default function Home() {
|
||||
onMarkAsRead={async (emailId, read) => {
|
||||
if (client) {
|
||||
await markAsRead(client, emailId, read);
|
||||
// Marking the open message unread returns to the list
|
||||
// (Gmail-style, gated on returnToListAfterAction). Staying
|
||||
// in the reading pane would just re-mark it read on view.
|
||||
if (!read && useSettingsStore.getState().returnToListAfterAction) {
|
||||
handleMobileBack();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onDownloadAttachment={handleDownloadAttachment}
|
||||
@@ -3099,7 +3259,7 @@ export default function Home() {
|
||||
}}
|
||||
currentUserEmail={client?.getUsername()}
|
||||
currentUserName={client?.getUsername()?.split("@")[0]}
|
||||
currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
|
||||
currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role ?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined)}
|
||||
mailboxes={mailboxes}
|
||||
selectedMailbox={selectedMailbox}
|
||||
onMoveToMailbox={async (mailboxId) => {
|
||||
|
||||
@@ -21,7 +21,6 @@ import {
|
||||
Tags,
|
||||
HardDrive,
|
||||
BookUser,
|
||||
KeyRound,
|
||||
PanelLeftClose,
|
||||
Bell,
|
||||
Puzzle,
|
||||
@@ -63,7 +62,6 @@ import { AccountSecuritySettings } from '@/components/settings/account-security-
|
||||
import { FilesSettingsComponent } from '@/components/settings/files-settings';
|
||||
import { DownloadsSettings } from '@/components/settings/downloads-settings';
|
||||
import { ContactsSettings } from '@/components/settings/contacts-settings';
|
||||
import { SmimeSettings } from '@/components/settings/smime-settings';
|
||||
import { SidebarAppsSettings } from '@/components/settings/sidebar-apps-settings';
|
||||
import { NotificationSettings } from '@/components/settings/notification-settings';
|
||||
import { ThemesSettings } from '@/components/settings/themes-settings';
|
||||
@@ -74,6 +72,7 @@ import { useEmailStore } from '@/stores/email-store';
|
||||
import { usePluginStore } from '@/stores/plugin-store';
|
||||
import { useThemeStore } from '@/stores/theme-store';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
import { useManagedAccountStore } from '@/stores/managed-account-store';
|
||||
import { useIsDesktop } from '@/hooks/use-media-query';
|
||||
import { NavigationRail } from '@/components/layout/navigation-rail';
|
||||
import { SidebarAppsModal } from '@/components/layout/sidebar-apps-modal';
|
||||
@@ -101,7 +100,6 @@ type Tab =
|
||||
| 'folders'
|
||||
| 'keywords'
|
||||
| 'security'
|
||||
| 'encryption'
|
||||
| 'content_senders'
|
||||
| 'calendar'
|
||||
| 'contacts'
|
||||
@@ -138,7 +136,6 @@ const tabIcons: Record<Tab, LucideIcon> = {
|
||||
folders: FolderOpen,
|
||||
keywords: Tags,
|
||||
security: Shield,
|
||||
encryption: KeyRound,
|
||||
content_senders: EyeOff,
|
||||
calendar: Calendar,
|
||||
contacts: BookUser,
|
||||
@@ -182,6 +179,7 @@ const tabSearchPaths: Record<Tab, string[]> = {
|
||||
'settings.appearance.hide_account_switcher',
|
||||
'settings.appearance.show_rail_account_list',
|
||||
'settings.appearance.unified_mailbox',
|
||||
'settings.appearance.all_mail',
|
||||
'settings.appearance.colorful_sidebar_icons',
|
||||
'settings.email_behavior.mail_layout',
|
||||
],
|
||||
@@ -198,11 +196,11 @@ const tabSearchPaths: Record<Tab, string[]> = {
|
||||
'settings.email_behavior.hover_actions',
|
||||
'settings.email_behavior.permanently_delete_junk',
|
||||
'settings.email_behavior.show_preview',
|
||||
'settings.email_behavior.plain_text_mode',
|
||||
],
|
||||
composing: [
|
||||
'settings.email_behavior.attachment_reminder',
|
||||
'settings.email_behavior.auto_select_reply_identity',
|
||||
'settings.email_behavior.plain_text_mode',
|
||||
'settings.email_behavior.default_mail_program',
|
||||
'settings.email_behavior.signature_position',
|
||||
'settings.email_behavior.sub_address_delimiter',
|
||||
@@ -215,7 +213,6 @@ const tabSearchPaths: Record<Tab, string[]> = {
|
||||
folders: ['settings.folders'],
|
||||
keywords: ['settings.keywords'],
|
||||
security: ['settings.security'],
|
||||
encryption: ['smime'],
|
||||
content_senders: [
|
||||
'settings.email_behavior.always_light_mode',
|
||||
'settings.email_behavior.external_content',
|
||||
@@ -250,7 +247,6 @@ const tabKeywords: Record<Tab, string> = {
|
||||
folders: 'mailbox subscribe',
|
||||
keywords: 'tags labels colors',
|
||||
security: 'password 2fa two-factor passkey app password mfa',
|
||||
encryption: 's/mime smime certificate pgp gpg',
|
||||
content_senders: 'block sender remote images privacy tracking',
|
||||
calendar: 'event schedule appointment meeting timezone',
|
||||
contacts: 'address book contact',
|
||||
@@ -385,6 +381,12 @@ export default function SettingsPage() {
|
||||
const sidebarAppsList = useSettingsStore((s) => s.sidebarApps);
|
||||
const proInterface = useSettingsStore((s) => s.proInterface);
|
||||
|
||||
// When set, the settings panel is scoped to a shared/group account: a reduced
|
||||
// tab list and a "Managing: <name>" header. null = the user's own account.
|
||||
const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
|
||||
const managedAccount = useManagedAccountStore((s) => s.managedAccount);
|
||||
const clearManagedAccount = useManagedAccountStore((s) => s.clear);
|
||||
|
||||
// Build a per-tab haystack for fulltext search and a list of sub-results
|
||||
// (individual settings) per tab. Sub-results come from translation entries
|
||||
// that have a `label`/`title` field, plus dynamic content (installed
|
||||
@@ -488,6 +490,10 @@ export default function SettingsPage() {
|
||||
return () => window.removeEventListener('settings-tab-change', handler);
|
||||
}, []);
|
||||
|
||||
// Leaving the settings panel drops any shared-account scope so it never
|
||||
// leaks into the next visit or another session.
|
||||
useEffect(() => () => clearManagedAccount(), [clearManagedAccount]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialCheckDone && !isAuthenticated && !authLoading) {
|
||||
try { sessionStorage.setItem('redirect_after_login', window.location.pathname); } catch { /* ignore */ }
|
||||
@@ -611,11 +617,10 @@ export default function SettingsPage() {
|
||||
|
||||
// Privacy & Security
|
||||
...(stalwartFeaturesEnabled ? [{ id: 'security' as Tab, label: t('tabs.security'), icon: tabIcons.security, group: 'privacy' as TabGroup }] : []),
|
||||
...(isFeatureEnabled('smimeEnabled') ? [{ id: 'encryption' as Tab, label: t('tabs.encryption'), icon: tabIcons.encryption, group: 'privacy' as TabGroup }] : []),
|
||||
{ id: 'content_senders', label: t('tabs.content_senders'), icon: tabIcons.content_senders, group: 'privacy' },
|
||||
|
||||
// Apps
|
||||
...(supportsCalendar ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
|
||||
...(supportsCalendar && isFeatureEnabled('calendarEnabled') ? [{ id: 'calendar' as Tab, label: t('tabs.calendar'), icon: tabIcons.calendar, group: 'apps' as TabGroup }] : []),
|
||||
...(isFeatureEnabled('contactsEnabled') ? [{ id: 'contacts' as Tab, label: t('tabs.contacts'), icon: tabIcons.contacts, group: 'apps' as TabGroup }] : []),
|
||||
...(supportsFiles && isFeatureEnabled('filesEnabled') ? [{ id: 'files' as Tab, label: t('tabs.files'), icon: tabIcons.files, group: 'apps' as TabGroup }] : []),
|
||||
...(isFeatureEnabled('sidebarAppsEnabled') ? [{ id: 'sidebar_apps' as Tab, label: t('tabs.sidebar_apps'), icon: tabIcons.sidebar_apps, group: 'apps' as TabGroup }] : []),
|
||||
@@ -626,12 +631,28 @@ export default function SettingsPage() {
|
||||
...(isFeatureEnabled('debugModeEnabled') ? [{ id: 'debug' as Tab, label: t('tabs.debug'), icon: tabIcons.debug, group: 'advanced' as TabGroup }] : []),
|
||||
];
|
||||
|
||||
// In scoped (shared-account) mode, restrict to the account-relevant tabs the
|
||||
// account actually advertises. Folders is intentionally excluded (mailbox CRUD
|
||||
// is hardwired to the active account). Gated on both the per-account
|
||||
// capability and the session-level support/feature flags.
|
||||
const scopedTabIds: Tab[] = managedAccount
|
||||
? ([
|
||||
managedAccount.capabilities.sieve && supportsSieve ? 'filters' : null,
|
||||
managedAccount.capabilities.mail && supportsVacation ? 'vacation' : null,
|
||||
managedAccount.capabilities.calendars && supportsCalendar && isFeatureEnabled('calendarEnabled') ? 'calendar' : null,
|
||||
managedAccount.capabilities.contacts && isFeatureEnabled('contactsEnabled') ? 'contacts' : null,
|
||||
].filter(Boolean) as Tab[])
|
||||
: [];
|
||||
const visibleTabs = managedAccountId
|
||||
? tabs.filter((tab) => scopedTabIds.includes(tab.id))
|
||||
: tabs;
|
||||
|
||||
// Group tabs by category
|
||||
const groupedTabs = tabGroupOrder
|
||||
.map((group) => ({
|
||||
group,
|
||||
label: t(`tab_groups.${group}`),
|
||||
items: tabs.filter((tab) => tab.group === group),
|
||||
items: visibleTabs.filter((tab) => tab.group === group),
|
||||
}))
|
||||
.filter((g) => g.items.length > 0);
|
||||
|
||||
@@ -659,9 +680,13 @@ export default function SettingsPage() {
|
||||
.filter((g) => g.items.length > 0)
|
||||
: groupedTabs;
|
||||
|
||||
// If active tab is not in the visible list (e.g., feature disabled), fall back.
|
||||
const isActiveVisible = tabs.some((tab) => tab.id === activeTab);
|
||||
const effectiveActiveTab: Tab = isActiveVisible ? activeTab : 'appearance';
|
||||
// If active tab is not in the visible list (e.g., feature disabled, or scoped
|
||||
// mode hides it), fall back. In scoped mode fall back to the first scoped tab;
|
||||
// otherwise the usual 'appearance' default.
|
||||
const isActiveVisible = visibleTabs.some((tab) => tab.id === activeTab);
|
||||
const effectiveActiveTab: Tab = isActiveVisible
|
||||
? activeTab
|
||||
: (managedAccountId ? (visibleTabs[0]?.id ?? 'appearance') : 'appearance');
|
||||
|
||||
const handleTabSelect = (tabId: Tab) => {
|
||||
setActiveTab(tabId);
|
||||
@@ -676,10 +701,26 @@ export default function SettingsPage() {
|
||||
setPendingHighlight({ tab: tabId, label: sub.label, pluginId: sub.pluginId });
|
||||
};
|
||||
|
||||
const activeTabLabel = tabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';
|
||||
const activeTabLabel = visibleTabs.find((tab) => tab.id === effectiveActiveTab)?.label ?? '';
|
||||
|
||||
const renderTabContent = () => (
|
||||
<>
|
||||
{managedAccountId && managedAccount && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
clearManagedAccount();
|
||||
handleTabSelect('account');
|
||||
}}
|
||||
className="flex items-center gap-2 w-full mb-4 px-3 py-2 rounded-md border border-border bg-muted/40 hover:bg-muted text-left transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
<span className="text-sm text-muted-foreground">{t('scoped.back')}</span>
|
||||
<span className="ml-auto text-sm font-medium truncate">
|
||||
{t('scoped.managing', { name: managedAccount.name })}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
{effectiveActiveTab === 'account' && <AccountSettings />}
|
||||
{effectiveActiveTab === 'language' && <LanguageSettings />}
|
||||
{effectiveActiveTab === 'notifications' && <NotificationSettings />}
|
||||
@@ -695,10 +736,17 @@ export default function SettingsPage() {
|
||||
{effectiveActiveTab === 'folders' && <FolderSettings />}
|
||||
{effectiveActiveTab === 'keywords' && <KeywordSettings />}
|
||||
{effectiveActiveTab === 'security' && <AccountSecuritySettings />}
|
||||
{effectiveActiveTab === 'encryption' && <SmimeSettings />}
|
||||
{effectiveActiveTab === 'content_senders' && <ContentSendersSettings />}
|
||||
{effectiveActiveTab === 'calendar' && <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>}
|
||||
{effectiveActiveTab === 'contacts' && <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>}
|
||||
{effectiveActiveTab === 'calendar' && (
|
||||
managedAccountId
|
||||
? <CalendarManagementSettings />
|
||||
: <><CalendarSettings /><div className="mt-8"><CalendarManagementSettings /></div></>
|
||||
)}
|
||||
{effectiveActiveTab === 'contacts' && (
|
||||
managedAccountId
|
||||
? <AddressBookManagementSettings />
|
||||
: <><ContactsSettings /><div className="mt-8"><AddressBookManagementSettings /></div></>
|
||||
)}
|
||||
{effectiveActiveTab === 'files' && <FilesSettingsComponent />}
|
||||
{effectiveActiveTab === 'protocol_handlers' && <ProtocolHandlerSettings supportsCalendar={supportsCalendar} />}
|
||||
{effectiveActiveTab === 'sidebar_apps' && <SidebarAppsSettings />}
|
||||
|
||||
@@ -32,7 +32,6 @@ export function DashboardTab() {
|
||||
const [themeCount, setThemeCount] = useState(0);
|
||||
const [policyRuleCount, setPolicyRuleCount] = useState(0);
|
||||
const [accountCounts, setAccountCounts] = useState<{ total: number; active7d: number } | null>(null);
|
||||
const [jmapHealth, setJmapHealth] = useState<'unknown' | 'ok' | 'error'>('unknown');
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardData();
|
||||
@@ -82,15 +81,6 @@ export function DashboardTab() {
|
||||
}
|
||||
}
|
||||
|
||||
if (configData?.jmapServerUrl) {
|
||||
try {
|
||||
const jmapRes = await apiFetch('/api/config');
|
||||
setJmapHealth(jmapRes.ok ? 'ok' : 'error');
|
||||
} catch {
|
||||
setJmapHealth('error');
|
||||
}
|
||||
}
|
||||
|
||||
const w: string[] = [];
|
||||
if (adminConfigRes.ok) {
|
||||
const sources = await adminConfigRes.json();
|
||||
@@ -128,16 +118,6 @@ export function DashboardTab() {
|
||||
<SettingItem label="JMAP Server" description={jmapUrl !== '-' ? jmapUrl : undefined}>
|
||||
<span className="text-sm text-foreground">{jmapHostname}</span>
|
||||
</SettingItem>
|
||||
<SettingItem label="JMAP Connection">
|
||||
<span className={`inline-flex items-center gap-1.5 text-sm font-medium ${
|
||||
jmapHealth === 'ok' ? 'text-green-600 dark:text-green-400' : jmapHealth === 'error' ? 'text-red-600 dark:text-red-400' : 'text-muted-foreground'
|
||||
}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${
|
||||
jmapHealth === 'ok' ? 'bg-green-500' : jmapHealth === 'error' ? 'bg-red-500' : 'bg-muted-foreground/40'
|
||||
}`} />
|
||||
{jmapHealth === 'ok' ? 'Connected' : jmapHealth === 'error' ? 'Error' : 'Unknown'}
|
||||
</span>
|
||||
</SettingItem>
|
||||
<SettingItem label="Last Login">
|
||||
<span className="text-sm text-foreground">
|
||||
{status?.lastLogin ? new Date(status.lastLogin).toLocaleString() : 'Never'}
|
||||
|
||||
@@ -13,6 +13,7 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
|
||||
settingsExportEnabled: { label: 'Settings Export/Import', description: 'Allow users to export and import settings JSON' },
|
||||
customKeywordsEnabled: { label: 'Custom Keywords', description: 'Allow user-created labels and tags' },
|
||||
templatesEnabled: { label: 'Email Templates', description: 'Allow email template creation and library' },
|
||||
calendarEnabled: { label: 'Calendar', description: 'Enable calendar features and views' },
|
||||
calendarTasksEnabled: { label: 'Calendar Tasks', description: 'Show task panel in calendar view' },
|
||||
contactsEnabled: { label: 'Contacts', description: 'Enable contacts/address book features' },
|
||||
smimeEnabled: { label: 'S/MIME', description: 'Enable certificate management and email signing' },
|
||||
@@ -21,6 +22,10 @@ const FEATURE_GATE_LABELS: Partial<Record<keyof FeatureGates, { label: string; d
|
||||
folderIconsEnabled: { label: 'Folder Icons', description: 'Allow custom folder icon picker' },
|
||||
hoverActionsConfigEnabled: { label: 'Hover Actions Config', description: 'Allow users to customize email hover actions' },
|
||||
filesEnabled: { label: 'Files (WebDAV)', description: 'Enable file storage via WebDAV. WARNING: Large uploads can cause Stalwart/RocksDB instability. Not recommended for production.' },
|
||||
allMailViewEnabled: { label: 'All Mail View', description: 'Show a virtual "All Mail" folder that merges messages from across an account’s folders into one list. Users choose which folders are included. Requires the per-user toggle in Settings → Appearance.' },
|
||||
crossUnreadViewEnabled: { label: 'All Accounts: Unread', description: 'Allow an "All unread" entry in the All accounts section that lists unread mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
|
||||
crossStarredViewEnabled: { label: 'All Accounts: Starred', description: 'Allow an "All starred" entry in the All accounts section that lists flagged/starred mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
|
||||
crossAllViewEnabled: { label: 'All Accounts: All Mail', description: 'Allow an "All mail" entry in the All accounts section that lists all mail across every account (incl. shared folders), spanning all folders except junk, sent, archive, trash and drafts. Requires the matching per-user toggle in Settings → Appearance.' },
|
||||
};
|
||||
|
||||
const RESTRICTABLE_SETTINGS = [
|
||||
|
||||
@@ -118,9 +118,10 @@ export function TelemetryTab() {
|
||||
<header className="space-y-2">
|
||||
<h1 className="text-2xl font-semibold">Anonymous Usage Stats</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Bulwark sends one anonymous heartbeat per day so we can see how many instances are
|
||||
running, on what platforms, and which features they use. <strong>Enabled by default</strong>;
|
||||
one click below disables it. No email addresses, no hostnames, no IPs are sent.{' '}
|
||||
Bulwark can send one anonymous heartbeat per day so we can see how many instances are
|
||||
running, on what platforms, and which features they use. It's <strong>off by
|
||||
default</strong>; one click below enables it and helps us make the product better. No
|
||||
email addresses, no hostnames, no IPs are sent.{' '}
|
||||
<a
|
||||
href="https://bulwarkmail.org/docs/legal/privacy/telemetry"
|
||||
target="_blank"
|
||||
@@ -138,8 +139,8 @@ export function TelemetryTab() {
|
||||
<div className="font-medium">Status</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{status.consent === 'pending' && 'Initialising - no heartbeats sent yet.'}
|
||||
{status.consent === 'on' && 'Heartbeats are enabled (default).'}
|
||||
{status.consent === 'off' && 'Heartbeats are off.'}
|
||||
{status.consent === 'on' && 'Heartbeats are enabled. Thanks for helping us improve!'}
|
||||
{status.consent === 'off' && 'Heartbeats are off (default).'}
|
||||
{envOverridden && (
|
||||
<> Locked by <code>BULWARK_TELEMETRY</code> env var.</>
|
||||
)}
|
||||
|
||||
@@ -5,12 +5,11 @@ import { Upload, Trash2, Power, PowerOff, Loader2, Palette, Save, Shield, Lock,
|
||||
import type { SettingsPolicy } from '@/lib/admin/types';
|
||||
import { DEFAULT_POLICY, DEFAULT_THEME_POLICY } from '@/lib/admin/types';
|
||||
import { apiFetch } from '@/lib/browser-navigation';
|
||||
import { BUILTIN_THEMES } from '@/lib/builtin-themes';
|
||||
|
||||
const BUILTIN_THEME_OPTIONS = [
|
||||
{ id: 'builtin-nord', name: 'Nord' },
|
||||
{ id: 'builtin-catppuccin', name: 'Catppuccin' },
|
||||
{ id: 'builtin-solarized', name: 'Solarized' },
|
||||
];
|
||||
// Derive from the single source of truth so newly added built-in themes show
|
||||
// up here automatically (was previously a hardcoded subset — see #496).
|
||||
const BUILTIN_THEME_OPTIONS = BUILTIN_THEMES.map(t => ({ id: t.id, name: t.name }));
|
||||
|
||||
interface ThemeEntry {
|
||||
id: string;
|
||||
|
||||
@@ -38,6 +38,7 @@ interface WizardConfig {
|
||||
// Security
|
||||
sessionSecret: string;
|
||||
settingsSyncEnabled: boolean;
|
||||
telemetryEnabled: boolean;
|
||||
// Logging
|
||||
logFormat: 'text' | 'json';
|
||||
logLevel: 'error' | 'warn' | 'info' | 'debug';
|
||||
@@ -66,6 +67,7 @@ const EMPTY_CONFIG: WizardConfig = {
|
||||
oauthIssuerUrl: '',
|
||||
sessionSecret: '',
|
||||
settingsSyncEnabled: true,
|
||||
telemetryEnabled: false,
|
||||
logFormat: 'text',
|
||||
logLevel: 'info',
|
||||
faviconUrl: '',
|
||||
@@ -1002,8 +1004,11 @@ function SecurityStep({ config, setConfig, onNext, onBack }: Pick<StepProps, 'co
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const values: Partial<WizardConfig> = {
|
||||
// telemetryConsent is persisted to the telemetry state file by the API,
|
||||
// not to admin config - see app/api/setup/step/route.ts.
|
||||
const values: Record<string, unknown> = {
|
||||
settingsSyncEnabled: config.settingsSyncEnabled,
|
||||
telemetryConsent: config.telemetryEnabled ? 'on' : 'off',
|
||||
};
|
||||
if (config.sessionSecret) values.sessionSecret = config.sessionSecret;
|
||||
await onNext('security', values);
|
||||
@@ -1068,6 +1073,15 @@ function SecurityStep({ config, setConfig, onNext, onBack }: Pick<StepProps, 'co
|
||||
hint="Stores user preferences server-side, encrypted with the session secret."
|
||||
disabled={!config.sessionSecret}
|
||||
/>
|
||||
|
||||
<div className="rounded-md border border-border bg-muted/20 p-3">
|
||||
<Toggle
|
||||
checked={config.telemetryEnabled}
|
||||
onChange={(v) => setConfig({ ...config, telemetryEnabled: v })}
|
||||
label="Send anonymous usage stats to help improve Bulwark"
|
||||
hint="Off by default. One anonymous heartbeat per day with version, platform, and which features are enabled - never email addresses, hostnames, or IPs. You can change this anytime in admin settings."
|
||||
/>
|
||||
</div>
|
||||
<Footer>
|
||||
<SecondaryButton onClick={onBack}>Back</SecondaryButton>
|
||||
<PrimaryButton type="submit" disabled={submitting}>
|
||||
@@ -1480,6 +1494,7 @@ function ReviewStep({ config, onBack, onFinish }: { config: WizardConfig; onBack
|
||||
: 'Off'
|
||||
}
|
||||
/>
|
||||
<SummaryRow label="Anonymous telemetry" value={config.telemetryEnabled ? 'On' : 'Off'} />
|
||||
</SummaryGroup>
|
||||
|
||||
<SummaryGroup icon={<FileText className="w-4 h-4" />} title="Logging">
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { SandboxRuntime } from '@/lib/plugin-sandbox/runtime';
|
||||
|
||||
// Privileged-tier sandbox route. Identical runtime to /plugin-sandbox, but the
|
||||
// host loads it into a same-origin (`allow-same-origin`) iframe so the bundle
|
||||
// gets real `crypto.subtle` + IndexedDB. The trust gate (signature + admin
|
||||
// approval) is enforced host-side before this route is ever framed; the page
|
||||
// itself carries no extra privilege.
|
||||
//
|
||||
// Must be dynamic so the per-request CSP nonce from proxy.ts is embedded in
|
||||
// Next's injected hydration/chunk scripts.
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function PrivilegedPluginSandboxPage() {
|
||||
return <SandboxRuntime />;
|
||||
}
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
invalidateFrameOriginsCache,
|
||||
} from '@/lib/admin/csp-frame-origins';
|
||||
import JSZip from 'jszip';
|
||||
import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS, ALLOWED_PLUGIN_FILES } from '@/lib/plugin-types';
|
||||
import { MAX_PLUGIN_SIZE, MAX_THEME_SIZE, ALL_PERMISSIONS } from '@/lib/plugin-types';
|
||||
import { sanitizeThemeCSS, validateThemeCSSSafety } from '@/lib/theme-loader';
|
||||
import { configManager } from '@/lib/admin/config-manager';
|
||||
|
||||
|
||||
@@ -183,6 +183,7 @@ export async function POST(request: NextRequest) {
|
||||
author: manifest.author as string,
|
||||
description: (manifest.description as string) || '',
|
||||
type: manifest.type as string,
|
||||
...(manifest.tier === 'privileged' ? { tier: 'privileged' } : {}),
|
||||
permissions: (manifest.permissions as string[]) || [],
|
||||
entrypoint: manifest.entrypoint as string,
|
||||
enabled: true,
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { cookies } from 'next/headers';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
|
||||
import { buildOAuthParams, getRequiredConfig, getTokenEndpoint } from '@/lib/oauth/token-exchange';
|
||||
import { getCookieOptions } from '@/lib/oauth/cookie-config';
|
||||
import { createPairing } from '@/lib/auth/pairing-store';
|
||||
import { hasValidPairReauth } from '@/lib/auth/pair-reauth';
|
||||
import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';
|
||||
|
||||
// Desktop side of the cross-device QR login. The caller must be a signed-in
|
||||
// webmail session (its refresh token lives in the httpOnly jmap_rt cookie). We
|
||||
// refresh that token to (a) prove the session is live and (b) obtain a fresh
|
||||
// access token to hand the phone, then stash the bundle under a one-time
|
||||
// pairing code. The desktop renders the returned code as a QR; the phone
|
||||
// redeems it at /api/auth/pair/redeem.
|
||||
//
|
||||
// Token sharing note: the phone receives the SAME refresh token as the desktop.
|
||||
// That is correct for OAuth servers (such as Stalwart in its default config)
|
||||
// that do not rotate refresh tokens on use. If the server rotates refresh
|
||||
// tokens, the two devices would fight over the latest token — such deployments
|
||||
// should disable rotation for this client or use a token-exchange grant.
|
||||
export async function POST(request: NextRequest) {
|
||||
const cookieStore = await cookies();
|
||||
try {
|
||||
// Step-up gate: minting a pairing code grants new-device access, so it
|
||||
// requires a recent fresh IdP re-authentication (see the reauth SSO flow).
|
||||
// The client turns this 401 into a re-auth redirect, then retries.
|
||||
if (!(await hasValidPairReauth())) {
|
||||
return NextResponse.json({ error: 'reauth_required' }, { status: 401 });
|
||||
}
|
||||
|
||||
const body = await request.json().catch(() => ({}));
|
||||
const slot =
|
||||
typeof body.slot === 'number' && body.slot >= 0 && body.slot < MAX_ACCOUNT_SLOTS
|
||||
? body.slot
|
||||
: 0;
|
||||
|
||||
const cookieName = refreshTokenCookieName(slot);
|
||||
const refreshToken = cookieStore.get(cookieName)?.value;
|
||||
if (!refreshToken) {
|
||||
return NextResponse.json({ error: 'Not signed in' }, { status: 401 });
|
||||
}
|
||||
const serverId = cookieStore.get(refreshTokenServerCookieName(slot))?.value || null;
|
||||
|
||||
const tokenEndpoint = await getTokenEndpoint(serverId);
|
||||
const params = buildOAuthParams({ grant_type: 'refresh_token', refresh_token: refreshToken }, serverId);
|
||||
|
||||
const tokenResponse = await fetch(tokenEndpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: params.toString(),
|
||||
});
|
||||
|
||||
if (!tokenResponse.ok) {
|
||||
const errorText = await tokenResponse.text();
|
||||
logger.warn('Pair create: refresh failed', { status: tokenResponse.status, error: errorText });
|
||||
// Stale session — clear the dead cookie so the user is prompted to log
|
||||
// back in, mirroring the token route's behaviour.
|
||||
cookieStore.delete(cookieName);
|
||||
cookieStore.delete(refreshTokenServerCookieName(slot));
|
||||
return NextResponse.json({ error: 'Session expired' }, { status: 401 });
|
||||
}
|
||||
|
||||
const tokens = await tokenResponse.json();
|
||||
if (!tokens.access_token) {
|
||||
logger.error('Pair create: refresh response missing access_token');
|
||||
return NextResponse.json({ error: 'Invalid token response' }, { status: 502 });
|
||||
}
|
||||
|
||||
// If the server rotated the refresh token, persist the new one back to the
|
||||
// desktop's cookie so this very session keeps working. The phone will get
|
||||
// the same (new) token below.
|
||||
const effectiveRefreshToken = tokens.refresh_token || refreshToken;
|
||||
if (tokens.refresh_token) {
|
||||
cookieStore.set(cookieName, tokens.refresh_token, getCookieOptions());
|
||||
}
|
||||
|
||||
const { clientId, serverUrl } = getRequiredConfig(serverId);
|
||||
|
||||
const { code, expiresIn } = createPairing({
|
||||
accessToken: tokens.access_token,
|
||||
refreshToken: effectiveRefreshToken,
|
||||
expiresIn: tokens.expires_in,
|
||||
tokenEndpoint,
|
||||
clientId,
|
||||
serverUrl,
|
||||
serverId,
|
||||
});
|
||||
|
||||
return NextResponse.json({ pairing_code: code, server_url: serverUrl, expires_in: expiresIn });
|
||||
} catch (error) {
|
||||
logger.error('Pair create error', { error: error instanceof Error ? error.message : 'Unknown error' });
|
||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { consumePairing } from '@/lib/auth/pairing-store';
|
||||
|
||||
// Phone side of the cross-device QR login. The app POSTs the pairing code it
|
||||
// scanned; we hand back the OAuth token bundle the desktop stashed at
|
||||
// /api/auth/pair/create. The code is the only credential required — it is
|
||||
// high-entropy, single-use, and expires within ~2 minutes — so this route is
|
||||
// intentionally unauthenticated (the scanning device has no webmail cookies).
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { pairing_code: pairingCode } = await request.json().catch(() => ({}));
|
||||
if (!pairingCode || typeof pairingCode !== 'string') {
|
||||
return NextResponse.json({ error: 'Missing pairing code' }, { status: 400 });
|
||||
}
|
||||
|
||||
const tokens = consumePairing(pairingCode);
|
||||
if (!tokens) {
|
||||
// Unknown, expired, or already redeemed — do not distinguish.
|
||||
return NextResponse.json({ error: 'Invalid or expired pairing code' }, { status: 400 });
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
flow: 'oauth',
|
||||
server_url: tokens.serverUrl,
|
||||
access_token: tokens.accessToken,
|
||||
...(tokens.refreshToken ? { refresh_token: tokens.refreshToken } : {}),
|
||||
...(typeof tokens.expiresIn === 'number' ? { expires_in: tokens.expiresIn } : {}),
|
||||
token_endpoint: tokens.tokenEndpoint,
|
||||
client_id: tokens.clientId,
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('Pair redeem error', { error: error instanceof Error ? error.message : 'Unknown error' });
|
||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { cookies } from 'next/headers';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { decryptPayload } from '@/lib/auth/crypto';
|
||||
import { exchangeCodeForTokens } from '@/lib/oauth/token-exchange';
|
||||
import { setPairReauth } from '@/lib/auth/pair-reauth';
|
||||
|
||||
// Completes the step-up re-authentication for device pairing. The user was sent
|
||||
// to the IdP with prompt=login (see /api/auth/sso/start with purpose=reauth);
|
||||
// here we verify the returned code against the pending state and exchange it to
|
||||
// confirm a fresh login actually happened, then set the short-lived pairing
|
||||
// re-auth proof cookie. We deliberately do NOT issue a login session or write
|
||||
// any refresh-token cookies — the user is already signed in; this only proves
|
||||
// recency for the pairing action.
|
||||
|
||||
const SSO_PENDING_COOKIE = 'sso_pending';
|
||||
const SSO_PENDING_MAX_AGE_MS = 5 * 60 * 1000;
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const cookieStore = await cookies();
|
||||
try {
|
||||
const { code, state } = await request.json();
|
||||
if (!code || !state) {
|
||||
return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
|
||||
}
|
||||
|
||||
const pendingCookie = cookieStore.get(SSO_PENDING_COOKIE)?.value;
|
||||
if (!pendingCookie) {
|
||||
return NextResponse.json({ error: 'No pending re-auth session' }, { status: 400 });
|
||||
}
|
||||
|
||||
const pending = decryptPayload(pendingCookie);
|
||||
cookieStore.delete(SSO_PENDING_COOKIE);
|
||||
if (!pending) {
|
||||
return NextResponse.json({ error: 'Invalid re-auth session' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Only honor pending sessions that were started for the reauth purpose, so
|
||||
// a normal login code can't be redirected into setting a pairing proof.
|
||||
if (pending.purpose !== 'reauth') {
|
||||
return NextResponse.json({ error: 'Not a re-auth session' }, { status: 400 });
|
||||
}
|
||||
if (pending.state !== state) {
|
||||
return NextResponse.json({ error: 'State mismatch' }, { status: 400 });
|
||||
}
|
||||
const createdAt = pending.created_at as number;
|
||||
if (!createdAt || Date.now() - createdAt > SSO_PENDING_MAX_AGE_MS) {
|
||||
return NextResponse.json({ error: 'Re-auth session expired' }, { status: 400 });
|
||||
}
|
||||
|
||||
const codeVerifier = pending.code_verifier as string;
|
||||
const redirectUri = pending.redirect_uri as string;
|
||||
const pendingServerId = typeof pending.server_id === 'string' ? pending.server_id : null;
|
||||
if (!codeVerifier || !redirectUri) {
|
||||
return NextResponse.json({ error: 'Invalid re-auth session data' }, { status: 400 });
|
||||
}
|
||||
|
||||
// A successful exchange proves the user just authenticated at the IdP (the
|
||||
// freshness is enforced by prompt=login on the authorize request). We don't
|
||||
// keep the resulting tokens.
|
||||
await exchangeCodeForTokens(code, codeVerifier, redirectUri, pendingServerId);
|
||||
|
||||
await setPairReauth();
|
||||
return NextResponse.json({ ok: true });
|
||||
} catch (error) {
|
||||
cookieStore.delete(SSO_PENDING_COOKIE);
|
||||
logger.error('Reauth complete error', { error: error instanceof Error ? error.message : 'Unknown error' });
|
||||
return NextResponse.json({ error: 'Re-authentication failed' }, { status: 401 });
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { discoverOAuth } from '@/lib/oauth/discovery';
|
||||
import { getOauthScopes } from '@/lib/oauth/tokens';
|
||||
import { getCookieOptions } from '@/lib/oauth/cookie-config';
|
||||
import { hasSessionSecret } from '@/lib/auth/session-secret';
|
||||
import { configManager } from '@/lib/admin/config-manager';
|
||||
|
||||
const SSO_PENDING_COOKIE = 'sso_pending';
|
||||
const SSO_PENDING_MAX_AGE = 300; // 5 minutes
|
||||
@@ -30,8 +31,14 @@ export async function POST(request: NextRequest) {
|
||||
server_id: bodyServerId,
|
||||
mobile_redirect_uri: rawMobileRedirectUri,
|
||||
mobile_state: rawMobileState,
|
||||
purpose: rawPurpose,
|
||||
} = await request.json();
|
||||
|
||||
// `reauth` drives the step-up flow for device pairing: it forces a fresh
|
||||
// IdP login (prompt=login) and the /reauth/sso/complete handler sets the
|
||||
// short-lived pairing re-auth proof instead of logging the user in again.
|
||||
const isReauth = rawPurpose === 'reauth';
|
||||
|
||||
if (!redirect_uri || typeof redirect_uri !== 'string') {
|
||||
return NextResponse.json({ error: 'Missing redirect_uri' }, { status: 400 });
|
||||
}
|
||||
@@ -85,6 +92,7 @@ export async function POST(request: NextRequest) {
|
||||
...(serverId ? { server_id: serverId } : {}),
|
||||
...(mobileRedirectUri ? { mobile_redirect_uri: mobileRedirectUri } : {}),
|
||||
...(mobileState ? { mobile_state: mobileState } : {}),
|
||||
...(isReauth ? { purpose: 'reauth' } : {}),
|
||||
};
|
||||
|
||||
const encrypted = encryptPayload(pendingData);
|
||||
@@ -95,8 +103,12 @@ export async function POST(request: NextRequest) {
|
||||
maxAge: SSO_PENDING_MAX_AGE,
|
||||
});
|
||||
|
||||
// Build authorize URL
|
||||
const authUrl = new URL(metadata.authorization_endpoint);
|
||||
// Build authorize URL. OAUTH_AUTHORIZE_URL, when set, overrides only the
|
||||
// user-facing authorize endpoint (e.g. a per-brand login host). Discovery,
|
||||
// token exchange and refresh keep using the canonical discovered endpoints.
|
||||
const authorizeOverride =
|
||||
configManager.get<string>('oauthAuthorizeUrl', '') || process.env.OAUTH_AUTHORIZE_URL;
|
||||
const authUrl = new URL(authorizeOverride?.trim() || metadata.authorization_endpoint);
|
||||
authUrl.searchParams.set('response_type', 'code');
|
||||
authUrl.searchParams.set('client_id', clientId);
|
||||
authUrl.searchParams.set('redirect_uri', redirect_uri);
|
||||
@@ -109,6 +121,14 @@ export async function POST(request: NextRequest) {
|
||||
authUrl.searchParams.set('ui_locales', locale);
|
||||
}
|
||||
|
||||
// Force a fresh credential entry for step-up re-auth. prompt=login and
|
||||
// max_age=0 both ask the IdP to re-authenticate even if it has an active
|
||||
// session; honoring them depends on the IdP supporting these OIDC params.
|
||||
if (isReauth) {
|
||||
authUrl.searchParams.set('prompt', 'login');
|
||||
authUrl.searchParams.set('max_age', '0');
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
authorize_url: authUrl.toString(),
|
||||
state,
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { cookies } from 'next/headers';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { discoverOAuth } from '@/lib/oauth/discovery';
|
||||
import { getDiscoveryValidator } from '@/lib/oauth/token-exchange';
|
||||
import { refreshTokenCookieName, refreshTokenServerCookieName } from '@/lib/oauth/tokens';
|
||||
import { getCookieOptions } from '@/lib/oauth/cookie-config';
|
||||
import { readFileEnv } from '@/lib/read-file-env';
|
||||
@@ -11,81 +9,173 @@ import { isPublicHttpUrl } from '@/lib/security/url-guard';
|
||||
import { recordLogin } from '@/lib/telemetry/login-tracker';
|
||||
import { parseJmapServers, findServerByUrl, findServerById } from '@/lib/admin/jmap-servers';
|
||||
import { MAX_ACCOUNT_SLOTS } from '@/lib/account-utils';
|
||||
import { generateCodeVerifier, generateCodeChallenge } from '@/lib/oauth/pkce';
|
||||
|
||||
/**
|
||||
* Exchange basic auth credentials (with TOTP appended) for OAuth tokens.
|
||||
* Exchange a password + (optional) TOTP code for OAuth tokens.
|
||||
*
|
||||
* This allows 2FA users who log in with basic auth + TOTP to upgrade
|
||||
* to token-based auth, avoiding session expiry when the TOTP rotates.
|
||||
* Stalwart 0.16+ no longer accepts the legacy `password$totp` convention over
|
||||
* HTTP Basic auth: its Basic decoder hardcodes `mfa_token: None` and never
|
||||
* splits the secret on `$`, so any TOTP appended to the password is verified
|
||||
* verbatim against the password hash and fails. The MFA token must instead be
|
||||
* supplied as a distinct field through the structured login endpoint.
|
||||
*
|
||||
* Tries three strategies:
|
||||
* 1. ROPC grant with client_id (if OAUTH_CLIENT_ID is set)
|
||||
* 2. ROPC grant without client_id
|
||||
* 3. ROPC grant authenticated via Basic Auth header (Stalwart-style)
|
||||
* This route drives that flow server-side (avoiding browser CORS against the
|
||||
* mail server, same as OAuth discovery):
|
||||
* 1. POST {serverUrl}/api/auth -> authenticate with a separate `mfaToken`,
|
||||
* receiving a short-lived authorization `clientCode`.
|
||||
* 2. POST {serverUrl}/auth/token (grant_type=authorization_code) -> exchange
|
||||
* the code (with PKCE) for access/refresh tokens.
|
||||
*
|
||||
* Token-based auth also survives TOTP rotation, unlike basic auth which embeds
|
||||
* the (≈30s) code in every request.
|
||||
*/
|
||||
|
||||
async function tryTokenRequest(
|
||||
tokenEndpoint: string,
|
||||
params: URLSearchParams,
|
||||
extraHeaders?: Record<string, string>,
|
||||
): Promise<{ ok: true; tokens: { access_token: string; expires_in?: number; refresh_token?: string } } | { ok: false; status: number; error: string }> {
|
||||
try {
|
||||
const headers: Record<string, string> = { 'Content-Type': 'application/x-www-form-urlencoded', ...extraHeaders };
|
||||
const response = await fetch(tokenEndpoint, {
|
||||
method: 'POST',
|
||||
headers,
|
||||
body: params.toString(),
|
||||
});
|
||||
// Fallback OAuth client id used when no client is configured. Stalwart accepts
|
||||
// any client id unless `require_client_registration` is enabled (default off);
|
||||
// when it is enabled the admin must configure `oauthClientId` with this
|
||||
// redirect URI registered.
|
||||
const DEFAULT_CLIENT_ID = 'bulwark-webmail';
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
return { ok: false, status: response.status, error: errorText.substring(0, 500) };
|
||||
}
|
||||
|
||||
const tokens = await response.json();
|
||||
if (!tokens.access_token) {
|
||||
return { ok: false, status: 502, error: 'Response missing access_token' };
|
||||
}
|
||||
|
||||
return { ok: true, tokens };
|
||||
} catch (err) {
|
||||
return { ok: false, status: 0, error: err instanceof Error ? err.message : String(err) };
|
||||
}
|
||||
interface LoginResult {
|
||||
type?: string;
|
||||
// The response keeps snake_case: only the LoginResponse variant *tags* are
|
||||
// camelCased server-side, not the struct fields (the request fields are).
|
||||
client_code?: string;
|
||||
}
|
||||
|
||||
async function findTokenEndpoint(serverUrl: string, adminTrusted: boolean): Promise<string | null> {
|
||||
// Admin-trusted callers (matched server entry or configured JMAP server URL)
|
||||
// honor the `oauthAllowPrivateEndpoints` opt-in. User-supplied URLs always
|
||||
// go through the SSRF validator regardless of the setting.
|
||||
const validateEndpoint = adminTrusted ? getDiscoveryValidator() : isPublicHttpUrl;
|
||||
// 1. Try OAuth discovery
|
||||
const metadata = await discoverOAuth(serverUrl, { validateEndpoint });
|
||||
if (metadata?.token_endpoint) return metadata.token_endpoint;
|
||||
function trimUrl(url: string): string {
|
||||
return url.replace(/\/+$/, '');
|
||||
}
|
||||
|
||||
// 2. Try common Stalwart token endpoint paths directly
|
||||
const candidates = [
|
||||
`${serverUrl}/auth/token`,
|
||||
`${serverUrl}/api/oauth/token`,
|
||||
];
|
||||
async function attemptLogin(
|
||||
upstreamUrl: string,
|
||||
username: string,
|
||||
password: string,
|
||||
totp: string | undefined,
|
||||
redirectUri: string,
|
||||
slot: number,
|
||||
serverId: string | null,
|
||||
): Promise<NextResponse> {
|
||||
const base = trimUrl(upstreamUrl);
|
||||
|
||||
for (const url of candidates) {
|
||||
try {
|
||||
// A POST with no body should return 400 (bad request) rather than 404 if the endpoint exists
|
||||
const probe = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'grant_type=probe' });
|
||||
if (probe.status !== 404 && probe.status !== 405) {
|
||||
return url;
|
||||
}
|
||||
} catch {
|
||||
// Network error - endpoint not reachable
|
||||
// Per-server OAuth credentials override the global ones when the requested
|
||||
// server entry has its own oauth block configured.
|
||||
const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
|
||||
const entry = findServerById(serverList, serverId);
|
||||
const clientId = entry?.oauth?.clientId
|
||||
|| configManager.get<string>('oauthClientId', '')
|
||||
|| process.env.OAUTH_CLIENT_ID
|
||||
|| DEFAULT_CLIENT_ID;
|
||||
const clientSecret = entry?.oauth?.clientSecret
|
||||
|| configManager.get<string>('oauthClientSecret', '')
|
||||
|| process.env.OAUTH_CLIENT_SECRET
|
||||
|| readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE)
|
||||
|| '';
|
||||
|
||||
// PKCE proves the token exchange originates from the same client that
|
||||
// initiated the login, so no client secret is required for public clients.
|
||||
const verifier = generateCodeVerifier();
|
||||
const challenge = await generateCodeChallenge(verifier);
|
||||
|
||||
// Step 1: structured login with a separate MFA token.
|
||||
let login: LoginResult;
|
||||
try {
|
||||
const loginResponse = await fetch(`${base}/api/auth`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
type: 'authCode',
|
||||
accountName: username,
|
||||
accountSecret: password,
|
||||
...(totp ? { mfaToken: totp } : {}),
|
||||
clientId,
|
||||
redirectUri,
|
||||
codeChallenge: challenge,
|
||||
codeChallengeMethod: 'S256',
|
||||
}),
|
||||
});
|
||||
|
||||
if (!loginResponse.ok) {
|
||||
const detail = (await loginResponse.text()).substring(0, 500);
|
||||
logger.warn('TOTP login: /api/auth rejected request', { status: loginResponse.status });
|
||||
// A 404 means the server predates the structured login endpoint; let the
|
||||
// caller fall back to the legacy basic-auth path.
|
||||
return NextResponse.json(
|
||||
{ error: loginResponse.status === 404 ? 'login_endpoint_missing' : 'login_failed', detail },
|
||||
{ status: loginResponse.status === 404 ? 404 : 502 },
|
||||
);
|
||||
}
|
||||
|
||||
login = await loginResponse.json();
|
||||
} catch (err) {
|
||||
logger.warn('TOTP login: /api/auth request failed', { error: err instanceof Error ? err.message : String(err) });
|
||||
return NextResponse.json({ error: 'login_unreachable' }, { status: 502 });
|
||||
}
|
||||
|
||||
return null;
|
||||
switch (login.type) {
|
||||
case 'authenticated':
|
||||
break;
|
||||
case 'mfaRequired':
|
||||
return NextResponse.json({ error: 'totp_required' }, { status: 401 });
|
||||
case 'failure':
|
||||
default:
|
||||
return NextResponse.json({ error: 'invalid_credentials' }, { status: 401 });
|
||||
}
|
||||
|
||||
if (!login.client_code) {
|
||||
logger.warn('TOTP login: authenticated response missing client_code');
|
||||
return NextResponse.json({ error: 'login_failed' }, { status: 502 });
|
||||
}
|
||||
|
||||
// Step 2: exchange the authorization code for tokens.
|
||||
const tokenParams = new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
code: login.client_code,
|
||||
client_id: clientId,
|
||||
redirect_uri: redirectUri,
|
||||
code_verifier: verifier,
|
||||
});
|
||||
// Confidential clients still send their secret; harmless for public clients.
|
||||
if (clientSecret) tokenParams.set('client_secret', clientSecret);
|
||||
|
||||
let tokens: { access_token?: string; expires_in?: number; refresh_token?: string };
|
||||
try {
|
||||
const tokenResponse = await fetch(`${base}/auth/token`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: tokenParams.toString(),
|
||||
});
|
||||
|
||||
if (!tokenResponse.ok) {
|
||||
const detail = (await tokenResponse.text()).substring(0, 500);
|
||||
logger.warn('TOTP login: token exchange failed', { status: tokenResponse.status, detail });
|
||||
return NextResponse.json({ error: 'token_exchange_failed', detail }, { status: 502 });
|
||||
}
|
||||
|
||||
tokens = await tokenResponse.json();
|
||||
} catch (err) {
|
||||
logger.warn('TOTP login: token endpoint failed', { error: err instanceof Error ? err.message : String(err) });
|
||||
return NextResponse.json({ error: 'token_exchange_failed' }, { status: 502 });
|
||||
}
|
||||
|
||||
if (!tokens.access_token) {
|
||||
return NextResponse.json({ error: 'token_exchange_failed', detail: 'Response missing access_token' }, { status: 502 });
|
||||
}
|
||||
|
||||
logger.info('TOTP login succeeded');
|
||||
void recordLogin(username, base);
|
||||
return await storeAndRespond(
|
||||
{ access_token: tokens.access_token, expires_in: tokens.expires_in, refresh_token: tokens.refresh_token },
|
||||
slot,
|
||||
serverId,
|
||||
);
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { serverUrl, username, password, slot: bodySlot, server_id: bodyServerId } = await request.json();
|
||||
const { serverUrl, username, password, totp, slot: bodySlot, server_id: bodyServerId, redirectUri: bodyRedirectUri } =
|
||||
await request.json();
|
||||
|
||||
if (!serverUrl || !username || !password) {
|
||||
return NextResponse.json({ error: 'Missing required parameters' }, { status: 400 });
|
||||
@@ -93,6 +183,7 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
const slot = typeof bodySlot === 'number' && bodySlot >= 0 && bodySlot < MAX_ACCOUNT_SLOTS ? bodySlot : 0;
|
||||
const requestedServerId = typeof bodyServerId === 'string' && bodyServerId ? bodyServerId : null;
|
||||
const totpCode = typeof totp === 'string' && totp ? totp : undefined;
|
||||
|
||||
// Pin the upstream URL to a configured JMAP server. The list of allowed
|
||||
// servers is `jmapServerUrl` plus any entry from `jmapServers`. Only when
|
||||
@@ -110,20 +201,17 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
let upstreamUrl: string;
|
||||
let resolvedServerId: string | null = null;
|
||||
let adminTrusted = false;
|
||||
const requestedEntry = findServerById(serverList, requestedServerId);
|
||||
const matchedEntry = requestedEntry || findServerByUrl(serverList, serverUrl);
|
||||
|
||||
if (matchedEntry) {
|
||||
upstreamUrl = matchedEntry.url;
|
||||
resolvedServerId = matchedEntry.id;
|
||||
adminTrusted = true;
|
||||
} else if (configuredServerUrl) {
|
||||
upstreamUrl = configuredServerUrl;
|
||||
adminTrusted = true;
|
||||
} else if (allowCustomEndpoint) {
|
||||
if (!(await isPublicHttpUrl(serverUrl))) {
|
||||
logger.warn('TOTP token exchange: rejected non-public server URL');
|
||||
logger.warn('TOTP login: rejected non-public server URL');
|
||||
return NextResponse.json({ error: 'invalid_server_url' }, { status: 400 });
|
||||
}
|
||||
upstreamUrl = serverUrl;
|
||||
@@ -131,100 +219,22 @@ export async function POST(request: NextRequest) {
|
||||
return NextResponse.json({ error: 'jmap_server_not_configured' }, { status: 500 });
|
||||
}
|
||||
|
||||
const tokenEndpoint = await findTokenEndpoint(upstreamUrl, adminTrusted);
|
||||
if (!tokenEndpoint) {
|
||||
logger.warn('TOTP token exchange: no token endpoint found');
|
||||
return NextResponse.json({ error: 'no_token_endpoint', detail: 'Could not discover OAuth token endpoint on the mail server' }, { status: 404 });
|
||||
}
|
||||
// The redirect URI must be identical in the login and token-exchange steps,
|
||||
// and (when require_client_registration is on) registered for the client.
|
||||
// Prefer the browser-supplied callback URL the OAuth client already uses;
|
||||
// fall back to the upstream URL so the two steps still agree.
|
||||
const redirectUri =
|
||||
typeof bodyRedirectUri === 'string' && /^https?:\/\//.test(bodyRedirectUri)
|
||||
? bodyRedirectUri
|
||||
: trimUrl(upstreamUrl);
|
||||
|
||||
return await attemptAllStrategies(tokenEndpoint, upstreamUrl, username, password, slot, resolvedServerId);
|
||||
return await attemptLogin(upstreamUrl, username, password, totpCode, redirectUri, slot, resolvedServerId);
|
||||
} catch (error) {
|
||||
logger.error('TOTP token exchange error', { error: error instanceof Error ? error.message : 'Unknown error' });
|
||||
logger.error('TOTP login error', { error: error instanceof Error ? error.message : 'Unknown error' });
|
||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
async function attemptAllStrategies(
|
||||
tokenEndpoint: string,
|
||||
serverUrl: string,
|
||||
username: string,
|
||||
password: string,
|
||||
slot: number,
|
||||
serverId: string | null,
|
||||
): Promise<NextResponse> {
|
||||
logger.info('TOTP token exchange: found token endpoint', { tokenEndpoint });
|
||||
|
||||
// Per-server OAuth credentials override the global ones when the requested
|
||||
// server entry has its own oauth block configured.
|
||||
const serverList = parseJmapServers(configManager.get<unknown>('jmapServers', []));
|
||||
const entry = findServerById(serverList, serverId);
|
||||
const clientId = entry?.oauth?.clientId
|
||||
|| configManager.get<string>('oauthClientId', '')
|
||||
|| process.env.OAUTH_CLIENT_ID;
|
||||
const clientSecret = entry?.oauth?.clientSecret
|
||||
|| configManager.get<string>('oauthClientSecret', '')
|
||||
|| process.env.OAUTH_CLIENT_SECRET
|
||||
|| readFileEnv(process.env.OAUTH_CLIENT_SECRET_FILE);
|
||||
const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
|
||||
const attempts: Array<{ strategy: string; error: string }> = [];
|
||||
|
||||
// Strategy 1: ROPC with client_id (if configured)
|
||||
if (clientId) {
|
||||
const params = new URLSearchParams({ grant_type: 'password', username, password, client_id: clientId });
|
||||
if (clientSecret) params.set('client_secret', clientSecret);
|
||||
const result = await tryTokenRequest(tokenEndpoint, params);
|
||||
if (result.ok) {
|
||||
logger.info('TOTP token exchange succeeded (ROPC with client_id)');
|
||||
void recordLogin(username, serverUrl);
|
||||
return await storeAndRespond(result.tokens, slot, serverId);
|
||||
}
|
||||
attempts.push({ strategy: 'ROPC with client_id', error: result.error });
|
||||
}
|
||||
|
||||
// Strategy 2: ROPC without client_id
|
||||
{
|
||||
const params = new URLSearchParams({ grant_type: 'password', username, password });
|
||||
const result = await tryTokenRequest(tokenEndpoint, params);
|
||||
if (result.ok) {
|
||||
logger.info('TOTP token exchange succeeded (ROPC without client_id)');
|
||||
void recordLogin(username, serverUrl);
|
||||
return await storeAndRespond(result.tokens, slot, serverId);
|
||||
}
|
||||
attempts.push({ strategy: 'ROPC without client_id', error: result.error });
|
||||
}
|
||||
|
||||
// Strategy 3: Basic Auth header on token endpoint (some servers accept this)
|
||||
{
|
||||
const params = new URLSearchParams({ grant_type: 'password' });
|
||||
const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
|
||||
if (result.ok) {
|
||||
logger.info('TOTP token exchange succeeded (Basic Auth header)');
|
||||
void recordLogin(username, serverUrl);
|
||||
return await storeAndRespond(result.tokens, slot, serverId);
|
||||
}
|
||||
attempts.push({ strategy: 'Basic Auth header', error: result.error });
|
||||
}
|
||||
|
||||
// Strategy 4: client_credentials with Basic Auth (last resort)
|
||||
{
|
||||
const params = new URLSearchParams({ grant_type: 'client_credentials' });
|
||||
const result = await tryTokenRequest(tokenEndpoint, params, { 'Authorization': basicAuth });
|
||||
if (result.ok) {
|
||||
logger.info('TOTP token exchange succeeded (client_credentials + Basic Auth)');
|
||||
void recordLogin(username, serverUrl);
|
||||
return await storeAndRespond(result.tokens, slot, serverId);
|
||||
}
|
||||
attempts.push({ strategy: 'client_credentials + Basic Auth', error: result.error });
|
||||
}
|
||||
|
||||
logger.warn('TOTP token exchange: all strategies failed', { attempts });
|
||||
return NextResponse.json({
|
||||
error: 'token_exchange_failed',
|
||||
detail: 'All token exchange strategies failed',
|
||||
attempts,
|
||||
}, { status: 502 });
|
||||
}
|
||||
|
||||
async function storeAndRespond(
|
||||
tokens: { access_token: string; expires_in?: number; refresh_token?: string },
|
||||
slot: number,
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { getStalwartCredentials } from '@/lib/stalwart/credentials';
|
||||
import { normalizeCalendarEventLike } from '@/lib/calendar-event-normalization';
|
||||
import { expandRecurringEvents } from '@/lib/recurrence-expansion';
|
||||
import { parseISO } from 'date-fns';
|
||||
import type { CalendarEvent } from '@/lib/jmap/types';
|
||||
|
||||
/**
|
||||
* POST /api/calendar-agenda
|
||||
*
|
||||
* Sidecar for the "Calendar Agenda" plugin. Resolves the caller's calendar
|
||||
* account from the stored Stalwart auth context, queries upcoming
|
||||
* CalendarEvents over JMAP, expands recurring series server-side, and returns
|
||||
* a slim, structured-cloneable agenda the plugin can render directly.
|
||||
*
|
||||
* Credentials never leave the server — the sandboxed plugin only ever sees
|
||||
* the resulting agenda DTOs.
|
||||
*
|
||||
* Body: { days?: number (1-90, default 7), limit?: number (1-200, default 50) }
|
||||
*/
|
||||
|
||||
const CALENDAR_CAP = 'urn:ietf:params:jmap:calendars';
|
||||
const PRINCIPALS_CAP = 'urn:ietf:params:jmap:principals';
|
||||
|
||||
// Mirror of lib/jmap/client.ts CALENDAR_EVENT_PROPERTIES, trimmed to what the
|
||||
// agenda actually needs (start/recurrence/display fields).
|
||||
const EVENT_PROPERTIES = [
|
||||
'id', '@type', 'uid', 'calendarIds', 'title', 'start', 'duration', 'timeZone',
|
||||
'showWithoutTime', 'utcStart', 'utcEnd', 'status', 'freeBusyStatus', 'color',
|
||||
'locations', 'recurrenceId', 'recurrenceIdTimeZone', 'recurrenceRule',
|
||||
'recurrenceOverrides', 'excludedRecurrenceRule',
|
||||
] as const;
|
||||
|
||||
interface JmapSession {
|
||||
apiUrl?: string;
|
||||
primaryAccounts?: Record<string, string>;
|
||||
capabilities?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface AgendaEvent {
|
||||
id: string;
|
||||
uid: string | null;
|
||||
title: string;
|
||||
start: string;
|
||||
end: string;
|
||||
allDay: boolean;
|
||||
status: string | null;
|
||||
color: string | null;
|
||||
location: string | null;
|
||||
calendarId: string | null;
|
||||
}
|
||||
|
||||
// Pure, server-safe equivalents of lib/calendar-utils' getEventStartDate /
|
||||
// getEventEndDate. We can't import that module here because it transitively
|
||||
// pulls in a "use client" calendar component (which throws at load on the
|
||||
// server). Logic mirrors the originals.
|
||||
function parseDurationMinutes(duration: string | undefined): number {
|
||||
if (!duration) return 0;
|
||||
let total = 0;
|
||||
const week = duration.match(/(\d+)W/);
|
||||
const day = duration.match(/(\d+)D/);
|
||||
const hour = duration.match(/(\d+)H/);
|
||||
const min = duration.match(/(\d+)M/);
|
||||
if (week) total += parseInt(week[1], 10) * 7 * 24 * 60;
|
||||
if (day) total += parseInt(day[1], 10) * 24 * 60;
|
||||
if (hour) total += parseInt(hour[1], 10) * 60;
|
||||
if (min) total += parseInt(min[1], 10);
|
||||
return total;
|
||||
}
|
||||
|
||||
function eventStart(event: Partial<CalendarEvent>): Date {
|
||||
if (!event.showWithoutTime && event.utcStart) {
|
||||
const utc = parseISO(event.utcStart);
|
||||
if (!isNaN(utc.getTime())) return utc;
|
||||
}
|
||||
return parseISO(event.start as string);
|
||||
}
|
||||
|
||||
function eventEnd(event: Partial<CalendarEvent>): Date {
|
||||
if (!event.showWithoutTime && event.utcEnd) {
|
||||
const utc = parseISO(event.utcEnd);
|
||||
if (!isNaN(utc.getTime())) return utc;
|
||||
}
|
||||
const start = eventStart(event);
|
||||
if (!event.duration) return start;
|
||||
return new Date(start.getTime() + parseDurationMinutes(event.duration) * 60000);
|
||||
}
|
||||
|
||||
function firstLocationName(event: Partial<CalendarEvent>): string | null {
|
||||
const locations = event.locations;
|
||||
if (!locations || typeof locations !== 'object') return null;
|
||||
for (const loc of Object.values(locations)) {
|
||||
const name = (loc as { name?: unknown })?.name;
|
||||
if (typeof name === 'string' && name.trim()) return name.trim();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function firstCalendarId(event: Partial<CalendarEvent>): string | null {
|
||||
const ids = event.calendarIds;
|
||||
if (!ids || typeof ids !== 'object') return null;
|
||||
const keys = Object.keys(ids);
|
||||
return keys.length > 0 ? keys[0] : null;
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const creds = await getStalwartCredentials(request);
|
||||
if (!creds) {
|
||||
return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
|
||||
let body: { days?: unknown; limit?: unknown } = {};
|
||||
try {
|
||||
body = await request.json();
|
||||
} catch {
|
||||
/* empty body is fine */
|
||||
}
|
||||
const days = clampInt(body.days, 1, 90, 7);
|
||||
const limit = clampInt(body.limit, 1, 200, 50);
|
||||
|
||||
// ── Resolve the calendar account from the JMAP session ──
|
||||
// Hit Stalwart's canonical session endpoint on the SAME host as serverUrl.
|
||||
// We deliberately avoid /.well-known/jmap: it 301s to the server's
|
||||
// configured public hostname, which the host process may not be able to
|
||||
// resolve (the browser client rewrites those URLs back to the origin for
|
||||
// the same reason). Fall back to /.well-known/jmap for non-Stalwart servers.
|
||||
const session = await fetchJmapSession(creds.serverUrl, creds.authHeader);
|
||||
if (!session) {
|
||||
return NextResponse.json({ error: 'JMAP session fetch failed' }, { status: 502 });
|
||||
}
|
||||
const accountId = session.primaryAccounts?.[CALENDAR_CAP];
|
||||
if (!accountId) {
|
||||
// No calendar account for this user — return an empty agenda, not an error.
|
||||
return NextResponse.json({ events: [], generatedAt: new Date().toISOString() });
|
||||
}
|
||||
|
||||
const using = ['urn:ietf:params:jmap:core', CALENDAR_CAP];
|
||||
if (session.capabilities && PRINCIPALS_CAP in session.capabilities) {
|
||||
using.push('urn:ietf:params:jmap:principals:owner');
|
||||
}
|
||||
|
||||
// Send method calls to the same-origin JMAP endpoint the app's passthrough
|
||||
// uses — never to session.apiUrl's (possibly unreachable) public host.
|
||||
const apiUrl = `${creds.serverUrl}/jmap/`;
|
||||
|
||||
const now = new Date();
|
||||
const horizon = new Date(now.getTime() + days * 24 * 60 * 60 * 1000);
|
||||
// Expand from the start of today so all-day / already-running events still
|
||||
// show in the agenda.
|
||||
const windowStart = new Date(now);
|
||||
windowStart.setHours(0, 0, 0, 0);
|
||||
|
||||
// ── 1) Query event IDs in range + load calendars (colours) ──
|
||||
const queryReq = {
|
||||
using,
|
||||
methodCalls: [
|
||||
[
|
||||
'CalendarEvent/query',
|
||||
{
|
||||
accountId,
|
||||
// Mirror the app's calendar store: an { after, before } window lets
|
||||
// Stalwart evaluate recurrence so masters with occurrences in range
|
||||
// are returned (a `before`-only filter can drop unbounded series).
|
||||
filter: { after: windowStart.toISOString(), before: horizon.toISOString() },
|
||||
limit: 1000,
|
||||
},
|
||||
'0',
|
||||
],
|
||||
[
|
||||
'Calendar/get',
|
||||
{ accountId, ids: null, properties: ['id', 'name', 'color'] },
|
||||
'c',
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
const queryRes = await jmapPost(apiUrl, creds.authHeader, queryReq);
|
||||
const queryResp = findResponse(queryRes, 'CalendarEvent/query', '0');
|
||||
if (!queryResp) {
|
||||
const err = findResponse(queryRes, 'error', '0');
|
||||
return NextResponse.json(
|
||||
{ error: (err?.description as string) || 'CalendarEvent/query failed' },
|
||||
{ status: 502 },
|
||||
);
|
||||
}
|
||||
const ids = (queryResp.ids as string[]) || [];
|
||||
|
||||
const calColors = new Map<string, { name: string; color: string | null }>();
|
||||
const calResp = findResponse(queryRes, 'Calendar/get', 'c');
|
||||
for (const cal of ((calResp?.list as Array<Record<string, unknown>>) || [])) {
|
||||
if (typeof cal.id === 'string') {
|
||||
calColors.set(cal.id, {
|
||||
name: typeof cal.name === 'string' ? cal.name : '',
|
||||
color: typeof cal.color === 'string' ? cal.color : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (ids.length === 0) {
|
||||
return NextResponse.json({ events: [], generatedAt: now.toISOString() });
|
||||
}
|
||||
|
||||
// ── 2) Fetch full event objects (batched) ──
|
||||
const raw: Array<Record<string, unknown>> = [];
|
||||
const BATCH = 100;
|
||||
for (let i = 0; i < ids.length; i += BATCH) {
|
||||
const batch = ids.slice(i, i + BATCH);
|
||||
const getRes = await jmapPost(apiUrl, creds.authHeader, {
|
||||
using,
|
||||
methodCalls: [
|
||||
['CalendarEvent/get', { accountId, ids: batch, properties: EVENT_PROPERTIES }, '0'],
|
||||
],
|
||||
});
|
||||
const getResp = findResponse(getRes, 'CalendarEvent/get', '0');
|
||||
if (getResp?.list) raw.push(...(getResp.list as Array<Record<string, unknown>>));
|
||||
}
|
||||
|
||||
// ── 3) Normalize + expand recurrences server-side ──
|
||||
const normalized = raw
|
||||
.map((e) => normalizeCalendarEventLike(e as Partial<CalendarEvent>))
|
||||
.filter((e) => (e['@type'] ?? 'Event') === 'Event')
|
||||
// Drop malformed events without a parseable start (would crash format()/
|
||||
// parseISO downstream) — mirrors the calendar store guard (#316).
|
||||
.filter((e) => typeof e.start === 'string' && e.start && !isNaN(parseISO(e.start).getTime())) as CalendarEvent[];
|
||||
|
||||
const expanded = expandRecurringEvents(
|
||||
normalized,
|
||||
windowStart.toISOString(),
|
||||
horizon.toISOString(),
|
||||
);
|
||||
|
||||
// ── 4) Keep ongoing/upcoming, sort, slice, map to DTOs ──
|
||||
const agenda: AgendaEvent[] = expanded
|
||||
.filter((e) => eventEnd(e).getTime() >= now.getTime())
|
||||
.sort((a, b) => eventStart(a).getTime() - eventStart(b).getTime())
|
||||
.slice(0, limit)
|
||||
.map((e) => {
|
||||
const calId = firstCalendarId(e);
|
||||
const cal = calId ? calColors.get(calId) : undefined;
|
||||
return {
|
||||
id: String(e.id ?? ''),
|
||||
uid: e.uid ?? null,
|
||||
title: (e.title ?? '').trim() || '(no title)',
|
||||
start: eventStart(e).toISOString(),
|
||||
end: eventEnd(e).toISOString(),
|
||||
allDay: !!e.showWithoutTime,
|
||||
status: e.status ?? null,
|
||||
color: e.color || cal?.color || null,
|
||||
location: firstLocationName(e),
|
||||
calendarId: calId,
|
||||
};
|
||||
});
|
||||
|
||||
return NextResponse.json({ events: agenda, generatedAt: now.toISOString() });
|
||||
} catch (error) {
|
||||
// `fetch failed` from undici is too generic to debug — the real reason
|
||||
// (ENOTFOUND, ECONNREFUSED, self-signed TLS, …) lives on `error.cause`.
|
||||
const err = error as Error & { cause?: { code?: string; message?: string } };
|
||||
logger.error('Calendar agenda error', {
|
||||
error: err?.message ?? 'Unknown',
|
||||
causeCode: err?.cause?.code,
|
||||
causeMessage: err?.cause?.message,
|
||||
});
|
||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
function clampInt(value: unknown, min: number, max: number, fallback: number): number {
|
||||
const n = typeof value === 'number' ? value : Number(value);
|
||||
if (!Number.isFinite(n)) return fallback;
|
||||
return Math.min(max, Math.max(min, Math.round(n)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the JMAP session from the same host as `serverUrl`. Tries Stalwart's
|
||||
* canonical /jmap/session first (no redirect), then /.well-known/jmap as a
|
||||
* fallback for other servers. Returns null if neither yields a usable session.
|
||||
*/
|
||||
async function fetchJmapSession(
|
||||
serverUrl: string,
|
||||
authHeader: string,
|
||||
): Promise<JmapSession | null> {
|
||||
const candidates = [`${serverUrl}/jmap/session`, `${serverUrl}/.well-known/jmap`];
|
||||
for (const url of candidates) {
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: { Authorization: authHeader },
|
||||
redirect: 'follow',
|
||||
});
|
||||
if (!res.ok) continue;
|
||||
const session = (await res.json()) as JmapSession;
|
||||
if (session && typeof session === 'object' && session.primaryAccounts) {
|
||||
return session;
|
||||
}
|
||||
} catch {
|
||||
// Try the next candidate (e.g. canonical path 404s on a non-Stalwart server).
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function jmapPost(
|
||||
apiUrl: string,
|
||||
authHeader: string,
|
||||
payload: unknown,
|
||||
): Promise<unknown> {
|
||||
const res = await fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`JMAP request failed (${res.status})`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function findResponse(
|
||||
res: unknown,
|
||||
name: string,
|
||||
callId: string,
|
||||
): Record<string, unknown> | null {
|
||||
const responses = (res as { methodResponses?: unknown[] })?.methodResponses;
|
||||
if (!Array.isArray(responses)) return null;
|
||||
for (const entry of responses) {
|
||||
if (Array.isArray(entry) && entry[0] === name && entry[2] === callId) {
|
||||
return entry[1] as Record<string, unknown>;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -121,9 +121,9 @@ const emails: MockEmail[] = [
|
||||
},
|
||||
{
|
||||
id: 'email-002', threadId: 'thread-002', mailboxIds: { 'mb-inbox': true }, keywords: { $seen: true, $flagged: true, '$label:blue': true }, size: 5100, receivedAt: daysAgo(1),
|
||||
from: [{ name: 'Pierre Dubois', email: 'pierre@dubois.example' }],
|
||||
from: [{ name: 'Dubois, Pierre', email: 'pierre@dubois.example' }],
|
||||
to: [{ name: 'Dev User', email: 'dev@localhost' }],
|
||||
cc: [{ name: 'Karel de Vries', email: 'karel@devries.example' }],
|
||||
cc: [{ name: 'de Vries, Karel', email: 'karel@devries.example' }],
|
||||
subject: 'Project Update - Q1 Review',
|
||||
preview: 'Salut team, I wanted to share the latest project numbers. We are on track to meet our targets for Q1.',
|
||||
hasAttachment: true,
|
||||
|
||||
@@ -37,6 +37,9 @@ export async function GET() {
|
||||
author: p.author,
|
||||
description: p.description,
|
||||
type: p.type,
|
||||
// Requested execution tier; clients gate the same-origin privileged
|
||||
// sandbox on this (plus signature + approval + consent).
|
||||
tier: p.tier,
|
||||
permissions: p.permissions,
|
||||
entrypoint: p.entrypoint,
|
||||
// Policy is the canonical source for force-enable. The per-plugin field
|
||||
|
||||
@@ -4,6 +4,7 @@ import { authenticateWizardRequest } from '@/lib/setup/session';
|
||||
import { configManager } from '@/lib/admin/config-manager';
|
||||
import { CONFIG_ENV_MAP } from '@/lib/admin/types';
|
||||
import { parseJmapServers } from '@/lib/admin/jmap-servers';
|
||||
import { effectiveConsent, loadState, saveState, reschedule } from '@/lib/telemetry';
|
||||
import { logger } from '@/lib/logger';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
@@ -76,8 +77,32 @@ export async function POST(request: NextRequest) {
|
||||
return NextResponse.json({ error: 'values must be an object' }, { status: 400 });
|
||||
}
|
||||
|
||||
const valuesObj = { ...(values as Record<string, unknown>) };
|
||||
|
||||
// Telemetry consent lives in the telemetry state file, not admin config, so
|
||||
// it has no CONFIG_ENV_MAP entry. Pull it out of the security step and
|
||||
// persist it directly, mirroring POST /api/admin/telemetry (set-consent).
|
||||
if (step === 'security' && 'telemetryConsent' in valuesObj) {
|
||||
const consent = valuesObj.telemetryConsent;
|
||||
delete valuesObj.telemetryConsent;
|
||||
if (consent !== 'on' && consent !== 'off') {
|
||||
return NextResponse.json({ error: 'telemetryConsent must be "on" or "off"' }, { status: 400 });
|
||||
}
|
||||
// A BULWARK_TELEMETRY env var hard-locks the choice; don't fight it.
|
||||
const { source } = await effectiveConsent();
|
||||
if (source !== 'env') {
|
||||
const tstate = await loadState();
|
||||
tstate.consent = consent;
|
||||
if (consent === 'on' && !tstate.consentedAt) {
|
||||
tstate.consentedAt = new Date().toISOString();
|
||||
}
|
||||
await saveState(tstate);
|
||||
await reschedule();
|
||||
}
|
||||
}
|
||||
|
||||
const updates: Record<string, unknown> = {};
|
||||
for (const [key, value] of Object.entries(values as Record<string, unknown>)) {
|
||||
for (const [key, value] of Object.entries(valuesObj)) {
|
||||
if (!allowedKeys.includes(key)) {
|
||||
return NextResponse.json({ error: `Key not allowed in step ${step}: ${key}` }, { status: 400 });
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { useTranslations, useFormatter } from "next-intl";
|
||||
import { format, isToday, isTomorrow, startOfDay } from "date-fns";
|
||||
import { MapPin, Users } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { parseDuration, getEventColor } from "./event-card";
|
||||
import { getEventColor } from "./event-card";
|
||||
import { getEventDayBounds, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
|
||||
import { getParticipantCount } from "@/lib/calendar-participants";
|
||||
import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
|
||||
@@ -147,7 +147,6 @@ export function CalendarAgendaView({
|
||||
const calendar = calId ? calendarMap.get(calId) : undefined;
|
||||
const color = getEventColor(ev, calendar);
|
||||
const start = getEventStartDate(ev);
|
||||
const durMin = parseDuration(ev.duration);
|
||||
const end = getEventEndDate(ev);
|
||||
const locationName = ev.locations
|
||||
? Object.values(ev.locations)[0]?.name
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Trash2, Cake, User, Users, Plus, Eraser, Palette, Shuffle } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight, Globe, ListTodo, Pencil, RefreshCw, Share2, Star, Trash2, Cake, User, Users, Plus, Eraser, Palette, Shuffle } from "lucide-react";
|
||||
import { cn, formatDateTime } from "@/lib/utils";
|
||||
import type { Calendar } from "@/lib/jmap/types";
|
||||
import { CalendarColorPicker } from "@/components/settings/calendar-management-settings";
|
||||
@@ -96,6 +96,7 @@ export function CalendarSidebarPanel({
|
||||
);
|
||||
const refreshICalSubscription = useCalendarStore((s) => s.refreshICalSubscription);
|
||||
const removeICalSubscription = useCalendarStore((s) => s.removeICalSubscription);
|
||||
const setDefaultCalendar = useCalendarStore((s) => s.setDefaultCalendar);
|
||||
const timeFormat = useSettingsStore((s) => s.timeFormat);
|
||||
const sharedCalendarColors = useSettingsStore((s) => s.sharedCalendarColors);
|
||||
const enableCalendarTasks = useSettingsStore((s) => s.enableCalendarTasks);
|
||||
@@ -219,6 +220,16 @@ export function CalendarSidebarPanel({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSetDefault = async (calendarId: string) => {
|
||||
if (!client) return;
|
||||
try {
|
||||
await setDefaultCalendar(client, calendarId);
|
||||
toast.success(tMgmt('default_updated'));
|
||||
} catch {
|
||||
toast.error(tMgmt('error_default'));
|
||||
}
|
||||
};
|
||||
|
||||
if (calendars.length === 0 && !onSubscribe) return null;
|
||||
|
||||
const renderCalendarItem = (cal: Calendar) => {
|
||||
@@ -306,12 +317,13 @@ export function CalendarSidebarPanel({
|
||||
const isBirthday = cal.id === BIRTHDAY_CALENDAR_ID;
|
||||
const canCreate = onCreateEvent && !isBirthday && cal.myRights?.mayWriteOwn !== false;
|
||||
const canShare = onShareCalendar && cal.myRights?.mayShare && !cal.isShared;
|
||||
const canSetDefault = !!client && !isBirthday && !cal.isShared && !cal.isDefault;
|
||||
const canChangeColor = !!onColorChange;
|
||||
const hasColorOverride = !!cal.isShared && !!sharedCalendarColors[sharedCalendarColorKey(cal)];
|
||||
const canResetColor = !!onResetColor && hasColorOverride;
|
||||
const canClear = onClearCalendar && !isBirthday && cal.myRights?.mayDelete !== false;
|
||||
const canDelete = onDeleteCalendar && !isBirthday && !cal.isDefault && !cal.isShared;
|
||||
const showSeparator = (canCreate || canShare || canChangeColor || canResetColor) && (canClear || canDelete);
|
||||
const showSeparator = (canCreate || canShare || canSetDefault || canChangeColor || canResetColor) && (canClear || canDelete);
|
||||
const color = cal.color || "#3b82f6";
|
||||
|
||||
return (
|
||||
@@ -330,6 +342,13 @@ export function CalendarSidebarPanel({
|
||||
onClick={() => { closeContextMenu(); onShareCalendar(cal); }}
|
||||
/>
|
||||
)}
|
||||
{canSetDefault && (
|
||||
<ContextMenuItem
|
||||
icon={Star}
|
||||
label={tMgmt('set_default')}
|
||||
onClick={() => { closeContextMenu(); handleSetDefault(cal.id); }}
|
||||
/>
|
||||
)}
|
||||
{canChangeColor && (
|
||||
<ContextMenuSubMenu icon={Palette} label={tMgmt('change_color')}>
|
||||
<div className="px-2 py-1.5 w-[200px]">
|
||||
|
||||
@@ -71,7 +71,7 @@ function createEventDragPreview(title: string, timeRange: string, color: string)
|
||||
return el;
|
||||
}
|
||||
|
||||
export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, onContextMenu, isSelected, draggable: isDraggable, continuesBefore = false, continuesAfter = false, className, style }: EventCardProps) {
|
||||
export function EventCard({ event, calendar, variant, onClick, onMouseEnter, onMouseLeave, onContextMenu, isSelected, draggable: isDraggable, continuesAfter = false, className, style }: EventCardProps) {
|
||||
const t = useTranslations("calendar");
|
||||
const [isBeingDragged, setIsBeingDragged] = useState(false);
|
||||
const color = getEventColor(event, calendar);
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useTranslations, useLocale } from "next-intl";
|
||||
import { createPortal } from "react-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
X, Clock, MapPin, Video, Users, Repeat, Bell, AlignLeft,
|
||||
Pencil, Trash2, Copy, Send, Check,
|
||||
} from "lucide-react";
|
||||
import { format, isSameDay, parseISO } from "date-fns";
|
||||
import { format, isSameDay } from "date-fns";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CalendarEvent, Calendar, CalendarParticipant } from "@/lib/jmap/types";
|
||||
import { parseDuration, getEventColor } from "./event-card";
|
||||
import { getEventDisplayEndDate, getEventEndDate, getEventStartDate } from "@/lib/calendar-utils";
|
||||
import { buildRecurrenceSummary } from "./recurrence-editor";
|
||||
import {
|
||||
isOrganizer,
|
||||
getUserParticipantId,
|
||||
@@ -101,16 +102,9 @@ function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslation
|
||||
return null;
|
||||
}
|
||||
|
||||
function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
|
||||
function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>, locale: string): string | null {
|
||||
if (!event.recurrenceRules?.length) return null;
|
||||
const freq = event.recurrenceRules[0].frequency;
|
||||
const labels: Record<string, string> = {
|
||||
daily: t("recurrence.daily"),
|
||||
weekly: t("recurrence.weekly"),
|
||||
monthly: t("recurrence.monthly"),
|
||||
yearly: t("recurrence.yearly"),
|
||||
};
|
||||
return labels[freq] || null;
|
||||
return buildRecurrenceSummary(event.recurrenceRules[0], t, locale);
|
||||
}
|
||||
|
||||
export function EventDetailPopover({
|
||||
@@ -130,6 +124,7 @@ export function EventDetailPopover({
|
||||
isMobile,
|
||||
}: EventDetailPopoverProps) {
|
||||
const t = useTranslations("calendar");
|
||||
const locale = useLocale();
|
||||
const popoverRef = useRef<HTMLDivElement>(null);
|
||||
const noteInputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
|
||||
@@ -158,7 +153,7 @@ export function EventDetailPopover({
|
||||
}, [event.virtualLocations]);
|
||||
|
||||
const participants = useMemo(() => getParticipantList(event), [event]);
|
||||
const recurrenceLabel = useMemo(() => getRecurrenceLabel(event, t), [event, t]);
|
||||
const recurrenceLabel = useMemo(() => getRecurrenceLabel(event, t, locale), [event, t, locale]);
|
||||
const alertLabel = useMemo(() => getAlertLabel(event, t), [event, t]);
|
||||
|
||||
const userIsOrganizer = useMemo(() => {
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useTranslations, useLocale } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { X, Trash2, Check, Users, CalendarDays, Copy, Pencil, Clock, MapPin, Video, Repeat, Bell, AlignLeft, Plus } from "lucide-react";
|
||||
import { format, parseISO, addHours, addDays, isSameDay } from "date-fns";
|
||||
import type { CalendarEvent, Calendar, CalendarParticipant, CalendarEventAlert } from "@/lib/jmap/types";
|
||||
import type { CalendarEvent, Calendar, CalendarParticipant, CalendarEventAlert, CalendarRecurrenceRule } from "@/lib/jmap/types";
|
||||
import { RecurrenceEditor, buildRecurrenceSummary, isSimpleRecurrenceRule } from "./recurrence-editor";
|
||||
import { parseDuration, getEventColor } from "./event-card";
|
||||
import { buildAllDayDuration, getEventDisplayEndDate, getEventEndDate, getEventStartDate, getPrimaryCalendarId } from "@/lib/calendar-utils";
|
||||
import { ParticipantInput, type ParticipantInputHandle } from "./participant-input";
|
||||
@@ -75,7 +76,7 @@ function buildDuration(startDate: Date, endDate: Date): string {
|
||||
return dur;
|
||||
}
|
||||
|
||||
type RecurrenceOption = "none" | "daily" | "weekly" | "monthly" | "yearly";
|
||||
type RecurrenceOption = "none" | "daily" | "weekly" | "monthly" | "yearly" | "custom";
|
||||
|
||||
type AlertUnit = "at_time" | "minutes" | "hours" | "days" | "weeks";
|
||||
|
||||
@@ -157,16 +158,9 @@ function getAlertLabel(event: CalendarEvent, t: ReturnType<typeof useTranslation
|
||||
return labels.join(", ");
|
||||
}
|
||||
|
||||
function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>): string | null {
|
||||
function getRecurrenceLabel(event: CalendarEvent, t: ReturnType<typeof useTranslations>, locale: string): string | null {
|
||||
if (!event.recurrenceRules?.length) return null;
|
||||
const freq = event.recurrenceRules[0].frequency;
|
||||
const labels: Record<string, string> = {
|
||||
daily: t("recurrence.daily"),
|
||||
weekly: t("recurrence.weekly"),
|
||||
monthly: t("recurrence.monthly"),
|
||||
yearly: t("recurrence.yearly"),
|
||||
};
|
||||
return labels[freq] || null;
|
||||
return buildRecurrenceSummary(event.recurrenceRules[0], t, locale);
|
||||
}
|
||||
|
||||
export function EventModal({
|
||||
@@ -186,6 +180,7 @@ export function EventModal({
|
||||
isMobile = false,
|
||||
}: EventModalProps) {
|
||||
const t = useTranslations("calendar");
|
||||
const locale = useLocale();
|
||||
const timeFormat = useSettingsStore((s) => s.timeFormat);
|
||||
const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
|
||||
const isEdit = !!event;
|
||||
@@ -270,8 +265,35 @@ export function EventModal({
|
||||
});
|
||||
const [recurrence, setRecurrence] = useState<RecurrenceOption>(() => {
|
||||
if (!event?.recurrenceRules?.length) return "none";
|
||||
return event.recurrenceRules[0].frequency as RecurrenceOption;
|
||||
const rule = event.recurrenceRules[0];
|
||||
return isSimpleRecurrenceRule(rule) ? (rule.frequency as RecurrenceOption) : "custom";
|
||||
});
|
||||
const [customRule, setCustomRule] = useState<CalendarRecurrenceRule | null>(() => {
|
||||
if (!event?.recurrenceRules?.length) return null;
|
||||
const rule = event.recurrenceRules[0];
|
||||
return isSimpleRecurrenceRule(rule) ? null : rule;
|
||||
});
|
||||
const [showRecurrenceEditor, setShowRecurrenceEditor] = useState(false);
|
||||
// Dropdown value to restore when the custom editor is cancelled without a saved rule.
|
||||
const recurrenceBeforeCustomRef = useRef<RecurrenceOption>("none");
|
||||
|
||||
const handleRecurrenceEditorSave = useCallback((rule: CalendarRecurrenceRule) => {
|
||||
setCustomRule(rule);
|
||||
setRecurrence("custom");
|
||||
setShowRecurrenceEditor(false);
|
||||
}, []);
|
||||
|
||||
const handleRecurrenceEditorCancel = useCallback(() => {
|
||||
setShowRecurrenceEditor(false);
|
||||
if (!customRule) {
|
||||
setRecurrence(recurrenceBeforeCustomRef.current);
|
||||
}
|
||||
}, [customRule]);
|
||||
|
||||
const customRuleSummary = useMemo(
|
||||
() => (customRule ? buildRecurrenceSummary(customRule, t, locale) : null),
|
||||
[customRule, t, locale]
|
||||
);
|
||||
const preservedAlertsRef = useRef<Record<string, CalendarEventAlert>>({});
|
||||
const [alertRows, setAlertRows] = useState<AlertRow[]>(() => {
|
||||
if (!event?.alerts) return [];
|
||||
@@ -444,7 +466,9 @@ export function EventModal({
|
||||
data.virtualLocations = null;
|
||||
}
|
||||
|
||||
if (recurrence !== "none") {
|
||||
if (recurrence === "custom" && customRule) {
|
||||
data.recurrenceRules = [customRule];
|
||||
} else if (recurrence !== "none" && recurrence !== "custom") {
|
||||
data.recurrenceRules = [{
|
||||
"@type": "RecurrenceRule",
|
||||
frequency: recurrence,
|
||||
@@ -499,9 +523,14 @@ export function EventModal({
|
||||
effectiveAttendees
|
||||
) as Record<string, CalendarParticipant>;
|
||||
data.replyTo = { imip: `mailto:${organizerEmail}` };
|
||||
// Stalwart (calcard) derives the iCalendar ORGANIZER property solely from
|
||||
// organizerCalendarAddress; without it no ORGANIZER is emitted and iTIP
|
||||
// scheduling is silently skipped (NoSchedulingInfo), so no invites are sent.
|
||||
data.organizerCalendarAddress = `mailto:${organizerEmail}`;
|
||||
} else if (effectiveAttendees.length === 0 && event?.participants) {
|
||||
data.participants = null;
|
||||
data.replyTo = null;
|
||||
data.organizerCalendarAddress = null;
|
||||
}
|
||||
|
||||
const shouldSendScheduling = effectiveAttendees.length > 0 && sendInvitations;
|
||||
@@ -511,7 +540,7 @@ export function EventModal({
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [title, description, location, virtualLocation, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, alertRows, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
|
||||
}, [title, description, location, virtualLocation, startDate, startTime, endDate, endTime, allDay, calendarId, recurrence, customRule, alertRows, attendees, sendInvitations, currentUserEmails, existingParticipants, event, onSave, isSaving]);
|
||||
|
||||
const handleRsvp = useCallback((status: CalendarParticipant['participationStatus']) => {
|
||||
if (!event || !userParticipantId || !onRsvp) return;
|
||||
@@ -593,7 +622,6 @@ export function EventModal({
|
||||
|
||||
if (isAttendeeMode && event) {
|
||||
const startD = getEventStartDate(event);
|
||||
const durMin = parseDuration(event.duration);
|
||||
const endD = getEventEndDate(event);
|
||||
const locationName = event.locations ? Object.values(event.locations)[0]?.name : null;
|
||||
const participants = getParticipantList(event);
|
||||
@@ -737,7 +765,7 @@ export function EventModal({
|
||||
const locationName = event.locations ? Object.values(event.locations)[0]?.name || null : null;
|
||||
const virtualLoc = event.virtualLocations ? Object.values(event.virtualLocations)[0]?.uri || null : null;
|
||||
const viewParticipants = getParticipantList(event);
|
||||
const recurrenceLabel = getRecurrenceLabel(event, t);
|
||||
const recurrenceLabel = getRecurrenceLabel(event, t, locale);
|
||||
const alertLabel = getAlertLabel(event, t);
|
||||
const eventCalendar = calendars.find(c => event.calendarIds[c.id]);
|
||||
const color = getEventColor(event, eventCalendar);
|
||||
@@ -1131,17 +1159,51 @@ export function EventModal({
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium mb-1 block">{t("recurrence.title")}</label>
|
||||
<select
|
||||
value={recurrence}
|
||||
onChange={(e) => setRecurrence(e.target.value as RecurrenceOption)}
|
||||
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="none">{t("recurrence.none")}</option>
|
||||
<option value="daily">{t("recurrence.daily")}</option>
|
||||
<option value="weekly">{t("recurrence.weekly")}</option>
|
||||
<option value="monthly">{t("recurrence.monthly")}</option>
|
||||
<option value="yearly">{t("recurrence.yearly")}</option>
|
||||
</select>
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={recurrence}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value as RecurrenceOption;
|
||||
if (value === "custom") {
|
||||
recurrenceBeforeCustomRef.current = recurrence;
|
||||
setRecurrence("custom");
|
||||
setShowRecurrenceEditor(true);
|
||||
} else {
|
||||
setRecurrence(value);
|
||||
setShowRecurrenceEditor(false);
|
||||
}
|
||||
}}
|
||||
className="flex-1 min-w-0 rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<option value="none">{t("recurrence.none")}</option>
|
||||
<option value="daily">{t("recurrence.daily")}</option>
|
||||
<option value="weekly">{t("recurrence.weekly")}</option>
|
||||
<option value="monthly">{t("recurrence.monthly")}</option>
|
||||
<option value="yearly">{t("recurrence.yearly")}</option>
|
||||
<option value="custom">{customRuleSummary || t("recurrence.custom")}</option>
|
||||
</select>
|
||||
{recurrence === "custom" && !showRecurrenceEditor && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRecurrenceEditor(true)}
|
||||
className="p-2 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
aria-label={t("recurrence.edit_custom")}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{showRecurrenceEditor && (
|
||||
<RecurrenceEditor
|
||||
rule={customRule}
|
||||
eventStart={(() => {
|
||||
const d = new Date(`${startDate}T${allDay ? "00:00" : (startTime || "00:00")}:00`);
|
||||
return isNaN(d.getTime()) ? new Date() : d;
|
||||
})()}
|
||||
onSave={handleRecurrenceEditorSave}
|
||||
onCancel={handleRecurrenceEditorCancel}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { X, Upload, Check, Loader2, RefreshCw, Globe } from "lucide-react";
|
||||
import { format, parseISO } from "date-fns";
|
||||
import { format } from "date-fns";
|
||||
import type { CalendarEvent, Calendar } from "@/lib/jmap/types";
|
||||
import type { IJMAPClient } from '@/lib/jmap/client-interface';
|
||||
import { getEventStartDate } from "@/lib/calendar-utils";
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHand
|
||||
import { useTranslations } from "next-intl";
|
||||
import { X } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { useContactStore } from "@/stores/contact-store";
|
||||
|
||||
interface Participant {
|
||||
@@ -144,14 +145,17 @@ export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantIn
|
||||
role="option"
|
||||
aria-selected={i === activeIndex}
|
||||
onMouseDown={(e) => { e.preventDefault(); addParticipant(s); }}
|
||||
className={`px-3 py-2 text-sm cursor-pointer transition-colors ${
|
||||
className={`px-3 py-2 text-sm cursor-pointer transition-colors flex items-center gap-2 ${
|
||||
i === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-muted"
|
||||
}`}
|
||||
>
|
||||
<div className="font-medium truncate">{s.name || s.email}</div>
|
||||
{s.name && (
|
||||
<div className="text-xs text-muted-foreground truncate">{s.email}</div>
|
||||
)}
|
||||
<Avatar name={s.name} email={s.email} size="sm" className="shrink-0 w-7 h-7 text-[10px]" />
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{s.name || s.email}</div>
|
||||
{s.name && (
|
||||
<div className="text-xs text-muted-foreground truncate">{s.email}</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,427 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { addYears, format } from "date-fns";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { CalendarRecurrenceRule } from "@/lib/jmap/types";
|
||||
|
||||
type EditorFrequency = "daily" | "weekly" | "monthly" | "yearly";
|
||||
type MonthlyMode = "day" | "nth";
|
||||
type EndsMode = "never" | "on" | "after";
|
||||
|
||||
const EDITOR_FREQUENCIES: EditorFrequency[] = ["daily", "weekly", "monthly", "yearly"];
|
||||
|
||||
// 2024-01-01 is a Monday - used to render localized weekday names via Intl.
|
||||
const WEEKDAYS: string[] = ["mo", "tu", "we", "th", "fr", "sa", "su"];
|
||||
const DAY_TO_REF_DATE: Record<string, number> = { mo: 1, tu: 2, we: 3, th: 4, fr: 5, sa: 6, su: 7 };
|
||||
const INDEX_TO_DAY = ["su", "mo", "tu", "we", "th", "fr", "sa"];
|
||||
|
||||
const UNIT_LABEL_KEYS: Record<EditorFrequency, string> = {
|
||||
daily: "recurrence.editor_unit_days",
|
||||
weekly: "recurrence.editor_unit_weeks",
|
||||
monthly: "recurrence.editor_unit_months",
|
||||
yearly: "recurrence.editor_unit_years",
|
||||
};
|
||||
|
||||
type CalendarT = ReturnType<typeof useTranslations>;
|
||||
|
||||
function weekdayName(day: string, locale: string, style: "long" | "short" = "long"): string {
|
||||
const ref = new Date(2024, 0, DAY_TO_REF_DATE[day] ?? 1);
|
||||
return new Intl.DateTimeFormat(locale, { weekday: style }).format(ref);
|
||||
}
|
||||
|
||||
function monthName(month: number, locale: string): string {
|
||||
return new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2024, month - 1, 1));
|
||||
}
|
||||
|
||||
function nthLabel(nth: number, t: CalendarT): string {
|
||||
if (nth === -1) return t("recurrence.nth_last");
|
||||
if (nth >= 1 && nth <= 4) return t(`recurrence.nth_${nth}`);
|
||||
return String(nth);
|
||||
}
|
||||
|
||||
function capitalize(s: string): string {
|
||||
return s.charAt(0).toUpperCase() + s.slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract an "nth weekday" pattern from a rule, accepting both the
|
||||
* byDay+nthOfPeriod encoding and the byDay+bySetPosition encoding.
|
||||
*/
|
||||
function getNthDay(rule: CalendarRecurrenceRule): { day: string; nth: number } | null {
|
||||
if (rule.byDay?.length === 1) {
|
||||
const nd = rule.byDay[0];
|
||||
if (nd.nthOfPeriod) return { day: nd.day, nth: nd.nthOfPeriod };
|
||||
if (rule.bySetPosition?.length === 1) return { day: nd.day, nth: rule.bySetPosition[0] };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* True when the rule is exactly what the plain Daily/Weekly/Monthly/Yearly
|
||||
* dropdown presets produce, i.e. it needs no custom editor to represent.
|
||||
*/
|
||||
export function isSimpleRecurrenceRule(rule: CalendarRecurrenceRule): boolean {
|
||||
return (
|
||||
(EDITOR_FREQUENCIES as string[]).includes(rule.frequency) &&
|
||||
(!rule.interval || rule.interval === 1) &&
|
||||
!rule.byDay?.length &&
|
||||
!rule.byMonthDay?.length &&
|
||||
!rule.byMonth?.length &&
|
||||
!rule.byYearDay?.length &&
|
||||
!rule.byWeekNo?.length &&
|
||||
!rule.bySetPosition?.length &&
|
||||
!rule.count &&
|
||||
!rule.until
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Human-readable summary of a recurrence rule, e.g.
|
||||
* "Every 2 months on the third Thursday · 12 occurrences".
|
||||
* Returns null for frequencies the UI cannot describe (hourly etc.).
|
||||
*/
|
||||
export function buildRecurrenceSummary(
|
||||
rule: CalendarRecurrenceRule,
|
||||
t: CalendarT,
|
||||
locale: string,
|
||||
): string | null {
|
||||
const interval = rule.interval || 1;
|
||||
let base: string;
|
||||
switch (rule.frequency) {
|
||||
case "daily":
|
||||
base = interval > 1 ? t("recurrence.every_n_days", { count: interval }) : t("recurrence.daily");
|
||||
break;
|
||||
case "weekly":
|
||||
base = interval > 1 ? t("recurrence.every_n_weeks", { count: interval }) : t("recurrence.weekly");
|
||||
break;
|
||||
case "monthly":
|
||||
base = interval > 1 ? t("recurrence.every_n_months", { count: interval }) : t("recurrence.monthly");
|
||||
break;
|
||||
case "yearly":
|
||||
base = interval > 1 ? t("recurrence.every_n_years", { count: interval }) : t("recurrence.yearly");
|
||||
break;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
||||
const parts = [base];
|
||||
|
||||
if (rule.frequency === "weekly" && rule.byDay?.length) {
|
||||
const days = rule.byDay
|
||||
.filter((d) => WEEKDAYS.includes(d.day))
|
||||
.sort((a, b) => WEEKDAYS.indexOf(a.day) - WEEKDAYS.indexOf(b.day))
|
||||
.map((d) => weekdayName(d.day, locale, "short"))
|
||||
.join(", ");
|
||||
if (days) parts.push(t("recurrence.on_days", { days }));
|
||||
}
|
||||
|
||||
if (rule.frequency === "monthly" || rule.frequency === "yearly") {
|
||||
if (rule.frequency === "yearly" && rule.byMonth?.length) {
|
||||
const m = parseInt(rule.byMonth[0], 10);
|
||||
if (m >= 1 && m <= 12) parts.push(t("recurrence.in_month", { month: monthName(m, locale) }));
|
||||
}
|
||||
const nthDay = getNthDay(rule);
|
||||
if (nthDay) {
|
||||
parts.push(t("recurrence.on_the_nth", {
|
||||
nth: nthLabel(nthDay.nth, t),
|
||||
day: weekdayName(nthDay.day, locale),
|
||||
}));
|
||||
} else if (rule.byMonthDay?.length) {
|
||||
parts.push(t("recurrence.on_day_n", { day: rule.byMonthDay[0] }));
|
||||
}
|
||||
}
|
||||
|
||||
let summary = parts.join(" ");
|
||||
if (rule.count) {
|
||||
summary += ` · ${t("recurrence.occurrences", { count: rule.count })}`;
|
||||
} else if (rule.until) {
|
||||
const d = new Date(rule.until);
|
||||
if (!isNaN(d.getTime())) {
|
||||
summary += ` · ${t("recurrence.until")} ${new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(d)}`;
|
||||
}
|
||||
}
|
||||
return summary;
|
||||
}
|
||||
|
||||
interface RecurrenceEditorProps {
|
||||
rule: CalendarRecurrenceRule | null;
|
||||
eventStart: Date;
|
||||
onSave: (rule: CalendarRecurrenceRule) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export function RecurrenceEditor({ rule, eventStart, onSave, onCancel }: RecurrenceEditorProps) {
|
||||
const t = useTranslations("calendar");
|
||||
const locale = useLocale();
|
||||
|
||||
const startDay = INDEX_TO_DAY[eventStart.getDay()];
|
||||
const initialNthDay = rule ? getNthDay(rule) : null;
|
||||
|
||||
const [frequency, setFrequency] = useState<EditorFrequency>(() =>
|
||||
rule && (EDITOR_FREQUENCIES as string[]).includes(rule.frequency)
|
||||
? (rule.frequency as EditorFrequency)
|
||||
: "weekly"
|
||||
);
|
||||
const [interval, setIntervalValue] = useState<number>(rule?.interval || 1);
|
||||
const [weekDays, setWeekDays] = useState<string[]>(() => {
|
||||
if (rule?.frequency === "weekly" && rule.byDay?.length) {
|
||||
const days = rule.byDay.map((d) => d.day).filter((d) => WEEKDAYS.includes(d));
|
||||
if (days.length) return days;
|
||||
}
|
||||
return [startDay];
|
||||
});
|
||||
const [monthlyMode, setMonthlyMode] = useState<MonthlyMode>(initialNthDay ? "nth" : "day");
|
||||
const [monthDay, setMonthDay] = useState<number>(() => {
|
||||
const md = rule?.byMonthDay?.[0];
|
||||
return md && md >= 1 && md <= 31 ? md : eventStart.getDate();
|
||||
});
|
||||
const [nth, setNth] = useState<number>(() => {
|
||||
if (initialNthDay && (initialNthDay.nth === -1 || (initialNthDay.nth >= 1 && initialNthDay.nth <= 4))) {
|
||||
return initialNthDay.nth;
|
||||
}
|
||||
return Math.min(4, Math.floor((eventStart.getDate() - 1) / 7) + 1);
|
||||
});
|
||||
const [nthDay, setNthDay] = useState<string>(() =>
|
||||
initialNthDay && WEEKDAYS.includes(initialNthDay.day) ? initialNthDay.day : startDay
|
||||
);
|
||||
const [month, setMonth] = useState<number>(() => {
|
||||
const m = rule?.byMonth?.length ? parseInt(rule.byMonth[0], 10) : NaN;
|
||||
return m >= 1 && m <= 12 ? m : eventStart.getMonth() + 1;
|
||||
});
|
||||
const [endsMode, setEndsMode] = useState<EndsMode>(rule?.count ? "after" : rule?.until ? "on" : "never");
|
||||
const [untilDate, setUntilDate] = useState<string>(() => {
|
||||
if (rule?.until) {
|
||||
const d = new Date(rule.until);
|
||||
if (!isNaN(d.getTime())) return format(d, "yyyy-MM-dd");
|
||||
}
|
||||
return format(addYears(eventStart, 1), "yyyy-MM-dd");
|
||||
});
|
||||
const [count, setCount] = useState<number>(rule?.count ?? 12);
|
||||
|
||||
const toggleWeekDay = (day: string) => {
|
||||
setWeekDays((prev) =>
|
||||
prev.includes(day)
|
||||
? prev.length > 1 ? prev.filter((d) => d !== day) : prev
|
||||
: [...prev, day]
|
||||
);
|
||||
};
|
||||
|
||||
const buildRule = (): CalendarRecurrenceRule => {
|
||||
const built: CalendarRecurrenceRule = {
|
||||
"@type": "RecurrenceRule",
|
||||
frequency,
|
||||
interval: Math.max(1, interval),
|
||||
rscale: "gregorian",
|
||||
skip: "omit",
|
||||
firstDayOfWeek: "mo",
|
||||
byDay: null,
|
||||
byMonthDay: null,
|
||||
byMonth: null,
|
||||
byYearDay: null,
|
||||
byWeekNo: null,
|
||||
byHour: null,
|
||||
byMinute: null,
|
||||
bySecond: null,
|
||||
bySetPosition: null,
|
||||
count: endsMode === "after" ? Math.max(1, count) : null,
|
||||
until: endsMode === "on" && untilDate ? `${untilDate}T23:59:59` : null,
|
||||
};
|
||||
|
||||
if (frequency === "weekly") {
|
||||
const days = weekDays.length ? weekDays : [startDay];
|
||||
built.byDay = WEEKDAYS.filter((d) => days.includes(d)).map((day) => ({ day }));
|
||||
} else if (frequency === "monthly" || frequency === "yearly") {
|
||||
if (monthlyMode === "nth") {
|
||||
built.byDay = [{ day: nthDay, nthOfPeriod: nth }];
|
||||
} else {
|
||||
built.byMonthDay = [Math.min(31, Math.max(1, monthDay))];
|
||||
}
|
||||
if (frequency === "yearly") {
|
||||
built.byMonth = [String(month)];
|
||||
}
|
||||
}
|
||||
|
||||
return built;
|
||||
};
|
||||
|
||||
const handleSave = () => onSave(buildRule());
|
||||
|
||||
const summary = buildRecurrenceSummary(buildRule(), t, locale);
|
||||
|
||||
const selectCls = "rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring";
|
||||
|
||||
return (
|
||||
<div className="mt-2 rounded-md border border-border bg-muted/20 p-3 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="shrink-0">{t("recurrence.editor_every")}</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={999}
|
||||
value={interval}
|
||||
onChange={(e) => {
|
||||
const n = parseInt(e.target.value, 10);
|
||||
setIntervalValue(Number.isFinite(n) ? Math.max(1, n) : 1);
|
||||
}}
|
||||
className="w-16 shrink-0"
|
||||
aria-label={t("recurrence.editor_every")}
|
||||
/>
|
||||
<select
|
||||
value={frequency}
|
||||
onChange={(e) => setFrequency(e.target.value as EditorFrequency)}
|
||||
className={`${selectCls} flex-1 min-w-0`}
|
||||
aria-label={t("recurrence.title")}
|
||||
>
|
||||
{EDITOR_FREQUENCIES.map((f) => (
|
||||
<option key={f} value={f}>{t(UNIT_LABEL_KEYS[f])}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{frequency === "weekly" && (
|
||||
<div className="flex gap-1">
|
||||
{WEEKDAYS.map((day) => (
|
||||
<button
|
||||
key={day}
|
||||
type="button"
|
||||
onClick={() => toggleWeekDay(day)}
|
||||
title={weekdayName(day, locale)}
|
||||
aria-pressed={weekDays.includes(day)}
|
||||
className={
|
||||
weekDays.includes(day)
|
||||
? "flex-1 min-w-0 px-1 py-1.5 text-xs font-medium rounded-md border border-primary text-primary bg-primary/10 transition-colors"
|
||||
: "flex-1 min-w-0 px-1 py-1.5 text-xs font-medium rounded-md border border-input text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
}
|
||||
>
|
||||
{weekdayName(day, locale, "short")}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{frequency === "yearly" && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="shrink-0">{capitalize(t("recurrence.editor_in"))}</span>
|
||||
<select
|
||||
value={month}
|
||||
onChange={(e) => setMonth(parseInt(e.target.value, 10))}
|
||||
className={`${selectCls} flex-1 min-w-0`}
|
||||
aria-label={t("recurrence.editor_in")}
|
||||
>
|
||||
{Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
|
||||
<option key={m} value={m}>{capitalize(monthName(m, locale))}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(frequency === "monthly" || frequency === "yearly") && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<select
|
||||
value={monthlyMode}
|
||||
onChange={(e) => setMonthlyMode(e.target.value as MonthlyMode)}
|
||||
className={`${selectCls} shrink-0`}
|
||||
aria-label={t("recurrence.editor_repeats_on")}
|
||||
>
|
||||
<option value="day">{capitalize(t("recurrence.editor_on_day"))}</option>
|
||||
<option value="nth">{capitalize(t("recurrence.editor_on_the"))}</option>
|
||||
</select>
|
||||
{monthlyMode === "day" ? (
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={31}
|
||||
value={monthDay}
|
||||
onChange={(e) => {
|
||||
const n = parseInt(e.target.value, 10);
|
||||
setMonthDay(Number.isFinite(n) ? Math.min(31, Math.max(1, n)) : 1);
|
||||
}}
|
||||
className="w-16 shrink-0"
|
||||
aria-label={t("recurrence.editor_on_day")}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<select
|
||||
value={nth}
|
||||
onChange={(e) => setNth(parseInt(e.target.value, 10))}
|
||||
className={`${selectCls} flex-1 min-w-0`}
|
||||
aria-label={t("recurrence.editor_on_the")}
|
||||
>
|
||||
{[1, 2, 3, 4, -1].map((n) => (
|
||||
<option key={n} value={n}>{capitalize(nthLabel(n, t))}</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={nthDay}
|
||||
onChange={(e) => setNthDay(e.target.value)}
|
||||
className={`${selectCls} flex-1 min-w-0`}
|
||||
aria-label={t("recurrence.editor_on_the")}
|
||||
>
|
||||
{WEEKDAYS.map((d) => (
|
||||
<option key={d} value={d}>{capitalize(weekdayName(d, locale))}</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="shrink-0">{t("recurrence.editor_ends")}</span>
|
||||
<select
|
||||
value={endsMode}
|
||||
onChange={(e) => setEndsMode(e.target.value as EndsMode)}
|
||||
className={`${selectCls} ${endsMode === "never" ? "flex-1" : "shrink-0"} min-w-0`}
|
||||
aria-label={t("recurrence.editor_ends")}
|
||||
>
|
||||
<option value="never">{t("recurrence.editor_never")}</option>
|
||||
<option value="on">{t("recurrence.until")}</option>
|
||||
<option value="after">{t("recurrence.editor_ends_after")}</option>
|
||||
</select>
|
||||
{endsMode === "on" && (
|
||||
<input
|
||||
type="date"
|
||||
value={untilDate}
|
||||
onChange={(e) => setUntilDate(e.target.value)}
|
||||
className={`${selectCls} flex-1 min-w-0`}
|
||||
aria-label={t("recurrence.editor_ends_on")}
|
||||
/>
|
||||
)}
|
||||
{endsMode === "after" && (
|
||||
<>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={999}
|
||||
value={count}
|
||||
onChange={(e) => {
|
||||
const n = parseInt(e.target.value, 10);
|
||||
setCount(Number.isFinite(n) ? Math.max(1, n) : 1);
|
||||
}}
|
||||
className="w-16 shrink-0"
|
||||
aria-label={t("recurrence.editor_ends_after")}
|
||||
/>
|
||||
<span className="text-muted-foreground truncate">{t("recurrence.editor_occurrences")}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 border-t border-border pt-3">
|
||||
<p className="text-xs text-muted-foreground truncate min-w-0" title={summary ?? undefined}>
|
||||
{summary}
|
||||
</p>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button variant="outline" size="sm" onClick={onCancel}>
|
||||
{t("form.cancel")}
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
{t("form.save")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { ContactsSidebar } from '../contacts-sidebar';
|
||||
import type { ContactCard } from '@/lib/jmap/types';
|
||||
|
||||
// next-intl + next/navigation are mocked globally in vitest.setup (t returns the key).
|
||||
vi.mock('@/stores/account-store', () => {
|
||||
const state = { accounts: [], activeAccountId: null };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
return { useAccountStore: hook };
|
||||
});
|
||||
|
||||
const group = {
|
||||
id: 'g1',
|
||||
kind: 'group',
|
||||
name: { full: 'Team' },
|
||||
members: { '1': true },
|
||||
} as unknown as ContactCard;
|
||||
|
||||
function renderSidebar(onComposeGroup = vi.fn()) {
|
||||
render(
|
||||
<ContactsSidebar
|
||||
groups={[group]}
|
||||
individuals={[]}
|
||||
addressBooks={[]}
|
||||
activeCategory="all"
|
||||
onSelectCategory={vi.fn()}
|
||||
onCreateGroup={vi.fn()}
|
||||
onCreateContact={vi.fn()}
|
||||
onEditGroup={vi.fn()}
|
||||
onDeleteGroup={vi.fn()}
|
||||
onComposeGroup={onComposeGroup}
|
||||
/>,
|
||||
);
|
||||
return onComposeGroup;
|
||||
}
|
||||
|
||||
describe('ContactsSidebar — compose to group', () => {
|
||||
beforeEach(() => vi.clearAllMocks());
|
||||
|
||||
it('shows a "Send email to group" submenu in the group context menu', () => {
|
||||
renderSidebar();
|
||||
fireEvent.contextMenu(screen.getByText('Team'));
|
||||
expect(screen.getByText('groups.send_email')).toBeInTheDocument();
|
||||
// and the existing Edit/Delete entries still render
|
||||
expect(screen.getByText('groups.edit')).toBeInTheDocument();
|
||||
expect(screen.getByText('form.delete')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onComposeGroup(groupId, field) when a To/Cc/Bcc item is clicked', () => {
|
||||
const onComposeGroup = renderSidebar();
|
||||
fireEvent.contextMenu(screen.getByText('Team'));
|
||||
|
||||
// Open the submenu (hover) then click "Cc".
|
||||
const trigger = screen.getByText('groups.send_email').closest('.relative')!;
|
||||
fireEvent.mouseOver(trigger);
|
||||
fireEvent.mouseEnter(trigger);
|
||||
|
||||
fireEvent.click(screen.getByText('groups.send_email_cc'));
|
||||
expect(onComposeGroup).toHaveBeenCalledWith('g1', 'cc');
|
||||
});
|
||||
});
|
||||
@@ -172,7 +172,7 @@ export function ContactActivity({ contact }: ContactActivityProps) {
|
||||
|
||||
const handleOpenEmail = (email: Email) => {
|
||||
selectEmail(email);
|
||||
router.push("/mail");
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
const handleOpenEvent = (event: CalendarEvent) => {
|
||||
|
||||
@@ -2,16 +2,13 @@
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, ShieldCheck, ShieldAlert, Download, MoreHorizontal, Printer } from "lucide-react";
|
||||
import { Mail, Phone, Building, MapPin, StickyNote, Pencil, Trash2, BookUser, Copy, Send, Globe, Cake, KeyRound, Users, Briefcase, Heart, Languages, Calendar, UserCircle, Download, MoreHorizontal, Printer } from "lucide-react";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ContactCard, AnniversaryDate, PartialDate } from "@/lib/jmap/types";
|
||||
import { getContactDisplayName, getContactPrimaryEmail, getContactPhotoUri } from "@/stores/contact-store";
|
||||
import { ContactActivity } from "./contact-activity";
|
||||
import { useSmimeStore } from "@/stores/smime-store";
|
||||
import { parseCertificatePemOrDer, extractCertificateInfo } from "@/lib/smime/certificate-utils";
|
||||
import type { CertificateInfo } from "@/lib/smime/types";
|
||||
import { toast } from "@/stores/toast-store";
|
||||
import { exportContact } from "./contact-export";
|
||||
import { printContact } from "./contact-print";
|
||||
@@ -32,6 +29,8 @@ interface ContactDetailProps {
|
||||
onDelete: () => void;
|
||||
onAddToGroup?: () => void;
|
||||
onDuplicate?: () => void;
|
||||
/** Compose an email to this contact in the app (no OS mailto handoff). */
|
||||
onCompose?: () => void;
|
||||
isMobile?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
@@ -115,51 +114,11 @@ function formatDate(dateInput: AnniversaryDate): string {
|
||||
return dateStr;
|
||||
}
|
||||
|
||||
export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, isMobile, className }: ContactDetailProps) {
|
||||
export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDuplicate, onCompose, isMobile, className }: ContactDetailProps) {
|
||||
const t = useTranslations("contacts");
|
||||
const smimeStore = useSmimeStore();
|
||||
const [parsedCerts, setParsedCerts] = useState<Map<number, CertificateInfo>>(new Map());
|
||||
|
||||
const cryptoKeys = contact?.cryptoKeys ? Object.values(contact.cryptoKeys) : [];
|
||||
|
||||
useEffect(() => {
|
||||
if (!contact) return;
|
||||
let cancelled = false;
|
||||
const parseCerts = async () => {
|
||||
const results = new Map<number, CertificateInfo>();
|
||||
for (let i = 0; i < cryptoKeys.length; i++) {
|
||||
const key = cryptoKeys[i];
|
||||
if (typeof key.uri !== 'string') continue;
|
||||
try {
|
||||
let derBytes: ArrayBuffer | string | null = null;
|
||||
if (key.uri.startsWith('data:')) {
|
||||
const commaIdx = key.uri.indexOf(',');
|
||||
if (commaIdx === -1) continue;
|
||||
const b64 = key.uri.substring(commaIdx + 1);
|
||||
const binary = atob(b64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
|
||||
derBytes = bytes.buffer;
|
||||
} else if (key.uri.startsWith('-----BEGIN')) {
|
||||
derBytes = key.uri;
|
||||
}
|
||||
if (!derBytes) continue;
|
||||
const cert = parseCertificatePemOrDer(derBytes);
|
||||
const der = typeof derBytes === 'string' ? cert.toSchema(true).toBER(false) : derBytes;
|
||||
const info = await extractCertificateInfo(cert, der);
|
||||
if (!cancelled) results.set(i, info);
|
||||
} catch { /* skip unparseable keys */ }
|
||||
}
|
||||
if (!cancelled) setParsedCerts(results);
|
||||
};
|
||||
if (cryptoKeys.length > 0) {
|
||||
parseCerts();
|
||||
} else {
|
||||
setParsedCerts(new Map());
|
||||
}
|
||||
return () => { cancelled = true; };
|
||||
}, [contact?.id]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
if (!contact) {
|
||||
return (
|
||||
<div className={cn("flex flex-col items-center justify-center h-full text-muted-foreground", className)}>
|
||||
@@ -201,35 +160,10 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
|
||||
const notes = contact.notes ? Object.values(contact.notes) : [];
|
||||
const titles = contact.titles ? Object.values(contact.titles) : [];
|
||||
const jobTitles = titles.filter(t => t.kind !== "role");
|
||||
const roles = titles.filter(t => t.kind === "role");
|
||||
const onlineServices = contact.onlineServices ? Object.values(contact.onlineServices) : [];
|
||||
const anniversaries = contact.anniversaries ? Object.values(contact.anniversaries) : [];
|
||||
const keywords = contact.keywords ? Object.keys(contact.keywords).filter(k => contact.keywords![k]) : [];
|
||||
|
||||
const handleImportContactCert = async (keyIndex: number) => {
|
||||
const key = cryptoKeys[keyIndex];
|
||||
if (!key?.uri || typeof key.uri !== 'string') return;
|
||||
try {
|
||||
let derBytes: ArrayBuffer | string;
|
||||
if (key.uri.startsWith('data:')) {
|
||||
const commaIdx = key.uri.indexOf(',');
|
||||
if (commaIdx === -1) return;
|
||||
const b64 = key.uri.substring(commaIdx + 1);
|
||||
const binary = atob(b64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let j = 0; j < binary.length; j++) bytes[j] = binary.charCodeAt(j);
|
||||
derBytes = bytes.buffer;
|
||||
} else if (key.uri.startsWith('-----BEGIN')) {
|
||||
derBytes = key.uri;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
await smimeStore.importPublicCert(derBytes, 'contact', contact.id);
|
||||
toast.success(t("detail.cert_imported"));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : t("detail.cert_import_failed"));
|
||||
}
|
||||
};
|
||||
const relatedTo = contact.relatedTo ? Object.entries(contact.relatedTo) : [];
|
||||
const preferredLanguages = contact.preferredLanguages ? Object.values(contact.preferredLanguages) : [];
|
||||
const personalInfo = contact.personalInfo ? Object.values(contact.personalInfo) : [];
|
||||
@@ -260,14 +194,16 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 flex-shrink-0 flex-wrap">
|
||||
{email && (
|
||||
<a
|
||||
href={`mailto:${email}`}
|
||||
className="inline-flex items-center justify-center rounded-md font-medium h-9 px-3 text-sm border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors touch-manipulation"
|
||||
{email && onCompose && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onCompose}
|
||||
className="touch-manipulation"
|
||||
>
|
||||
<Send className="w-4 h-4 mr-1" />
|
||||
{t("detail.compose_email")}
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
{phone && (
|
||||
<a
|
||||
@@ -490,59 +426,20 @@ export function ContactDetail({ contact, onEdit, onDelete, onAddToGroup, onDupli
|
||||
{cryptoKeys.length > 0 && (
|
||||
<Section title={t("detail.crypto_keys")}>
|
||||
<div className="space-y-3">
|
||||
{cryptoKeys.map((key, i) => {
|
||||
const certInfo = parsedCerts.get(i);
|
||||
const isExpired = certInfo ? new Date(certInfo.notAfter) < new Date() : false;
|
||||
const alreadyImported = certInfo?.emailAddresses?.[0]
|
||||
? !!smimeStore.getPublicCertForEmail(certInfo.emailAddresses[0])
|
||||
: false;
|
||||
|
||||
return (
|
||||
<div key={i} className="rounded-md border border-border/60 bg-muted/30 p-3 space-y-1">
|
||||
{certInfo ? (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
{isExpired ? (
|
||||
<ShieldAlert className="w-4 h-4 text-destructive flex-shrink-0" />
|
||||
) : (
|
||||
<ShieldCheck className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
)}
|
||||
<span className="text-sm font-medium truncate">{certInfo.subject}</span>
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground space-y-0.5 pl-6">
|
||||
<p>{t("detail.cert_issuer")}: {certInfo.issuer}</p>
|
||||
<p>
|
||||
{t("detail.cert_expires")}: {new Date(certInfo.notAfter).toLocaleDateString()}
|
||||
{isExpired && <span className="text-destructive ml-1">({t("detail.cert_expired")})</span>}
|
||||
</p>
|
||||
<p>{t("detail.cert_fingerprint")}: {certInfo.fingerprint.substring(0, 20)}...</p>
|
||||
{certInfo.algorithm && <p>{t("detail.cert_algorithm")}: {certInfo.algorithm}</p>}
|
||||
</div>
|
||||
{!alreadyImported && (
|
||||
<Button variant="ghost" size="sm" className="ml-4 mt-1" onClick={() => handleImportContactCert(i)}>
|
||||
<Download className="w-3 h-3 mr-1" />
|
||||
{t("detail.import_to_smime")}
|
||||
</Button>
|
||||
)}
|
||||
{alreadyImported && (
|
||||
<p className="text-xs text-green-600 pl-6 mt-1">{t("detail.cert_already_imported")}</p>
|
||||
)}
|
||||
</>
|
||||
{cryptoKeys.map((key, i) => (
|
||||
<div key={i} className="rounded-md border border-border/60 bg-muted/30 p-3 space-y-1">
|
||||
<div className="flex items-start gap-2 text-sm break-all">
|
||||
<KeyRound className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
|
||||
{typeof key.uri === 'string' && key.uri.startsWith("http") ? (
|
||||
<a href={key.uri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
|
||||
{key.uri}
|
||||
</a>
|
||||
) : (
|
||||
<div className="flex items-start gap-2 text-sm break-all">
|
||||
<KeyRound className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
|
||||
{typeof key.uri === 'string' && key.uri.startsWith("http") ? (
|
||||
<a href={key.uri} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
|
||||
{key.uri}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-muted-foreground">{typeof key.uri === 'string' ? `${key.uri.substring(0, 80)}${key.uri.length > 80 ? "…" : ""}` : String(key.uri ?? '')}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-muted-foreground">{typeof key.uri === 'string' ? `${key.uri.substring(0, 80)}${key.uri.length > 80 ? "…" : ""}` : String(key.uri ?? '')}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect, useRef } from "react";
|
||||
import { useState, useMemo, useCallback, useRef } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { X, Plus, ChevronDown, ChevronRight, User, Building, MapPin, Globe, Cake, Heart, Tag, StickyNote, Mail, Phone, Calendar, UserCircle, Book, Camera, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Users, Pencil, Trash2, UserMinus } from "lucide-react";
|
||||
import { Users, Pencil, Trash2, UserMinus, Mail } from "lucide-react";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -15,6 +15,8 @@ interface ContactGroupDetailProps {
|
||||
onDelete: () => void;
|
||||
onRemoveMember: (memberId: string) => void;
|
||||
onSelectMember: (id: string) => void;
|
||||
/** Compose an email to every member with the recipients placed in `field`. */
|
||||
onComposeGroup?: (field: "to" | "cc" | "bcc") => void;
|
||||
isMobile?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
@@ -26,11 +28,13 @@ export function ContactGroupDetail({
|
||||
onDelete,
|
||||
onRemoveMember,
|
||||
onSelectMember,
|
||||
onComposeGroup,
|
||||
isMobile,
|
||||
className,
|
||||
}: ContactGroupDetailProps) {
|
||||
const t = useTranslations("contacts");
|
||||
const groupName = getContactDisplayName(group);
|
||||
const hasEmailMembers = members.some((m) => getContactPrimaryEmail(m).trim());
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col h-full overflow-y-auto", className)}>
|
||||
@@ -62,6 +66,25 @@ export function ContactGroupDetail({
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{onComposeGroup && hasEmailMembers && (
|
||||
<div className="flex flex-wrap items-center gap-2 mt-4">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" aria-hidden />
|
||||
<span className="text-sm text-muted-foreground">{t("groups.send_email")}</span>
|
||||
<div className="inline-flex gap-1">
|
||||
{(["to", "cc", "bcc"] as const).map((field) => (
|
||||
<Button
|
||||
key={field}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onComposeGroup(field)}
|
||||
className="touch-manipulation"
|
||||
>
|
||||
{t(`groups.send_email_${field}`)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4">
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useMemo, useState, useCallback, useEffect, useRef, type DragEvent } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { BookUser, User, Users, Plus, Share2, Book, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2, Settings } from "lucide-react";
|
||||
import { BookUser, User, Users, Plus, Share2, Book, BookPlus, ChevronRight, ChevronDown, UserPlus, UsersRound, Upload, Tag, Pencil, Trash2, Settings, Mail } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
|
||||
import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuSubMenu } from "@/components/ui/context-menu";
|
||||
import { useContextMenu } from "@/hooks/use-context-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ContactCard, AddressBook } from "@/lib/jmap/types";
|
||||
@@ -22,9 +22,11 @@ interface ContactsSidebarProps {
|
||||
onSelectCategory: (category: ContactCategory) => void;
|
||||
onCreateGroup: () => void;
|
||||
onCreateContact: () => void;
|
||||
onCreateAddressBook?: () => void;
|
||||
onImport?: () => void;
|
||||
onEditGroup?: (groupId: string) => void;
|
||||
onDeleteGroup?: (groupId: string) => void;
|
||||
onComposeGroup?: (groupId: string, field: "to" | "cc" | "bcc") => void;
|
||||
onDropContacts?: (contactIds: string[], addressBook: AddressBook) => void;
|
||||
onDropContactsToCategory?: (contactIds: string[], keyword: string) => void;
|
||||
onRenameAddressBook?: (addressBook: AddressBook) => void;
|
||||
@@ -90,9 +92,11 @@ export function ContactsSidebar({
|
||||
onSelectCategory,
|
||||
onCreateGroup,
|
||||
onCreateContact,
|
||||
onCreateAddressBook,
|
||||
onImport,
|
||||
onEditGroup,
|
||||
onDeleteGroup,
|
||||
onComposeGroup,
|
||||
onDropContacts,
|
||||
onDropContactsToCategory,
|
||||
onRenameAddressBook,
|
||||
@@ -296,6 +300,15 @@ export function ContactsSidebar({
|
||||
<UsersRound className="w-4 h-4" />
|
||||
{t("groups.create")}
|
||||
</button>
|
||||
{onCreateAddressBook && (
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
|
||||
onClick={() => { setShowMenu(false); onCreateAddressBook(); }}
|
||||
>
|
||||
<BookPlus className="w-4 h-4" />
|
||||
{t("address_books.create")}
|
||||
</button>
|
||||
)}
|
||||
{onImport && (
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors text-left"
|
||||
@@ -684,6 +697,21 @@ export function ContactsSidebar({
|
||||
onEditGroup?.(groupContextMenu.data!.id);
|
||||
}}
|
||||
/>
|
||||
{onComposeGroup && (
|
||||
<ContextMenuSubMenu icon={Mail} label={t("groups.send_email")}>
|
||||
{(["to", "cc", "bcc"] as const).map((field) => (
|
||||
<ContextMenuItem
|
||||
key={field}
|
||||
label={t(`groups.send_email_${field}`)}
|
||||
onClick={() => {
|
||||
const groupId = groupContextMenu.data!.id;
|
||||
closeGroupContextMenu();
|
||||
onComposeGroup(groupId, field);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ContextMenuSubMenu>
|
||||
)}
|
||||
<ContextMenuSeparator />
|
||||
<ContextMenuItem
|
||||
icon={Trash2}
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { ContactSidebarPanel } from '../email-viewer';
|
||||
import type { ContactCard } from '@/lib/jmap/types';
|
||||
|
||||
const contact: ContactCard = {
|
||||
id: 'c1',
|
||||
addressBookIds: {},
|
||||
name: {
|
||||
components: [
|
||||
{ kind: 'given', value: 'Alice' },
|
||||
{ kind: 'surname', value: 'Smith' },
|
||||
],
|
||||
isOrdered: true,
|
||||
},
|
||||
emails: { e0: { address: 'alice@example.com' } },
|
||||
};
|
||||
|
||||
const unknownEmail = 'unknown@example.com';
|
||||
|
||||
describe('ContactSidebarPanel', () => {
|
||||
beforeEach(() => {
|
||||
Object.assign(navigator, {
|
||||
clipboard: { writeText: vi.fn().mockResolvedValue(undefined) },
|
||||
});
|
||||
});
|
||||
|
||||
it('shows Edit button when contact is known and onEditContact is provided', () => {
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email="alice@example.com"
|
||||
contact={contact}
|
||||
onClose={vi.fn()}
|
||||
onEditContact={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
// useTranslations mock returns the key, so we look for the common.edit key
|
||||
expect(screen.getByTitle('contact_sidebar.action_edit_title')).toBeInTheDocument();
|
||||
expect(screen.getByText('edit')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onEditContact when Edit button is clicked', () => {
|
||||
const onEditContact = vi.fn();
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email="alice@example.com"
|
||||
contact={contact}
|
||||
onClose={vi.fn()}
|
||||
onEditContact={onEditContact}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByTitle('contact_sidebar.action_edit_title'));
|
||||
expect(onEditContact).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('does not show Edit button when contact is null', () => {
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email={unknownEmail}
|
||||
contact={null}
|
||||
onClose={vi.fn()}
|
||||
onEditContact={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByTitle('contact_sidebar.action_edit_title')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show Edit button when onEditContact is not provided', () => {
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email="alice@example.com"
|
||||
contact={contact}
|
||||
onClose={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByTitle('contact_sidebar.action_edit_title')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows "not in contacts" message and Add button for unknown email', () => {
|
||||
const onAddToContacts = vi.fn();
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email={unknownEmail}
|
||||
contact={null}
|
||||
onClose={vi.fn()}
|
||||
onAddToContacts={onAddToContacts}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('contact_sidebar.not_in_contacts')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText('contact_sidebar.add_to_contacts'));
|
||||
expect(onAddToContacts).toHaveBeenCalledWith(unknownEmail, undefined);
|
||||
});
|
||||
|
||||
it('calls onClose when the close button is clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
render(
|
||||
<ContactSidebarPanel
|
||||
email="alice@example.com"
|
||||
contact={contact}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByLabelText('contact_sidebar.close'));
|
||||
expect(onClose).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
@@ -68,10 +68,12 @@ describe('EmailListItem tag badge', () => {
|
||||
expect(screen.getByText('Blue')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show badge when keyword id not in settings', () => {
|
||||
it('shows a gray fallback badge when keyword id is not in settings', () => {
|
||||
const email = makeEmail({ keywords: { $seen: true, '$label:unknown-tag': true } });
|
||||
render(<EmailListItem email={email} />);
|
||||
expect(screen.queryByText('unknown-tag')).not.toBeInTheDocument();
|
||||
// Unknown tags fall back to the raw id as label with a gray dot
|
||||
// (see email-list-item.tsx: keywordDefs fallback).
|
||||
expect(screen.getByText('unknown-tag')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows custom keyword label', () => {
|
||||
|
||||
@@ -0,0 +1,343 @@
|
||||
import { render, screen, act } from '@testing-library/react';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import React from 'react';
|
||||
import { EmailComposer } from '../email-composer';
|
||||
|
||||
// ─── Heavy component mocks ────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('@/components/email/rich-text-editor', () => ({
|
||||
RichTextEditor: ({ onChange }: { onChange?: (html: string) => void }) => (
|
||||
React.createElement('div', { 'data-testid': 'rich-text-editor', onClick: () => onChange?.('') })
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
|
||||
vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null }));
|
||||
vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null }));
|
||||
vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null }));
|
||||
vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null }));
|
||||
vi.mock('@/hooks/use-focus-trap', () => ({
|
||||
useFocusTrap: () => ({ ref: { current: null } }),
|
||||
}));
|
||||
vi.mock('@/hooks/use-pro-multi-account-identities', () => ({
|
||||
useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }),
|
||||
stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }),
|
||||
}));
|
||||
|
||||
// ─── Store mocks ──────────────────────────────────────────────────────────────
|
||||
// vi.mock factories are hoisted, so all values must be defined inline.
|
||||
|
||||
vi.mock('@/stores/auth-store', () => {
|
||||
const state = {
|
||||
client: null,
|
||||
identities: [],
|
||||
primaryIdentity: null,
|
||||
isAuthenticated: false,
|
||||
isDemoMode: false,
|
||||
activeAccountId: null,
|
||||
connectionLost: false,
|
||||
getClientForAccount: () => undefined,
|
||||
getAllConnectedClients: () => new Map(),
|
||||
syncIdentities: () => {},
|
||||
refreshIdentities: async () => {},
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useAuthStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/identity-store', () => {
|
||||
const state = { identities: [], defaultIdentityId: null };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useIdentityStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/account-store', () => {
|
||||
const state = { accounts: [], getAccountById: () => undefined };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useAccountStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/email-store', () => {
|
||||
const state = {
|
||||
draftSaveEnabled: false,
|
||||
sendRawEmail: async () => ({ sent: true }),
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useEmailStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/settings-store', () => {
|
||||
const state = {
|
||||
timeFormat: '24h',
|
||||
plainTextMode: false,
|
||||
subAddressDelimiter: '+',
|
||||
autoSelectReplyIdentity: true,
|
||||
attachmentReminderEnabled: false,
|
||||
attachmentReminderKeywords: [],
|
||||
sendDelaySeconds: 0,
|
||||
signaturePosition: 'above_quote',
|
||||
signatureSeparatorEnabled: false,
|
||||
requestReadReceiptDefault: false,
|
||||
addTrustedSender: () => {},
|
||||
trustedSendersAddressBook: null,
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useSettingsStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/contact-store', () => {
|
||||
const state = {
|
||||
contacts: [],
|
||||
getAutocomplete: async () => [],
|
||||
addToTrustedSendersBook: async () => {},
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useContactStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/template-store', () => {
|
||||
const state = { templates: [], addTemplate: async () => {} };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useTemplateStore: hook };
|
||||
});
|
||||
|
||||
// ─── Misc dependency mocks ────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('@/stores/toast-store', () => ({
|
||||
toast: { info: () => {}, error: () => {}, success: () => {} },
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/plugin-hooks', () => ({
|
||||
emailHooks: {
|
||||
onComposerOpen: { call: async () => [] },
|
||||
onRecipientChange: { call: async () => [] },
|
||||
getRecipientSuggestions: { call: async () => [] },
|
||||
onSend: { call: async () => [] },
|
||||
beforeSend: { call: async () => [] },
|
||||
},
|
||||
contactHooks: {
|
||||
search: { call: async () => [] },
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/email-sanitization', () => ({
|
||||
sanitizeSignatureHtml: (v: string) => v,
|
||||
sanitizeEmailHtml: (v: string) => v,
|
||||
parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
|
||||
vi.mock('@/lib/email-threading', () => ({
|
||||
computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
|
||||
}));
|
||||
vi.mock('@/lib/signature-utils', () => ({
|
||||
appendPlainTextSignature: (body: string) => body,
|
||||
getPlainTextSignature: () => '',
|
||||
}));
|
||||
vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' }));
|
||||
vi.mock('@/lib/debug', () => ({ debug: () => {} }));
|
||||
vi.mock('@/components/email/quoted-html', () => ({
|
||||
buildQuotedHtmlBlock: () => '',
|
||||
serializeEditorContent: () => '',
|
||||
}));
|
||||
vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s }));
|
||||
|
||||
// ─── DataTransfer polyfill ────────────────────────────────────────────────────
|
||||
|
||||
/** jsdom's built-in DataTransfer doesn't fully support setData/getData in synthetic drag events. */
|
||||
class MockDataTransfer {
|
||||
private _data: Record<string, string> = {};
|
||||
types: string[] = [];
|
||||
effectAllowed = '';
|
||||
dropEffect = '';
|
||||
|
||||
setData(type: string, data: string) {
|
||||
this._data[type] = data;
|
||||
if (!this.types.includes(type)) this.types.push(type);
|
||||
}
|
||||
|
||||
getData(type: string): string {
|
||||
return this._data[type] ?? '';
|
||||
}
|
||||
|
||||
setDragImage(_image: Element, _x: number, _y: number) {
|
||||
// no-op: jsdom has no rendering, but the chip drag handler calls this.
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Shared test data ─────────────────────────────────────────────────────────
|
||||
|
||||
const BASE_DATA = {
|
||||
to: 'alice@example.com, ',
|
||||
cc: '',
|
||||
bcc: '',
|
||||
subject: '',
|
||||
body: '',
|
||||
showCc: true,
|
||||
showBcc: true,
|
||||
selectedIdentityId: null,
|
||||
subAddressTag: '',
|
||||
mode: 'compose' as const,
|
||||
draftId: null,
|
||||
};
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('RecipientChipInput drag and drop', () => {
|
||||
beforeEach(() => { vi.clearAllMocks(); });
|
||||
|
||||
it('renders recipient chips with draggable="true"', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
|
||||
const chipText = await screen.findByText('alice@example.com');
|
||||
const chipSpan = chipText.closest('[draggable]');
|
||||
expect(chipSpan).not.toBeNull();
|
||||
expect(chipSpan).toHaveAttribute('draggable', 'true');
|
||||
});
|
||||
|
||||
it('onDragStart encodes the recipient and source field into dataTransfer', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
|
||||
const chipText = await screen.findByText('alice@example.com');
|
||||
const chipSpan = chipText.closest('[draggable]') as HTMLElement;
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
fireEvent.dragStart(chipSpan, { dataTransfer: dt });
|
||||
|
||||
const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
|
||||
expect(payload).toEqual({ recipient: { email: 'alice@example.com' }, fromField: 'to' });
|
||||
});
|
||||
|
||||
it('keeps a display name with a comma in a single chip (array model)', async () => {
|
||||
render(<EmailComposer initialData={{ ...BASE_DATA, to: '"Doo, John" <john@doo.org>, ' }} />);
|
||||
|
||||
// One chip, displayed as "Doo, John (john@doo.org)" — not split on the comma.
|
||||
const chip = await screen.findByText('Doo, John (john@doo.org)');
|
||||
const chipSpan = chip.closest('[draggable]') as HTMLElement;
|
||||
expect(chipSpan).not.toBeNull();
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
fireEvent.dragStart(chipSpan, { dataTransfer: dt });
|
||||
const payload = JSON.parse(dt.getData('application/x-recipient-chip'));
|
||||
expect(payload).toEqual({ recipient: { name: 'Doo, John', email: 'john@doo.org' }, fromField: 'to' });
|
||||
});
|
||||
|
||||
it('onDragEnd clears the opacity class on the chip', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
|
||||
const chipText = await screen.findByText('alice@example.com');
|
||||
const chipSpan = chipText.closest('[draggable]') as HTMLElement;
|
||||
|
||||
fireEvent.dragStart(chipSpan, { dataTransfer: new MockDataTransfer() });
|
||||
expect(chipSpan.className).toContain('opacity-50');
|
||||
|
||||
fireEvent.dragEnd(chipSpan);
|
||||
expect(chipSpan.className).not.toContain('opacity-50');
|
||||
});
|
||||
|
||||
it('dragOver on a different field container adds ring indicator; dragLeave removes it', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
|
||||
await screen.findByText('alice@example.com');
|
||||
|
||||
// The flex-wrap containers are the actual drop zones
|
||||
const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
|
||||
// To-container has the draggable chip; cc-container doesn't
|
||||
const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
|
||||
const ccContainer = allContainers.find(el => el !== toContainer) as HTMLElement;
|
||||
|
||||
if (!ccContainer) return;
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
|
||||
|
||||
fireEvent.dragOver(ccContainer, { dataTransfer: dt });
|
||||
expect(ccContainer.className).toContain('ring-primary');
|
||||
|
||||
fireEvent.dragLeave(ccContainer, { relatedTarget: null });
|
||||
expect(ccContainer.className).not.toContain('ring-primary');
|
||||
});
|
||||
|
||||
it('drop on a different field container moves the chip', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
await screen.findByText('alice@example.com');
|
||||
|
||||
const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
|
||||
const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
|
||||
const ccContainer = allContainers.find(el => el !== toContainer) as HTMLElement;
|
||||
|
||||
if (!toContainer || !ccContainer) return;
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
|
||||
fireEvent.dragOver(ccContainer, { dataTransfer: dt });
|
||||
act(() => {
|
||||
fireEvent.drop(ccContainer, { dataTransfer: dt });
|
||||
});
|
||||
|
||||
// Chip should still appear exactly once (moved, not duplicated or lost)
|
||||
await screen.findByText('alice@example.com');
|
||||
expect(screen.getAllByText('alice@example.com')).toHaveLength(1);
|
||||
|
||||
// The To container must now be empty
|
||||
expect(toContainer.querySelectorAll('[draggable]')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('drop on the same field container is a no-op', async () => {
|
||||
render(<EmailComposer initialData={BASE_DATA} />);
|
||||
await screen.findByText('alice@example.com');
|
||||
|
||||
const allContainers = Array.from(document.querySelectorAll('[class*="flex-wrap"]'));
|
||||
const toContainer = allContainers.find(el => el.querySelector('[draggable]')) as HTMLElement;
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
|
||||
fireEvent.dragOver(toContainer, { dataTransfer: dt });
|
||||
act(() => {
|
||||
fireEvent.drop(toContainer, { dataTransfer: dt });
|
||||
});
|
||||
|
||||
// Chip stays present exactly once
|
||||
expect(screen.getAllByText('alice@example.com')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('dropping a chip onto the hidden Cc button shows the CC field', async () => {
|
||||
render(<EmailComposer initialData={{ ...BASE_DATA, showCc: false, showBcc: false }} />);
|
||||
await screen.findByText('alice@example.com');
|
||||
|
||||
const ccButton = screen.getByRole('button', { name: 'Cc' });
|
||||
|
||||
const dt = new MockDataTransfer();
|
||||
dt.setData('application/x-recipient-chip', JSON.stringify({ recipient: { email: 'alice@example.com' }, fromField: 'to' }));
|
||||
fireEvent.dragOver(ccButton, { dataTransfer: dt });
|
||||
act(() => {
|
||||
fireEvent.drop(ccButton, { dataTransfer: dt });
|
||||
});
|
||||
|
||||
// cc_label is rendered by the mock translation as its key string
|
||||
const ccLabel = await screen.findByText('cc_label');
|
||||
expect(ccLabel).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,296 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import React from 'react';
|
||||
import { EmailComposer } from '../email-composer';
|
||||
|
||||
// ─── Heavy component mocks (mirrors recipient-chip-drag.test.tsx) ──────────────
|
||||
|
||||
vi.mock('@/components/email/rich-text-editor', () => ({
|
||||
RichTextEditor: ({ onChange }: { onChange?: (html: string) => void }) => (
|
||||
React.createElement('div', { 'data-testid': 'rich-text-editor', onClick: () => onChange?.('') })
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('@/components/plugins/plugin-slot', () => ({ PluginSlot: () => null }));
|
||||
vi.mock('@/components/identity/sub-address-helper', () => ({ SubAddressHelper: () => null }));
|
||||
vi.mock('@/components/templates/template-picker', () => ({ TemplatePicker: () => null }));
|
||||
vi.mock('@/components/templates/template-form', () => ({ TemplateForm: () => null }));
|
||||
vi.mock('@/components/files/file-preview-modal', () => ({ FilePreviewModal: () => null }));
|
||||
vi.mock('@/hooks/use-focus-trap', () => ({
|
||||
useFocusTrap: () => ({ ref: { current: null } }),
|
||||
}));
|
||||
vi.mock('@/hooks/use-pro-multi-account-identities', () => ({
|
||||
useProMultiAccountIdentities: () => ({ enabled: false, groups: [], allIdentities: [] }),
|
||||
stripCrossAccountIdentityPrefix: (id: string) => ({ localAccountId: null, rawId: id }),
|
||||
}));
|
||||
|
||||
// ─── Store mocks ──────────────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('@/stores/auth-store', () => {
|
||||
const state = {
|
||||
client: null,
|
||||
identities: [],
|
||||
primaryIdentity: null,
|
||||
isAuthenticated: false,
|
||||
isDemoMode: false,
|
||||
activeAccountId: null,
|
||||
connectionLost: false,
|
||||
getClientForAccount: () => undefined,
|
||||
getAllConnectedClients: () => new Map(),
|
||||
syncIdentities: () => {},
|
||||
refreshIdentities: async () => {},
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useAuthStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/identity-store', () => {
|
||||
const state = { identities: [], defaultIdentityId: null };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useIdentityStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/account-store', () => {
|
||||
const state = { accounts: [], getAccountById: () => undefined };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useAccountStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/email-store', () => {
|
||||
const state = {
|
||||
draftSaveEnabled: false,
|
||||
sendRawEmail: async () => ({ sent: true }),
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useEmailStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/settings-store', () => {
|
||||
const state = {
|
||||
timeFormat: '24h',
|
||||
plainTextMode: false,
|
||||
subAddressDelimiter: '+',
|
||||
autoSelectReplyIdentity: true,
|
||||
attachmentReminderEnabled: false,
|
||||
attachmentReminderKeywords: [],
|
||||
sendDelaySeconds: 0,
|
||||
signaturePosition: 'above_quote',
|
||||
signatureSeparatorEnabled: false,
|
||||
requestReadReceiptDefault: false,
|
||||
addTrustedSender: () => {},
|
||||
trustedSendersAddressBook: null,
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useSettingsStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/contact-store', () => {
|
||||
const state = {
|
||||
contacts: [],
|
||||
getAutocomplete: async () => [],
|
||||
addToTrustedSendersBook: async () => {},
|
||||
};
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useContactStore: hook };
|
||||
});
|
||||
|
||||
vi.mock('@/stores/template-store', () => {
|
||||
const state = { templates: [], addTemplate: async () => {} };
|
||||
const hook = (sel?: (s: typeof state) => unknown) =>
|
||||
typeof sel === 'function' ? sel(state) : state;
|
||||
hook.getState = () => state;
|
||||
hook.setState = (p: Partial<typeof state>) => Object.assign(state, p);
|
||||
return { useTemplateStore: hook };
|
||||
});
|
||||
|
||||
// ─── Misc dependency mocks ────────────────────────────────────────────────────
|
||||
|
||||
vi.mock('@/stores/toast-store', () => ({
|
||||
toast: { info: () => {}, error: () => {}, success: () => {} },
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/plugin-hooks', () => ({
|
||||
emailHooks: {
|
||||
onComposerOpen: { call: async () => [] },
|
||||
onRecipientChange: { call: async () => [] },
|
||||
getRecipientSuggestions: { call: async () => [] },
|
||||
onSend: { call: async () => [] },
|
||||
beforeSend: { call: async () => [] },
|
||||
},
|
||||
contactHooks: {
|
||||
search: { call: async () => [] },
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/email-sanitization', () => ({
|
||||
sanitizeSignatureHtml: (v: string) => v,
|
||||
sanitizeEmailHtml: (v: string) => v,
|
||||
parseHtmlSafely: (html: string) => new DOMParser().parseFromString(html, 'text/html'),
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/reply-identity', () => ({ resolveReplyFrom: () => null }));
|
||||
vi.mock('@/lib/email-threading', () => ({
|
||||
computeReplyThreadingHeaders: () => ({ inReplyTo: [], references: [] }),
|
||||
}));
|
||||
vi.mock('@/lib/signature-utils', () => ({
|
||||
appendPlainTextSignature: (body: string) => body,
|
||||
getPlainTextSignature: () => '',
|
||||
}));
|
||||
vi.mock('@/lib/sub-addressing', () => ({ generateSubAddress: () => '' }));
|
||||
vi.mock('@/lib/debug', () => ({ debug: () => {} }));
|
||||
vi.mock('@/components/email/quoted-html', () => ({
|
||||
buildQuotedHtmlBlock: () => '',
|
||||
serializeEditorContent: () => '',
|
||||
}));
|
||||
vi.mock('@/lib/template-utils', () => ({ substitutePlaceholders: (s: string) => s }));
|
||||
|
||||
// ─── Shared test data ─────────────────────────────────────────────────────────
|
||||
|
||||
const EMPTY_DATA = {
|
||||
to: '',
|
||||
cc: '',
|
||||
bcc: '',
|
||||
subject: '',
|
||||
body: '',
|
||||
showCc: true,
|
||||
showBcc: true,
|
||||
selectedIdentityId: null,
|
||||
subAddressTag: '',
|
||||
mode: 'compose' as const,
|
||||
draftId: null,
|
||||
};
|
||||
|
||||
/** next-intl is mocked to return the key, so the To placeholder is "to_placeholder". */
|
||||
const toInput = () => screen.getByPlaceholderText('to_placeholder') as HTMLInputElement;
|
||||
const ccInput = () => screen.getByPlaceholderText('cc_placeholder') as HTMLInputElement;
|
||||
|
||||
const paste = (input: HTMLElement, text: string) =>
|
||||
fireEvent.paste(input, { clipboardData: { getData: () => text } });
|
||||
|
||||
// ─── Tests ────────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('RecipientChipInput paste', () => {
|
||||
beforeEach(() => { vi.clearAllMocks(); });
|
||||
|
||||
it('splits a pasted list (comma / semicolon / whitespace) into one chip per address', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput(); // capture once — placeholder disappears once chips exist
|
||||
paste(input, 'a@x.com b@y.com; c@z.com');
|
||||
|
||||
expect(screen.getByText('a@x.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('b@y.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('c@z.com')).toBeInTheDocument();
|
||||
// all consumed → input cleared
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('chips the valid addresses and leaves invalid text in the input', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, 'foo bar a@x.com');
|
||||
|
||||
expect(screen.getByText('a@x.com')).toBeInTheDocument();
|
||||
expect(input.value).toBe('foo bar');
|
||||
});
|
||||
|
||||
it('does not pre-empt a single-address paste (no delimiter → normal editing)', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
paste(toInput(), 'single@x.com');
|
||||
|
||||
// The handler bailed out, so no chip was created from the single token.
|
||||
expect(screen.queryByText('single@x.com')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps display names from a fully-quoted "Name <email>" list', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, '"Alice Smith <alice@x.com>", "Alex Smith <alex@x.com>"');
|
||||
|
||||
// Chips render as "Name (email)" when a display name is present.
|
||||
expect(screen.getByText('Alice Smith (alice@x.com)')).toBeInTheDocument();
|
||||
expect(screen.getByText('Alex Smith (alex@x.com)')).toBeInTheDocument();
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('keeps a `Name <email>` pair as a single named chip', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, 'John Doe <j@x.com>, jane@y.com');
|
||||
|
||||
expect(screen.getByText('John Doe (j@x.com)')).toBeInTheDocument();
|
||||
expect(screen.getByText('jane@y.com')).toBeInTheDocument();
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('keeps a comma inside a quoted display name intact', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, '"Doe, John" <j@x.com>; bob@z.com');
|
||||
|
||||
expect(screen.getByText('Doe, John (j@x.com)')).toBeInTheDocument();
|
||||
expect(screen.getByText('bob@z.com')).toBeInTheDocument();
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('splits a newline-separated block (e.g. a spreadsheet column)', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, 'a@x.com\nb@y.com\nc@z.com');
|
||||
|
||||
expect(screen.getByText('a@x.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('b@y.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('c@z.com')).toBeInTheDocument();
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('dedupes case-insensitively within the paste and against existing chips', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput(); // DOM node persists across pastes (placeholder just clears)
|
||||
paste(input, 'a@x.com, A@X.com, b@y.com'); // within-paste dup collapses
|
||||
paste(input, 'A@X.COM, c@z.com'); // dup of an existing chip is dropped
|
||||
|
||||
expect(screen.getByText('b@y.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('c@z.com')).toBeInTheDocument();
|
||||
// a@x.com appears exactly once despite three case variants across two pastes.
|
||||
expect(screen.getAllByText('a@x.com')).toHaveLength(1);
|
||||
expect(screen.queryByText('A@X.COM')).not.toBeInTheDocument();
|
||||
expect(input.value).toBe('');
|
||||
});
|
||||
|
||||
it('chips the valid (named) entries and leaves a non-address token behind', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
const input = toInput();
|
||||
paste(input, '"VIP" <vip@x.com>, not-an-email, b@y.com');
|
||||
|
||||
expect(screen.getByText('VIP (vip@x.com)')).toBeInTheDocument();
|
||||
expect(screen.getByText('b@y.com')).toBeInTheDocument();
|
||||
expect(input.value).toBe('not-an-email');
|
||||
});
|
||||
|
||||
it('works on the Cc field (shared handler)', () => {
|
||||
render(<EmailComposer initialData={EMPTY_DATA} />);
|
||||
paste(ccInput(), 'x@a.com; y@b.com');
|
||||
|
||||
expect(screen.getByText('x@a.com')).toBeInTheDocument();
|
||||
expect(screen.getByText('y@b.com')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { Editor } from '@tiptap/core';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
|
||||
import { SignatureBlock, buildSignatureBlock, SIGNATURE_BLOCK_MARKER } from '../signature-block';
|
||||
import { serializeEditorContent } from '../quoted-html';
|
||||
|
||||
describe('signature-block', () => {
|
||||
it('buildSignatureBlock wraps html in the marker div', () => {
|
||||
expect(buildSignatureBlock('<b>x</b>')).toBe(`<div ${SIGNATURE_BLOCK_MARKER}><b>x</b></div>`);
|
||||
});
|
||||
|
||||
it('preserves an inline-styled signature through parse + serialize (no schema flattening)', () => {
|
||||
const styled =
|
||||
'<table style="background:#0a0e16;border-radius:8px"><tbody><tr>' +
|
||||
'<td style="color:#c6f24e;font-family:\'Courier New\'">MV</td>' +
|
||||
'</tr></tbody></table>';
|
||||
const editor = new Editor({
|
||||
element: document.createElement('div'),
|
||||
extensions: [StarterKit, SignatureBlock],
|
||||
content: `<p>Hello</p>${buildSignatureBlock(styled)}`,
|
||||
});
|
||||
try {
|
||||
const out = serializeEditorContent(editor);
|
||||
// Original inline styling survives - it is NOT re-parsed into the schema.
|
||||
expect(out).toContain('background:#0a0e16');
|
||||
expect(out).toContain('border-radius:8px');
|
||||
expect(out).toContain('color:#c6f24e');
|
||||
expect(out).toContain(SIGNATURE_BLOCK_MARKER);
|
||||
// Surrounding body is preserved.
|
||||
expect(out).toContain('Hello');
|
||||
// The signature did not get the editor's generic table styling.
|
||||
expect(out).not.toContain('rgb(204, 204, 204)');
|
||||
} finally {
|
||||
editor.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -553,40 +553,10 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
const replyToForRsvp = parsedEvent.replyTo
|
||||
|| (parsedEvent.organizerCalendarAddress ? { imip: parsedEvent.organizerCalendarAddress } : null);
|
||||
|
||||
const imipStatus = status.toUpperCase() as 'ACCEPTED' | 'TENTATIVE' | 'DECLINED';
|
||||
const organizerEmail = parsedEvent?.replyTo?.imip?.replace('mailto:', '')
|
||||
|| parsedEvent?.organizerCalendarAddress?.replace('mailto:', '')
|
||||
|| summary?.organizerEmail
|
||||
|| null;
|
||||
|
||||
// Send the iMIP REPLY email to the organizer (client-side scheduling).
|
||||
// Called after updating the local calendar event. Best-effort - if it
|
||||
// fails we still report the RSVP as sent since the calendar was updated.
|
||||
const sendImipReply = async () => {
|
||||
if (!organizerEmail || !parsedEvent?.uid || !currentUserEmail) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await client.sendImipReply({
|
||||
organizerEmail,
|
||||
organizerName: summary?.organizer || undefined,
|
||||
attendeeEmail: currentUserEmail,
|
||||
attendeeName: myParticipant?.participant.name || undefined,
|
||||
uid: parsedEvent.uid,
|
||||
summary: parsedEvent.title,
|
||||
dtStart: parsedEvent.start || undefined,
|
||||
dtEnd: summary?.end || undefined,
|
||||
timeZone: parsedEvent.timeZone || undefined,
|
||||
isAllDay: parsedEvent.showWithoutTime || false,
|
||||
sequence: parsedEvent.sequence,
|
||||
status: imipStatus,
|
||||
});
|
||||
} catch {
|
||||
// Best-effort: don't block the RSVP success notification
|
||||
}
|
||||
};
|
||||
|
||||
// The iMIP REPLY to the organizer is sent by the server: rsvpEvent /
|
||||
// updateEvent below pass sendSchedulingMessages=true to CalendarEvent/set
|
||||
// and Stalwart queues the iTIP REPLY itself. A manual client-side reply
|
||||
// here produced duplicate emails.
|
||||
try {
|
||||
const eventForRsvp = existingEvent
|
||||
? await resolveExistingEventForRsvp()
|
||||
@@ -601,7 +571,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
);
|
||||
if (eventForRsvp && existingEventParticipant) {
|
||||
await rsvpEvent(client, eventForRsvp.id, existingEventParticipant.id, status, replyToForRsvp);
|
||||
await sendImipReply();
|
||||
setRsvpStatus(status);
|
||||
setActionNotice(t('rsvp_sent'));
|
||||
setState('parsed');
|
||||
@@ -615,7 +584,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
participants: repairedParticipants,
|
||||
replyTo: replyToForRsvp ?? undefined,
|
||||
}, true);
|
||||
await sendImipReply();
|
||||
setRsvpStatus(status);
|
||||
setActionNotice(t('rsvp_sent'));
|
||||
setState('parsed');
|
||||
@@ -632,7 +600,6 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
|
||||
|| (newEvent && currentUserEmail ? findParticipantByEmail(newEvent, currentUserEmail) : null);
|
||||
if (newEvent && participant) {
|
||||
await rsvpEvent(client, newEvent.id, participant.id, status, replyToForRsvp);
|
||||
await sendImipReply();
|
||||
setRsvpStatus(status);
|
||||
setActionNotice(t('rsvp_sent'));
|
||||
} else {
|
||||
|
||||
+547
-431
File diff suppressed because it is too large
Load Diff
@@ -34,6 +34,7 @@ import {
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
|
||||
import { localizeMailboxName } from "@/lib/mailbox-label";
|
||||
import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
|
||||
|
||||
interface Position {
|
||||
@@ -143,6 +144,7 @@ export function EmailContextMenu({
|
||||
onRescheduleScheduled,
|
||||
}: EmailContextMenuProps) {
|
||||
const t = useTranslations("context_menu");
|
||||
const tSidebar = useTranslations("sidebar");
|
||||
const _tColor = useTranslations("email_viewer.color_tag");
|
||||
const emailKeywords = useSettingsStore((state) => state.emailKeywords);
|
||||
const isUnread = !email.keywords?.$seen;
|
||||
@@ -302,12 +304,13 @@ export function EmailContextMenu({
|
||||
return nodes.map((node) => {
|
||||
const Icon = getMailboxIcon(node.role);
|
||||
const isTarget = moveTargetIds.has(node.id);
|
||||
const nodeLabel = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
|
||||
return (
|
||||
<div key={node.id}>
|
||||
{isTarget ? (
|
||||
<ContextMenuItem
|
||||
icon={Icon}
|
||||
label={node.name}
|
||||
label={nodeLabel}
|
||||
onClick={() =>
|
||||
handleAction(() =>
|
||||
showBatchActions
|
||||
@@ -319,7 +322,7 @@ export function EmailContextMenu({
|
||||
) : (
|
||||
<div className="px-3 py-1.5 text-sm flex items-center gap-2 text-muted-foreground">
|
||||
<Icon className="w-4 h-4 flex-shrink-0" />
|
||||
<span>{node.name}</span>
|
||||
<span>{nodeLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
{node.children.length > 0 && (
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Email } from "@/lib/jmap/types";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import type { HoverAction } from "@/stores/settings-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert } from "lucide-react";
|
||||
import { Trash2, Star, Mail, MailOpen, Archive, Tag, ShieldAlert, ShieldCheck } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useIsMobile } from "@/hooks/use-media-query";
|
||||
|
||||
@@ -17,6 +17,10 @@ interface EmailHoverActionsProps {
|
||||
onArchive?: () => void;
|
||||
onSetColorTag?: (color: string | null) => void;
|
||||
onMarkAsSpam?: () => void;
|
||||
// When the email lives in a junk folder (incl. the aggregate "All Junk" view)
|
||||
// the spam quick-action flips to "not spam".
|
||||
isInJunk?: boolean;
|
||||
onUndoSpam?: () => void;
|
||||
}
|
||||
|
||||
const ACTION_CONFIG: Record<HoverAction, {
|
||||
@@ -72,6 +76,8 @@ export function EmailHoverActions({
|
||||
onArchive,
|
||||
onSetColorTag,
|
||||
onMarkAsSpam,
|
||||
isInJunk = false,
|
||||
onUndoSpam,
|
||||
}: EmailHoverActionsProps) {
|
||||
const hoverActions = useSettingsStore((state) => state.hoverActions);
|
||||
const hoverActionsMode = useSettingsStore((state) => state.hoverActionsMode);
|
||||
@@ -106,7 +112,8 @@ export function EmailHoverActions({
|
||||
onSetColorTag?.(null);
|
||||
break;
|
||||
case "spam":
|
||||
onMarkAsSpam?.();
|
||||
if (isInJunk) onUndoSpam?.();
|
||||
else onMarkAsSpam?.();
|
||||
break;
|
||||
}
|
||||
};
|
||||
@@ -116,20 +123,28 @@ export function EmailHoverActions({
|
||||
if (!config) return null;
|
||||
const Icon = config.icon;
|
||||
|
||||
// In a junk context the spam action becomes "not spam".
|
||||
const isNotSpam = actionId === "spam" && isInJunk;
|
||||
const DisplayIcon = actionId === "markRead"
|
||||
? (isUnread ? MailOpen : Mail)
|
||||
: actionId === "star" && isStarred
|
||||
? Star
|
||||
: Icon;
|
||||
: isNotSpam
|
||||
? ShieldCheck
|
||||
: Icon;
|
||||
const title = isNotSpam ? t("not_spam") : t(config.titleKey);
|
||||
const className = isNotSpam
|
||||
? "hover:text-green-600 dark:hover:text-green-400"
|
||||
: config.className;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={actionId}
|
||||
onClick={(e) => handleAction(e, actionId)}
|
||||
title={t(config.titleKey)}
|
||||
title={title}
|
||||
className={cn(
|
||||
"p-1.5 rounded-md transition-colors duration-100 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10",
|
||||
config.className,
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<DisplayIcon
|
||||
|
||||
@@ -29,11 +29,12 @@ interface EmailListItemProps {
|
||||
onArchive?: () => void;
|
||||
onSetColorTag?: (color: string | null) => void;
|
||||
onMarkAsSpam?: () => void;
|
||||
onUndoSpam?: () => void;
|
||||
}
|
||||
|
||||
export function EmailListItem({ email, selected, onClick, onDoubleClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }: EmailListItemProps) {
|
||||
export function EmailListItem({ email, selected, onClick, onDoubleClick, onContextMenu, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam, onUndoSpam }: EmailListItemProps) {
|
||||
const t = useTranslations('email_viewer');
|
||||
const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection } = useEmailStore();
|
||||
const { selectedEmailIds, toggleEmailSelection, selectRangeEmails, selectedMailbox, mailboxes, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
|
||||
const showPreview = useSettingsStore((state) => state.showPreview);
|
||||
const density = useSettingsStore((state) => state.density);
|
||||
const mailLayout = useSettingsStore((state) => state.mailLayout);
|
||||
@@ -46,8 +47,11 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
|
||||
const isImportant = email.keywords?.["$important"];
|
||||
const isAnswered = email.keywords?.$answered;
|
||||
const isForwarded = email.keywords?.$forwarded;
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always "me")
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always "me").
|
||||
// In aggregate role-views the selected mailbox is virtual → fall back to the
|
||||
// unified role so junk-contextual UI (spam ↔ not-spam) and avatar hiding work.
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
|
||||
?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
|
||||
const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
|
||||
const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
|
||||
const isMobile = useUIStore((state) => state.isMobile);
|
||||
@@ -162,7 +166,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
|
||||
|
||||
{/* Unread indicator */}
|
||||
{isUnread && (
|
||||
<div className="absolute left-1 top-1/2 -translate-y-1/2">
|
||||
<div className="absolute left-0.5 top-1/2 -translate-y-1/2">
|
||||
<Circle className="w-2 h-2 fill-unread text-unread" />
|
||||
</div>
|
||||
)}
|
||||
@@ -191,13 +195,13 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
|
||||
<span className={cn(
|
||||
'shrink-0 truncate',
|
||||
'min-w-0 truncate',
|
||||
isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{email.subject || t('no_subject')}
|
||||
</span>
|
||||
{inlinePreview && (
|
||||
<span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
|
||||
<span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -321,6 +325,8 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte
|
||||
onArchive={onArchive}
|
||||
onSetColorTag={onSetColorTag}
|
||||
onMarkAsSpam={onMarkAsSpam}
|
||||
onUndoSpam={onUndoSpam}
|
||||
isInJunk={currentMailboxRole === 'junk'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -100,19 +100,32 @@ export function EmailList({
|
||||
isLoadingThread,
|
||||
toggleThreadExpansion,
|
||||
fetchThreadEmails,
|
||||
markThreadAsRead,
|
||||
collapseAllThreads,
|
||||
threadEmailCounts,
|
||||
searchFilters,
|
||||
setSearchFilters,
|
||||
clearSearchFilters,
|
||||
advancedSearch,
|
||||
searchQuery,
|
||||
isUnifiedView,
|
||||
unifiedRole,
|
||||
} = useEmailStore();
|
||||
|
||||
// In aggregate role-views (e.g. "All Junk") the selected mailbox is virtual, so
|
||||
// there is no concrete mailbox to read the role from. Fall back to the unified
|
||||
// role so contextual actions (e.g. mark-as-spam ↔ not-spam) behave as if inside
|
||||
// that role's folder.
|
||||
const effectiveMailboxRole =
|
||||
mailboxes.find(m => m.id === selectedMailbox)?.role
|
||||
?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
|
||||
|
||||
const disableThreading = useSettingsStore((state) => state.disableThreading);
|
||||
|
||||
const threadGroups = useMemo(() => {
|
||||
const groups = groupEmailsByThread(emails, disableThreading || isScheduledView);
|
||||
const groups = groupEmailsByThread(emails, disableThreading || isScheduledView, threadEmailCounts);
|
||||
return sortThreadGroups(groups);
|
||||
}, [emails, disableThreading, isScheduledView]);
|
||||
}, [emails, disableThreading, isScheduledView, threadEmailCounts]);
|
||||
|
||||
const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<Email>();
|
||||
const { dialogProps: confirmDialogProps, confirm: confirmDialog } = useConfirmDialog();
|
||||
@@ -250,10 +263,12 @@ export function EmailList({
|
||||
if (!isExpanded && client) {
|
||||
toggleThreadExpansion(threadId);
|
||||
await fetchThreadEmails(client, threadId);
|
||||
// Mark all unread emails in this thread as read
|
||||
void markThreadAsRead(client, threadId);
|
||||
} else {
|
||||
toggleThreadExpansion(threadId);
|
||||
}
|
||||
}, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails]);
|
||||
}, [client, expandedThreadIds, toggleThreadExpansion, fetchThreadEmails, markThreadAsRead]);
|
||||
|
||||
// Range-based load more: trigger when last visible item is near the end.
|
||||
// Debounce to prevent rapid cascade when thread grouping reduces item
|
||||
@@ -473,7 +488,18 @@ export function EmailList({
|
||||
isLoading={isLoadingThread === thread.threadId}
|
||||
expandedEmails={threadEmailsCache.get(thread.threadId)}
|
||||
onToggleExpand={() => handleToggleThreadExpansion(thread.threadId)}
|
||||
onEmailSelect={(email) => onEmailSelect?.(email)}
|
||||
onCollapseAllThreads={collapseAllThreads}
|
||||
onEmailSelect={(email) => {
|
||||
// Collapse expanded threads when selecting an email outside the expanded thread
|
||||
const currentExpanded = useEmailStore.getState().expandedThreadIds;
|
||||
if (currentExpanded.size > 0) {
|
||||
// Check if the selected email belongs to any expanded thread via its threadId
|
||||
if (!email.threadId || !currentExpanded.has(email.threadId)) {
|
||||
collapseAllThreads();
|
||||
}
|
||||
}
|
||||
onEmailSelect?.(email);
|
||||
}}
|
||||
onEmailDoubleClick={onEmailDoubleClick ? (email) => onEmailDoubleClick(email) : undefined}
|
||||
onContextMenu={openContextMenu}
|
||||
onOpenConversation={onOpenConversation}
|
||||
@@ -483,6 +509,7 @@ export function EmailList({
|
||||
onArchive={onArchive ? (email) => onArchive(email) : undefined}
|
||||
onSetColorTag={onSetColorTag}
|
||||
onMarkAsSpam={onMarkAsSpam ? (email) => onMarkAsSpam(email) : undefined}
|
||||
onUndoSpam={onUndoSpam ? (email) => onUndoSpam(email) : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -516,7 +543,7 @@ export function EmailList({
|
||||
menuRef={menuRef}
|
||||
mailboxes={mailboxes}
|
||||
selectedMailbox={selectedMailbox}
|
||||
currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
|
||||
currentMailboxRole={effectiveMailboxRole}
|
||||
isMultiSelect={selectedEmailIds.has(contextMenu.data.id)}
|
||||
selectedCount={selectedEmailIds.size}
|
||||
onReply={() => onReply?.(contextMenu.data!)}
|
||||
|
||||
+397
-1216
File diff suppressed because it is too large
Load Diff
@@ -4,6 +4,8 @@ import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
|
||||
import { DOMSerializer } from "@tiptap/pm/model";
|
||||
import type { Editor } from "@tiptap/react";
|
||||
|
||||
import { buildSignatureBlock } from "@/components/email/signature-block";
|
||||
|
||||
// Marker attribute that identifies the quoted-original wrapper in serialized
|
||||
// HTML, so parseHTML can recognise it on the way back in.
|
||||
export const QUOTED_HTML_MARKER = "data-quoted-html";
|
||||
@@ -166,6 +168,13 @@ export function serializeEditorContent(editor: Editor): string {
|
||||
parts.push(buildQuotedHtmlBlock((node.attrs.html as string) || ""));
|
||||
return;
|
||||
}
|
||||
if (node.type.name === "signatureBlock") {
|
||||
// Same rationale as quotedHtml: inline the verbatim signature HTML so the
|
||||
// styled signature reaches the recipient (and a saved draft round-trips)
|
||||
// instead of the schema-flattened version.
|
||||
parts.push(buildSignatureBlock((node.attrs.html as string) || ""));
|
||||
return;
|
||||
}
|
||||
const fragment = serializer.serializeNode(node);
|
||||
const tmp = document.createElement("div");
|
||||
tmp.appendChild(fragment);
|
||||
|
||||
@@ -17,6 +17,7 @@ import { TableRow } from "@tiptap/extension-table-row";
|
||||
import { TableHeader } from "@tiptap/extension-table-header";
|
||||
import { TableCell } from "@tiptap/extension-table-cell";
|
||||
import { QuotedHtml, serializeEditorContent } from "@/components/email/quoted-html";
|
||||
import { SignatureBlock } from "@/components/email/signature-block";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Bold,
|
||||
@@ -235,6 +236,10 @@ export function RichTextEditor({
|
||||
// Quoted/forwarded original email body - held verbatim as an atomic
|
||||
// node so layout-heavy HTML survives 1:1 (see quoted-html.ts).
|
||||
QuotedHtml,
|
||||
// Identity signature - held verbatim as a non-editable atomic node so
|
||||
// rich/branded signatures keep their inline styling in the editor and
|
||||
// in the sent mail (see signature-block.ts).
|
||||
SignatureBlock,
|
||||
],
|
||||
content,
|
||||
editorProps: {
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
|
||||
|
||||
// Marker attribute that identifies the signature wrapper in serialized HTML,
|
||||
// so parseHTML can recognise it on the way back in (initial content, drafts).
|
||||
export const SIGNATURE_BLOCK_MARKER = "data-signature-block-node";
|
||||
|
||||
/**
|
||||
* SignatureBlock — an atomic, NON-editable block node that carries the
|
||||
* *verbatim* HTML of the user's identity signature in its `html` attribute.
|
||||
*
|
||||
* Why: the signature is embedded into the composer so it stays in the body,
|
||||
* but parsing rich, table-based "brand" signatures into the ProseMirror schema
|
||||
* strips their inline CSS (background/text colors, fonts, border-radius). By
|
||||
* holding the signature as an atom it is never parsed into the schema, so the
|
||||
* styling survives 1:1 — both in the editor (rendered by the NodeView below)
|
||||
* and in the sent mail (emitted by serializeEditorContent in quoted-html.ts).
|
||||
*
|
||||
* Mirrors QuotedHtml, but the inner region is read-only: a signature is meant
|
||||
* to be inserted/removed as a unit, not edited inline. Select the node and
|
||||
* press Backspace/Delete to drop the whole signature.
|
||||
*/
|
||||
export const SignatureBlock = TiptapNode.create({
|
||||
name: "signatureBlock",
|
||||
group: "block",
|
||||
atom: true,
|
||||
selectable: true,
|
||||
draggable: false,
|
||||
// Isolating keeps selection/gapcursor behaviour sane at the boundary.
|
||||
isolating: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
html: {
|
||||
default: "",
|
||||
// Capture the verbatim inner HTML when parsing. Because the node is an
|
||||
// atom, ProseMirror does NOT descend into the children, so the rich
|
||||
// signature markup never hits (and is never mangled by) the schema.
|
||||
parseHTML: (el) => el.innerHTML,
|
||||
// The real content round-trips via the custom serializer
|
||||
// (serializeEditorContent); renderHTML below only needs the wrapper.
|
||||
renderHTML: () => ({}),
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [{ tag: `div[${SIGNATURE_BLOCK_MARKER}]` }];
|
||||
},
|
||||
|
||||
renderHTML({ HTMLAttributes }) {
|
||||
// Only used for ProseMirror's internal/clipboard round-trip. The send /
|
||||
// draft path uses serializeEditorContent() which inlines attrs.html.
|
||||
return ["div", mergeAttributes(HTMLAttributes, { [SIGNATURE_BLOCK_MARKER]: "" })];
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ({ node }) => {
|
||||
const dom = document.createElement("div");
|
||||
dom.setAttribute(SIGNATURE_BLOCK_MARKER, "");
|
||||
dom.className = "signature-block-island";
|
||||
|
||||
// CRITICAL: render the signature inside a Shadow Root. The app's global
|
||||
// CSS (Tailwind preflight, .tiptap table/td rules, box-sizing resets)
|
||||
// would otherwise cascade INTO the signature and destroy its layout -
|
||||
// exactly the corruption we are fixing. Shadow DOM isolates both
|
||||
// directions, so only the browser's UA defaults + the signature's own
|
||||
// inline styles apply and the in-editor preview matches the sent mail.
|
||||
const shadow = dom.attachShadow({ mode: "open" });
|
||||
const inner = document.createElement("div");
|
||||
// Read-only: a signature is inserted/removed as a unit, not edited inline.
|
||||
inner.contentEditable = "false";
|
||||
inner.innerHTML = node.attrs.html || "";
|
||||
shadow.appendChild(inner);
|
||||
|
||||
return {
|
||||
dom,
|
||||
// ProseMirror must not try to reconcile the foreign shadow content.
|
||||
ignoreMutation: () => true,
|
||||
// Let ProseMirror handle all events so clicking selects the atom and
|
||||
// Backspace/Delete removes the whole signature.
|
||||
stopEvent: () => false,
|
||||
update: (updatedNode) => {
|
||||
if (updatedNode.type.name !== "signatureBlock") return false;
|
||||
if (inner.innerHTML !== (updatedNode.attrs.html || "")) {
|
||||
inner.innerHTML = updatedNode.attrs.html || "";
|
||||
}
|
||||
return true;
|
||||
},
|
||||
};
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Build the editor-content wrapper that embeds the signature as a single
|
||||
* SignatureBlock node. The inner HTML must be pre-sanitized
|
||||
* (sanitizeSignatureHtml). The `data-signature-block-node` marker is what
|
||||
* parseHTML keys on, so this exact form must be what serializeEditorContent
|
||||
* emits too (round-trip consistency).
|
||||
*/
|
||||
export function buildSignatureBlock(sanitizedInnerHtml: string): string {
|
||||
return `<div ${SIGNATURE_BLOCK_MARKER}>${sanitizedInnerHtml}</div>`;
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { ShieldCheck, ShieldAlert, ShieldX, Lock, LockOpen, AlertTriangle, Info } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { SmimeStatus } from "@/lib/smime/types";
|
||||
|
||||
interface SmimeStatusBannerProps {
|
||||
status: SmimeStatus;
|
||||
onUnlockKey?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type SmimeVariant = 'success' | 'warning' | 'error' | 'info';
|
||||
|
||||
const variantTone: Record<SmimeVariant, string> = {
|
||||
success: 'bg-success/15 text-success',
|
||||
warning: 'bg-warning/15 text-warning',
|
||||
error: 'bg-destructive/15 text-destructive',
|
||||
info: 'bg-info/15 text-info',
|
||||
};
|
||||
|
||||
export function SmimeStatusBanner({ status, onUnlockKey, className }: SmimeStatusBannerProps) {
|
||||
const t = useTranslations('smime');
|
||||
|
||||
const items: Array<{
|
||||
icon: React.ReactNode;
|
||||
text: string;
|
||||
variant: SmimeVariant;
|
||||
}> = [];
|
||||
|
||||
// Encryption status
|
||||
if (status.isEncrypted) {
|
||||
if (status.decryptionError) {
|
||||
if (status.decryptionError === 'locked') {
|
||||
items.push({
|
||||
icon: <Lock className="w-5 h-5" />,
|
||||
text: t('unlock_key_desc'),
|
||||
variant: 'warning',
|
||||
});
|
||||
} else if (status.decryptionError === 'no-key') {
|
||||
items.push({
|
||||
icon: <Lock className="w-5 h-5" />,
|
||||
text: t('status_encrypted_no_key'),
|
||||
variant: 'warning',
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
icon: <ShieldX className="w-5 h-5" />,
|
||||
text: t('status_encrypted_failed'),
|
||||
variant: 'error',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
items.push({
|
||||
icon: <LockOpen className="w-5 h-5" />,
|
||||
text: t('status_encrypted_ok'),
|
||||
variant: 'success',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Signature status
|
||||
if (status.isSigned) {
|
||||
if (status.signatureValid === true) {
|
||||
if (status.selfSigned) {
|
||||
items.push({
|
||||
icon: <AlertTriangle className="w-5 h-5" />,
|
||||
text: t('status_signed_self_signed'),
|
||||
variant: 'warning',
|
||||
});
|
||||
} else if (status.signerEmailMatch === false) {
|
||||
items.push({
|
||||
icon: <AlertTriangle className="w-5 h-5" />,
|
||||
text: t('status_signed_mismatch'),
|
||||
variant: 'warning',
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
icon: <ShieldCheck className="w-5 h-5" />,
|
||||
text: t('status_signed_valid'),
|
||||
variant: 'success',
|
||||
});
|
||||
}
|
||||
} else if (status.signatureValid === false) {
|
||||
items.push({
|
||||
icon: <ShieldAlert className="w-5 h-5" />,
|
||||
text: status.signatureError || t('status_signed_invalid'),
|
||||
variant: 'error',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Unsupported S/MIME
|
||||
if (status.unsupportedReason) {
|
||||
items.push({
|
||||
icon: <Info className="w-5 h-5" />,
|
||||
text: t('status_unsupported'),
|
||||
variant: 'info',
|
||||
});
|
||||
}
|
||||
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-3 py-1", className)}>
|
||||
{items.map((item, i) => (
|
||||
<div key={i} className="flex items-start gap-3">
|
||||
<div className={cn(
|
||||
"w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 shadow-sm",
|
||||
variantTone[item.variant],
|
||||
)}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0 flex items-center justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
S/MIME
|
||||
</div>
|
||||
<div className="text-sm font-medium text-foreground break-words">
|
||||
{item.text}
|
||||
</div>
|
||||
</div>
|
||||
{item.variant === 'warning' && status.decryptionError === 'locked' && onUnlockKey && (
|
||||
<button
|
||||
onClick={onUnlockKey}
|
||||
className="text-xs font-medium underline hover:no-underline flex-shrink-0"
|
||||
>
|
||||
{t('unlock_key')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import React, { useCallback } from "react";
|
||||
import { formatDate, formatDateTime, stripInvisibleLeading } from "@/lib/utils";
|
||||
import { Email, ThreadGroup } from "@/lib/jmap/types";
|
||||
import { Email, ThreadGroup, ALL_MAIL_MAILBOX_ID } from "@/lib/jmap/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock } from "lucide-react";
|
||||
import { Paperclip, Star, Circle, ChevronRight, ChevronDown, Loader2, MessageSquare, CheckSquare, Square, Reply, Forward, CalendarClock, Folder } from "lucide-react";
|
||||
import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";
|
||||
import { useUIStore } from "@/stores/ui-store";
|
||||
import { useEmailStore } from "@/stores/email-store";
|
||||
@@ -17,6 +17,23 @@ import { ThreadEmailItem } from "./thread-email-item";
|
||||
import { EmailHoverActions } from "./email-hover-actions";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
/**
|
||||
* Small chip showing the originating folder of a message, rendered in the
|
||||
* aggregate "All …" views (All Mail / unified / cross-account) where rows come
|
||||
* from different folders. `email.sourceFolder` is stamped at fetch time.
|
||||
*/
|
||||
function SourceFolderTag({ name }: { name: string }) {
|
||||
return (
|
||||
<span
|
||||
className="inline-flex max-w-[8rem] shrink-0 items-center gap-1 truncate rounded-full border border-border bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground"
|
||||
title={name}
|
||||
>
|
||||
<Folder className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">{name}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface ThreadListItemProps {
|
||||
thread: ThreadGroup;
|
||||
isExpanded: boolean;
|
||||
@@ -24,6 +41,7 @@ interface ThreadListItemProps {
|
||||
isLoading?: boolean;
|
||||
expandedEmails?: Email[];
|
||||
onToggleExpand: () => void;
|
||||
onCollapseAllThreads?: () => void;
|
||||
onEmailSelect: (email: Email) => void;
|
||||
onEmailDoubleClick?: (email: Email) => void;
|
||||
onContextMenu?: (e: React.MouseEvent, email: Email) => void;
|
||||
@@ -34,6 +52,7 @@ interface ThreadListItemProps {
|
||||
onArchive?: (email: Email) => void;
|
||||
onSetColorTag?: (emailId: string, color: string | null) => void;
|
||||
onMarkAsSpam?: (email: Email) => void;
|
||||
onUndoSpam?: (email: Email) => void;
|
||||
}
|
||||
|
||||
interface SingleEmailItemProps {
|
||||
@@ -50,18 +69,22 @@ interface SingleEmailItemProps {
|
||||
onArchive?: () => void;
|
||||
onSetColorTag?: (color: string | null) => void;
|
||||
onMarkAsSpam?: () => void;
|
||||
onUndoSpam?: () => void;
|
||||
}
|
||||
|
||||
const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam }, ref) {
|
||||
function SingleEmailItem({ email, selected, onClick, onDoubleClick, onContextMenu, showPreview, colorTag, onToggleStar, onMarkAsRead, onDelete, onArchive, onSetColorTag, onMarkAsSpam, onUndoSpam }, ref) {
|
||||
const t = useTranslations('email_viewer');
|
||||
const isUnread = !email.keywords?.$seen;
|
||||
const isStarred = email.keywords?.$flagged;
|
||||
const isAnswered = email.keywords?.$answered;
|
||||
const isForwarded = email.keywords?.$forwarded;
|
||||
const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection } = useEmailStore();
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always "me")
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
|
||||
const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always
|
||||
// "me"). In aggregate role-views the selected mailbox is virtual → fall back
|
||||
// to the unified role so junk-contextual UI and avatar hiding work.
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
|
||||
?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
|
||||
const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
|
||||
const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0];
|
||||
const emailKeywords = useSettingsStore((state) => state.emailKeywords);
|
||||
@@ -70,7 +93,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
const timeFormat = useSettingsStore((state) => state.timeFormat);
|
||||
const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk);
|
||||
const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk;
|
||||
const isUnifiedView = useEmailStore((state) => state.isUnifiedView);
|
||||
// Show the originating folder in the aggregate "All …" views.
|
||||
const showSourceFolder = (isUnifiedView || selectedMailbox === ALL_MAIL_MAILBOX_ID) && !!email.sourceFolder;
|
||||
const getAccountById = useAccountStore((state) => state.getAccountById);
|
||||
const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined;
|
||||
const isChecked = selectedEmailIds.has(email.id);
|
||||
@@ -187,7 +211,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
)}
|
||||
|
||||
{isUnread && (
|
||||
<div className="absolute left-1 top-1/2 -translate-y-1/2">
|
||||
<div className="absolute left-0.5 top-1/2 -translate-y-1/2">
|
||||
<Circle className="w-2 h-2 fill-unread text-unread" />
|
||||
</div>
|
||||
)}
|
||||
@@ -221,13 +245,13 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
|
||||
<span className={cn(
|
||||
'shrink-0 truncate',
|
||||
'min-w-0 truncate',
|
||||
isUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{email.subject || '(no subject)'}
|
||||
</span>
|
||||
{inlinePreview && (
|
||||
<span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
|
||||
<span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -245,6 +269,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
{resolvedKeywordDefs.map((kd) => (
|
||||
<span key={kd.id} className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[kd.color]?.dot || 'bg-gray-400')} />
|
||||
))}
|
||||
{showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
|
||||
{scheduledSendLabel ? (
|
||||
<span
|
||||
className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
|
||||
@@ -313,6 +338,7 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
{kd.label}
|
||||
</span>
|
||||
))}
|
||||
{showSourceFolder && <SourceFolderTag name={email.sourceFolder!} />}
|
||||
{scheduledSendLabel ? (
|
||||
<span
|
||||
className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
|
||||
@@ -369,6 +395,8 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
|
||||
onArchive={onArchive}
|
||||
onSetColorTag={onSetColorTag}
|
||||
onMarkAsSpam={onMarkAsSpam}
|
||||
onUndoSpam={onUndoSpam}
|
||||
isInJunk={currentMailboxRole === 'junk'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -384,6 +412,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
isLoading = false,
|
||||
expandedEmails,
|
||||
onToggleExpand,
|
||||
onCollapseAllThreads,
|
||||
onEmailSelect,
|
||||
onEmailDoubleClick,
|
||||
onContextMenu,
|
||||
@@ -394,6 +423,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
onArchive,
|
||||
onSetColorTag,
|
||||
onMarkAsSpam,
|
||||
onUndoSpam,
|
||||
}, ref) {
|
||||
const t = useTranslations('threads');
|
||||
const tEmailViewer = useTranslations('email_viewer');
|
||||
@@ -412,11 +442,15 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
? formatDateTime(latestEmail.scheduledSendAt, timeFormat)
|
||||
: null;
|
||||
|
||||
const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView } = useEmailStore();
|
||||
const { selectedMailbox, mailboxes, selectedEmailIds, toggleEmailSelection, selectRangeEmails, clearSelection, isUnifiedView, unifiedRole } = useEmailStore();
|
||||
const showSourceFolder = (isUnifiedView || selectedMailbox === ALL_MAIL_MAILBOX_ID) && !!latestEmail.sourceFolder;
|
||||
const getAccountById = useAccountStore((state) => state.getAccountById);
|
||||
const threadAccountColor = latestEmail.accountId ? getAccountById(latestEmail.accountId)?.avatarColor : undefined;
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always "me")
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role;
|
||||
// In Sent/Drafts folders, show recipient instead of sender (which is always
|
||||
// "me"). Aggregate role-views use a virtual selected mailbox → fall back to
|
||||
// the unified role so junk-contextual UI and avatar hiding work.
|
||||
const currentMailboxRole = mailboxes.find(mb => mb.id === selectedMailbox)?.role
|
||||
?? (isUnifiedView ? (unifiedRole ?? undefined) : undefined);
|
||||
const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts';
|
||||
const displayNames = showRecipient
|
||||
? Array.from(new Set(
|
||||
@@ -470,6 +504,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
|
||||
onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
|
||||
onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
|
||||
onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -515,6 +550,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
} else {
|
||||
if (selectedEmailIds.size > 0) clearSelection();
|
||||
if (!isExpanded) {
|
||||
onCollapseAllThreads?.();
|
||||
onToggleExpand();
|
||||
}
|
||||
onEmailSelect(latestEmail);
|
||||
@@ -581,46 +617,49 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!isMobile && !isFocusedMailLayout && (
|
||||
<button
|
||||
data-expand-toggle
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
className={cn(
|
||||
"p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
|
||||
"hover:bg-muted/50 hover:scale-110",
|
||||
"active:scale-95",
|
||||
"text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
aria-expanded={isExpanded}
|
||||
aria-label={t('toggle_thread')}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : isExpanded ? (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{hasUnread && (
|
||||
<div className="absolute left-1 top-1/2 -translate-y-1/2">
|
||||
<div className="absolute left-0.5 top-1/2 -translate-y-1/2">
|
||||
<Circle className="w-2 h-2 fill-unread text-unread" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{density !== 'extra-compact' && (
|
||||
<Avatar
|
||||
name={avatarPerson?.name}
|
||||
email={avatarPerson?.email}
|
||||
size={isFocusedMailLayout ? "sm" : "md"}
|
||||
className="flex-shrink-0 shadow-sm"
|
||||
disableImages={hideJunkAvatarImages}
|
||||
/>
|
||||
<div className="relative flex-shrink-0">
|
||||
<Avatar
|
||||
name={avatarPerson?.name}
|
||||
email={avatarPerson?.email}
|
||||
size={isFocusedMailLayout ? "sm" : "md"}
|
||||
className="shadow-sm"
|
||||
disableImages={hideJunkAvatarImages}
|
||||
/>
|
||||
{!isMobile && !isFocusedMailLayout && (
|
||||
<button
|
||||
data-expand-toggle
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleExpand();
|
||||
}}
|
||||
className={cn(
|
||||
"absolute -bottom-2.5 left-1/2 -translate-x-1/2 p-0.5 rounded-full",
|
||||
"transition-all duration-200",
|
||||
"hover:bg-muted/50 hover:scale-110",
|
||||
"active:scale-95",
|
||||
"text-muted-foreground hover:text-foreground",
|
||||
"bg-background border border-border"
|
||||
)}
|
||||
aria-expanded={isExpanded}
|
||||
aria-label={t('toggle_thread')}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
) : isExpanded ? (
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
) : (
|
||||
<ChevronRight className="w-3 h-3" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
@@ -652,13 +691,13 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
</span>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 text-sm">
|
||||
<span className={cn(
|
||||
'shrink-0 truncate',
|
||||
'min-w-0 truncate',
|
||||
hasUnread ? 'font-semibold text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{latestEmail.subject || '(no subject)'}
|
||||
</span>
|
||||
{inlinePreview && (
|
||||
<span className="min-w-0 truncate text-muted-foreground">{inlinePreview}</span>
|
||||
<span className="min-w-0 shrink-[9999] truncate text-muted-foreground">{inlinePreview}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -676,6 +715,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
{keywordDef && (
|
||||
<span className={cn('h-2.5 w-2.5 rounded-full', KEYWORD_PALETTE[keywordDef.color]?.dot || 'bg-gray-400')} />
|
||||
)}
|
||||
{showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
|
||||
{scheduledSendLabel ? (
|
||||
<span
|
||||
className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-xs font-medium tabular-nums text-sky-700 dark:text-sky-300"
|
||||
@@ -756,6 +796,7 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
{keywordDef.label}
|
||||
</span>
|
||||
)}
|
||||
{showSourceFolder && <SourceFolderTag name={latestEmail.sourceFolder!} />}
|
||||
{scheduledSendLabel ? (
|
||||
<span
|
||||
className="inline-flex max-w-[11rem] shrink-0 items-center gap-1 truncate rounded-full border border-sky-500/20 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium tabular-nums text-sky-700 dark:text-sky-300"
|
||||
@@ -812,6 +853,8 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
|
||||
onArchive={onArchive ? () => onArchive(latestEmail) : undefined}
|
||||
onSetColorTag={onSetColorTag ? (color) => onSetColorTag(latestEmail.id, color) : undefined}
|
||||
onMarkAsSpam={onMarkAsSpam ? () => onMarkAsSpam(latestEmail) : undefined}
|
||||
onUndoSpam={onUndoSpam ? () => onUndoSpam(latestEmail) : undefined}
|
||||
isInJunk={currentMailboxRole === 'junk'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
AlertCircle, Star, Clock, FolderUp,
|
||||
FileArchive, FileSpreadsheet, Presentation, FileCode,
|
||||
Box, PenTool, Terminal as TerminalIcon, Database, Type as TypeIcon,
|
||||
Menu,
|
||||
Menu, Users, Share2,
|
||||
} from "lucide-react";
|
||||
import { useIsDesktop } from "@/hooks/use-media-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -26,6 +26,9 @@ import { ResizeHandle } from "@/components/layout/resize-handle";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { getDroppedFilesAndFolders } from "@/lib/webdav/drop-utils";
|
||||
import type { FileResource } from "@/stores/file-store";
|
||||
import { ShareCollectionDialog } from "@/components/settings/share-collection-dialog";
|
||||
import type { IJMAPClient } from "@/lib/jmap/client-interface";
|
||||
import type { FileNodeRights } from "@/lib/jmap/types";
|
||||
|
||||
type SortKey = "name" | "size" | "modified";
|
||||
type SortDir = "asc" | "desc";
|
||||
@@ -95,6 +98,14 @@ interface FileBrowserProps {
|
||||
accountPickerMode?: boolean;
|
||||
/** Pro shell only: label of the currently-attached account, shown as a breadcrumb segment after Home. */
|
||||
accountLabel?: string | null;
|
||||
/** JMAP client for the browsing account, used by the share dialog to list principals. */
|
||||
client?: IJMAPClient | null;
|
||||
/** Files account id of the browsing account; used to exclude self from the share picker. */
|
||||
ownAccountId?: string | null;
|
||||
/** True when the server supports JMAP Sharing (principals); gates the Share action. */
|
||||
sharingEnabled?: boolean;
|
||||
/** Add/update/remove a principal's share on a node. Set null rights to revoke. */
|
||||
onShare?: (id: string, principalId: string, rights: FileNodeRights | null) => Promise<void>;
|
||||
}
|
||||
|
||||
const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp", "ico", "avif"]);
|
||||
@@ -230,6 +241,33 @@ function getGridIcon(resource: FileResource) {
|
||||
return getFileIconByName(resource.name, "lg");
|
||||
}
|
||||
|
||||
// Small inline indicator: a node shared out by the user (shareWith has entries)
|
||||
// or a node shared *with* the user by another principal (isShared).
|
||||
function ShareBadge({ resource, t }: { resource: FileResource; t: (key: string) => string }) {
|
||||
const sharedOut = !!resource.shareWith && Object.keys(resource.shareWith).length > 0;
|
||||
if (resource.isShared) {
|
||||
return (
|
||||
<Share2
|
||||
className="w-3.5 h-3.5 text-primary shrink-0"
|
||||
aria-label={t("shared_with_me")}
|
||||
>
|
||||
<title>{t("shared_with_me")}</title>
|
||||
</Share2>
|
||||
);
|
||||
}
|
||||
if (sharedOut) {
|
||||
return (
|
||||
<Users
|
||||
className="w-3.5 h-3.5 text-primary shrink-0"
|
||||
aria-label={t("shared")}
|
||||
>
|
||||
<title>{t("shared")}</title>
|
||||
</Users>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function Thumbnail({ name, getImageUrl: fetchUrl, size = "sm" }: {
|
||||
name: string;
|
||||
getImageUrl: (n: string) => Promise<string>;
|
||||
@@ -342,11 +380,25 @@ export function FileBrowser({
|
||||
onSelectAccount,
|
||||
accountPickerMode,
|
||||
accountLabel,
|
||||
client,
|
||||
ownAccountId,
|
||||
sharingEnabled,
|
||||
onShare,
|
||||
}: FileBrowserProps) {
|
||||
const t = useTranslations("files");
|
||||
const [showNewFolder, setShowNewFolder] = useState(false);
|
||||
const [renameTarget, setRenameTarget] = useState<string | null>(null);
|
||||
const [shareTargetId, setShareTargetId] = useState<string | null>(null);
|
||||
const [isDraggingOver, setIsDraggingOver] = useState(false);
|
||||
// The share dialog is bound to a node id (not name) so its shareWith stays
|
||||
// live after a share refresh re-derives the resource list.
|
||||
const shareTarget = shareTargetId ? resources.find(r => r.id === shareTargetId) ?? null : null;
|
||||
// A node is shareable when the server supports JMAP Sharing, the viewer owns
|
||||
// it (not a shared-with-me node), and holds the mayShare right (owned nodes
|
||||
// report full rights; treat missing myRights as allowed).
|
||||
const canShare = useCallback((r: FileResource | null | undefined): boolean =>
|
||||
!!(sharingEnabled && onShare && client && r && !r.isShared && (r.myRights?.mayShare ?? true)),
|
||||
[sharingEnabled, onShare, client]);
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; name: string } | null>(null);
|
||||
const [emptyContextMenu, setEmptyContextMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const [showNewTextFile, setShowNewTextFile] = useState(false);
|
||||
@@ -1440,8 +1492,9 @@ export function FileBrowser({
|
||||
{showThumbnails && isImageFile(resource.name)
|
||||
? <Thumbnail name={resource.name} getImageUrl={getImageUrl} size="lg" />
|
||||
: getGridIcon(resource)}
|
||||
<span className="text-xs truncate w-full text-center" title={resource.name}>
|
||||
{resource.name}
|
||||
<span className="text-xs truncate w-full text-center flex items-center justify-center gap-1" title={resource.name}>
|
||||
<span className="truncate">{resource.name}</span>
|
||||
<ShareBadge resource={resource} t={t} />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -1590,6 +1643,7 @@ export function FileBrowser({
|
||||
? <Thumbnail name={resource.name} getImageUrl={getImageUrl} size="sm" />
|
||||
: getFileIcon(resource)}
|
||||
<span className="truncate">{resource.name}</span>
|
||||
<ShareBadge resource={resource} t={t} />
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-muted-foreground hidden md:table-cell tabular-nums">
|
||||
@@ -1697,6 +1751,19 @@ export function FileBrowser({
|
||||
{t("duplicate")}
|
||||
</button>
|
||||
)}
|
||||
{canShare(resources.find(r => r.name === contextMenu.name)) && (
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted transition-colors text-left"
|
||||
onClick={() => {
|
||||
const r = resources.find(res => res.name === contextMenu.name);
|
||||
if (r) setShareTargetId(r.id);
|
||||
setContextMenu(null);
|
||||
}}
|
||||
>
|
||||
<Share2 className="w-4 h-4" />
|
||||
{t("share")}
|
||||
</button>
|
||||
)}
|
||||
<div className="h-px bg-border my-1" />
|
||||
<button
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted transition-colors text-left"
|
||||
@@ -1936,6 +2003,20 @@ export function FileBrowser({
|
||||
onCancel={() => setRenameTarget(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Share dialog */}
|
||||
{shareTarget && client && onShare && (
|
||||
<ShareCollectionDialog
|
||||
client={client}
|
||||
kind="file"
|
||||
collectionName={shareTarget.name}
|
||||
shareWith={shareTarget.shareWith}
|
||||
ownAccountId={ownAccountId || ""}
|
||||
onShare={(principalId, rights) =>
|
||||
onShare(shareTarget.id, principalId, rights as FileNodeRights | null)}
|
||||
onClose={() => setShareTargetId(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Home,
|
||||
Share2,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useFileStore, type FileResource } from "@/stores/file-store";
|
||||
@@ -29,6 +30,8 @@ interface FolderTreeSidebarProps {
|
||||
export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, width = 256, isResizing }: FolderTreeSidebarProps) {
|
||||
const t = useTranslations("files");
|
||||
const client = useFileStore(s => s.client);
|
||||
const sharedRoots = useFileStore(s => s.sharedRoots);
|
||||
const loadSharedRoots = useFileStore(s => s.loadSharedRoots);
|
||||
const [rootChildren, setRootChildren] = useState<FolderNode[] | null>(null);
|
||||
const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(["root"]));
|
||||
const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());
|
||||
@@ -81,6 +84,8 @@ export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, wid
|
||||
useEffect(() => {
|
||||
if (client) {
|
||||
loadChildren(null, "/");
|
||||
// Discover folders shared with the user by other principals.
|
||||
loadSharedRoots();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [client]);
|
||||
@@ -180,6 +185,40 @@ export function FolderTreeSidebar({ currentPath, onNavigate, listByParentId, wid
|
||||
/>
|
||||
))
|
||||
)}
|
||||
|
||||
{/* Shared with me: folders another principal has shared with the user */}
|
||||
{sharedRoots.filter(r => r.isDirectory).length > 0 && (
|
||||
<div className="mt-2 pt-2 border-t border-border/60">
|
||||
<div className="px-3 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
|
||||
<Share2 className="w-3 h-3" />
|
||||
<span className="truncate">{t("shared_with_me")}</span>
|
||||
</div>
|
||||
{sharedRoots.filter(r => r.isDirectory).map(r => {
|
||||
const path = `/${r.name}`;
|
||||
const isSelected = currentPath === path;
|
||||
return (
|
||||
<div
|
||||
key={r.id}
|
||||
style={{ paddingBlock: "var(--density-sidebar-py)" }}
|
||||
className={cn(
|
||||
"group w-full flex items-center max-lg:min-h-[44px] text-sm transition-all duration-200 px-2",
|
||||
isSelected ? "bg-accent text-accent-foreground" : "hover:bg-muted text-foreground"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
onClick={() => handleFolderClick(path, r.id)}
|
||||
className="flex items-center px-1 rounded transition-colors duration-150 flex-1 text-left min-w-0"
|
||||
style={{ paddingBlock: "var(--density-sidebar-py)", paddingLeft: "24px" }}
|
||||
title={r.ownerName ? t("shared_by", { name: r.ownerName }) : r.name}
|
||||
>
|
||||
<Folder className="w-4 h-4 flex-shrink-0 mr-2 text-primary" />
|
||||
<span className="truncate">{r.name}</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,6 +9,7 @@ import { ConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import { IdentityForm } from './identity-form';
|
||||
import { useIdentityStore } from '@/stores/identity-store';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
|
||||
function useSyncIdentities() {
|
||||
const syncIdentities = useAuthStore((state) => state.syncIdentities);
|
||||
@@ -206,6 +207,17 @@ export function IdentityManagerModal({ isOpen, onClose }: IdentityManagerModalPr
|
||||
|
||||
const handleSetPrimary = useCallback((identity: Identity) => {
|
||||
setPreferredPrimary(identity.id);
|
||||
// Persist to the synced settings (keyed by username, matching how
|
||||
// loadIdentities reads it back) so the choice survives a new browser /
|
||||
// cleared site data and reaches other devices (#507).
|
||||
const username = useAuthStore.getState().username || '';
|
||||
if (username) {
|
||||
const current = useSettingsStore.getState().preferredIdentityIds;
|
||||
useSettingsStore.getState().updateSetting('preferredIdentityIds', {
|
||||
...current,
|
||||
[username]: identity.id,
|
||||
});
|
||||
}
|
||||
// Re-sort: move the preferred identity to the front
|
||||
const reordered = [identity, ...identities.filter((id) => id.id !== identity.id)];
|
||||
useIdentityStore.getState().setIdentities(reordered);
|
||||
|
||||
@@ -166,7 +166,6 @@ export function NavigationRail({
|
||||
collapsed = false,
|
||||
className,
|
||||
quota,
|
||||
isPushConnected,
|
||||
onLogout,
|
||||
onShowShortcuts,
|
||||
onManageApps,
|
||||
@@ -191,6 +190,7 @@ export function NavigationRail({
|
||||
const sidebarAppsEnabled = usePolicyStore((s) => s.isFeatureEnabled('sidebarAppsEnabled'));
|
||||
const filesEnabled = usePolicyStore((s) => s.isFeatureEnabled('filesEnabled'));
|
||||
const contactsEnabled = usePolicyStore((s) => s.isFeatureEnabled('contactsEnabled'));
|
||||
const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
|
||||
const visibleSidebarApps = sidebarAppsEnabled ? sidebarApps : [];
|
||||
const inboxUnread = mailboxes.find(m => m.role === "inbox")?.unreadEmails || 0;
|
||||
const [isStalwartAdmin, setIsStalwartAdmin] = useState(false);
|
||||
@@ -269,7 +269,7 @@ export function NavigationRail({
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: "mail", icon: Mail, labelKey: "mail", href: "/", badge: inboxUnread },
|
||||
{ id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar },
|
||||
{ id: "calendar", icon: Calendar, labelKey: "calendar", href: "/calendar", hidden: !supportsCalendar || !calendarEnabled },
|
||||
{ id: "contacts", icon: BookUser, labelKey: "contacts", href: "/contacts", hidden: !supportsContacts || !contactsEnabled },
|
||||
{ id: "files", icon: HardDrive, labelKey: "files", href: "/files", hidden: !supportsFiles || !filesEnabled },
|
||||
];
|
||||
@@ -546,7 +546,7 @@ export function NavigationRail({
|
||||
})}
|
||||
|
||||
{/* Manage apps button */}
|
||||
{onManageApps && (
|
||||
{sidebarAppsEnabled && onManageApps && (
|
||||
<button
|
||||
onClick={onManageApps}
|
||||
className={cn(
|
||||
|
||||
@@ -33,13 +33,16 @@ import {
|
||||
NotebookPen,
|
||||
CalendarClock,
|
||||
BellOff,
|
||||
Mails,
|
||||
MailOpen,
|
||||
} from "lucide-react";
|
||||
import { cn, buildMailboxTree, MailboxNode } from "@/lib/utils";
|
||||
import { localizeMailboxName } from "@/lib/mailbox-label";
|
||||
import { Mailbox } from "@/lib/jmap/types";
|
||||
import { useContextMenu } from "@/hooks/use-context-menu";
|
||||
import { MailboxContextMenu, type MailboxContextTarget } from "./mailbox-context-menu";
|
||||
import { useAccountStore } from '@/stores/account-store';
|
||||
import { UNIFIED_MAILBOX_IDS } from '@/lib/jmap/types';
|
||||
import { UNIFIED_MAILBOX_IDS, CROSS_VIEW_IDS } from '@/lib/jmap/types';
|
||||
import type { UnifiedMailboxRole } from '@/lib/jmap/types';
|
||||
import { useDragDropContext } from "@/contexts/drag-drop-context";
|
||||
import { useMailboxDrop } from "@/hooks/use-mailbox-drop";
|
||||
@@ -76,6 +79,14 @@ interface SidebarProps {
|
||||
onRefreshMailboxes?: () => void;
|
||||
scheduledTotal?: number;
|
||||
showScheduledMailbox?: boolean;
|
||||
/** Gated "All Mail" virtual folder that merges all of the account's folders. */
|
||||
showAllMailMailbox?: boolean;
|
||||
/** Gated cross-account views in the "All accounts" section. */
|
||||
showCrossUnread?: boolean;
|
||||
showCrossStarred?: boolean;
|
||||
showCrossAll?: boolean;
|
||||
/** Unread total across all cross-view folders (badge for unread/all). */
|
||||
crossUnreadCount?: number;
|
||||
className?: string;
|
||||
/**
|
||||
* Multi-account (Pro) mode props. When `multiAccountMode` is true, the
|
||||
@@ -166,7 +177,6 @@ function getIconClass(isSelected: boolean, isVirtual: boolean, colorful: boolean
|
||||
function SidebarRowCounts({
|
||||
unread,
|
||||
total,
|
||||
isSelected,
|
||||
onUnreadClick,
|
||||
}: {
|
||||
unread?: number;
|
||||
@@ -174,8 +184,9 @@ function SidebarRowCounts({
|
||||
isSelected: boolean;
|
||||
onUnreadClick?: () => void;
|
||||
}) {
|
||||
const showFolderTotalCount = useSettingsStore(s => s.showFolderTotalCount);
|
||||
const unreadCount = unread ?? 0;
|
||||
const totalCount = total ?? 0;
|
||||
const totalCount = showFolderTotalCount ? (total ?? 0) : 0;
|
||||
|
||||
if (unreadCount === 0 && totalCount === 0) return null;
|
||||
|
||||
@@ -209,7 +220,7 @@ function SidebarRowCounts({
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<span className="ml-2 flex-shrink-0 flex items-baseline gap-1" title={`${unreadCount} unread / ${totalCount} total`}>
|
||||
<span className="ml-2 flex-shrink-0 flex items-baseline gap-1" title={totalCount > 0 ? `${unreadCount} unread / ${totalCount} total` : `${unreadCount} unread`}>
|
||||
{unreadNode}
|
||||
{unreadCount > 0 && totalCount > 0 && (
|
||||
<span className="text-xs text-muted-foreground/60">/</span>
|
||||
@@ -430,12 +441,14 @@ function MailboxTreeItem({
|
||||
onContextMenu?: (e: React.MouseEvent, node: MailboxNode) => void;
|
||||
}) {
|
||||
const tNotifications = useTranslations('notifications');
|
||||
const tSidebar = useTranslations('sidebar');
|
||||
const hasChildren = node.children.length > 0;
|
||||
const isExpanded = expandedFolders.has(node.id);
|
||||
const Icon = getIconForMailbox(node.role, node.name, hasChildren, isExpanded, node.isShared, node.id);
|
||||
const isVirtualNode = node.id.startsWith('shared-');
|
||||
const isSelected = selectedMailbox === node.id;
|
||||
const roleKey = resolveRoleKey(node.role, node.name);
|
||||
const label = localizeMailboxName(node.role, node.name, (k) => tSidebar(`mailboxes.${k}`));
|
||||
|
||||
const { isDragging: globalDragging } = useDragDropContext();
|
||||
const { dropHandlers, isValidDropTarget, isInvalidDropTarget } = useMailboxDrop({
|
||||
@@ -462,7 +475,7 @@ function MailboxTreeItem({
|
||||
<>
|
||||
<SidebarRow
|
||||
icon={<Icon className={getIconClass(isSelected, isVirtualNode, colorful, roleKey)} />}
|
||||
label={node.name}
|
||||
label={label}
|
||||
depth={node.depth}
|
||||
isSelected={isSelected}
|
||||
isVirtual={isVirtualNode}
|
||||
@@ -678,6 +691,11 @@ export function Sidebar({
|
||||
onRefreshMailboxes,
|
||||
scheduledTotal = 0,
|
||||
showScheduledMailbox = false,
|
||||
showAllMailMailbox = false,
|
||||
showCrossUnread = false,
|
||||
showCrossStarred = false,
|
||||
showCrossAll = false,
|
||||
crossUnreadCount = 0,
|
||||
className,
|
||||
multiAccountMode = false,
|
||||
accountMailboxes,
|
||||
@@ -793,8 +811,14 @@ export function Sidebar({
|
||||
});
|
||||
};
|
||||
|
||||
// When the app renders its own virtual "Scheduled" folder (for delayed
|
||||
// sends, driven by EmailSubmission), hide the server-provided scheduled
|
||||
// mailbox (e.g. Stalwart's auto-created Scheduled folder, role === 'scheduled')
|
||||
// so it does not appear twice. (#495)
|
||||
const isServerScheduledNode = (n: MailboxNode) => showScheduledMailbox && n.role === 'scheduled';
|
||||
|
||||
const mailboxTree = buildMailboxTree(mailboxes);
|
||||
const ownTree = mailboxTree.filter(n => !n.id.startsWith('shared-account-'));
|
||||
const ownTree = mailboxTree.filter(n => !n.id.startsWith('shared-account-') && !isServerScheduledNode(n));
|
||||
const sharedAccounts = mailboxTree.filter(n => n.id.startsWith('shared-account-'));
|
||||
|
||||
// Multi-account mode (Pro shell): render every connected account as its
|
||||
@@ -809,7 +833,7 @@ export function Sidebar({
|
||||
? mailboxes
|
||||
: (accountMailboxes?.[account.id] ?? []);
|
||||
const tree = buildMailboxTree(accountMailboxList).filter(
|
||||
(n) => !n.id.startsWith('shared-account-')
|
||||
(n) => !n.id.startsWith('shared-account-') && !(isActive && isServerScheduledNode(n))
|
||||
);
|
||||
return { account, isActive, tree };
|
||||
})
|
||||
@@ -978,7 +1002,17 @@ export function Sidebar({
|
||||
|
||||
{/* Mailbox List */}
|
||||
<div className="flex-1 overflow-y-auto" data-tour="sidebar">
|
||||
{showUnified && (
|
||||
{showAllMailMailbox && (
|
||||
<SidebarRow
|
||||
icon={<Mails className={cn("w-4 h-4 flex-shrink-0", selectedMailbox === '__all_mail__' ? "text-foreground" : "text-muted-foreground")} />}
|
||||
label={t('mailboxes.all_mail')}
|
||||
depth={0}
|
||||
isSelected={!selectedKeyword && selectedMailbox === '__all_mail__'}
|
||||
onClick={() => onMailboxSelect?.('__all_mail__')}
|
||||
isCollapsed={isCollapsed}
|
||||
/>
|
||||
)}
|
||||
{(showUnified || showCrossUnread || showCrossStarred || showCrossAll) && (
|
||||
<div>
|
||||
<SidebarSectionHeader
|
||||
label={t("all_accounts")}
|
||||
@@ -989,7 +1023,7 @@ export function Sidebar({
|
||||
/>
|
||||
{((unifiedExpanded && !isCollapsed) || isCollapsed) && (
|
||||
<>
|
||||
{unifiedCounts.map((count) => {
|
||||
{showUnified && unifiedCounts.map((count) => {
|
||||
const unifiedId = UNIFIED_MAILBOX_IDS[count.role];
|
||||
const Icon = getUnifiedIcon(count.role);
|
||||
const isSelected = !selectedKeyword && selectedMailbox === unifiedId;
|
||||
@@ -1007,6 +1041,26 @@ export function Sidebar({
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{[
|
||||
{ show: showCrossUnread, id: CROSS_VIEW_IDS.unread, Icon: MailOpen, label: t('unified_all_unread'), unread: crossUnreadCount },
|
||||
{ show: showCrossStarred, id: CROSS_VIEW_IDS.starred, Icon: Star, label: t('unified_all_starred'), unread: undefined as number | undefined },
|
||||
{ show: showCrossAll, id: CROSS_VIEW_IDS.all, Icon: Mails, label: t('unified_all_mail'), unread: crossUnreadCount },
|
||||
].map(({ show, id, Icon, label, unread }) => {
|
||||
if (!show) return null;
|
||||
const isSelected = !selectedKeyword && selectedMailbox === id;
|
||||
return (
|
||||
<SidebarRow
|
||||
key={id}
|
||||
icon={<Icon className={getIconClass(isSelected, false, colorfulSidebarIcons)} />}
|
||||
label={label}
|
||||
depth={0}
|
||||
isSelected={isSelected}
|
||||
unread={unread}
|
||||
onClick={() => onMailboxSelect?.(id)}
|
||||
isCollapsed={isCollapsed}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -52,6 +52,7 @@ export function PluginIframeSlot({ pluginId, slot, extraProps }: Props) {
|
||||
slot,
|
||||
code: active.code,
|
||||
locale,
|
||||
tier: active.tier,
|
||||
extraProps: extraProps ?? {},
|
||||
hostContainer: wrapperRef.current,
|
||||
onResize: (h) => setHeight(h),
|
||||
|
||||
@@ -25,10 +25,9 @@ export function ProComposeTabBody({ tabId, data }: ProComposeTabBodyProps) {
|
||||
const t = useTranslations();
|
||||
const client = useAuthStore((s) => s.client);
|
||||
const sendEmail = useEmailStore((s) => s.sendEmail);
|
||||
const fetchEmails = useEmailStore((s) => s.fetchEmails);
|
||||
const refreshCurrentMailbox = useEmailStore((s) => s.refreshCurrentMailbox);
|
||||
const fetchScheduledEmails = useEmailStore((s) => s.fetchScheduledEmails);
|
||||
const refreshScheduledMetadata = useEmailStore((s) => s.refreshScheduledMetadata);
|
||||
const selectedMailbox = useEmailStore((s) => s.selectedMailbox);
|
||||
const isScheduledView = useEmailStore((s) => s.isScheduledView);
|
||||
const closeTab = useProTabStore((s) => s.closeTab);
|
||||
const updateTabTitle = useProTabStore((s) => s.updateTabTitle);
|
||||
@@ -92,13 +91,30 @@ export function ProComposeTabBody({ tabId, data }: ProComposeTabBodyProps) {
|
||||
|
||||
// Refresh the currently-active mail list so the new sent message /
|
||||
// updated keyword status shows up.
|
||||
await fetchEmails(client, selectedMailbox);
|
||||
await refreshCurrentMailbox(client);
|
||||
// Re-fetch the replied thread's cross-folder data so the expanded
|
||||
// view shows the newly sent reply without collapsing.
|
||||
if (data.sourceEmailId) {
|
||||
const emailState = useEmailStore.getState();
|
||||
const repliedEmail = emailState.emails.find(e => e.id === data.sourceEmailId);
|
||||
if (repliedEmail?.threadId && emailState.expandedThreadIds.has(repliedEmail.threadId)) {
|
||||
const accountId = client.getAccountId();
|
||||
const fullEmails = await client.getThreadEmails(repliedEmail.threadId, accountId);
|
||||
if (fullEmails.length > 0) {
|
||||
useEmailStore.setState((state) => {
|
||||
const c = new Map(state.threadEmailsCache);
|
||||
c.set(repliedEmail.threadId!, fullEmails);
|
||||
return { threadEmailsCache: c };
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
closeTab(tabIdRef.current);
|
||||
} catch (error) {
|
||||
console.error('Failed to send email:', error);
|
||||
toast.error(t('notifications.error_sending'));
|
||||
}
|
||||
}, [client, sendEmail, fetchEmails, selectedMailbox, closeTab, data.sourceEmailId, data.mode, t, handleScheduledSendCreated]);
|
||||
}, [client, sendEmail, closeTab, data.sourceEmailId, data.mode, t, handleScheduledSendCreated, refreshCurrentMailbox]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
closeTab(tabIdRef.current);
|
||||
|
||||
@@ -8,7 +8,9 @@ import daMessages from '@/locales/da/common.json';
|
||||
import deMessages from '@/locales/de/common.json';
|
||||
import enMessages from '@/locales/en/common.json';
|
||||
import esMessages from '@/locales/es/common.json';
|
||||
import faMessages from '@/locales/fa/common.json';
|
||||
import frMessages from '@/locales/fr/common.json';
|
||||
import huMessages from '@/locales/hu/common.json';
|
||||
import itMessages from '@/locales/it/common.json';
|
||||
import jaMessages from '@/locales/ja/common.json';
|
||||
import koMessages from '@/locales/ko/common.json';
|
||||
@@ -16,6 +18,7 @@ import lvMessages from '@/locales/lv/common.json';
|
||||
import nlMessages from '@/locales/nl/common.json';
|
||||
import plMessages from '@/locales/pl/common.json';
|
||||
import ptMessages from '@/locales/pt/common.json';
|
||||
import roMessages from '@/locales/ro/common.json';
|
||||
import ruMessages from '@/locales/ru/common.json';
|
||||
import trMessages from '@/locales/tr/common.json';
|
||||
import ukMessages from '@/locales/uk/common.json';
|
||||
@@ -28,7 +31,9 @@ const ALL_MESSAGES = {
|
||||
de: deMessages,
|
||||
en: enMessages,
|
||||
es: esMessages,
|
||||
fa: faMessages,
|
||||
fr: frMessages,
|
||||
hu: huMessages,
|
||||
it: itMessages,
|
||||
ja: jaMessages,
|
||||
ko: koMessages,
|
||||
@@ -36,6 +41,7 @@ const ALL_MESSAGES = {
|
||||
nl: nlMessages,
|
||||
pl: plMessages,
|
||||
pt: ptMessages,
|
||||
ro: roMessages,
|
||||
ru: ruMessages,
|
||||
tr: trMessages,
|
||||
uk: ukMessages,
|
||||
@@ -86,7 +92,7 @@ export function IntlProvider({ locale: initialLocale, children }: IntlProviderPr
|
||||
return (
|
||||
<NextIntlClientProvider
|
||||
locale={activeLocale}
|
||||
messages={ALL_MESSAGES[activeLocale as keyof typeof ALL_MESSAGES]}
|
||||
messages={ALL_MESSAGES[activeLocale as keyof typeof ALL_MESSAGES] ?? ALL_MESSAGES.en}
|
||||
timeZone={timeZone}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import QRCode from 'qrcode';
|
||||
import * as OTPAuth from 'otpauth';
|
||||
import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2, Monitor, Terminal } from 'lucide-react';
|
||||
import { Shield, Key, Smartphone, Lock, Trash2, Plus, Eye, EyeOff, Copy, Check, Loader2, Monitor, Terminal, QrCode } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
|
||||
import { useAccountSecurityStore, type AppPasswordInfo, type ApiKeyInfo, type AppCredentialInput } from '@/stores/account-security-store';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { useAccountStore } from '@/stores/account-store';
|
||||
import { apiFetch, getPathPrefix } from '@/lib/browser-navigation';
|
||||
import { toast } from '@/stores/toast-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { sanitizeI18nHtml } from '@/lib/email-sanitization';
|
||||
@@ -638,14 +641,156 @@ function EmailClientSection() {
|
||||
);
|
||||
}
|
||||
|
||||
// Cross-device QR login. A signed-in (OAuth/SSO) session mints a short-lived
|
||||
// pairing code via /api/auth/pair/create; we render it as a QR that the mobile
|
||||
// app scans to sign in without re-typing credentials. The QR payload carries
|
||||
// only the server URL and the one-time code — never tokens.
|
||||
function LinkDeviceSection() {
|
||||
const t = useTranslations('settings.security');
|
||||
const params = useParams();
|
||||
const locale = params.locale as string;
|
||||
const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
|
||||
const [remaining, setRemaining] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [hasGenerated, setHasGenerated] = useState(false);
|
||||
|
||||
// Tick the countdown down to zero, then drop the (now useless) QR so the
|
||||
// user is nudged to generate a fresh one.
|
||||
useEffect(() => {
|
||||
if (remaining <= 0) {
|
||||
setQrDataUrl(null);
|
||||
return;
|
||||
}
|
||||
const timer = setInterval(() => setRemaining((r) => Math.max(0, r - 1)), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, [remaining]);
|
||||
|
||||
// Send the user to the IdP for a fresh login (prompt=login). On return the
|
||||
// callback page sets the pairing re-auth proof and bounces back here, where
|
||||
// the resume effect below re-runs generate().
|
||||
const startReauth = useCallback(async () => {
|
||||
try {
|
||||
sessionStorage.setItem('pair_reauth_resume', '1');
|
||||
} catch { /* sessionStorage unavailable */ }
|
||||
const prefix = getPathPrefix(locale);
|
||||
const redirectUri = `${window.location.origin}${prefix}/${locale}/auth/callback`;
|
||||
const res = await apiFetch('/api/auth/sso/start', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ redirect_uri: redirectUri, locale, purpose: 'reauth' }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
setError(t('link_device.error'));
|
||||
return;
|
||||
}
|
||||
const { authorize_url } = await res.json();
|
||||
window.location.href = authorize_url;
|
||||
}, [locale, t]);
|
||||
|
||||
// `fromResume` guards against a redirect loop: if we just completed re-auth
|
||||
// and pair/create still demands it, surface an error instead of bouncing to
|
||||
// the IdP again.
|
||||
const generate = useCallback(async (fromResume = false) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
// Pair the account whose session cookie we'll actually refresh — the
|
||||
// active account's slot.
|
||||
const slot = useAccountStore.getState().getActiveAccount()?.cookieSlot ?? 0;
|
||||
const res = await apiFetch('/api/auth/pair/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ slot }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const errBody = await res.json().catch(() => null);
|
||||
if (res.status === 401 && errBody?.error === 'reauth_required' && !fromResume) {
|
||||
await startReauth();
|
||||
return;
|
||||
}
|
||||
setError(t('link_device.error'));
|
||||
return;
|
||||
}
|
||||
const data = await res.json();
|
||||
const code = data.pairing_code as string;
|
||||
const expiresIn = typeof data.expires_in === 'number' ? data.expires_in : 120;
|
||||
// The phone redeems the code against THIS webmail (where the pairing
|
||||
// record lives), so the QR carries the webmail base — origin plus any
|
||||
// mount prefix — not the JMAP server URL. The JMAP server_url comes back
|
||||
// in the redeem response.
|
||||
const webmailBase = `${window.location.origin}${getPathPrefix()}`;
|
||||
const payload = `bulwarkmail://pair?server=${encodeURIComponent(webmailBase)}&code=${encodeURIComponent(code)}`;
|
||||
const dataUrl = await QRCode.toDataURL(payload, { width: 240, margin: 1 });
|
||||
setQrDataUrl(dataUrl);
|
||||
setRemaining(expiresIn);
|
||||
setHasGenerated(true);
|
||||
} catch {
|
||||
setError(t('link_device.error'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [t, startReauth]);
|
||||
|
||||
// Auto-resume after returning from the step-up re-auth round-trip.
|
||||
useEffect(() => {
|
||||
let resume = false;
|
||||
try {
|
||||
resume = sessionStorage.getItem('pair_reauth_done') === '1';
|
||||
if (resume) sessionStorage.removeItem('pair_reauth_done');
|
||||
} catch { /* sessionStorage unavailable */ }
|
||||
if (resume) void generate(true);
|
||||
}, [generate]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<QrCode className="w-4 h-4 text-muted-foreground" />
|
||||
<h4 className="text-sm font-medium text-foreground">{t('link_device.title')}</h4>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{t('link_device.description')}</p>
|
||||
|
||||
{qrDataUrl && remaining > 0 && (
|
||||
<div className="p-3 bg-muted/70 dark:bg-muted/40 rounded-md space-y-2">
|
||||
<div className="flex justify-center">
|
||||
<img src={qrDataUrl} alt="Pairing QR code" className="rounded bg-white p-2" />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground text-center">{t('link_device.instructions')}</p>
|
||||
<p className="text-[11px] text-muted-foreground text-center">
|
||||
{t('link_device.expires_in', { seconds: remaining })}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||
|
||||
<Button variant="outline" size="sm" onClick={() => void generate()} disabled={loading}>
|
||||
{loading ? (
|
||||
<Loader2 className="w-3 h-3 mr-1 animate-spin" />
|
||||
) : (
|
||||
<QrCode className="w-3 h-3 mr-1" />
|
||||
)}
|
||||
{hasGenerated ? t('link_device.regenerate') : t('link_device.generate')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AccountSecuritySettings() {
|
||||
const t = useTranslations('settings.security');
|
||||
const { isStalwart, isProbing, probe, fetchAll, fetchAuthInfo } = useAccountSecurityStore();
|
||||
const { isAuthenticated, authMode } = useAuthStore();
|
||||
const { isAuthenticated, authMode, client } = useAuthStore();
|
||||
const isOAuth = authMode === 'oauth';
|
||||
|
||||
// Wait for `client` before probing. On reload the persisted `isAuthenticated`
|
||||
// flips true before the async OAuth reconnect sets `client`; probing in that
|
||||
// window reads a null client, decides the server isn't Stalwart, and caches
|
||||
// that wrong verdict. Gating on `client` (which is set only after connect()
|
||||
// populates the session capabilities) makes the probe run with real data.
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && isStalwart === null) {
|
||||
if (isAuthenticated && client && isStalwart === null) {
|
||||
probe().then((detected) => {
|
||||
if (detected) {
|
||||
if (isOAuth) {
|
||||
@@ -656,7 +801,7 @@ export function AccountSecuritySettings() {
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [isAuthenticated, isStalwart, probe, fetchAll, fetchAuthInfo, isOAuth]);
|
||||
}, [isAuthenticated, client, isStalwart, probe, fetchAll, fetchAuthInfo, isOAuth]);
|
||||
|
||||
if (isProbing) {
|
||||
return (
|
||||
@@ -670,9 +815,25 @@ export function AccountSecuritySettings() {
|
||||
}
|
||||
|
||||
if (isStalwart === false) {
|
||||
// Even when Stalwart account-management isn't exposed (common for OAuth
|
||||
// sessions, whose tokens may lack the management capability), the
|
||||
// cross-device mobile pairing still works — it only needs the OAuth
|
||||
// refresh-token cookie, not `urn:stalwart:jmap`. So surface the QR linker
|
||||
// for OAuth sessions and show the "not available" note for the rest.
|
||||
// Use t.raw (not t) because the message is hand-injected HTML; passing it
|
||||
// through t() makes next-intl try to parse the <a> tag and throw
|
||||
// INVALID_TAG.
|
||||
return (
|
||||
<SettingsSection title={t('title')} description={t('description')}>
|
||||
<div className="text-sm text-muted-foreground py-4" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t('not_available')) }} />
|
||||
{isOAuth ? (
|
||||
<div className="space-y-6">
|
||||
<LinkDeviceSection />
|
||||
<div className="border-t border-border" />
|
||||
<div className="text-sm text-muted-foreground" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t.raw('not_available')) }} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground py-4" dangerouslySetInnerHTML={{ __html: sanitizeI18nHtml(t.raw('not_available')) }} />
|
||||
)}
|
||||
</SettingsSection>
|
||||
);
|
||||
}
|
||||
@@ -706,6 +867,8 @@ export function AccountSecuritySettings() {
|
||||
<>
|
||||
<div className="border-t border-border" />
|
||||
<EmailClientSection />
|
||||
<div className="border-t border-border" />
|
||||
<LinkDeviceSection />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef, useCallback } from 'react';
|
||||
import { useState, useRef, useCallback, useMemo } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Check, GripVertical, Plus, Star, AlertCircle } from 'lucide-react';
|
||||
import { Check, GripVertical, Plus, Star, AlertCircle, ChevronRight } from 'lucide-react';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { useEmailStore } from '@/stores/email-store';
|
||||
import { useAccountStore, type AccountEntry } from '@/stores/account-store';
|
||||
import { useManagedAccountStore } from '@/stores/managed-account-store';
|
||||
import type { SharedAccount } from '@/lib/jmap/types';
|
||||
import { SettingsSection, SettingItem } from './settings-section';
|
||||
import { Avatar } from '@/components/ui/avatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -17,12 +19,30 @@ function hostnameOf(serverUrl: string): string {
|
||||
try { return new URL(serverUrl).hostname; } catch { return serverUrl; }
|
||||
}
|
||||
|
||||
// First scoped settings tab to land on for a shared account, by capability.
|
||||
// Mirrors the scoped-tab gating in the settings page. null = nothing editable.
|
||||
function firstScopedTab(caps: SharedAccount['capabilities']): string | null {
|
||||
if (caps.sieve) return 'filters';
|
||||
if (caps.mail) return 'vacation';
|
||||
if (caps.calendars) return 'calendar';
|
||||
if (caps.contacts) return 'contacts';
|
||||
return null;
|
||||
}
|
||||
|
||||
export function AccountSettings() {
|
||||
const t = useTranslations('settings.account');
|
||||
const router = useRouter();
|
||||
const { username, serverUrl, isDemoMode, primaryIdentity, authMode } = useAuthStore();
|
||||
const { username, serverUrl, isDemoMode, primaryIdentity, authMode, client } = useAuthStore();
|
||||
const activeAccountId = useAuthStore((s) => s.activeAccountId);
|
||||
const switchAccount = useAuthStore((s) => s.switchAccount);
|
||||
const setManagedAccount = useManagedAccountStore((s) => s.setManagedAccount);
|
||||
|
||||
// Shared/group accounts delegated to this session (excludes the user's own
|
||||
// primary account). These can be drilled into for scoped settings editing.
|
||||
const sharedAccounts = useMemo<SharedAccount[]>(
|
||||
() => (client?.getSharedAccounts() ?? []).filter((a) => !a.isPrimary),
|
||||
[client],
|
||||
);
|
||||
const { quota } = useEmailStore();
|
||||
const accounts = useAccountStore((s) => s.accounts);
|
||||
const setDefaultAccount = useAccountStore((s) => s.setDefaultAccount);
|
||||
@@ -82,6 +102,16 @@ export function AccountSettings() {
|
||||
router.push(`/login?mode=add-account` as never);
|
||||
}, [router]);
|
||||
|
||||
// Enter scoped settings mode for a shared/group account: set the managed
|
||||
// account, then steer the settings panel to its first editable tab via the
|
||||
// existing 'settings-tab-change' event the page already listens for.
|
||||
const handleManageShared = useCallback((account: SharedAccount) => {
|
||||
const tab = firstScopedTab(account.capabilities);
|
||||
if (!tab) return;
|
||||
setManagedAccount(account);
|
||||
window.dispatchEvent(new CustomEvent('settings-tab-change', { detail: tab }));
|
||||
}, [setManagedAccount]);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<SettingsSection title={t('title')} description={t('description')}>
|
||||
@@ -197,6 +227,44 @@ export function AccountSettings() {
|
||||
</div>
|
||||
</SettingsSection>
|
||||
)}
|
||||
|
||||
{/* Shared / group accounts delegated to this session. Clicking one drills
|
||||
into a scoped settings view (filters, vacation, calendars, contacts). */}
|
||||
{sharedAccounts.length > 0 && (
|
||||
<SettingsSection title={t('shared_accounts.title')} description={t('shared_accounts.description')}>
|
||||
<div className="space-y-2">
|
||||
{sharedAccounts.map((acc) => {
|
||||
const editable = firstScopedTab(acc.capabilities) !== null;
|
||||
return (
|
||||
<button
|
||||
key={acc.id}
|
||||
type="button"
|
||||
onClick={() => handleManageShared(acc)}
|
||||
disabled={!editable}
|
||||
className={cn(
|
||||
'flex items-center gap-3 w-full p-3 border border-border rounded-lg text-left transition-colors',
|
||||
editable ? 'hover:bg-muted/50 cursor-pointer' : 'opacity-60 cursor-not-allowed',
|
||||
)}
|
||||
>
|
||||
<Avatar
|
||||
name={acc.name}
|
||||
size="sm"
|
||||
className="w-9 h-9 text-sm flex-shrink-0"
|
||||
disableFavicon
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate">{acc.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{t('shared_accounts.shared_label')}
|
||||
</p>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SettingsSection>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,16 @@
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Book, Pencil, Share2, Tag, Users } from "lucide-react";
|
||||
import { Book, BookPlus, Pencil, Share2, Tag, Users } from "lucide-react";
|
||||
import { useContactStore } from "@/stores/contact-store";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { useManagedAccountStore } from "@/stores/managed-account-store";
|
||||
import { toast } from "@/stores/toast-store";
|
||||
import { SettingsSection } from "./settings-section";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { AddressBook, AddressBookRights } from "@/lib/jmap/types";
|
||||
import { ShareCollectionDialog } from "./share-collection-dialog";
|
||||
import { RenameDialog } from "@/components/files/rename-dialog";
|
||||
|
||||
function AddressBookEditRow({
|
||||
initial,
|
||||
@@ -71,10 +73,12 @@ export function AddressBookManagementSettings() {
|
||||
const tContacts = useTranslations("contacts");
|
||||
const tSettings = useTranslations("settings.contacts");
|
||||
const { client } = useAuthStore();
|
||||
const { addressBooks, contacts, supportsSync, fetchAddressBooks, renameAddressBook, shareAddressBook, renameKeyword } = useContactStore();
|
||||
const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
|
||||
const { addressBooks, contacts, supportsSync, fetchAddressBooks, createAddressBook, renameAddressBook, shareAddressBook, renameKeyword } = useContactStore();
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [editingKeyword, setEditingKeyword] = useState<string | null>(null);
|
||||
const [sharingId, setSharingId] = useState<string | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -83,6 +87,21 @@ export function AddressBookManagementSettings() {
|
||||
}
|
||||
}, [client, addressBooks.length, fetchAddressBooks]);
|
||||
|
||||
const handleCreate = async (name: string) => {
|
||||
if (!client) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await createAddressBook(client, name);
|
||||
await fetchAddressBooks(client);
|
||||
setCreating(false);
|
||||
toast.success(t("created"));
|
||||
} catch {
|
||||
toast.error(t("create_failed"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (book: AddressBook, newName: string) => {
|
||||
if (!client) return;
|
||||
setIsLoading(true);
|
||||
@@ -205,9 +224,13 @@ export function AddressBookManagementSettings() {
|
||||
<>
|
||||
<SettingsSection title={tSettings("manage_title")} description={tSettings("manage_description")}>
|
||||
<div className="space-y-2">
|
||||
{personal.map(renderBook)}
|
||||
{/* In scoped mode (managing a shared account) hide the user's own
|
||||
address books and show only the managed account's group. */}
|
||||
{(managedAccountId ? [] : personal).map(renderBook)}
|
||||
|
||||
{Array.from(sharedGroups.entries()).map(([accountId, group]) => (
|
||||
{Array.from(sharedGroups.entries())
|
||||
.filter(([accountId]) => !managedAccountId || accountId === managedAccountId)
|
||||
.map(([accountId, group]) => (
|
||||
<div key={accountId} className="mt-4 space-y-2">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Share2 className="w-3 h-3" />
|
||||
@@ -220,9 +243,25 @@ export function AddressBookManagementSettings() {
|
||||
{addressBooks.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground py-2">{tSettings("no_address_books")}</p>
|
||||
)}
|
||||
|
||||
{/* Creating targets the user's own account, so hide it while scoped to a
|
||||
managed (shared) account. */}
|
||||
{!managedAccountId && client && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreating(true)}
|
||||
className="flex items-center gap-2 py-2.5 px-3 w-full rounded-md border border-dashed border-border text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
<BookPlus className="w-4 h-4 flex-shrink-0" />
|
||||
{t("create")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</SettingsSection>
|
||||
|
||||
{/* Contact categories come from the active account's contacts, not the
|
||||
shared account, so hide them while scoped to a shared account. */}
|
||||
{!managedAccountId && (
|
||||
<div className="mt-8">
|
||||
<SettingsSection title={tSettings("categories_title")} description={tSettings("categories_description")}>
|
||||
<div className="space-y-2">
|
||||
@@ -267,6 +306,17 @@ export function AddressBookManagementSettings() {
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{creating && (
|
||||
<RenameDialog
|
||||
currentName=""
|
||||
title={t("create")}
|
||||
label={t("name_label")}
|
||||
onCancel={() => setCreating(false)}
|
||||
onConfirm={handleCreate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{sharingId && client && (() => {
|
||||
const book = addressBooks.find((b) => b.id === sharingId);
|
||||
|
||||
@@ -14,6 +14,7 @@ import { cn, formatDateTime, redactUrlCredentials } from '@/lib/utils';
|
||||
import { ICalImportModal } from '@/components/calendar/ical-import-modal';
|
||||
import { ICalSubscriptionModal } from '@/components/calendar/ical-subscription-modal';
|
||||
import { useSettingsStore } from '@/stores/settings-store';
|
||||
import { useManagedAccountStore } from '@/stores/managed-account-store';
|
||||
import { apiFetch } from '@/lib/browser-navigation';
|
||||
import { CALENDAR_COLORS, sharedCalendarColorKey } from '@/lib/shared-calendar-colors';
|
||||
|
||||
@@ -137,6 +138,7 @@ export { CalendarColorPicker, CALENDAR_COLORS };
|
||||
export function CalendarManagementSettings() {
|
||||
const t = useTranslations('calendar.management');
|
||||
const { client, serverUrl, username } = useAuthStore();
|
||||
const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
|
||||
const { calendars, updateCalendar, shareCalendar, createCalendar, removeCalendar, clearCalendarEvents, fetchCalendars, icalSubscriptions: allSubs, removeICalSubscription, refreshICalSubscription, isSubscriptionCalendar } = useCalendarStore();
|
||||
// Subscriptions are persisted globally but scoped per JMAP account via
|
||||
// accountId. Legacy entries with no accountId show in the active account.
|
||||
@@ -388,7 +390,10 @@ export function CalendarManagementSettings() {
|
||||
return (
|
||||
<SettingsSection title={t('title')} description={t('description')}>
|
||||
<div className="space-y-2">
|
||||
{calendars.filter(cal => !isSubscriptionCalendar(cal.id)).map((cal) => {
|
||||
{calendars
|
||||
.filter(cal => !isSubscriptionCalendar(cal.id))
|
||||
.filter(cal => !managedAccountId || cal.accountId === managedAccountId)
|
||||
.map((cal) => {
|
||||
const color = (cal.isShared && sharedCalendarColors[sharedCalendarColorKey(cal)]) || cal.color || '#3b82f6';
|
||||
|
||||
if (editingId === cal.id) {
|
||||
|
||||
@@ -22,6 +22,7 @@ export function ComposingSettings() {
|
||||
|
||||
const {
|
||||
autoSelectReplyIdentity,
|
||||
plainTextMode,
|
||||
attachmentReminderEnabled,
|
||||
attachmentReminderKeywords,
|
||||
sendDelaySeconds,
|
||||
@@ -44,6 +45,13 @@ export function ComposingSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
|
||||
<ToggleSwitch
|
||||
checked={plainTextMode}
|
||||
onChange={(checked) => updateSetting('plainTextMode', checked)}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('send_delay.label')} description={t('send_delay.description')}>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<Select
|
||||
|
||||
@@ -12,7 +12,9 @@ import { useEmailStore } from "@/stores/email-store";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import { toast } from "@/stores/toast-store";
|
||||
import type { FilterRule } from "@/lib/jmap/sieve-types";
|
||||
import type { Mailbox } from "@/lib/jmap/types";
|
||||
import { useVacationStore } from "@/stores/vacation-store";
|
||||
import { useManagedAccountStore } from "@/stores/managed-account-store";
|
||||
import {
|
||||
Plus,
|
||||
GripVertical,
|
||||
@@ -157,7 +159,8 @@ export function FilterSettings() {
|
||||
const t = useTranslations("settings.filters");
|
||||
const tNotifications = useTranslations("notifications");
|
||||
const { client } = useAuthStore();
|
||||
const mailboxes = useEmailStore((s) => s.mailboxes);
|
||||
const storeMailboxes = useEmailStore((s) => s.mailboxes);
|
||||
const fetchMailboxes = useEmailStore((s) => s.fetchMailboxes);
|
||||
const expandedFilterView = useSettingsStore((s) => s.expandedFilterView);
|
||||
const updateSetting = useSettingsStore((s) => s.updateSetting);
|
||||
|
||||
@@ -170,7 +173,7 @@ export function FilterSettings() {
|
||||
isOpaque,
|
||||
rawScript,
|
||||
vacationSettings,
|
||||
fetchFilters,
|
||||
selectAccount,
|
||||
saveFilters,
|
||||
addRule,
|
||||
updateRule,
|
||||
@@ -182,7 +185,57 @@ export function FilterSettings() {
|
||||
validateScript,
|
||||
} = useFilterStore();
|
||||
|
||||
const vacationEnabled = useVacationStore((s) => s.isEnabled) || vacationSettings?.isEnabled;
|
||||
// Scoped to a shared/group account when the settings panel is managing one.
|
||||
const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
|
||||
const isPrimaryAccount = !managedAccountId;
|
||||
|
||||
// Folders offered as "move to" targets in the rule editor must belong to the
|
||||
// account whose filters we're editing. For a shared account, fetch that
|
||||
// account's mailboxes (the email store only holds the active account's). They
|
||||
// are this account's own folders within its Sieve context, so present them as
|
||||
// non-shared — otherwise the rule modal filters them out (it drops isShared
|
||||
// mailboxes, which are normally other accounts' folders merged into the view).
|
||||
const [scopedMailboxes, setScopedMailboxes] = useState<Mailbox[]>([]);
|
||||
useEffect(() => {
|
||||
if (!client || !managedAccountId) {
|
||||
setScopedMailboxes([]);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
void client
|
||||
.getMailboxes(managedAccountId)
|
||||
.then((mbs) => {
|
||||
if (!cancelled) setScopedMailboxes(mbs.map((mb) => ({ ...mb, isShared: false })));
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setScopedMailboxes([]);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [client, managedAccountId]);
|
||||
|
||||
// The "move to" folder list for the primary account comes from the email
|
||||
// store, which is normally populated when the mail view mounts. When the app
|
||||
// is opened or refreshed directly on Settings (the mail view never mounted),
|
||||
// that store is empty, leaving the rule editor's folder dropdown blank. Fetch
|
||||
// mailboxes on demand here so Filters never depends on having visited Inbox
|
||||
// first. fetchMailboxes guards against transient empty results and selecting
|
||||
// an inbox, so it's safe to call independently; a ref keeps it to one attempt
|
||||
// per client.
|
||||
const primaryFetchClientRef = useRef<typeof client | null>(null);
|
||||
useEffect(() => {
|
||||
if (managedAccountId || !client || storeMailboxes.length > 0) return;
|
||||
if (primaryFetchClientRef.current === client) return;
|
||||
primaryFetchClientRef.current = client;
|
||||
void fetchMailboxes(client);
|
||||
}, [client, managedAccountId, storeMailboxes.length, fetchMailboxes]);
|
||||
|
||||
const mailboxes = managedAccountId ? scopedMailboxes : storeMailboxes;
|
||||
|
||||
const vacationStoreEnabled = useVacationStore((s) => s.isEnabled);
|
||||
// Vacation uses a separate per-(primary)-account mechanism (RFC 9661), so the
|
||||
// "vacation active" banner only applies when editing the personal account.
|
||||
const vacationEnabled =
|
||||
isPrimaryAccount && (vacationStoreEnabled || vacationSettings?.isEnabled);
|
||||
|
||||
const [editingRule, setEditingRule] = useState<FilterRule | undefined>();
|
||||
const [showRuleModal, setShowRuleModal] = useState(false);
|
||||
@@ -194,9 +247,12 @@ export function FilterSettings() {
|
||||
|
||||
useEffect(() => {
|
||||
if (client && isSupported) {
|
||||
void fetchFilters(client);
|
||||
// Always pass a concrete account id (managed shared account, or the
|
||||
// primary Sieve account) so switching never falls back to a stale
|
||||
// previously-selected account.
|
||||
void selectAccount(client, managedAccountId ?? client.getSieveAccountId());
|
||||
}
|
||||
}, [client, isSupported, fetchFilters]);
|
||||
}, [client, isSupported, managedAccountId, selectAccount]);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
async (ruleId: string) => {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Check, Folder } from 'lucide-react';
|
||||
import { useSettingsStore, type ToolbarPosition, type MailLayout } from '@/stores/settings-store';
|
||||
import { SettingsSection, SettingItem, RadioGroup, ToggleSwitch } from './settings-section';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -117,11 +118,46 @@ function MailLayoutPreview({
|
||||
export function LayoutSettings() {
|
||||
const t = useTranslations('settings.appearance');
|
||||
const tEmail = useTranslations('settings.email_behavior');
|
||||
const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, colorfulSidebarIcons, mailLayout, proInterface, updateSetting } = useSettingsStore();
|
||||
const { isSettingLocked, isSettingHidden } = usePolicyStore();
|
||||
const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, showFolderTotalCount, mailLayout, proInterface, updateSetting } = useSettingsStore();
|
||||
const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
|
||||
const accounts = useAccountStore(s => s.accounts);
|
||||
const activeAccountId = useAccountStore(s => s.activeAccountId);
|
||||
const mailboxes = useEmailStore(s => s.mailboxes);
|
||||
const hasGroupInboxes = useMemo(() => mailboxes.some(m => m.isShared), [mailboxes]);
|
||||
const allMailViewAllowed = isFeatureEnabled('allMailViewEnabled');
|
||||
// Cross-account "All accounts" views, each gated independently by the admin.
|
||||
const crossViews = [
|
||||
{ setting: 'enableCrossUnreadView', value: enableCrossUnreadView, allowed: isFeatureEnabled('crossUnreadViewEnabled'), labelKey: 'cross_unread.label', descKey: 'cross_unread.description' },
|
||||
{ setting: 'enableCrossStarredView', value: enableCrossStarredView, allowed: isFeatureEnabled('crossStarredViewEnabled'), labelKey: 'cross_starred.label', descKey: 'cross_starred.description' },
|
||||
{ setting: 'enableCrossAllView', value: enableCrossAllView, allowed: isFeatureEnabled('crossAllViewEnabled'), labelKey: 'cross_all.label', descKey: 'cross_all.description' },
|
||||
] as const;
|
||||
|
||||
// Own (non-shared) folders and the active account's All Mail selection. The
|
||||
// selection is per account: a missing entry = never configured, which
|
||||
// defaults to all no-role folders; an explicit [] = no folders.
|
||||
const ownMailboxes = useMemo(() => mailboxes.filter(m => !m.isShared), [mailboxes]);
|
||||
const currentAllMailEntry = activeAccountId ? allMailFolderIds[activeAccountId] : undefined;
|
||||
const allMailSelected = new Set(
|
||||
currentAllMailEntry === undefined
|
||||
? ownMailboxes.filter(m => !m.role).map(m => m.id)
|
||||
: currentAllMailEntry
|
||||
);
|
||||
const toggleAllMailFolder = (id: string) => {
|
||||
if (!activeAccountId) return;
|
||||
const next = new Set(allMailSelected);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
updateSetting('allMailFolderIds', {
|
||||
...allMailFolderIds,
|
||||
[activeAccountId]: ownMailboxes.filter(m => next.has(m.id)).map(m => m.id),
|
||||
});
|
||||
};
|
||||
// Name the account the selection applies to, but only when more than one is
|
||||
// logged in (otherwise it's unambiguous).
|
||||
const activeAccount = accounts.find(a => a.id === activeAccountId);
|
||||
const allMailAccountHint = accounts.length > 1 && activeAccount
|
||||
? t('all_mail.account_hint', { account: activeAccount.displayName || activeAccount.email })
|
||||
: null;
|
||||
|
||||
return (
|
||||
<SettingsSection title={t('title')} description={t('description')}>
|
||||
@@ -181,6 +217,13 @@ export function LayoutSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('show_folder_total_count.label')} description={t('show_folder_total_count.description')}>
|
||||
<ToggleSwitch
|
||||
checked={showFolderTotalCount}
|
||||
onChange={(checked) => updateSetting('showFolderTotalCount', checked)}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
{(accounts.length > 1 || hasGroupInboxes) && !isSettingHidden('enableUnifiedMailbox') && (
|
||||
<SettingItem
|
||||
label={t('unified_mailbox.label')}
|
||||
@@ -209,6 +252,79 @@ export function LayoutSettings() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{enableUnifiedMailbox && crossViews.some(c => c.allowed) && (
|
||||
<div className="ml-4 border-l-2 border-border pl-4 -mt-2 space-y-2">
|
||||
{crossViews.map(({ setting, value, allowed, labelKey, descKey }) => (
|
||||
allowed && !isSettingHidden(setting) && (
|
||||
<SettingItem
|
||||
key={setting}
|
||||
label={t(labelKey)}
|
||||
description={t(descKey)}
|
||||
locked={isSettingLocked(setting)}
|
||||
>
|
||||
<ToggleSwitch
|
||||
checked={value}
|
||||
onChange={(v) => updateSetting(setting, v)}
|
||||
/>
|
||||
</SettingItem>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{allMailViewAllowed && !isSettingHidden('enableAllMailView') && (
|
||||
<SettingItem
|
||||
label={t('all_mail.label')}
|
||||
description={t('all_mail.description')}
|
||||
locked={isSettingLocked('enableAllMailView')}
|
||||
>
|
||||
<ToggleSwitch
|
||||
checked={enableAllMailView}
|
||||
onChange={(v) => updateSetting('enableAllMailView', v)}
|
||||
/>
|
||||
</SettingItem>
|
||||
)}
|
||||
|
||||
{allMailViewAllowed && enableAllMailView && (
|
||||
<div className="ml-4 border-l-2 border-border pl-4 -mt-2 space-y-2">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-foreground">{t('all_mail.folders_label')}</div>
|
||||
<div className="text-xs text-muted-foreground">{t('all_mail.folders_description')}</div>
|
||||
{allMailAccountHint && (
|
||||
<div className="text-xs italic text-muted-foreground mt-0.5">{allMailAccountHint}</div>
|
||||
)}
|
||||
</div>
|
||||
{ownMailboxes.length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">{t('all_mail.no_folders')}</p>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{ownMailboxes.map((mb) => {
|
||||
const checked = allMailSelected.has(mb.id);
|
||||
return (
|
||||
<button
|
||||
key={mb.id}
|
||||
type="button"
|
||||
onClick={() => toggleAllMailFolder(mb.id)}
|
||||
className="w-full flex items-center gap-2.5 py-1.5 px-2 rounded-md hover:bg-muted/50 text-left"
|
||||
role="checkbox"
|
||||
aria-checked={checked}
|
||||
>
|
||||
<span className={cn(
|
||||
"flex items-center justify-center w-4 h-4 rounded border flex-shrink-0 transition-colors",
|
||||
checked ? "bg-primary border-primary text-primary-foreground" : "border-border"
|
||||
)}>
|
||||
{checked && <Check className="w-3 h-3" />}
|
||||
</span>
|
||||
<Folder className={cn("w-4 h-4 flex-shrink-0", mb.role ? "text-primary" : "text-muted-foreground")} />
|
||||
<span className="text-sm text-foreground truncate">{mb.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SettingItem label={t('pro_interface.label')} description={t('pro_interface.description')}>
|
||||
<ToggleSwitch
|
||||
checked={proInterface}
|
||||
|
||||
@@ -22,10 +22,10 @@ export function ReadingSettings() {
|
||||
markAsReadDelay,
|
||||
deleteAction,
|
||||
permanentlyDeleteJunk,
|
||||
returnToListAfterAction,
|
||||
showPreview,
|
||||
mailLayout,
|
||||
disableThreading,
|
||||
plainTextMode,
|
||||
emailsPerPage,
|
||||
mailAttachmentAction,
|
||||
attachmentPosition,
|
||||
@@ -177,6 +177,13 @@ export function ReadingSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('return_to_list_after_action.label')} description={t('return_to_list_after_action.description')}>
|
||||
<ToggleSwitch
|
||||
checked={returnToListAfterAction}
|
||||
onChange={(checked) => updateSetting('returnToListAfterAction', checked)}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
{!isSettingHidden('showPreview') && (
|
||||
<SettingItem
|
||||
label={t('show_preview.label')}
|
||||
@@ -194,13 +201,6 @@ export function ReadingSettings() {
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('plain_text_mode.label')} description={t('plain_text_mode.description')}>
|
||||
<ToggleSwitch
|
||||
checked={plainTextMode}
|
||||
onChange={(checked) => updateSetting('plainTextMode', checked)}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem label={t('hide_inline_image_attachments.label')} description={t('hide_inline_image_attachments.description')}>
|
||||
<ToggleSwitch
|
||||
checked={hideInlineImageAttachments}
|
||||
|
||||
@@ -6,11 +6,11 @@ import { Button } from "@/components/ui/button";
|
||||
import { Avatar } from "@/components/ui/avatar";
|
||||
import { X, Loader2, UserPlus, Trash2, Users, ChevronDown } from "lucide-react";
|
||||
import type { IJMAPClient } from "@/lib/jmap/client-interface";
|
||||
import type { Principal, CalendarRights, AddressBookRights } from "@/lib/jmap/types";
|
||||
import type { Principal, CalendarRights, AddressBookRights, FileNodeRights } from "@/lib/jmap/types";
|
||||
import { toast } from "@/stores/toast-store";
|
||||
|
||||
type ShareKind = "calendar" | "addressBook";
|
||||
type AnyRights = CalendarRights | AddressBookRights;
|
||||
type ShareKind = "calendar" | "addressBook" | "file";
|
||||
type AnyRights = CalendarRights | AddressBookRights | FileNodeRights;
|
||||
|
||||
type RolePreset = "freeBusy" | "read" | "readWrite" | "manager" | "custom";
|
||||
|
||||
@@ -39,6 +39,21 @@ const ADDRESS_BOOK_PRESETS: Record<Exclude<RolePreset, "custom" | "freeBusy">, A
|
||||
manager: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true },
|
||||
};
|
||||
|
||||
const FILE_PRESETS: Record<Exclude<RolePreset, "custom" | "freeBusy">, FileNodeRights> = {
|
||||
read: {
|
||||
mayRead: true, mayAddChildren: false, mayRename: false,
|
||||
mayDelete: false, mayModifyContent: false, mayShare: false,
|
||||
},
|
||||
readWrite: {
|
||||
mayRead: true, mayAddChildren: true, mayRename: true,
|
||||
mayDelete: true, mayModifyContent: true, mayShare: false,
|
||||
},
|
||||
manager: {
|
||||
mayRead: true, mayAddChildren: true, mayRename: true,
|
||||
mayDelete: true, mayModifyContent: true, mayShare: true,
|
||||
},
|
||||
};
|
||||
|
||||
function detectCalendarPreset(r: CalendarRights): RolePreset {
|
||||
for (const [name, preset] of Object.entries(CALENDAR_PRESETS) as [Exclude<RolePreset, "custom">, CalendarRights][]) {
|
||||
if ((Object.keys(preset) as (keyof CalendarRights)[]).every((k) => preset[k] === r[k])) {
|
||||
@@ -58,6 +73,29 @@ function detectAddressBookPreset(r: AddressBookRights): RolePreset {
|
||||
return "custom";
|
||||
}
|
||||
|
||||
function detectFilePreset(r: FileNodeRights): RolePreset {
|
||||
for (const [name, preset] of Object.entries(FILE_PRESETS) as [Exclude<RolePreset, "custom" | "freeBusy">, FileNodeRights][]) {
|
||||
const keys = Object.keys(preset) as (keyof FileNodeRights)[];
|
||||
if (keys.every((k) => preset[k] === (r[k] ?? false))) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
return "custom";
|
||||
}
|
||||
|
||||
function presetRights(kind: ShareKind, preset: RolePreset): AnyRights | undefined {
|
||||
if (preset === "custom") return undefined;
|
||||
if (kind === "calendar") return CALENDAR_PRESETS[preset as keyof typeof CALENDAR_PRESETS];
|
||||
if (kind === "file") return FILE_PRESETS[preset as keyof typeof FILE_PRESETS];
|
||||
return ADDRESS_BOOK_PRESETS[preset as keyof typeof ADDRESS_BOOK_PRESETS];
|
||||
}
|
||||
|
||||
function detectPreset(kind: ShareKind, rights: AnyRights): RolePreset {
|
||||
if (kind === "calendar") return detectCalendarPreset(rights as CalendarRights);
|
||||
if (kind === "file") return detectFilePreset(rights as FileNodeRights);
|
||||
return detectAddressBookPreset(rights as AddressBookRights);
|
||||
}
|
||||
|
||||
interface ShareCollectionDialogProps {
|
||||
client: IJMAPClient;
|
||||
kind: ShareKind;
|
||||
@@ -126,9 +164,7 @@ export function ShareCollectionDialog({
|
||||
|
||||
const handleSetRights = async (principalId: string, preset: RolePreset) => {
|
||||
if (preset === "custom") return; // custom is read-only here
|
||||
const rights = kind === "calendar"
|
||||
? CALENDAR_PRESETS[preset as keyof typeof CALENDAR_PRESETS]
|
||||
: ADDRESS_BOOK_PRESETS[preset as keyof typeof ADDRESS_BOOK_PRESETS];
|
||||
const rights = presetRights(kind, preset);
|
||||
if (!rights) return;
|
||||
setSavingId(principalId);
|
||||
try {
|
||||
@@ -154,10 +190,8 @@ export function ShareCollectionDialog({
|
||||
};
|
||||
|
||||
const handleAdd = async (principal: Principal) => {
|
||||
const defaultPreset: RolePreset = "read";
|
||||
const rights = kind === "calendar"
|
||||
? CALENDAR_PRESETS[defaultPreset]
|
||||
: ADDRESS_BOOK_PRESETS[defaultPreset];
|
||||
const rights = presetRights(kind, "read");
|
||||
if (!rights) return;
|
||||
setSavingId(principal.id);
|
||||
try {
|
||||
await onShare(principal.id, rights);
|
||||
@@ -226,9 +260,7 @@ export function ShareCollectionDialog({
|
||||
<ul className="divide-y divide-border rounded-md border border-border overflow-hidden">
|
||||
{sharedEntries.map(([principalId, rights]) => {
|
||||
const principal = allPrincipalsById.get(principalId);
|
||||
const preset = kind === "calendar"
|
||||
? detectCalendarPreset(rights as CalendarRights)
|
||||
: detectAddressBookPreset(rights as AddressBookRights);
|
||||
const preset = detectPreset(kind, rights);
|
||||
return (
|
||||
<li key={principalId} className="flex items-center gap-3 px-3 py-2.5">
|
||||
<Avatar
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useId } from "react";
|
||||
import { useFocusTrap } from "@/hooks/use-focus-trap";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ShieldCheck, X } from "lucide-react";
|
||||
import type { SmimeKeyRecord, SmimePublicCert } from "@/lib/smime/types";
|
||||
|
||||
interface SmimeCertificateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
record: SmimeKeyRecord | SmimePublicCert | null;
|
||||
type: "private" | "public";
|
||||
}
|
||||
|
||||
export function SmimeCertificateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
record,
|
||||
type: _type,
|
||||
}: SmimeCertificateModalProps) {
|
||||
const t = useTranslations("smime");
|
||||
const id = useId();
|
||||
|
||||
const dialogRef = useFocusTrap({
|
||||
isActive: isOpen,
|
||||
onEscape: onClose,
|
||||
restoreFocus: true,
|
||||
});
|
||||
|
||||
if (!isOpen || !record) return null;
|
||||
|
||||
const isExpired = new Date(record.notAfter) < new Date();
|
||||
const isNotYetValid = new Date(record.notBefore) > new Date();
|
||||
|
||||
const rows: { label: string; value: string }[] = [
|
||||
{ label: t("cert_subject"), value: record.subject ?? "" },
|
||||
{ label: t("cert_issuer"), value: record.issuer ?? "" },
|
||||
{ label: t("cert_email"), value: record.email },
|
||||
{
|
||||
label: t("cert_validity"),
|
||||
value: `${new Date(record.notBefore).toLocaleDateString()} - ${new Date(record.notAfter).toLocaleDateString()}`,
|
||||
},
|
||||
{ label: t("cert_fingerprint"), value: record.fingerprint },
|
||||
];
|
||||
|
||||
if ("serialNumber" in record) {
|
||||
rows.splice(2, 0, { label: t("cert_serial"), value: record.serialNumber });
|
||||
}
|
||||
|
||||
if ("algorithm" in record) {
|
||||
rows.push({ label: t("cert_algorithm"), value: record.algorithm });
|
||||
}
|
||||
|
||||
if ("capabilities" in record) {
|
||||
const caps: string[] = [];
|
||||
if (record.capabilities.canSign) caps.push(t("cap_sign"));
|
||||
if (record.capabilities.canEncrypt) caps.push(t("cap_encrypt"));
|
||||
rows.push({ label: t("cert_capabilities"), value: caps.join(", ") || t("cap_none") });
|
||||
}
|
||||
|
||||
if ("source" in record) {
|
||||
rows.push({ label: t("cert_source"), value: record.source });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={`${id}-title`}
|
||||
className="bg-background border border-border rounded-lg shadow-xl w-full max-w-lg animate-in zoom-in-95 duration-200"
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 pb-4 border-b border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<ShieldCheck className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<h2 id={`${id}-title`} className="text-lg font-semibold text-foreground">
|
||||
{t("certificate_details")}
|
||||
</h2>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-3 max-h-[60vh] overflow-y-auto">
|
||||
{(isExpired || isNotYetValid) && (
|
||||
<div className="px-3 py-2 rounded-md bg-destructive/10 text-destructive text-sm">
|
||||
{isExpired ? t("cert_expired") : t("cert_not_yet_valid")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rows.map(({ label, value }) => (
|
||||
<div key={label}>
|
||||
<dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
{label}
|
||||
</dt>
|
||||
<dd className="text-sm text-foreground mt-0.5 break-all font-mono">
|
||||
{value}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end px-6 pb-6">
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
{t("close")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useId } from "react";
|
||||
import { useFocusTrap } from "@/hooks/use-focus-trap";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { KeyRound, Eye, EyeOff } from "lucide-react";
|
||||
|
||||
interface SmimePassphraseDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (passphrase: string) => void | Promise<void>;
|
||||
title: string;
|
||||
description?: string;
|
||||
submitText?: string;
|
||||
error?: string | null;
|
||||
/** Show a second passphrase field for import/export confirmation. */
|
||||
showConfirm?: boolean;
|
||||
}
|
||||
|
||||
export function SmimePassphraseDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
description,
|
||||
submitText,
|
||||
error,
|
||||
showConfirm = false,
|
||||
}: SmimePassphraseDialogProps) {
|
||||
const t = useTranslations("smime");
|
||||
const id = useId();
|
||||
const [passphrase, setPassphrase] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const dialogRef = useFocusTrap({
|
||||
isActive: isOpen,
|
||||
onEscape: onClose,
|
||||
restoreFocus: true,
|
||||
});
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const mismatch = showConfirm && passphrase !== confirm && confirm.length > 0;
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!passphrase || (showConfirm && passphrase !== confirm)) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onSubmit(passphrase);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setPassphrase("");
|
||||
setConfirm("");
|
||||
setShowPassword(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150">
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={`${id}-title`}
|
||||
aria-describedby={description ? `${id}-desc` : undefined}
|
||||
className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<KeyRound className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2
|
||||
id={`${id}-title`}
|
||||
className="text-lg font-semibold text-foreground"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
{description && (
|
||||
<p
|
||||
id={`${id}-desc`}
|
||||
className="text-sm text-muted-foreground mt-1"
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={passphrase}
|
||||
onChange={(e) => setPassphrase(e.target.value)}
|
||||
placeholder={t("passphrase_placeholder")}
|
||||
autoFocus
|
||||
className="pr-10"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
|
||||
aria-label={showPassword ? t("hide_passphrase") : t("show_passphrase")}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-4 h-4" />
|
||||
) : (
|
||||
<Eye className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showConfirm && (
|
||||
<div>
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
placeholder={t("confirm_passphrase_placeholder")}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{mismatch && (
|
||||
<p className="text-xs text-destructive mt-1">
|
||||
{t("passphrase_mismatch")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 px-6 pb-6">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={handleClose}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!passphrase || isSubmitting || (showConfirm && passphrase !== confirm)}
|
||||
>
|
||||
{isSubmitting ? t("processing") : (submitText ?? t("unlock"))}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,549 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
Upload,
|
||||
Trash2,
|
||||
Eye,
|
||||
Lock,
|
||||
Unlock,
|
||||
Download,
|
||||
ShieldCheck,
|
||||
ShieldAlert,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { SettingsSection, SettingItem, ToggleSwitch } from "@/components/settings/settings-section";
|
||||
import { SmimePassphraseDialog } from "@/components/settings/smime-passphrase-dialog";
|
||||
import { SmimeCertificateModal } from "@/components/settings/smime-certificate-modal";
|
||||
import { useSmimeStore } from "@/stores/smime-store";
|
||||
import { useIdentityStore } from "@/stores/identity-store";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { exportPkcs12, downloadPkcs12 } from "@/lib/smime/pkcs12-export";
|
||||
import type { SmimeKeyRecord, SmimePublicCert } from "@/lib/smime/types";
|
||||
|
||||
export function SmimeSettings() {
|
||||
const t = useTranslations("smime");
|
||||
const {
|
||||
keyRecords,
|
||||
publicCerts,
|
||||
identityKeyBindings,
|
||||
defaultSignIdentity,
|
||||
defaultEncrypt,
|
||||
autoImportSignerCerts,
|
||||
isLoading,
|
||||
error,
|
||||
load,
|
||||
importPKCS12,
|
||||
removeKeyRecord,
|
||||
removePublicCert,
|
||||
bindIdentityToKey,
|
||||
unlockKey,
|
||||
lockKey,
|
||||
setSignDefault,
|
||||
setEncryptDefault,
|
||||
setAutoImportSignerCerts,
|
||||
isKeyUnlocked,
|
||||
setError,
|
||||
} = useSmimeStore();
|
||||
|
||||
const { identities } = useIdentityStore();
|
||||
const activeAccountId = useAuthStore((s) => s.activeAccountId);
|
||||
|
||||
// Local UI state
|
||||
const [importDialogOpen, setImportDialogOpen] = useState(false);
|
||||
const [unlockDialogOpen, setUnlockDialogOpen] = useState(false);
|
||||
const [unlockTargetId, setUnlockTargetId] = useState<string | null>(null);
|
||||
const [certModalRecord, setCertModalRecord] = useState<SmimeKeyRecord | SmimePublicCert | null>(null);
|
||||
const [certModalType, setCertModalType] = useState<"private" | "public">("private");
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
const [unlockError, setUnlockError] = useState<string | null>(null);
|
||||
const [pendingFile, setPendingFile] = useState<ArrayBuffer | null>(null);
|
||||
const [pendingP12Pass, setPendingP12Pass] = useState("");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const pubCertInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// State for the two-step PKCS#12 flow
|
||||
const [importStep, setImportStep] = useState<"p12" | "storage">("p12");
|
||||
|
||||
// Export flow state
|
||||
const [exportDialogOpen, setExportDialogOpen] = useState(false);
|
||||
const [exportTargetRecord, setExportTargetRecord] = useState<SmimeKeyRecord | null>(null);
|
||||
const [exportStep, setExportStep] = useState<"storage" | "export">("storage");
|
||||
const [exportStoragePass, setExportStoragePass] = useState("");
|
||||
const [exportError, setExportError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
load(activeAccountId ?? undefined);
|
||||
}, [load, activeAccountId]);
|
||||
|
||||
// ── PKCS#12 import flow ────────────────────────────────────────
|
||||
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setPendingFile(reader.result as ArrayBuffer);
|
||||
setImportStep("p12");
|
||||
setImportError(null);
|
||||
setImportDialogOpen(true);
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
// Reset so same file can be re-selected
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const handleImportSubmit = async (passphrase: string) => {
|
||||
if (importStep === "p12") {
|
||||
setPendingP12Pass(passphrase);
|
||||
setImportStep("storage");
|
||||
setImportError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Storage passphrase step
|
||||
if (!pendingFile) return;
|
||||
try {
|
||||
await importPKCS12(pendingFile, pendingP12Pass, passphrase);
|
||||
setImportDialogOpen(false);
|
||||
setPendingFile(null);
|
||||
setPendingP12Pass("");
|
||||
setImportError(null);
|
||||
} catch (err) {
|
||||
setImportError(err instanceof Error ? err.message : "Import failed");
|
||||
}
|
||||
};
|
||||
|
||||
// ── Public cert import ─────────────────────────────────────────
|
||||
|
||||
const handlePublicCertFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = async () => {
|
||||
try {
|
||||
const store = useSmimeStore.getState();
|
||||
await store.importPublicCert(reader.result as ArrayBuffer, "manual");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to import certificate");
|
||||
}
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
// ── Unlock ─────────────────────────────────────────────────────
|
||||
|
||||
const handleUnlockRequest = (id: string) => {
|
||||
setUnlockTargetId(id);
|
||||
setUnlockError(null);
|
||||
setUnlockDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUnlockSubmit = async (passphrase: string) => {
|
||||
if (!unlockTargetId) return;
|
||||
try {
|
||||
await unlockKey(unlockTargetId, passphrase);
|
||||
setUnlockDialogOpen(false);
|
||||
setUnlockTargetId(null);
|
||||
setUnlockError(null);
|
||||
} catch (err) {
|
||||
setUnlockError(err instanceof Error ? err.message : "Unlock failed");
|
||||
}
|
||||
};
|
||||
|
||||
// ── Export flow ────────────────────────────────────────────────
|
||||
|
||||
const handleExportRequest = (record: SmimeKeyRecord) => {
|
||||
setExportTargetRecord(record);
|
||||
setExportStep("storage");
|
||||
setExportStoragePass("");
|
||||
setExportError(null);
|
||||
setExportDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleExportSubmit = async (passphrase: string) => {
|
||||
if (!exportTargetRecord) return;
|
||||
|
||||
if (exportStep === "storage") {
|
||||
// Verify storage passphrase by attempting to decrypt
|
||||
try {
|
||||
const { decryptPrivateKeyBytes } = await import("@/lib/smime/pkcs12-import");
|
||||
await decryptPrivateKeyBytes(exportTargetRecord, passphrase);
|
||||
setExportStoragePass(passphrase);
|
||||
setExportStep("export");
|
||||
setExportError(null);
|
||||
} catch {
|
||||
setExportError(t("incorrect_passphrase"));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Export passphrase step
|
||||
try {
|
||||
const p12Bytes = await exportPkcs12(exportTargetRecord, exportStoragePass, passphrase);
|
||||
const filename = `${exportTargetRecord.email.replace(/[^a-zA-Z0-9.-]/g, '_')}.p12`;
|
||||
downloadPkcs12(p12Bytes, filename);
|
||||
setExportDialogOpen(false);
|
||||
setExportTargetRecord(null);
|
||||
setExportStoragePass("");
|
||||
setExportError(null);
|
||||
} catch (err) {
|
||||
setExportError(err instanceof Error ? err.message : "Export failed");
|
||||
}
|
||||
};
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────
|
||||
|
||||
const isExpired = (dateStr: string) => new Date(dateStr) < new Date();
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
try {
|
||||
return new Date(dateStr).toLocaleDateString();
|
||||
} catch {
|
||||
return dateStr;
|
||||
}
|
||||
};
|
||||
|
||||
const getBoundIdentityNames = (keyId: string): string[] => {
|
||||
return Object.entries(identityKeyBindings)
|
||||
.filter(([, kId]) => kId === keyId)
|
||||
.map(([identityId]) => {
|
||||
const identity = identities.find((i) => i.id === identityId);
|
||||
return identity?.email ?? identityId;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{error && (
|
||||
<div className="px-4 py-3 rounded-md bg-destructive/10 text-destructive text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Your Certificates ──────────────────────────────────── */}
|
||||
<SettingsSection
|
||||
title={t("your_certificates")}
|
||||
description={t("your_certificates_desc")}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{keyRecords.map((record) => {
|
||||
const expired = isExpired(record.notAfter);
|
||||
const unlocked = isKeyUnlocked(record.id);
|
||||
const boundIdentities = getBoundIdentityNames(record.id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={record.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg border border-border"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${expired ? "bg-destructive/10" : "bg-primary/10"}`}>
|
||||
{expired ? (
|
||||
<ShieldAlert className="w-4 h-4 text-destructive" />
|
||||
) : (
|
||||
<ShieldCheck className="w-4 h-4 text-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{record.email || record.subject}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{record.issuer} · {t("expires")} {formatDate(record.notAfter)}
|
||||
{expired && <span className="text-destructive ml-1">({t("expired")})</span>}
|
||||
</p>
|
||||
{boundIdentities.length > 0 && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("bound_to")}: {boundIdentities.join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{unlocked ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => lockKey(record.id)}
|
||||
title={t("lock")}
|
||||
>
|
||||
<Unlock className="w-4 h-4 text-green-600" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleUnlockRequest(record.id)}
|
||||
title={t("unlock")}
|
||||
>
|
||||
<Lock className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setCertModalRecord(record);
|
||||
setCertModalType("private");
|
||||
}}
|
||||
title={t("details")}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleExportRequest(record)}
|
||||
title={t("export")}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeKeyRecord(record.id)}
|
||||
title={t("delete")}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{keyRecords.length === 0 && !isLoading && (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">
|
||||
{t("no_certificates")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".p12,.pfx"
|
||||
className="hidden"
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isLoading}
|
||||
className="mt-2"
|
||||
>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
{t("import_pkcs12")}
|
||||
</Button>
|
||||
</SettingsSection>
|
||||
|
||||
{/* ── Recipient Certificates ─────────────────────────────── */}
|
||||
<SettingsSection
|
||||
title={t("recipient_certificates")}
|
||||
description={t("recipient_certificates_desc")}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{publicCerts.map((cert) => {
|
||||
const expired = isExpired(cert.notAfter);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cert.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg border border-border"
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center">
|
||||
<Users className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{cert.email || cert.subject}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{cert.issuer} · {cert.source}
|
||||
{expired && <span className="text-destructive ml-1">({t("expired")})</span>}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setCertModalRecord(cert);
|
||||
setCertModalType("public");
|
||||
}}
|
||||
title={t("details")}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removePublicCert(cert.id)}
|
||||
title={t("delete")}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{publicCerts.length === 0 && !isLoading && (
|
||||
<p className="text-sm text-muted-foreground py-4 text-center">
|
||||
{t("no_recipient_certs")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={pubCertInputRef}
|
||||
type="file"
|
||||
accept=".pem,.cer,.crt,.der"
|
||||
className="hidden"
|
||||
onChange={handlePublicCertFile}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => pubCertInputRef.current?.click()}
|
||||
disabled={isLoading}
|
||||
className="mt-2"
|
||||
>
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
{t("import_public_cert")}
|
||||
</Button>
|
||||
</SettingsSection>
|
||||
|
||||
{/* ── Identity Bindings ──────────────────────────────────── */}
|
||||
{identities.length > 0 && keyRecords.length > 0 && (
|
||||
<SettingsSection
|
||||
title={t("identity_bindings")}
|
||||
description={t("identity_bindings_desc")}
|
||||
>
|
||||
{identities.map((identity) => {
|
||||
const boundKeyId = identityKeyBindings[identity.id];
|
||||
return (
|
||||
<SettingItem key={identity.id} label={identity.email}>
|
||||
<select
|
||||
value={boundKeyId ?? ""}
|
||||
onChange={(e) =>
|
||||
bindIdentityToKey(identity.id, e.target.value || null)
|
||||
}
|
||||
className="text-sm bg-background border border-border rounded-md px-2 py-1"
|
||||
>
|
||||
<option value="">{t("no_key_bound")}</option>
|
||||
{keyRecords.map((kr) => (
|
||||
<option key={kr.id} value={kr.id}>
|
||||
{kr.email} ({kr.algorithm})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SettingItem>
|
||||
);
|
||||
})}
|
||||
</SettingsSection>
|
||||
)}
|
||||
|
||||
{/* ── Defaults ───────────────────────────────────────────── */}
|
||||
<SettingsSection
|
||||
title={t("defaults_title")}
|
||||
description={t("defaults_desc")}
|
||||
>
|
||||
<SettingItem
|
||||
label={t("encrypt_by_default")}
|
||||
description={t("encrypt_by_default_desc")}
|
||||
>
|
||||
<ToggleSwitch
|
||||
checked={defaultEncrypt}
|
||||
onChange={setEncryptDefault}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem
|
||||
label={t("auto_import_signer_certs")}
|
||||
description={t("auto_import_signer_certs_desc")}
|
||||
>
|
||||
<ToggleSwitch
|
||||
checked={autoImportSignerCerts}
|
||||
onChange={setAutoImportSignerCerts}
|
||||
/>
|
||||
</SettingItem>
|
||||
|
||||
{identities.map((identity) => {
|
||||
const bound = identityKeyBindings[identity.id];
|
||||
if (!bound) return null;
|
||||
return (
|
||||
<SettingItem
|
||||
key={identity.id}
|
||||
label={`${t("sign_default_for")} ${identity.email}`}
|
||||
>
|
||||
<ToggleSwitch
|
||||
checked={defaultSignIdentity[identity.id] ?? false}
|
||||
onChange={(v) => setSignDefault(identity.id, v)}
|
||||
/>
|
||||
</SettingItem>
|
||||
);
|
||||
})}
|
||||
</SettingsSection>
|
||||
|
||||
{/* ── Dialogs ────────────────────────────────────────────── */}
|
||||
<SmimePassphraseDialog
|
||||
isOpen={importDialogOpen}
|
||||
onClose={() => {
|
||||
setImportDialogOpen(false);
|
||||
setPendingFile(null);
|
||||
setPendingP12Pass("");
|
||||
setImportError(null);
|
||||
setImportStep("p12");
|
||||
}}
|
||||
onSubmit={handleImportSubmit}
|
||||
title={importStep === "p12" ? t("enter_p12_passphrase") : t("enter_storage_passphrase")}
|
||||
description={importStep === "p12" ? t("p12_passphrase_desc") : t("storage_passphrase_desc")}
|
||||
submitText={importStep === "p12" ? t("next") : t("import")}
|
||||
error={importError}
|
||||
showConfirm={importStep === "storage"}
|
||||
/>
|
||||
|
||||
<SmimePassphraseDialog
|
||||
isOpen={unlockDialogOpen}
|
||||
onClose={() => {
|
||||
setUnlockDialogOpen(false);
|
||||
setUnlockTargetId(null);
|
||||
setUnlockError(null);
|
||||
}}
|
||||
onSubmit={handleUnlockSubmit}
|
||||
title={t("unlock_key")}
|
||||
description={t("unlock_key_desc")}
|
||||
error={unlockError}
|
||||
/>
|
||||
|
||||
<SmimeCertificateModal
|
||||
isOpen={!!certModalRecord}
|
||||
onClose={() => setCertModalRecord(null)}
|
||||
record={certModalRecord}
|
||||
type={certModalType}
|
||||
/>
|
||||
|
||||
<SmimePassphraseDialog
|
||||
isOpen={exportDialogOpen}
|
||||
onClose={() => {
|
||||
setExportDialogOpen(false);
|
||||
setExportTargetRecord(null);
|
||||
setExportStoragePass("");
|
||||
setExportError(null);
|
||||
setExportStep("storage");
|
||||
}}
|
||||
onSubmit={handleExportSubmit}
|
||||
title={exportStep === "storage" ? t("enter_storage_passphrase") : t("enter_export_passphrase")}
|
||||
description={exportStep === "storage" ? t("export_storage_desc") : t("export_passphrase_desc")}
|
||||
submitText={exportStep === "storage" ? t("next") : t("export")}
|
||||
error={exportError}
|
||||
showConfirm={exportStep === "export"}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useVacationStore } from '@/stores/vacation-store';
|
||||
import { useAuthStore } from '@/stores/auth-store';
|
||||
import { useManagedAccountStore } from '@/stores/managed-account-store';
|
||||
import { Loader2, AlertTriangle, Eye, EyeOff } from 'lucide-react';
|
||||
import { toast } from '@/stores/toast-store';
|
||||
|
||||
@@ -19,6 +20,7 @@ export function VacationSettings() {
|
||||
const t = useTranslations('settings.vacation');
|
||||
const tNotifications = useTranslations('notifications');
|
||||
const { client } = useAuthStore();
|
||||
const managedAccountId = useManagedAccountStore((s) => s.managedAccountId);
|
||||
const {
|
||||
isEnabled,
|
||||
fromDate,
|
||||
@@ -43,9 +45,9 @@ export function VacationSettings() {
|
||||
|
||||
useEffect(() => {
|
||||
if (client && isSupported) {
|
||||
void fetchVacationResponse(client);
|
||||
void fetchVacationResponse(client, managedAccountId ?? undefined);
|
||||
}
|
||||
}, [client, isSupported, fetchVacationResponse]);
|
||||
}, [client, isSupported, managedAccountId, fetchVacationResponse]);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalEnabled(isEnabled);
|
||||
@@ -101,7 +103,7 @@ export function VacationSettings() {
|
||||
toDate: localToDate || null,
|
||||
subject: localSubject,
|
||||
textBody: localTextBody,
|
||||
});
|
||||
}, managedAccountId ?? undefined);
|
||||
|
||||
toast.success(tNotifications('vacation_saved'));
|
||||
} catch (error) {
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useAuthStore } from "@/stores/auth-store";
|
||||
import { useCalendarStore } from "@/stores/calendar-store";
|
||||
import { useWebDAVStore } from "@/stores/webdav-store";
|
||||
import { useSettingsStore } from "@/stores/settings-store";
|
||||
import { usePolicyStore } from "@/stores/policy-store";
|
||||
import { getTourSteps, type TourStep } from "./tour-steps";
|
||||
import { TourOverlay } from "./tour-overlay";
|
||||
|
||||
@@ -38,6 +39,7 @@ export function TourProvider({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const { isDemoMode } = useAuthStore();
|
||||
const { supportsCalendar } = useCalendarStore();
|
||||
const calendarEnabled = usePolicyStore((s) => s.isFeatureEnabled('calendarEnabled'));
|
||||
const { supportsWebDAV } = useWebDAVStore();
|
||||
const tourCompleted = useSettingsStore((s) => s.tourCompleted);
|
||||
const showOnboardingOnNewDevices = useSettingsStore((s) => s.showOnboardingOnNewDevices);
|
||||
@@ -47,7 +49,7 @@ export function TourProvider({ children }: { children: ReactNode }) {
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [hasCompletedTour, setHasCompletedTour] = useState(false);
|
||||
|
||||
const steps = getTourSteps({ isDemoMode, supportsCalendar, supportsWebDAV: supportsWebDAV !== false });
|
||||
const steps = getTourSteps({ isDemoMode, supportsCalendar: supportsCalendar && calendarEnabled, supportsWebDAV: supportsWebDAV !== false });
|
||||
|
||||
useEffect(() => {
|
||||
// One-time migration: if the legacy per-device flag is set but the synced
|
||||
|
||||
@@ -32,6 +32,9 @@ export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
|
||||
// Measure the rendered menu and clamp it inside the viewport before the
|
||||
// browser paints. We hide the element until this runs so the user never
|
||||
// sees the menu jump from an unclamped position to a clamped one.
|
||||
// `mounted` must be a dependency: on the very first open the menu isn't
|
||||
// in the DOM yet (mounted is still false), so this effect has to re-run
|
||||
// after the mount flip or the menu stays visibility:hidden.
|
||||
useLayoutEffect(() => {
|
||||
if (!isOpen) {
|
||||
setAdjustedPosition(null);
|
||||
@@ -57,7 +60,7 @@ export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
|
||||
y = Math.max(VIEWPORT_MARGIN, y);
|
||||
|
||||
setAdjustedPosition({ x, y });
|
||||
}, [isOpen, position.x, position.y]);
|
||||
}, [isOpen, mounted, position.x, position.y]);
|
||||
|
||||
const setRefs = (node: HTMLDivElement | null) => {
|
||||
localRef.current = node;
|
||||
|
||||
@@ -222,6 +222,29 @@ export function FlagDK(props: FlagProps) {
|
||||
);
|
||||
}
|
||||
|
||||
/** Romania – Vertical blue, yellow, red tricolour */
|
||||
export function FlagRO(props: FlagProps) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width={W} height={H} className={flagClass} {...props}>
|
||||
<rect width="1" height="2" fill="#002B7F" />
|
||||
<rect x="1" width="1" height="2" fill="#FCD116" />
|
||||
<rect x="2" width="1" height="2" fill="#CE1126" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Iran – Green, White, Red horizontal with emblem (simplified) */
|
||||
export function FlagIR(props: FlagProps) {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3" width={W} height={H} className={flagClass} {...props}>
|
||||
<rect width="4" height="1" fill="#239F40" />
|
||||
<rect y="1" width="4" height="1" fill="#fff" />
|
||||
<rect y="2" width="4" height="1" fill="#DA0000" />
|
||||
<circle cx="2" cy="1.5" r="0.3" fill="#DA0000" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** Map locale codes to flag components */
|
||||
export const flagComponents: Record<string, (props: FlagProps) => ReactElement> = {
|
||||
cs: FlagCS,
|
||||
@@ -238,8 +261,10 @@ export const flagComponents: Record<string, (props: FlagProps) => ReactElement>
|
||||
nl: FlagNL,
|
||||
pl: FlagPL,
|
||||
pt: FlagBR,
|
||||
ro: FlagRO,
|
||||
ru: FlagRU,
|
||||
tr: FlagTR,
|
||||
uk: FlagUA,
|
||||
zh: FlagCN,
|
||||
fa: FlagIR,
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@ const languages = [
|
||||
{ value: 'da', label: 'Dansk' },
|
||||
{ value: 'de', label: 'Deutsch' },
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'fa', label: 'فارسی' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'fr', label: 'Français' },
|
||||
{ value: 'it', label: 'Italiano' },
|
||||
@@ -20,6 +21,7 @@ const languages = [
|
||||
{ value: 'nl', label: 'Nederlands' },
|
||||
{ value: 'pl', label: 'Polski' },
|
||||
{ value: 'pt', label: 'Português' },
|
||||
{ value: 'ro', label: 'Română' },
|
||||
{ value: 'tr', label: 'Türkçe' },
|
||||
{ value: 'ru', label: 'Русский' },
|
||||
{ value: 'uk', label: 'Українська' },
|
||||
|
||||
@@ -222,7 +222,7 @@ export function useMailboxDrop({ mailbox, onDropComplete, onSuccess, onError }:
|
||||
} finally {
|
||||
endDrag();
|
||||
}
|
||||
}, [client, mailbox, mailboxes, isValidTarget, moveEmailsToMailbox, crossAccountMoveEmails, draggedEmails, selectedEmailIds, clearSelection, refreshCurrentMailbox, endDrag, onDropComplete, onSuccess, onError]);
|
||||
}, [client, mailbox, mailboxes, isValidTarget, moveEmailsToMailbox, crossAccountMoveEmails, draggedEmails, sourceMailboxId, selectedEmailIds, clearSelection, refreshCurrentMailbox, endDrag, onDropComplete, onSuccess, onError]);
|
||||
|
||||
const valid = isValidTarget();
|
||||
|
||||
|
||||
@@ -23,9 +23,15 @@ export default getRequestConfig(async ({ requestLocale }) => {
|
||||
case 'es':
|
||||
messages = (await import('../locales/es/common.json')).default;
|
||||
break;
|
||||
case 'fa':
|
||||
messages = (await import('../locales/fa/common.json')).default;
|
||||
break;
|
||||
case 'fr':
|
||||
messages = (await import('../locales/fr/common.json')).default;
|
||||
break;
|
||||
case 'hu':
|
||||
messages = (await import('../locales/hu/common.json')).default;
|
||||
break;
|
||||
case 'it':
|
||||
messages = (await import('../locales/it/common.json')).default;
|
||||
break;
|
||||
@@ -47,6 +53,9 @@ export default getRequestConfig(async ({ requestLocale }) => {
|
||||
case 'pt':
|
||||
messages = (await import('../locales/pt/common.json')).default;
|
||||
break;
|
||||
case 'ro':
|
||||
messages = (await import('../locales/ro/common.json')).default;
|
||||
break;
|
||||
case 'ru':
|
||||
messages = (await import('../locales/ru/common.json')).default;
|
||||
break;
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ const localePrefix = (process.env.NEXT_PUBLIC_LOCALE_PREFIX ?? 'never') as
|
||||
| 'always'
|
||||
| 'as-needed';
|
||||
|
||||
const SUPPORTED_LOCALES = ['cs', 'da', 'de', 'en', 'es', 'fr', 'hu', 'it', 'ja', 'ko', 'lv', 'nl', 'pl', 'pt', 'ru', 'tr', 'uk', 'zh'] as const;
|
||||
const SUPPORTED_LOCALES = ['cs', 'da', 'de', 'en', 'es', 'fa', 'fr', 'hu', 'it', 'ja', 'ko', 'lv', 'nl', 'pl', 'pt', 'ro', 'ru', 'tr', 'uk', 'zh'] as const;
|
||||
|
||||
// Fallback locale used when the visitor's Accept-Language header does not
|
||||
// match any supported locale (and no NEXT_LOCALE cookie is set yet). Admins
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
import { describe, it, expect, beforeEach, afterEach } from 'vitest';
|
||||
import {
|
||||
snapshotAccount,
|
||||
restoreAccount,
|
||||
clearAllStores,
|
||||
evictAccount,
|
||||
evictAll,
|
||||
} from '@/lib/account-state-manager';
|
||||
import { useEmailStore } from '@/stores/email-store';
|
||||
import { useContactStore } from '@/stores/contact-store';
|
||||
import { useCalendarStore } from '@/stores/calendar-store';
|
||||
import { useFilterStore } from '@/stores/filter-store';
|
||||
import { useIdentityStore } from '@/stores/identity-store';
|
||||
import { useVacationStore } from '@/stores/vacation-store';
|
||||
import { DEFAULT_SEARCH_FILTERS } from '@/lib/jmap/search-utils';
|
||||
import { makeEmail, makeMailbox } from './helpers/factories';
|
||||
|
||||
// The store singletons and the module-level snapshot cache persist across
|
||||
// tests; reset both around every test.
|
||||
beforeEach(() => evictAll());
|
||||
afterEach(() => evictAll());
|
||||
|
||||
describe('snapshotAccount / restoreAccount', () => {
|
||||
it('round-trips the captured fields across all six stores', () => {
|
||||
useEmailStore.setState({
|
||||
emails: [makeEmail({ id: 'a1' })],
|
||||
mailboxes: [makeMailbox({ id: 'a-in' })],
|
||||
selectedMailbox: 'a-in',
|
||||
searchQuery: 'queryA',
|
||||
quota: { used: 1, total: 2 },
|
||||
});
|
||||
useContactStore.setState({ supportsSync: true });
|
||||
useCalendarStore.setState({ viewMode: 'week', supportsCalendar: true });
|
||||
useFilterStore.setState({ isSupported: true });
|
||||
useIdentityStore.setState({ preferredPrimaryId: 'idA' });
|
||||
useVacationStore.setState({ isEnabled: true });
|
||||
|
||||
snapshotAccount('A');
|
||||
|
||||
// Mutate everything to "account B" values.
|
||||
useEmailStore.setState({ emails: [], selectedMailbox: 'b-in', searchQuery: 'queryB', quota: null });
|
||||
useContactStore.setState({ supportsSync: false });
|
||||
useCalendarStore.setState({ viewMode: 'month', supportsCalendar: false });
|
||||
useFilterStore.setState({ isSupported: false });
|
||||
useIdentityStore.setState({ preferredPrimaryId: 'idB' });
|
||||
useVacationStore.setState({ isEnabled: false });
|
||||
|
||||
expect(restoreAccount('A')).toBe(true);
|
||||
|
||||
expect(useEmailStore.getState().emails.map((e) => e.id)).toEqual(['a1']);
|
||||
expect(useEmailStore.getState().selectedMailbox).toBe('a-in');
|
||||
expect(useEmailStore.getState().searchQuery).toBe('queryA');
|
||||
expect(useEmailStore.getState().quota).toEqual({ used: 1, total: 2 });
|
||||
expect(useContactStore.getState().supportsSync).toBe(true);
|
||||
expect(useCalendarStore.getState().viewMode).toBe('week');
|
||||
expect(useFilterStore.getState().isSupported).toBe(true);
|
||||
expect(useIdentityStore.getState().preferredPrimaryId).toBe('idA');
|
||||
expect(useVacationStore.getState().isEnabled).toBe(true);
|
||||
});
|
||||
|
||||
it('resets fields outside the snapshot subset to their defaults (no cross-account leak)', () => {
|
||||
// isLoading is NOT part of the email snapshot subset.
|
||||
useEmailStore.setState({ selectedMailbox: 'a-in', isLoading: false });
|
||||
snapshotAccount('A');
|
||||
useEmailStore.setState({ selectedMailbox: 'b-in', isLoading: true });
|
||||
|
||||
restoreAccount('A');
|
||||
|
||||
expect(useEmailStore.getState().selectedMailbox).toBe('a-in'); // captured → restored
|
||||
expect(useEmailStore.getState().isLoading).toBe(false); // uncaptured → reset, not leaked
|
||||
});
|
||||
|
||||
it('decouples the snapshot from later in-place mutation of the source array', () => {
|
||||
const arr = [makeEmail({ id: '1' })];
|
||||
useEmailStore.setState({ emails: arr });
|
||||
snapshotAccount('A');
|
||||
arr.push(makeEmail({ id: '2' })); // mutate the same array after snapshot
|
||||
useEmailStore.setState({ emails: [] });
|
||||
|
||||
restoreAccount('A');
|
||||
// The post-snapshot mutation did NOT leak into the snapshot.
|
||||
expect(useEmailStore.getState().emails.map((e) => e.id)).toEqual(['1']);
|
||||
});
|
||||
|
||||
it('returns false and leaves stores untouched for an unknown account', () => {
|
||||
useEmailStore.setState({ searchQuery: 'keep' });
|
||||
expect(restoreAccount('nope')).toBe(false);
|
||||
expect(useEmailStore.getState().searchQuery).toBe('keep');
|
||||
});
|
||||
});
|
||||
|
||||
describe('clearAllStores', () => {
|
||||
it('resets the email store to fresh empty collections', () => {
|
||||
useEmailStore.setState({
|
||||
emails: [makeEmail({ id: 'x' })],
|
||||
selectedEmailIds: new Set(['x']),
|
||||
searchQuery: 'q',
|
||||
tagCounts: { a: { total: 1, unread: 0 } },
|
||||
threadEmailsCache: new Map([['t', []]]),
|
||||
});
|
||||
|
||||
clearAllStores();
|
||||
|
||||
const s = useEmailStore.getState();
|
||||
expect(s.emails).toEqual([]);
|
||||
expect(s.searchQuery).toBe('');
|
||||
expect(s.selectedEmailIds.size).toBe(0);
|
||||
expect(s.threadEmailsCache.size).toBe(0);
|
||||
expect(s.tagCounts).toEqual({});
|
||||
expect(s.searchFilters).toEqual(DEFAULT_SEARCH_FILTERS);
|
||||
});
|
||||
});
|
||||
|
||||
describe('evictAccount / evictAll', () => {
|
||||
it('evictAccount drops a single snapshot', () => {
|
||||
snapshotAccount('A');
|
||||
evictAccount('A');
|
||||
expect(restoreAccount('A')).toBe(false);
|
||||
});
|
||||
|
||||
it('evictAll drops every snapshot', () => {
|
||||
snapshotAccount('B');
|
||||
snapshotAccount('C');
|
||||
evictAll();
|
||||
expect(restoreAccount('B')).toBe(false);
|
||||
expect(restoreAccount('C')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import {
|
||||
encryptSession,
|
||||
decryptSession,
|
||||
encryptPayload,
|
||||
decryptPayload,
|
||||
} from '@/lib/auth/crypto';
|
||||
|
||||
// crypto.ts derives its key solely from getSessionSecret(); mock that one seam
|
||||
// so we control the secret without touching configManager / env-file lookups.
|
||||
const { secretRef } = vi.hoisted(() => ({ secretRef: { value: 'x'.repeat(32) } }));
|
||||
vi.mock('@/lib/auth/session-secret', () => ({
|
||||
getSessionSecret: () => secretRef.value,
|
||||
hasSessionSecret: () => secretRef.value.length > 0,
|
||||
}));
|
||||
vi.mock('@/lib/logger', () => ({
|
||||
logger: { warn: () => {}, error: () => {}, info: () => {}, debug: () => {} },
|
||||
}));
|
||||
|
||||
const SECRET = 'x'.repeat(32);
|
||||
|
||||
beforeEach(() => {
|
||||
secretRef.value = SECRET;
|
||||
});
|
||||
|
||||
describe('encryptSession / decryptSession', () => {
|
||||
it('round-trips a session', () => {
|
||||
const token = encryptSession('https://mail.example.com', 'alice', 's3cret');
|
||||
expect(decryptSession(token)).toEqual({
|
||||
serverUrl: 'https://mail.example.com',
|
||||
username: 'alice',
|
||||
password: 's3cret',
|
||||
});
|
||||
});
|
||||
|
||||
it('produces a base64 token with a random IV (two encrypts differ, both decrypt equal)', () => {
|
||||
const a = encryptSession('https://x', 'u', 'p');
|
||||
const b = encryptSession('https://x', 'u', 'p');
|
||||
expect(a).not.toBe(b);
|
||||
expect(Buffer.from(a, 'base64').toString('base64')).toBe(a); // valid base64
|
||||
expect(decryptSession(a)).toEqual(decryptSession(b));
|
||||
});
|
||||
|
||||
it('returns null (not throw) on a tampered auth tag', () => {
|
||||
const token = encryptSession('https://x', 'u', 'p');
|
||||
const buf = Buffer.from(token, 'base64');
|
||||
buf[13] ^= 0xff; // flip a byte inside the GCM tag region (bytes 12..28)
|
||||
expect(decryptSession(buf.toString('base64'))).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null on a token shorter than IV+TAG', () => {
|
||||
expect(decryptSession(Buffer.alloc(10).toString('base64'))).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when the version is not 1', () => {
|
||||
const token = encryptPayload({ v: 2, serverUrl: 'https://x', username: 'u', password: 'p' });
|
||||
expect(decryptSession(token)).toBeNull();
|
||||
});
|
||||
|
||||
it('returns null when a required field is missing', () => {
|
||||
const token = encryptPayload({ v: 1, serverUrl: 'https://x', username: 'u' });
|
||||
expect(decryptSession(token)).toBeNull();
|
||||
});
|
||||
|
||||
it('throws when no secret is configured', () => {
|
||||
secretRef.value = '';
|
||||
expect(() => encryptSession('https://x', 'u', 'p')).toThrow('SESSION_SECRET not configured');
|
||||
});
|
||||
|
||||
it('throws when the secret is shorter than 32 characters', () => {
|
||||
secretRef.value = 'tooshort';
|
||||
expect(() => encryptSession('https://x', 'u', 'p')).toThrow(/at least 32 characters/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('encryptPayload / decryptPayload', () => {
|
||||
it('round-trips an arbitrary object', () => {
|
||||
const token = encryptPayload({ a: 1, b: 'two', c: { nested: true } });
|
||||
expect(decryptPayload(token)).toEqual({ a: 1, b: 'two', c: { nested: true } });
|
||||
});
|
||||
|
||||
it('does NOT enforce the version/field guard that decryptSession applies', () => {
|
||||
// CHARACTERISATION: decryptPayload returns whatever JSON parsed, with no
|
||||
// v===1 / required-field validation (unlike decryptSession).
|
||||
const token = encryptPayload({ v: 2, anything: 'goes' });
|
||||
expect(decryptPayload(token)).toEqual({ v: 2, anything: 'goes' });
|
||||
});
|
||||
|
||||
it('returns null on a tampered token', () => {
|
||||
const token = encryptPayload({ a: 1 });
|
||||
const buf = Buffer.from(token, 'base64');
|
||||
buf[20] ^= 0xff;
|
||||
expect(decryptPayload(buf.toString('base64'))).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -72,3 +72,33 @@ describe('withBasePath — asset-URL fallbacks under a subpath', () => {
|
||||
expect(getPathPrefix()).toBe('/webmail');
|
||||
});
|
||||
});
|
||||
|
||||
describe('toRouterPath — router.push paths under a subpath', () => {
|
||||
// With a build-time basePath, Next's router prepends the prefix itself, so
|
||||
// browser-derived paths (redirect_after_login stores
|
||||
// window.location.pathname) must be stripped or the redirect lands on
|
||||
// /webmail/webmail/en. See #390.
|
||||
it('strips the static base path from a stored browser path', async () => {
|
||||
const { toRouterPath } = await loadNav('/webmail');
|
||||
expect(toRouterPath('/webmail/en')).toBe('/en');
|
||||
expect(toRouterPath('/webmail/en/calendar?view=day')).toBe('/en/calendar?view=day');
|
||||
expect(toRouterPath('/webmail')).toBe('/');
|
||||
expect(toRouterPath('/webmail?compose=1')).toBe('/?compose=1');
|
||||
});
|
||||
|
||||
it('leaves already-stripped and unrelated paths alone', async () => {
|
||||
const { toRouterPath } = await loadNav('/webmail');
|
||||
expect(toRouterPath('/en')).toBe('/en');
|
||||
expect(toRouterPath('/')).toBe('/');
|
||||
// Shares the prefix text but is a different first segment.
|
||||
expect(toRouterPath('/webmail2/en')).toBe('/webmail2/en');
|
||||
});
|
||||
|
||||
it('passes paths through unchanged when no base path is built in', async () => {
|
||||
// Legacy runtime-detected proxy mounts: Next knows nothing about the
|
||||
// prefix, so router.push needs the full prefixed path.
|
||||
const { toRouterPath } = await loadNav(undefined);
|
||||
expect(toRouterPath('/webmail/en')).toBe('/webmail/en');
|
||||
expect(toRouterPath('/en')).toBe('/en');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import type { ContactCard } from '@/lib/jmap/types';
|
||||
import {
|
||||
createBirthdayCalendar,
|
||||
generateBirthdayEvents,
|
||||
BIRTHDAY_CALENDAR_ID,
|
||||
BIRTHDAY_CALENDAR_COLOR,
|
||||
} from '@/lib/birthday-calendar';
|
||||
|
||||
const contact = (over: Record<string, unknown> = {}): ContactCard =>
|
||||
({
|
||||
id: 'c1',
|
||||
'@type': 'Card',
|
||||
name: { full: 'Alice Smith' },
|
||||
anniversaries: { b1: { '@type': 'Anniversary', kind: 'birth', date: '1990-05-15' } },
|
||||
...over,
|
||||
} as unknown as ContactCard);
|
||||
|
||||
describe('createBirthdayCalendar', () => {
|
||||
it('returns the virtual calendar with defaults', () => {
|
||||
const cal = createBirthdayCalendar();
|
||||
expect(cal).toMatchObject({
|
||||
id: BIRTHDAY_CALENDAR_ID,
|
||||
name: 'Birthdays',
|
||||
color: BIRTHDAY_CALENDAR_COLOR,
|
||||
isSubscribed: true,
|
||||
myRights: { mayReadItems: true, mayWriteAll: false, mayDelete: false },
|
||||
});
|
||||
});
|
||||
|
||||
it('honours name/color overrides', () => {
|
||||
expect(createBirthdayCalendar('My BDays', '#fff')).toMatchObject({ name: 'My BDays', color: '#fff' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('generateBirthdayEvents', () => {
|
||||
it('emits one event per year in range, with age and stable ids', () => {
|
||||
const events = generateBirthdayEvents([contact()], '2020-01-01', '2022-12-31');
|
||||
expect(events.map((e) => e.id)).toEqual([
|
||||
'birthday-c1-b1-2020',
|
||||
'birthday-c1-b1-2021',
|
||||
'birthday-c1-b1-2022',
|
||||
]);
|
||||
expect(events[0]).toMatchObject({
|
||||
uid: 'birthday-c1-b1',
|
||||
title: '🎂 Alice Smith (30)',
|
||||
start: '2020-05-15T00:00:00',
|
||||
calendarIds: { [BIRTHDAY_CALENDAR_ID]: true },
|
||||
showWithoutTime: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('omits the age when the birthday has no year (partial date)', () => {
|
||||
const c = contact({ anniversaries: { b1: { '@type': 'Anniversary', kind: 'birth', date: '--05-15' } } });
|
||||
const events = generateBirthdayEvents([c], '2021-01-01', '2021-12-31');
|
||||
expect(events).toHaveLength(1);
|
||||
expect(events[0].title).toBe('🎂 Alice Smith');
|
||||
});
|
||||
|
||||
it('parses a Timestamp anniversary date', () => {
|
||||
const c = contact({ anniversaries: { b1: { '@type': 'Anniversary', kind: 'birth', date: { '@type': 'Timestamp', utc: '1985-03-10T00:00:00Z' } } } });
|
||||
const events = generateBirthdayEvents([c], '2021-01-01', '2021-12-31');
|
||||
expect(events[0].start).toBe('2021-03-10T00:00:00');
|
||||
});
|
||||
|
||||
it('parses a PartialDate anniversary date', () => {
|
||||
const c = contact({ anniversaries: { b1: { '@type': 'Anniversary', kind: 'birth', date: { month: 7, day: 4 } } } });
|
||||
const events = generateBirthdayEvents([c], '2021-01-01', '2021-12-31');
|
||||
expect(events[0].start).toBe('2021-07-04T00:00:00');
|
||||
});
|
||||
|
||||
it('clamps Feb 29 to Feb 28 in a non-leap year', () => {
|
||||
const c = contact({ anniversaries: { b1: { '@type': 'Anniversary', kind: 'birth', date: '2000-02-29' } } });
|
||||
const events = generateBirthdayEvents([c], '2021-01-01', '2021-12-31');
|
||||
expect(events[0].start).toBe('2021-02-28T00:00:00');
|
||||
});
|
||||
|
||||
it('excludes occurrences outside the range', () => {
|
||||
expect(generateBirthdayEvents([contact()], '2021-01-01', '2021-02-28')).toEqual([]); // May birthday
|
||||
});
|
||||
|
||||
it('returns [] for an invalid range', () => {
|
||||
expect(generateBirthdayEvents([contact()], 'not-a-date', '2021-12-31')).toEqual([]);
|
||||
});
|
||||
|
||||
it('skips non-birth anniversaries', () => {
|
||||
const c = contact({ anniversaries: { w1: { '@type': 'Anniversary', kind: 'wedding', date: '2010-06-01' } } });
|
||||
expect(generateBirthdayEvents([c], '2021-01-01', '2021-12-31')).toEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from 'vitest';
|
||||
|
||||
vi.mock('next/server', () => ({
|
||||
NextResponse: {
|
||||
json: (data: unknown, init?: { status?: number }) => ({ status: init?.status ?? 200, json: async () => data }),
|
||||
},
|
||||
NextRequest: class {},
|
||||
}));
|
||||
vi.mock('@/lib/logger', () => ({ logger: { warn: () => {}, error: () => {} } }));
|
||||
vi.mock('@/lib/stalwart/credentials', () => ({ getStalwartCredentials: vi.fn() }));
|
||||
|
||||
import { POST } from '@/app/api/caldav/discover/route';
|
||||
import { getStalwartCredentials } from '@/lib/stalwart/credentials';
|
||||
|
||||
const mockCreds = getStalwartCredentials as unknown as Mock;
|
||||
const CREDS = { serverUrl: 'https://mail.example.com', username: 'u', authHeader: 'Basic abc' };
|
||||
|
||||
let fetchSpy: Mock;
|
||||
|
||||
function makeReq(body: unknown): Parameters<typeof POST>[0] {
|
||||
return { headers: { get: () => null }, json: async () => body } as unknown as Parameters<typeof POST>[0];
|
||||
}
|
||||
function read(res: unknown) {
|
||||
return res as { status: number; json: () => Promise<{ wellKnownUrl: string; accounts: Record<string, { url: string | null; resolvedAccount: string | null }> }> };
|
||||
}
|
||||
const target = (c: string) => `https://mail.example.com/dav/cal/${c}`;
|
||||
|
||||
beforeEach(() => {
|
||||
mockCreds.mockResolvedValue(CREDS);
|
||||
fetchSpy = vi.fn();
|
||||
vi.stubGlobal('fetch', fetchSpy);
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
describe('POST /api/caldav/discover', () => {
|
||||
it('401 without credentials', async () => {
|
||||
mockCreds.mockResolvedValue(null);
|
||||
const res = read(await POST(makeReq({ accounts: [] })));
|
||||
expect(res.status).toBe(401);
|
||||
});
|
||||
|
||||
it('returns the .well-known url and resolves the first 207 candidate, skipping the rest', async () => {
|
||||
fetchSpy.mockResolvedValue({ status: 207, headers: new Headers() });
|
||||
const res = read(await POST(makeReq({ accounts: [{ key: 'A', candidates: ['c1', 'c2'] }] })));
|
||||
const data = await res.json();
|
||||
|
||||
expect(data.wellKnownUrl).toBe('https://mail.example.com/.well-known/caldav');
|
||||
expect(data.accounts.A).toEqual({ url: target('c1'), resolvedAccount: 'c1' });
|
||||
expect(fetchSpy).toHaveBeenCalledTimes(1); // c2 never probed
|
||||
expect(fetchSpy).toHaveBeenCalledWith(target('c1'), expect.objectContaining({ method: 'PROPFIND' }));
|
||||
});
|
||||
|
||||
it('resolves a redirect Location relative to the probe URL', async () => {
|
||||
fetchSpy.mockResolvedValue({ status: 302, headers: new Headers({ Location: '/dav/cal/real-home' }) });
|
||||
const res = read(await POST(makeReq({ accounts: [{ key: 'A', candidates: ['c1'] }] })));
|
||||
const data = await res.json();
|
||||
expect(data.accounts.A).toEqual({ url: 'https://mail.example.com/dav/cal/real-home', resolvedAccount: 'c1' });
|
||||
});
|
||||
|
||||
it('returns null url when every candidate fails, but still 200', async () => {
|
||||
fetchSpy.mockResolvedValue({ status: 404, headers: new Headers() });
|
||||
const res = read(await POST(makeReq({ accounts: [{ key: 'A', candidates: ['c1', 'c2'] }] })));
|
||||
expect(res.status).toBe(200);
|
||||
expect((await res.json()).accounts.A).toEqual({ url: null, resolvedAccount: null });
|
||||
expect(fetchSpy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('catches a probe error and continues to the next candidate', async () => {
|
||||
fetchSpy
|
||||
.mockRejectedValueOnce(new Error('boom'))
|
||||
.mockResolvedValueOnce({ status: 207, headers: new Headers() });
|
||||
const res = read(await POST(makeReq({ accounts: [{ key: 'A', candidates: ['c1', 'c2'] }] })));
|
||||
expect((await res.json()).accounts.A).toEqual({ url: target('c2'), resolvedAccount: 'c2' });
|
||||
});
|
||||
|
||||
it('de-duplicates and trims candidates before probing', async () => {
|
||||
fetchSpy.mockResolvedValue({ status: 404, headers: new Headers() });
|
||||
await POST(makeReq({ accounts: [{ key: 'A', candidates: [' c1 ', 'c1', '', 'c1'] }] }));
|
||||
expect(fetchSpy).toHaveBeenCalledTimes(1); // collapsed to a single "c1"
|
||||
expect(fetchSpy).toHaveBeenCalledWith(target('c1'), expect.anything());
|
||||
});
|
||||
});
|
||||
@@ -274,26 +274,31 @@ describe('buildParticipantMap', () => {
|
||||
|
||||
expect(Object.keys(map)).toHaveLength(3);
|
||||
|
||||
const org = map['organizer'];
|
||||
expect(org.name).toBe('Alice');
|
||||
expect(org.email).toBe('alice@example.com');
|
||||
expect(org.roles).toEqual({ owner: true, attendee: true });
|
||||
expect(org.participationStatus).toBe('accepted');
|
||||
expect(org.scheduleAgent).toBe('server');
|
||||
expect(org.sendTo).toEqual({ imip: 'mailto:alice@example.com' });
|
||||
expect(org.expectReply).toBe(false);
|
||||
// Entries are keyed by generated UUIDs (RFC 8984 participant ids), so
|
||||
// look them up by identity rather than by a fixed key.
|
||||
const entries = Object.values(map);
|
||||
|
||||
const att0 = map['attendee-0'];
|
||||
expect(att0.name).toBe('Bob');
|
||||
expect(att0.email).toBe('bob@example.com');
|
||||
expect(att0.roles).toEqual({ attendee: true });
|
||||
expect(att0.participationStatus).toBe('needs-action');
|
||||
expect(att0.scheduleAgent).toBe('server');
|
||||
expect(att0.expectReply).toBe(true);
|
||||
const org = entries.find(p => p.roles?.owner);
|
||||
expect(org).toBeDefined();
|
||||
expect(org!.name).toBe('Alice');
|
||||
expect(org!.email).toBe('alice@example.com');
|
||||
expect(org!.roles).toEqual({ owner: true, attendee: true });
|
||||
expect(org!.participationStatus).toBe('accepted');
|
||||
expect(org!.scheduleAgent).toBe('server');
|
||||
expect(org!.sendTo).toEqual({ imip: 'mailto:alice@example.com' });
|
||||
expect(org!.expectReply).toBe(false);
|
||||
|
||||
const att1 = map['attendee-1'];
|
||||
expect(att1.name).toBe('Carol');
|
||||
expect(att1.email).toBe('carol@example.com');
|
||||
const att0 = entries.find(p => p.email === 'bob@example.com');
|
||||
expect(att0).toBeDefined();
|
||||
expect(att0!.name).toBe('Bob');
|
||||
expect(att0!.roles).toEqual({ attendee: true });
|
||||
expect(att0!.participationStatus).toBe('needs-action');
|
||||
expect(att0!.scheduleAgent).toBe('server');
|
||||
expect(att0!.expectReply).toBe(true);
|
||||
|
||||
const att1 = entries.find(p => p.email === 'carol@example.com');
|
||||
expect(att1).toBeDefined();
|
||||
expect(att1!.name).toBe('Carol');
|
||||
});
|
||||
|
||||
it('creates only organizer when no attendees', () => {
|
||||
@@ -302,7 +307,9 @@ describe('buildParticipantMap', () => {
|
||||
[]
|
||||
);
|
||||
expect(Object.keys(map)).toHaveLength(1);
|
||||
expect(map['organizer']).toBeDefined();
|
||||
const org = Object.values(map)[0];
|
||||
expect(org).toBeDefined();
|
||||
expect(org.roles).toEqual({ owner: true, attendee: true });
|
||||
});
|
||||
|
||||
it('sets @type to Participant for all entries', () => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { describe, expect, it, beforeAll, afterAll } from 'vitest';
|
||||
import type { CalendarEvent } from '@/lib/jmap/types';
|
||||
import {
|
||||
buildTimedFullDayWeekSegments,
|
||||
@@ -14,6 +14,18 @@ import {
|
||||
normalizeAllDayDuration,
|
||||
} from '../calendar-utils';
|
||||
|
||||
// Several suites assert wall-clock minutes/dates derived in local time. Pin the
|
||||
// timezone to UTC so results don't depend on the host's zone (CI here runs at
|
||||
// UTC+2); the expected values below are all UTC.
|
||||
let originalTZ: string | undefined;
|
||||
beforeAll(() => {
|
||||
originalTZ = process.env.TZ;
|
||||
process.env.TZ = 'UTC';
|
||||
});
|
||||
afterAll(() => {
|
||||
process.env.TZ = originalTZ;
|
||||
});
|
||||
|
||||
function expectLocalDateParts(date: Date, year: number, month: number, day: number, hour: number, minute = 0, second = 0, millisecond = 0) {
|
||||
expect(date.getFullYear()).toBe(year);
|
||||
expect(date.getMonth()).toBe(month - 1);
|
||||
@@ -124,7 +136,7 @@ describe('calendar-utils all-day handling', () => {
|
||||
});
|
||||
|
||||
expect(getTimedEventBoundsForDay(event, new Date('2026-03-14T00:00:00Z'))).toMatchObject({
|
||||
startMinutes: 1380,
|
||||
startMinutes: 1320,
|
||||
endMinutes: 1440,
|
||||
continuesBefore: false,
|
||||
continuesAfter: true,
|
||||
@@ -132,7 +144,7 @@ describe('calendar-utils all-day handling', () => {
|
||||
|
||||
expect(getTimedEventBoundsForDay(event, new Date('2026-03-15T00:00:00Z'))).toMatchObject({
|
||||
startMinutes: 0,
|
||||
endMinutes: 180,
|
||||
endMinutes: 120,
|
||||
continuesBefore: true,
|
||||
continuesAfter: false,
|
||||
});
|
||||
@@ -152,7 +164,7 @@ describe('calendar-utils all-day handling', () => {
|
||||
expect(layout).toHaveLength(1);
|
||||
expect(layout[0]).toMatchObject({
|
||||
startMinutes: 0,
|
||||
endMinutes: 180,
|
||||
endMinutes: 120,
|
||||
column: 0,
|
||||
totalColumns: 1,
|
||||
continuesBefore: true,
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
// Pin TZ so the local-time date rendering in dateParts is deterministic.
|
||||
process.env.TZ = 'UTC';
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import type { Email } from '@/lib/jmap/types';
|
||||
import {
|
||||
emailExportFilename,
|
||||
attachmentDownloadFilename,
|
||||
attachmentsBundleFilename,
|
||||
bundleExportFilename,
|
||||
emailVars,
|
||||
attachmentVars,
|
||||
buildSampleEmail,
|
||||
} from '@/lib/download-filename';
|
||||
|
||||
const makeEmail = (over: Partial<Email>): Email =>
|
||||
({ id: 'e', receivedAt: '2026-05-22T14:05:33Z', from: [], to: [], subject: '', ...over } as unknown as Email);
|
||||
|
||||
describe('emailExportFilename', () => {
|
||||
it('renders the default template from the sample email (UTC)', () => {
|
||||
expect(emailExportFilename(buildSampleEmail())).toBe(
|
||||
'2026-05-22 14.05.33 (Alice Sender-Bob Recipient) Benachrichtigung von Ihrem Gerät.eml',
|
||||
);
|
||||
});
|
||||
|
||||
it('applies lowercase + stripDiacritics + underscore-spaces transforms', () => {
|
||||
expect(
|
||||
emailExportFilename(buildSampleEmail(), {
|
||||
template: '{from_name}-{subject}',
|
||||
lowercase: true,
|
||||
stripDiacritics: true,
|
||||
spaceReplacement: 'underscore',
|
||||
}),
|
||||
).toBe('alice_sender-benachrichtigung_von_ihrem_gerat.eml');
|
||||
});
|
||||
|
||||
it('falls back to "no subject" for an empty subject', () => {
|
||||
expect(emailExportFilename(makeEmail({ subject: '' }), '{subject}')).toBe('no subject.eml');
|
||||
});
|
||||
|
||||
it('falls back to "email" when the template renders empty', () => {
|
||||
expect(emailExportFilename(makeEmail({}), '{unknown_token}')).toBe('email.eml');
|
||||
});
|
||||
|
||||
it('lets a single long token reach the 200-char filename cap', () => {
|
||||
// Each {token} is now capped at FILENAME_MAX_LEN (200), so the overall
|
||||
// filename limit governs instead of an earlier 80-char per-token cap.
|
||||
const out = emailExportFilename(makeEmail({ subject: 'a'.repeat(300) }), '{subject}');
|
||||
expect(out).toBe('a'.repeat(200) + '.eml');
|
||||
});
|
||||
});
|
||||
|
||||
describe('attachmentDownloadFilename', () => {
|
||||
it('email===null: sanitises the raw attachment name, applying transforms', () => {
|
||||
expect(attachmentDownloadFilename(null, { name: 'Report.PDF' })).toBe('Report.PDF');
|
||||
expect(attachmentDownloadFilename(null, { name: 'Report.PDF' }, { lowercase: true })).toBe('report.pdf');
|
||||
});
|
||||
|
||||
it('{filename} token preserves the original extension', () => {
|
||||
expect(
|
||||
attachmentDownloadFilename(buildSampleEmail(), { name: 'My Report.pdf' }, '{filename}'),
|
||||
).toBe('My Report.pdf');
|
||||
});
|
||||
|
||||
it('template without {ext}/{filename} appends the attachment extension', () => {
|
||||
expect(
|
||||
attachmentDownloadFilename(buildSampleEmail(), { name: 'My Report.PDF' }, '{name}'),
|
||||
).toBe('My Report.PDF');
|
||||
expect(
|
||||
attachmentDownloadFilename(buildSampleEmail(), { name: 'My Report.PDF' }, { template: '{name}', lowercase: true }),
|
||||
).toBe('my report.pdf');
|
||||
});
|
||||
|
||||
it('attachment with no extension yields no trailing dot', () => {
|
||||
expect(attachmentDownloadFilename(buildSampleEmail(), { name: 'noext' }, '{name}')).toBe('noext');
|
||||
});
|
||||
|
||||
it('sanitises path-traversal characters out of the name', () => {
|
||||
const out = attachmentDownloadFilename(null, { name: '../../etc/passwd' });
|
||||
expect(out).not.toContain('/');
|
||||
// CHARACTERISATION: slashes → "_", then the leading "._-" run is stripped,
|
||||
// so "../../etc/passwd" collapses to "etc_passwd".
|
||||
expect(out).toBe('etc_passwd');
|
||||
});
|
||||
});
|
||||
|
||||
describe('bundleExportFilename', () => {
|
||||
it('substitutes {count} and appends .zip', () => {
|
||||
expect(bundleExportFilename(3, '{count}-emails', '2026-05-22T14:05:33Z')).toBe('3-emails.zip');
|
||||
});
|
||||
|
||||
it('uses the default template', () => {
|
||||
expect(bundleExportFilename(5, {}, '2026-05-22T14:05:33Z')).toBe('emails-5.zip');
|
||||
});
|
||||
});
|
||||
|
||||
describe('attachmentsBundleFilename', () => {
|
||||
it('embeds the sanitised subject', () => {
|
||||
expect(attachmentsBundleFilename(makeEmail({ subject: 'Invoice March' }))).toBe('attachments_Invoice March.zip');
|
||||
});
|
||||
|
||||
it('sanitises filesystem-reserved characters', () => {
|
||||
expect(attachmentsBundleFilename(makeEmail({ subject: 'Q1/Q2: report' }))).toBe('attachments_Q1_Q2_ report.zip');
|
||||
});
|
||||
|
||||
it('falls back when the subject is empty', () => {
|
||||
expect(attachmentsBundleFilename(makeEmail({ subject: '' }))).toBe('attachments.zip');
|
||||
});
|
||||
|
||||
it('falls back when there is no email', () => {
|
||||
expect(attachmentsBundleFilename(null)).toBe('attachments.zip');
|
||||
});
|
||||
});
|
||||
|
||||
describe('emailVars (date + address labels)', () => {
|
||||
it('returns the invalid-date sentinel for an unparseable date', () => {
|
||||
const v = emailVars(makeEmail({ receivedAt: 'not-a-date', sentAt: undefined }));
|
||||
expect(v.date).toBe('0000-00-00 00.00.00');
|
||||
expect(v.date_short).toBe('0000-00-00');
|
||||
expect(v.time).toBe('00.00.00');
|
||||
expect(v.year).toBe('0000');
|
||||
});
|
||||
|
||||
it('addrLabel falls back name → email user-part → "unknown"', () => {
|
||||
expect(emailVars(makeEmail({ from: [{ email: 'alice@example.com' }] }) ).from).toBe('alice');
|
||||
expect(emailVars(makeEmail({ from: [] })).from).toBe('unknown');
|
||||
expect(emailVars(makeEmail({ from: [{ name: ' ', email: 'x@y.com' }] })).from).toBe('x');
|
||||
});
|
||||
});
|
||||
|
||||
describe('attachmentVars (extension split)', () => {
|
||||
it('splits name and ext on the last dot', () => {
|
||||
const v = attachmentVars(buildSampleEmail(), { name: 'doc.tar.gz' });
|
||||
expect(v).toMatchObject({ filename: 'doc.tar.gz', name: 'doc.tar', ext: 'gz' });
|
||||
});
|
||||
|
||||
it('treats a dotless name as having no extension', () => {
|
||||
const v = attachmentVars(buildSampleEmail(), { name: 'noext' });
|
||||
expect(v).toMatchObject({ name: 'noext', ext: '' });
|
||||
});
|
||||
|
||||
it('defaults a missing name to "attachment"', () => {
|
||||
const v = attachmentVars(buildSampleEmail(), {});
|
||||
expect(v).toMatchObject({ filename: 'attachment', ext: '' });
|
||||
});
|
||||
});
|
||||
@@ -4,6 +4,12 @@ import {
|
||||
rewriteCidImagesForEditor,
|
||||
replaceInlineImagePlaceholders,
|
||||
INLINE_IMAGE_PLACEHOLDER,
|
||||
splitRecipients,
|
||||
formatRecipient,
|
||||
parseRecipient,
|
||||
parseRecipientList,
|
||||
formatRecipientList,
|
||||
splitPastedRecipients,
|
||||
} from "../email-composer-utils";
|
||||
|
||||
describe("plainTextToComposerBody", () => {
|
||||
@@ -112,3 +118,159 @@ describe("replaceInlineImagePlaceholders", () => {
|
||||
expect(out).toBe(html);
|
||||
});
|
||||
});
|
||||
|
||||
describe("splitRecipients", () => {
|
||||
it("splits a plain comma-separated list", () => {
|
||||
expect(splitRecipients("alice@x.com, bob@x.com")).toEqual([
|
||||
"alice@x.com",
|
||||
"bob@x.com",
|
||||
]);
|
||||
});
|
||||
|
||||
it("trims whitespace and drops empty segments", () => {
|
||||
expect(splitRecipients(" alice@x.com ,, bob@x.com ,")).toEqual([
|
||||
"alice@x.com",
|
||||
"bob@x.com",
|
||||
]);
|
||||
});
|
||||
|
||||
it("keeps a quoted display name containing a comma intact", () => {
|
||||
expect(splitRecipients('"Doo, John" <john@doo.org>, alice@x.com')).toEqual([
|
||||
'"Doo, John" <john@doo.org>',
|
||||
"alice@x.com",
|
||||
]);
|
||||
});
|
||||
|
||||
it("does not split on a comma inside angle brackets", () => {
|
||||
expect(splitRecipients("Group <a,b@x.com>, c@x.com")).toEqual([
|
||||
"Group <a,b@x.com>",
|
||||
"c@x.com",
|
||||
]);
|
||||
});
|
||||
|
||||
it("returns an empty array for an empty string", () => {
|
||||
expect(splitRecipients("")).toEqual([]);
|
||||
});
|
||||
|
||||
it("only splits on the given separators (default comma keeps semicolons/newlines literal)", () => {
|
||||
expect(splitRecipients("a@x.com; b@y.com")).toEqual(["a@x.com; b@y.com"]);
|
||||
});
|
||||
|
||||
it("splits on a wider separator set while keeping quotes/angles literal", () => {
|
||||
expect(
|
||||
splitRecipients('"Doo, John" <john@doo.org>; a@x.com\nb@y.com', ',;\n\r'),
|
||||
).toEqual(['"Doo, John" <john@doo.org>', "a@x.com", "b@y.com"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("formatRecipient / parseRecipient", () => {
|
||||
it("returns a bare email when there is no name", () => {
|
||||
expect(formatRecipient(undefined, "a@x.com")).toBe("a@x.com");
|
||||
});
|
||||
|
||||
it("returns a bare email when the name equals the email", () => {
|
||||
expect(formatRecipient("a@x.com", "a@x.com")).toBe("a@x.com");
|
||||
});
|
||||
|
||||
it("formats a simple name without quoting", () => {
|
||||
expect(formatRecipient("Alice", "a@x.com")).toBe("Alice <a@x.com>");
|
||||
});
|
||||
|
||||
it("quotes a name containing a comma", () => {
|
||||
expect(formatRecipient("Doo, John", "john@doo.org")).toBe(
|
||||
'"Doo, John" <john@doo.org>'
|
||||
);
|
||||
});
|
||||
|
||||
it("parses a bare email", () => {
|
||||
expect(parseRecipient("a@x.com")).toEqual({ email: "a@x.com" });
|
||||
});
|
||||
|
||||
it("parses and unquotes a quoted comma name", () => {
|
||||
expect(parseRecipient('"Doo, John" <john@doo.org>')).toEqual({
|
||||
name: "Doo, John",
|
||||
email: "john@doo.org",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("parseRecipientList / formatRecipientList", () => {
|
||||
it("round-trips a comma-name recipient through serialize + parse", () => {
|
||||
const list = [
|
||||
{ name: "Doo, John", email: "john@doo.org" },
|
||||
{ email: "alice@x.com" },
|
||||
];
|
||||
const serialized = formatRecipientList(list);
|
||||
expect(serialized).toBe('"Doo, John" <john@doo.org>, alice@x.com');
|
||||
expect(parseRecipientList(serialized)).toEqual(list);
|
||||
});
|
||||
|
||||
it("parses an empty string to an empty array", () => {
|
||||
expect(parseRecipientList("")).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("splitPastedRecipients", () => {
|
||||
it("splits on commas, semicolons and whitespace (incl. newline/tab)", () => {
|
||||
const { valid, invalid } = splitPastedRecipients(
|
||||
"a@x.com, b@y.com; c@z.com\nd@w.com\te@v.com f@u.com",
|
||||
);
|
||||
expect(valid.map((r) => r.email)).toEqual([
|
||||
"a@x.com", "b@y.com", "c@z.com", "d@w.com", "e@v.com", "f@u.com",
|
||||
]);
|
||||
expect(invalid).toEqual([]);
|
||||
});
|
||||
|
||||
it("collapses runs of mixed separators and drops empties", () => {
|
||||
const { valid } = splitPastedRecipients(" a@x.com ,; , b@y.com ");
|
||||
expect(valid.map((r) => r.email)).toEqual(["a@x.com", "b@y.com"]);
|
||||
});
|
||||
|
||||
it("partitions invalid tokens into `invalid`, keeping valid as chips", () => {
|
||||
const { valid, invalid } = splitPastedRecipients("a@x.com not-an-email b@y.com");
|
||||
expect(valid.map((r) => r.email)).toEqual(["a@x.com", "b@y.com"]);
|
||||
expect(invalid).toEqual(["not-an-email"]);
|
||||
});
|
||||
|
||||
it("unwraps an angle-bracketed token before validating", () => {
|
||||
const { valid } = splitPastedRecipients("<a@x.com>");
|
||||
expect(valid).toEqual([{ email: "a@x.com" }]);
|
||||
});
|
||||
|
||||
it("keeps a `Name <email>` pair as a single chip with its display name", () => {
|
||||
const { valid, invalid } = splitPastedRecipients("John Doe <j@x.com>");
|
||||
expect(valid).toEqual([{ name: "John Doe", email: "j@x.com" }]);
|
||||
expect(invalid).toEqual([]);
|
||||
});
|
||||
|
||||
it("keeps a fully-quoted `\"Name <email>\"` entry with its display name", () => {
|
||||
const { valid, invalid } = splitPastedRecipients(
|
||||
'"Alice Smith <alice@x.com>", "Alex Smith <alex@x.com>"',
|
||||
);
|
||||
expect(valid).toEqual([
|
||||
{ name: "Alice Smith", email: "alice@x.com" },
|
||||
{ name: "Alex Smith", email: "alex@x.com" },
|
||||
]);
|
||||
expect(invalid).toEqual([]);
|
||||
});
|
||||
|
||||
it("keeps a comma inside a quoted display name intact", () => {
|
||||
const { valid } = splitPastedRecipients('"Doe, John" <j@x.com>; bob@z.com');
|
||||
expect(valid).toEqual([
|
||||
{ name: "Doe, John", email: "j@x.com" },
|
||||
{ email: "bob@z.com" },
|
||||
]);
|
||||
});
|
||||
|
||||
it("dedupes case-insensitively within the paste and against existing emails", () => {
|
||||
const { valid } = splitPastedRecipients(
|
||||
"a@x.com A@X.com b@y.com c@z.com",
|
||||
["B@Y.com"],
|
||||
);
|
||||
expect(valid.map((r) => r.email)).toEqual(["a@x.com", "c@z.com"]);
|
||||
});
|
||||
|
||||
it("returns empty arrays for blank input", () => {
|
||||
expect(splitPastedRecipients(" ")).toEqual({ valid: [], invalid: [] });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -207,10 +207,10 @@ describe('getSecurityStatus', () => {
|
||||
expect(status.color).toContain('red');
|
||||
});
|
||||
|
||||
it('returns amber for softfail', () => {
|
||||
it('returns a warning color for softfail', () => {
|
||||
const status = getSecurityStatus('softfail');
|
||||
expect(status.icon).toBe('alert');
|
||||
expect(status.color).toContain('amber');
|
||||
expect(status.color).toContain('warning');
|
||||
});
|
||||
|
||||
it('returns amber for neutral and temperror', () => {
|
||||
|
||||
@@ -7,6 +7,13 @@ import {
|
||||
hasRichFormatting,
|
||||
plainTextToSafeHtml,
|
||||
EMAIL_SANITIZE_CONFIG,
|
||||
EMAIL_IFRAME_SANITIZE_CONFIG,
|
||||
isExternalResourceUrl,
|
||||
decodeCssEscapes,
|
||||
styleHasExternalUrl,
|
||||
stripExternalCssUrls,
|
||||
blockExternalResourcesOnNode,
|
||||
TRANSPARENT_BLOCKED_PIXEL,
|
||||
} from '../email-sanitization';
|
||||
|
||||
describe('email-sanitization', () => {
|
||||
@@ -324,6 +331,205 @@ describe('email-sanitization', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('isExternalResourceUrl', () => {
|
||||
it('detects http(s) and protocol-relative URLs', () => {
|
||||
expect(isExternalResourceUrl('https://tracker.example/p.png')).toBe(true);
|
||||
expect(isExternalResourceUrl('http://tracker.example/p.png')).toBe(true);
|
||||
expect(isExternalResourceUrl('//tracker.example/p.png')).toBe(true);
|
||||
});
|
||||
|
||||
it('sees through leading whitespace/newlines (imgNewlineSrc bypass)', () => {
|
||||
expect(isExternalResourceUrl('\n\nhttps://tracker.example/p.png')).toBe(true);
|
||||
expect(isExternalResourceUrl(' \t https://tracker.example/p.png')).toBe(true);
|
||||
// Tab/newline removed anywhere in the URL by the parser.
|
||||
expect(isExternalResourceUrl('h\nttps://tracker.example/p.png')).toBe(true);
|
||||
expect(isExternalResourceUrl('ht\ttps://tracker.example/p.png')).toBe(true);
|
||||
});
|
||||
|
||||
it('treats inline/local schemes as not external', () => {
|
||||
expect(isExternalResourceUrl('data:image/png;base64,AAAA')).toBe(false);
|
||||
expect(isExternalResourceUrl('blob:http://localhost/abc')).toBe(false);
|
||||
expect(isExternalResourceUrl('cid:image001@example.com')).toBe(false);
|
||||
expect(isExternalResourceUrl('/relative/path.png')).toBe(false);
|
||||
expect(isExternalResourceUrl('')).toBe(false);
|
||||
expect(isExternalResourceUrl(null)).toBe(false);
|
||||
expect(isExternalResourceUrl(undefined)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('decodeCssEscapes', () => {
|
||||
it('decodes hex escapes (cssEscape bypass)', () => {
|
||||
expect(decodeCssEscapes('\\68ttp://x')).toBe('http://x');
|
||||
expect(decodeCssEscapes('\\000068ttps://x')).toBe('https://x');
|
||||
// Hex escape consumes one trailing whitespace separator.
|
||||
expect(decodeCssEscapes('\\68 ttp')).toBe('http');
|
||||
});
|
||||
|
||||
it('decodes single-character escapes', () => {
|
||||
expect(decodeCssEscapes('\\h\\t\\t\\p')).toBe('http');
|
||||
});
|
||||
});
|
||||
|
||||
describe('styleHasExternalUrl / stripExternalCssUrls', () => {
|
||||
it('detects and strips plain external url()', () => {
|
||||
const style = 'background:url(https://tracker.example/p.png)';
|
||||
expect(styleHasExternalUrl(style)).toBe(true);
|
||||
expect(stripExternalCssUrls(style)).toBe('background:url()');
|
||||
});
|
||||
|
||||
it('detects and strips CSS-escaped external url()', () => {
|
||||
const style = 'background:url(\\68ttps://tracker.example/p.png)';
|
||||
expect(styleHasExternalUrl(style)).toBe(true);
|
||||
expect(stripExternalCssUrls(style)).toBe('background:url()');
|
||||
});
|
||||
|
||||
it('detects url() with whitespace/quotes', () => {
|
||||
expect(styleHasExternalUrl("background: url( '\n https://t/p.png' )")).toBe(true);
|
||||
});
|
||||
|
||||
it('leaves data: and relative url() untouched', () => {
|
||||
const style = "background:url('data:image/png;base64,AAAA')";
|
||||
expect(styleHasExternalUrl(style)).toBe(false);
|
||||
expect(stripExternalCssUrls(style)).toBe(style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('blockExternalResourcesOnNode (anti-tracking vectors)', () => {
|
||||
function el(html: string): Element {
|
||||
return parseHtmlSafely(`<body>${html}</body>`).body.firstElementChild!;
|
||||
}
|
||||
|
||||
it('blocks an img whose src is hidden behind a leading newline', () => {
|
||||
const img = el('<img src="">');
|
||||
img.setAttribute('src', '\n\nhttps://tracker.example/pixel.png');
|
||||
expect(blockExternalResourcesOnNode(img)).toBe(true);
|
||||
expect(img.getAttribute('data-blocked-src')).toBe('https://tracker.example/pixel.png');
|
||||
expect(img.getAttribute('src')).toBe(TRANSPARENT_BLOCKED_PIXEL);
|
||||
});
|
||||
|
||||
it('blocks img srcset', () => {
|
||||
const img = el('<img srcset="https://tracker.example/1x.png 1x, https://tracker.example/2x.png 2x">');
|
||||
expect(blockExternalResourcesOnNode(img)).toBe(true);
|
||||
expect(img.hasAttribute('srcset')).toBe(false);
|
||||
expect(img.getAttribute('data-blocked-srcset')).toContain('tracker.example');
|
||||
});
|
||||
|
||||
it('blocks <picture><source srcset> (pictureSource)', () => {
|
||||
const source = el('<source srcset="https://tracker.example/pic.webp" type="image/webp">');
|
||||
expect(blockExternalResourcesOnNode(source)).toBe(true);
|
||||
expect(source.hasAttribute('srcset')).toBe(false);
|
||||
});
|
||||
|
||||
it('blocks <source src> for media', () => {
|
||||
const source = el('<source src="https://tracker.example/v.mp4">');
|
||||
expect(blockExternalResourcesOnNode(source)).toBe(true);
|
||||
expect(source.hasAttribute('src')).toBe(false);
|
||||
expect(source.getAttribute('data-blocked-src')).toContain('tracker.example');
|
||||
});
|
||||
|
||||
it('blocks <video poster> (videoPoster)', () => {
|
||||
const video = el('<video poster="https://tracker.example/poster.jpg"></video>');
|
||||
expect(blockExternalResourcesOnNode(video)).toBe(true);
|
||||
expect(video.hasAttribute('poster')).toBe(false);
|
||||
expect(video.getAttribute('data-blocked-poster')).toContain('tracker.example');
|
||||
});
|
||||
|
||||
it('blocks video src', () => {
|
||||
const video = el('<video src="https://tracker.example/v.mp4"></video>');
|
||||
expect(blockExternalResourcesOnNode(video)).toBe(true);
|
||||
expect(video.hasAttribute('src')).toBe(false);
|
||||
});
|
||||
|
||||
it('blocks the legacy background attribute', () => {
|
||||
// <td> is foster-parented out of <body>, so build it directly.
|
||||
const td = document.createElement('td');
|
||||
td.setAttribute('background', 'https://tracker.example/bg.png');
|
||||
expect(blockExternalResourcesOnNode(td)).toBe(true);
|
||||
expect(td.hasAttribute('background')).toBe(false);
|
||||
expect(td.getAttribute('data-blocked-background')).toContain('tracker.example');
|
||||
});
|
||||
|
||||
it('strips external inline style url() including CSS escapes (cssEscape)', () => {
|
||||
const div = el('<div style="background:url(\\68ttps://tracker.example/p.png)">x</div>');
|
||||
expect(blockExternalResourcesOnNode(div)).toBe(true);
|
||||
expect(div.getAttribute('style')).not.toContain('tracker.example');
|
||||
expect(div.getAttribute('data-blocked-style')).toContain('tracker.example');
|
||||
});
|
||||
|
||||
it('does not block inline/local resources', () => {
|
||||
const img = el('<img src="blob:http://localhost/inline">');
|
||||
expect(blockExternalResourcesOnNode(img)).toBe(false);
|
||||
expect(img.getAttribute('src')).toBe('blob:http://localhost/inline');
|
||||
|
||||
const dataImg = el('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">');
|
||||
expect(blockExternalResourcesOnNode(dataImg)).toBe(false);
|
||||
|
||||
const cidImg = el('<img src="cid:logo@example.com">');
|
||||
expect(blockExternalResourcesOnNode(cidImg)).toBe(false);
|
||||
});
|
||||
|
||||
it('works as a DOMPurify afterSanitizeAttributes hook across all vectors', () => {
|
||||
const html = `
|
||||
<img src=" https://tracker.example/a.png">
|
||||
<picture><source srcset="https://tracker.example/b.webp"><img src="https://tracker.example/c.png"></picture>
|
||||
<div style="background:url(\\68ttps://tracker.example/d.png)">bg</div>
|
||||
`;
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
|
||||
blockExternalResourcesOnNode(node as Element);
|
||||
});
|
||||
const clean = DOMPurify.sanitize(html, EMAIL_SANITIZE_CONFIG);
|
||||
DOMPurify.removeAllHooks();
|
||||
|
||||
const doc = parseHtmlSafely(clean);
|
||||
// No live src/srcset/style references the tracker anymore.
|
||||
doc.querySelectorAll('img, source').forEach((node) => {
|
||||
expect(node.getAttribute('src') ?? '').not.toContain('tracker.example');
|
||||
expect(node.getAttribute('srcset') ?? '').not.toContain('tracker.example');
|
||||
});
|
||||
expect(doc.querySelector('div')?.getAttribute('style') ?? '').not.toContain('tracker.example');
|
||||
// The originals are stashed for the banner/affordance.
|
||||
expect(clean).toContain('data-blocked-src');
|
||||
expect(clean).toContain('data-blocked-srcset');
|
||||
expect(clean).toContain('data-blocked-style');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Email Privacy Tester exact payloads (iframe render path)', () => {
|
||||
function render(html: string): string {
|
||||
DOMPurify.addHook('afterSanitizeAttributes', (node) =>
|
||||
blockExternalResourcesOnNode(node as Element)
|
||||
);
|
||||
const out = DOMPurify.sanitize(html, EMAIL_IFRAME_SANITIZE_CONFIG);
|
||||
DOMPurify.removeAllHooks();
|
||||
return out;
|
||||
}
|
||||
|
||||
it('pictureSource: <picture><source srcset> does not keep a live external ref', () => {
|
||||
const source = parseHtmlSafely(render('<picture><source srcset="http://TRACK/"><img src="#"></picture>')).querySelector('source')!;
|
||||
expect(source.hasAttribute('srcset')).toBe(false);
|
||||
expect(source.getAttribute('data-blocked-srcset')).toContain('TRACK');
|
||||
});
|
||||
|
||||
it('imgNewlineSrc: newline after the first slash (protocol-relative) is blocked', () => {
|
||||
const img = parseHtmlSafely(render('<img src="/\n/TRACK_HOST/PATH">')).querySelector('img')!;
|
||||
expect(img.getAttribute('src')).toBe(TRANSPARENT_BLOCKED_PIXEL);
|
||||
expect(img.getAttribute('data-blocked-src')).toContain('TRACK_HOST');
|
||||
});
|
||||
|
||||
it('videoPoster: poster and src are both stripped', () => {
|
||||
const video = parseHtmlSafely(render('<video poster="http://TRACK/" autoplay="true" src="http://OTHER/"></video>')).querySelector('video')!;
|
||||
expect(video.hasAttribute('poster')).toBe(false);
|
||||
expect(video.hasAttribute('src')).toBe(false);
|
||||
expect(video.getAttribute('data-blocked-poster')).toContain('TRACK');
|
||||
expect(video.getAttribute('data-blocked-src')).toContain('OTHER');
|
||||
});
|
||||
|
||||
it('anchor href is preserved (links stay clickable; DNS prefetch is disabled via iframe meta)', () => {
|
||||
const out = render('<a href="http://TRACK/">link</a>');
|
||||
expect(out).toContain('href="http://TRACK/"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('plainTextToSafeHtml', () => {
|
||||
it('escapes HTML-special characters in surrounding text', () => {
|
||||
const result = plainTextToSafeHtml('<script>alert(1)</script> & "q" \'q\'');
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import JSZip from 'jszip';
|
||||
import { expandImportableEmails, EML_IMPORT_ACCEPT } from '@/lib/eml-import';
|
||||
|
||||
const emlFile = (name: string, content = 'raw email', type = 'message/rfc822') =>
|
||||
new File([content], name, { type });
|
||||
|
||||
describe('expandImportableEmails', () => {
|
||||
it('wraps a .eml file as a message/rfc822 blob, keeping its name', async () => {
|
||||
const out = await expandImportableEmails([emlFile('msg.eml')]);
|
||||
expect(out).toHaveLength(1);
|
||||
expect(out[0].name).toBe('msg.eml');
|
||||
expect(out[0].blob.type).toBe('message/rfc822');
|
||||
await expect(out[0].blob.text()).resolves.toBe('raw email');
|
||||
});
|
||||
|
||||
it('CHARACTERISATION: wraps a non-.eml, non-zip file as rfc822 too', async () => {
|
||||
const out = await expandImportableEmails([emlFile('note.txt', 'hi', 'text/plain')]);
|
||||
expect(out).toHaveLength(1);
|
||||
expect(out[0]).toMatchObject({ name: 'note.txt' });
|
||||
expect(out[0].blob.type).toBe('message/rfc822');
|
||||
});
|
||||
|
||||
it('extracts only .eml entries from a .zip, stripping path prefixes', async () => {
|
||||
const zip = new JSZip();
|
||||
zip.file('a.eml', 'A');
|
||||
zip.file('sub/b.eml', 'B');
|
||||
zip.file('c.txt', 'C'); // skipped (not .eml)
|
||||
zip.folder('emptydir'); // skipped (directory)
|
||||
const blob = await zip.generateAsync({ type: 'blob' });
|
||||
const file = new File([blob], 'archive.zip', { type: 'application/zip' });
|
||||
|
||||
const out = await expandImportableEmails([file]);
|
||||
expect(out.map((e) => e.name).sort()).toEqual(['a.eml', 'b.eml']);
|
||||
expect(out.every((e) => e.blob.type === 'message/rfc822')).toBe(true);
|
||||
});
|
||||
|
||||
it('uses the zip path when the MIME type is application/zip even without a .zip name', async () => {
|
||||
const zip = new JSZip();
|
||||
zip.file('only.eml', 'X');
|
||||
const blob = await zip.generateAsync({ type: 'blob' });
|
||||
const file = new File([blob], 'archive-no-ext', { type: 'application/zip' });
|
||||
|
||||
const out = await expandImportableEmails([file]);
|
||||
expect(out.map((e) => e.name)).toEqual(['only.eml']);
|
||||
});
|
||||
|
||||
it('exposes the accept string for the file picker', () => {
|
||||
expect(EML_IMPORT_ACCEPT).toBe('.eml,.zip,message/rfc822,application/zip');
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user