@rapidmx/web-client 0.36.0 → 0.37.0

package/apps/shared/components/calendar/EventEditor.tsx

@@ -5,6 +5,7 @@
 import React, { FormEvent, MutableRefObject, useEffect, useMemo, useRef, useState } from "react";
 import { format } from "date-fns";
 import { ApiClient, ApiRequestError } from "../../../../lib/util/api.js";
+import { KeysLockedError } from "../../../../lib/crypto/masterKey.js";
 import { useApiClient } from "../../../../lib/util/apiClientContext.js";
 import {
     Attendee,
@@ -24,10 +25,14 @@ import {
     updateVideoMeeting,
 } from "../../../../lib/videoconf/videoMeetingsApi.js";
 import { detachOccurrence, saveEventSeries } from "../../../../lib/calendar/calendarMutations.js";
+import { isProtectedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import type { InvitationContent } from "../../../../lib/calendar/protectedEvents.js";
+import { followMeetingKeyExpiry, meetingKeyExpiry, organizerJoinLink, protectMeeting, rememberMeetingKey } from "../../../../lib/videoconf/protectedMeetings.js";
 import { toDatetimeLocal } from "../../../../lib/util/dateInput.js";
 import { deviceTimeZone, timeZoneOptions } from "../../../../lib/util/timeZone.js";
 import { Mailbox } from "../../../../lib/mail/mailApi.js";
-import { CalendarOccurrence, fromEventWallClock, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
+import { useKeysLocked } from "../../zeroAccess/useKeysLocked.js";
+import { CalendarOccurrence, fromEventWallClock, seriesEndDate, toEventWallClock } from "../../../../lib/calendar/recurrence.js";
 import { addDaysToKey, allDayDateKey, allDayInstant, recurrenceUntilDateKey, recurrenceUntilInstant, startWeekdayCode } from "./allDay.js";
 import { joinMeetingUrl } from "../../calendar/calendarReminders.js";
 import EventExpandedForm from "./EventExpandedForm.js";
@@ -56,6 +61,24 @@ const MAX_MEETING_TITLE_LENGTH = 200;
  * omitted (`undefined`) field is dropped by `JSON.stringify` and would leave the stored value in place. */
 type EventFields = { [K in keyof CalendarEventInput]?: CalendarEventInput[K] | null };
 
+/** Who a video meeting minted for an event with `guests` invites: every attendee with an address but the organizer. */
+function meetingInviteesOf(guests: Attendee[], organizerAddress: string): VideoMeetingInvitee[] {
+    const organizerAddressLower = organizerAddress.toLowerCase();
+    return guests
+        .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
+        .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+}
+
+/** The content a save of `fields` invites with, for the server to send a protected event's invitations with. */
+function invitationContentOfFields(fields: EventFields): InvitationContent {
+    return {
+        title: fields.title as string,
+        location: fields.location || undefined,
+        description: fields.description || undefined,
+        descriptionHtml: fields.descriptionHtml || undefined,
+    };
+}
+
 const MS_PER_MINUTE = 60_000;
 const MS_PER_HOUR = 3_600_000;
 const MS_PER_DAY = 86_400_000;
@@ -261,16 +284,26 @@ export default function EventEditor({
     // `undefined` while the link is still being fetched, `null` once it is known there is none to open.
     const [organizerJoinUrl, setOrganizerJoinUrl] = useState<string | null | undefined>(undefined);
     const [videoError, setVideoError] = useState<string | null>(null);
+    /** Why the meeting just made isn't protected end to end - shown beside the toggle, not as an error. */
+    const [videoNotice, setVideoNotice] = useState<string | null>(null);
     // The event as this modal last persisted it. Set only when a save got the event stored but could not
     // finish the video-conferencing step after it: the modal then stays open on that error, and the retry
     // must update *that* record (its uid and its new version), not re-create it or reuse the stale prop.
     const [savedEvent, setSavedEvent] = useState<CalendarEvent | null>(null);
+    // `savedEvent` as of the last render, for sending deferred invitations when the dialog goes away (`flushDeferredInvitations()`).
+    const savedEventRef = useRef<CalendarEvent | null>(null);
+    savedEventRef.current = savedEvent;
     // Whether that stored record is a series saved with `toSeriesFields()`: its master's dates are not the form's (the occurrence's), so a retry
     // must not send them - the first save already applied any change of time.
     const savedAsSeries = useRef(false);
     // A meeting minted for this event whose link onto the event could not be saved. A retry reuses it rather than minting a second one,
     // which would send the invitees a second set of join links and leave this one orphaned.
     const mintedMeeting = useRef<{ uid: string; organizerJoinUrl: string | null } | null>(null);
+    // The content of a new event whose invitations its create deferred (`invitationContent: { defer: true }`) to the save that links its
+    // video meeting, so attendees get one invitation, with the link - until a save has sent them. That save carries this content too, for
+    // a protected event this device couldn't open; and should the meeting never be linked, a retry without video, or closing the dialog
+    // (`flushDeferredInvitations()`), sends them without it - best effort, since the dialog can also be left in ways that don't pass here.
+    const deferredInvitations = useRef<InvitationContent | null>(null);
     const [editScope, setEditScope] = useState<EditScope>("occurrence");
     const [error, setError] = useState<string | null>(null);
     const [saving, setSaving] = useState(false);
@@ -288,7 +321,7 @@ export default function EventEditor({
         }
         let cancelled = false;
         void getVideoMeeting(uid, client)
-            .then((meeting) => meeting.organizerJoinUrl ?? null)
+            .then(organizerJoinLink)
             .catch(() => null)
             .then((url) => {
                 if (!cancelled) {
@@ -300,6 +333,16 @@ export default function EventEditor({
         };
     }, [occurrence?.videoMeetingUid, client]);
 
+    // A protected meeting's links carry its key after `#`, opened (or made) with the organizer's mailbox keys: they go when any mailbox locks
+    // - this dialog can be saving to another mailbox than the event's. A meeting made here but not yet linked keeps its uid, so a retry
+    // doesn't make a second one; it is linked without a link to show.
+    useKeysLocked(() => {
+        setOrganizerJoinUrl((url) => (url?.includes("#") ? null : url));
+        if (mintedMeeting.current?.organizerJoinUrl?.includes("#")) {
+            mintedMeeting.current = { uid: mintedMeeting.current.uid, organizerJoinUrl: null };
+        }
+    });
+
     // "This event only" detaches a standalone, non-repeating copy - the series' rule doesn't apply to it.
     const editingSingleOccurrence = !!occurrence?.isRecurringOccurrence && editScope === "occurrence";
 
@@ -422,10 +465,16 @@ export default function EventEditor({
      *
      * Never throws: the event is already stored by the time this runs, so a failure here is reported inline
      * next to the checkbox and left retryable, with `videoMeetingUid` still whatever it was before.
+     *
+     * `rescheduled`: the save changed the event's times or recurrence. A protected meeting's key is discarded an hour after the end it
+     * was made for, so a linked meeting's key expiry then follows the saved event's (series') new end - best effort.
      */
-    async function applyVideoConferencing(saved: CalendarEvent, guests: Attendee[]): Promise<{ event: CalendarEvent; failed: boolean }> {
-        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way.
+    async function applyVideoConferencing(saved: CalendarEvent, guests: Attendee[], rescheduled: boolean): Promise<{ event: CalendarEvent; failed: boolean }> {
+        // Off and never on, or on and already linked (see the limitation above) - nothing to do either way, but for the key expiry.
         if (videoEnabled === !!videoMeetingUid) {
+            if (videoEnabled && rescheduled && saved.videoMeetingUid) {
+                await followMeetingKeyExpiry(saved.videoMeetingUid, seriesEndDate(saved), client);
+            }
             return { event: saved, failed: false };
         }
         // Detaching a single occurrence (`detachOccurrence()`, react-shared's `calendarMutations.ts`)
@@ -444,28 +493,33 @@ export default function EventEditor({
         }
         try {
             if (videoEnabled) {
-                const organizerAddressLower = saved.organizer.address.toLowerCase();
-                const invitees: VideoMeetingInvitee[] = guests
-                    .filter((a) => !a.isOrganizer && !!a.address.trim() && a.address.trim().toLowerCase() !== organizerAddressLower)
-                    .map((a) => ({ email: a.address.trim(), displayName: a.displayName }));
+                const invitees: VideoMeetingInvitee[] = meetingInviteesOf(guests, saved.organizer.address);
                 if (invitees.length === 0) {
                     setVideoError("Add at least one attendee other than yourself to add video conferencing.");
                     return { event: saved, failed: true };
                 }
                 if (!mintedMeeting.current) {
+                    // Protected end to end when the organizer's mailbox has zero-access: its title and names sealed, its key in every link.
+                    const title = saved.title.slice(0, MAX_MEETING_TITLE_LENGTH);
+                    const secured = await protectMeeting(saved.mailboxUid, title, invitees, meetingKeyExpiry(seriesEndDate(saved)));
                     const result = await createVideoMeeting(
                         {
                             mailboxUid: saved.mailboxUid,
-                            title: saved.title.slice(0, MAX_MEETING_TITLE_LENGTH),
+                            ...(secured
+                                ? { protection: secured.protection, invitees: secured.invitees }
+                                : // Stored readable: a protected event's real title never goes there.
+                                  { title: isProtectedRecord(saved) ? "Meeting" : title, invitees }),
                             visibility: "private",
                             calendarEventUid: saved.uid,
                             startTime: saved.startDate,
                             endTime: saved.endDate,
-                            invitees,
                         },
                         client,
                     );
-                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: result.organizerJoinUrl ?? null };
+                    rememberMeetingKey(result.meeting.uid, secured?.fragment ?? null, saved.mailboxUid);
+                    setVideoNotice(secured ? null : "This meeting isn't end-to-end protected because zero-access encryption is off (or locked) for your mailbox.");
+                    const organizerUrl = result.organizerJoinUrl ?? null;
+                    mintedMeeting.current = { uid: result.meeting.uid, organizerJoinUrl: organizerUrl && secured ? `${organizerUrl}#${secured.fragment}` : organizerUrl };
                 }
                 const meeting = mintedMeeting.current;
                 const patched = await updateCalendarEvent(
@@ -474,10 +528,14 @@ export default function EventEditor({
                         version: saved.version,
                         location: VIDEO_LOCATION_PLACEHOLDER,
                         videoMeetingUid: meeting.uid,
+                        // The invitations the create deferred go out with this save.
+                        ...(deferredInvitations.current ? { invitationContent: { ...deferredInvitations.current, location: VIDEO_LOCATION_PLACEHOLDER } } : {}),
                     },
                     client,
+                    saved,
                 );
                 mintedMeeting.current = null;
+                deferredInvitations.current = null;
                 setVideoMeetingUid(meeting.uid);
                 setOrganizerJoinUrl(meeting.organizerJoinUrl);
                 update({ location: VIDEO_LOCATION_PLACEHOLDER });
@@ -488,7 +546,7 @@ export default function EventEditor({
             // A stored event clears a field with an explicit `null` (see `EventFields`) - an omitted one would
             // leave the placeholder (and the link to the now-cancelled meeting) in place.
             const patch: EventFields = { location: restoredLocation || null, videoMeetingUid: null };
-            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) }, client);
+            const patched = await updateCalendarEvent({ uid: saved.uid, version: saved.version, ...(patch as Partial<CalendarEventInput>) }, client, saved);
             setVideoMeetingUid(undefined);
             setOrganizerJoinUrl(undefined);
             update({ location: restoredLocation });
@@ -583,6 +641,9 @@ export default function EventEditor({
             autoReplyMessage: values.autoReplyEnabled ? values.autoReplyMessage : cleared,
         };
 
+        // A save that will link a new video meeting to the event right after. A new event's invitations wait for that save (restapi sends a
+        // protected one's at save time), so they go out once, with the link and its keys.
+        const willLinkMeeting = videoEnabled && !videoMeetingUid && meetingInviteesOf(merged.attendees, effectiveOrganizerAddress).length > 0;
         setSaving(true);
         try {
             let saved: CalendarEvent;
@@ -601,7 +662,20 @@ export default function EventEditor({
                     delete retryFields.timezone;
                     delete retryFields.allDay;
                 }
-                saved = await updateCalendarEvent({ uid: savedEvent.uid, version: savedEvent.version, ...(retryFields as Partial<CalendarEventInput>) }, client);
+                // A create's deferred invitations still wait for the meeting's link; without one to link, this save sends them.
+                const deferred = deferredInvitations.current;
+                if (deferred) {
+                    deferredInvitations.current = invitationContentOfFields(fields);
+                    retryFields.invitationContent = willLinkMeeting ? { defer: true } : deferredInvitations.current;
+                }
+                saved = await updateCalendarEvent(
+                    { uid: savedEvent.uid, version: savedEvent.version, ...(retryFields as Partial<CalendarEventInput>) },
+                    client,
+                    savedEvent,
+                );
+                if (deferred && !willLinkMeeting) {
+                    deferredInvitations.current = null;
+                }
             } else if (!occurrence) {
                 // The organizer is only ever set on create - an edit keeps the event's own organizer.
                 saved = await createCalendarEvent(
@@ -610,9 +684,11 @@ export default function EventEditor({
                         folderUid: values.targetFolderUid,
                         ...fields,
                         organizer: { address: effectiveOrganizerAddress, type: "to" },
+                        ...(willLinkMeeting ? { invitationContent: { defer: true } } : {}),
                     } as CalendarEventInput,
                     client,
                 );
+                deferredInvitations.current = willLinkMeeting ? invitationContentOfFields(fields) : null;
             } else if (editingSingleOccurrence) {
                 saved = await detachOccurrence(occurrence, fields as Partial<CalendarEventInput>, client);
             } else if (occurrence.isRecurringOccurrence) {
@@ -625,9 +701,16 @@ export default function EventEditor({
                 savedAsSeries.current = true;
                 detachedSyncFailed = !!series.detachedOccurrenceSyncFailed;
             } else {
-                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) }, client);
+                saved = await updateCalendarEvent({ uid: occurrence.uid, version: occurrence.version, ...(fields as Partial<CalendarEventInput>) }, client, occurrence);
             }
-            const video = await applyVideoConferencing(saved, merged.attendees);
+            // Against the record this save started from: a false positive only costs a look at the meeting.
+            const before = savedEvent ?? occurrence;
+            const rescheduled =
+                !!before &&
+                (!sameMinute(before.startDate, startDate) ||
+                    !sameMinute(before.endDate, endDate) ||
+                    JSON.stringify(before.recurrenceRule ?? null) !== JSON.stringify(fields.recurrenceRule ?? null));
+            const video = await applyVideoConferencing(saved, merged.attendees, rescheduled);
             if (video.failed) {
                 // The event itself is saved - keep the modal open on the inline error so the video meeting
                 // can be retried (or the toggle put back) rather than closing over it.
@@ -641,12 +724,35 @@ export default function EventEditor({
             }
             onSaved();
         } catch (err) {
-            setError(err instanceof ApiRequestError ? err.message : "Could not save this event.");
+            // `KeysLockedError`: one occurrence of a protected event, detached while the mailbox is locked (nothing was written).
+            setError(err instanceof ApiRequestError || err instanceof KeysLockedError ? err.message : "Could not save this event.");
         } finally {
             setSaving(false);
         }
     }
 
+    /** Sends the invitations a create deferred when the dialog is closed before a save sent them (the video meeting couldn't be linked):
+     * a save of no change, carrying their content. Best effort - the event is stored either way, and a failure leaves them pending until
+     * the event is saved again. Only a protected event's are sent at save time; restapi's scheduling job sends any other's. */
+    async function flushDeferredInvitations(): Promise<void> {
+        const content = deferredInvitations.current;
+        const stored = savedEventRef.current;
+        deferredInvitations.current = null;
+        if (!content || !stored || !isProtectedRecord(stored)) {
+            return;
+        }
+        try {
+            await updateCalendarEvent({ uid: stored.uid, version: stored.version, invitationContent: content }, client, stored);
+        } catch {
+            // Left pending: the next save of the event sends them.
+        }
+    }
+    // However the dialog goes away - its own close button waits for this, an Escape or a click outside a new event's popover doesn't pass
+    // through it - deferred invitations still pending are sent.
+    const flushOnUnmount = useRef(flushDeferredInvitations);
+    flushOnUnmount.current = flushDeferredInvitations;
+    useEffect(() => () => void flushOnUnmount.current(), []);
+
     // Same scheme allow-list `calendarReminders.ts#joinMeetingUrl()` already applies to a reminder's own
     // `location` field - reused here rather than duplicated so a video-conferencing plugin (or a stray
     // manual edit of `videoMeetingUid`'s otherwise-plugin-owned join link) can't smuggle a `javascript:`/
@@ -684,6 +790,7 @@ export default function EventEditor({
         joinUrl,
         organizerJoinUrl,
         videoError,
+        videoNotice,
         editScope,
         setEditScope,
         showEditScope: !!occurrence?.isRecurringOccurrence,
@@ -691,7 +798,7 @@ export default function EventEditor({
         saving,
         onSubmit: (event) => void handleSubmit(event),
         // Once something was stored, leaving is a save as far as the calendar behind is concerned: it has to reload.
-        onCancel: () => (savedEvent ? onSaved() : onCancel()),
+        onCancel: () => (savedEvent ? void flushDeferredInvitations().then(onSaved) : onCancel()),
     };
 
     // A new event has the tabs, whose Event face is the quick popover or the full card; an existing event is always the full card.

package/apps/shared/components/calendar/EventFormParts.tsx

@@ -86,6 +86,7 @@ export function VideoConferencingRow({ c }: { c: EventFormController }) {
                     {c.videoError}
                 </p>
             )}
+            {c.videoNotice && <p className="text-xs text-text-muted mb-1">{c.videoNotice}</p>}
             {c.videoMeetingUid && (
                 <div className="flex items-center gap-3 mb-1">
                     <Button

package/apps/shared/components/calendar/EventModal.tsx

@@ -14,7 +14,10 @@ import EventEditor from "./EventEditor.js";
 import EventMatchNav from "./EventMatchNav.js";
 import EventShell, { EventAnchor, EventShellVariant } from "./EventShell.js";
 import SlideIn, { SlideFrom } from "./SlideIn.js";
+import { isOpenedRecord, isProtectedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import { useOpenedRecord } from "../../zeroAccess/useOpenedRecord.js";
 import { QuickTab } from "./QuickCreateTabs.js";
+import { fullyOpenedEvent } from "../../../../lib/calendar/calendarApi.js";
 
 export { VIDEO_LOCATION_PLACEHOLDER } from "./EventEditor.js";
 export type { EventAnchor } from "./EventShell.js";
@@ -101,7 +104,7 @@ export default function EventModal({
     folderColors,
     organizerAddress,
     organizerAliases,
-    occurrence,
+    occurrence: listedOccurrence,
     initialStart,
     initialEnd,
     initialAllDay,
@@ -123,11 +126,25 @@ export default function EventModal({
     // Escape or the close button on a form that holds something asks before throwing it away.
     const [confirmingDiscard, setConfirmingDiscard] = useState(false);
     // An event on a calendar shared with the reader view-only cannot be changed, deleted or answered.
-    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === occurrence?.mailboxUid)?.mailbox);
+    const canWrite = useMailboxUpdateAccess(mailboxOptions?.find((option) => option.mailbox.uid === listedOccurrence?.mailboxUid)?.mailbox);
+    // A protected event from a list has only what the views draw opened (`EVENT_LIST_FIELDS`): the card shows and the form edits all of it, so
+    // the rest is opened first - a form seeded from a placeholder description would save it over the real one. Opened as a write opens it
+    // (`fullyOpenedEvent()`): the title opened from its sealed content stays, never replaced by an older per-field one the card, a reply and
+    // a save would then carry.
+    const partlyOpened = !!listedOccurrence && isProtectedRecord(listedOccurrence) && !isOpenedRecord(listedOccurrence);
+    const opening = useOpenedRecord(partlyOpened ? listedOccurrence : undefined, fullyOpenedEvent);
+    const occurrence: CalendarOccurrence | null = partlyOpened ? opening.record! : listedOccurrence;
 
     if (!open) {
         return null;
     }
+    if (partlyOpened && !opening.ready) {
+        return (
+            <EventShell variant="card" label="Event details" focusKey="opening" anchor={anchor} width={DETAILS_WIDTH} onClose={onClose}>
+                <p className="text-sm text-text-muted p-4">Opening this event…</p>
+            </EventShell>
+        );
+    }
 
     if (syncWarning) {
         return (

package/apps/shared/components/calendar/RequestChangeForm.tsx

@@ -5,6 +5,7 @@
 import React, { FormEvent, useState } from "react";
 import { HiOutlineXMark } from "react-icons/hi2";
 import { Attendee, EventChangeRequest, requestEventChange } from "../../../../lib/calendar/calendarApi.js";
+import type { InvitationContent } from "../../../../lib/calendar/protectedEvents.js";
 import { htmlToPlainText, sanitizeEventDescriptionHtml } from "../../../../lib/calendar/eventDescription.js";
 import Alert from "../../../../lib/components/feedback/Alert.js";
 import Button from "../../../../lib/components/buttons/Button.js";
@@ -34,6 +35,8 @@ export interface ChangeSubject {
     descriptionHtml?: string | null;
     /** Everyone already invited, whatever the case, so a guest is not added twice. */
     guestAddresses: string[];
+    /** The event's real title, location and description, for the server to name it by when its stored copy is protected (`invitationContentOf()`). */
+    invitationContent?: InvitationContent;
 }
 
 export interface RequestChangeFormProps {
@@ -147,7 +150,7 @@ export default function RequestChangeForm({ subject, canChange, canInvite, onSen
 
         setSending(true);
         try {
-            await requestEventChange(subject.uid, request, client);
+            await requestEventChange(subject.uid, request, client, subject.invitationContent);
             notify({
                 kind: "success",
                 title: "Your change was sent to the organizer",

package/apps/shared/components/calendar/eventForm.ts

@@ -93,6 +93,8 @@ export interface EventFormController {
     /** `undefined` while it is being fetched, `null` once it is known there is none. */
     organizerJoinUrl: string | null | undefined;
     videoError: string | null;
+    /** Why the video meeting isn't protected end to end, when it isn't. */
+    videoNotice?: string | null;
 
     // The form as a whole.
     editScope: EditScope;

package/apps/shared/components/contacts/ContactCard.tsx

@@ -37,6 +37,9 @@ import {
     scopeMailboxes,
 } from "./contactCardData.js";
 import { type Participant, contactInputFor, isExternalAddress, ownDomains, participantName } from "./participantDetails.js";
+import { openSealedRecord } from "../../../../lib/zeroAccess/sealedRecords.js";
+import { isSealedRecord } from "../../../../lib/zeroAccess/sealedMoves.js";
+import { useKeysLocked } from "../../zeroAccess/useKeysLocked.js";
 
 type Section<T> = { status: "loading" } | { status: "error" } | { status: "ready"; data: T };
 
@@ -220,12 +223,21 @@ export default function ContactCard({ participant, context = {}, onClose, userUi
         }
     }
 
+    // The contact and the upcoming events are shown opened: a lock of the mailbox whose sealed content they hold takes the card off screen,
+    // as the calendar page closes a protected event's card - its state would keep what the lock cleared everywhere else.
+    useKeysLocked((locked) => {
+        const shown = [stored, ...(events.status === "ready" ? events.data : [])];
+        if (shown.some((record) => record?.mailboxUid === locked && isSealedRecord(record))) {
+            onClose();
+        }
+    });
+
     // Not while a picture is being changed: that goes against the version the star would replace.
     const [photoBusy, setPhotoBusy] = useState(false);
 
     async function handleToggleFavorite(current: Contact) {
         try {
-            const next = await setContactFavorite(current, !current.favorite, client);
+            const next = await openSealedRecord(await setContactFavorite(current, !current.favorite, client));
             if (mounted.current) {
                 setChanged(next);
             }