@remit/web-client 0.0.325 → 0.0.326

package/dist/src/components/settings/AccountFormPanel.js

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { accountDetailOperationsUpdateAccountMutation, accountOperationsCreateAccountMutation, accountOperationsTestConnectionMutation, configOperationsGetConfigQueryKey, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { Button, ComposeLanguageSetting, cn, Input, PasswordInput, Select, SlidePanel, securityToApi, } from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Check, Loader2, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useComposeLanguages } from "../../hooks/useComposeLanguages";
+import { useSignature } from "../../hooks/useSignature";
+import { getPresetById, PROVIDER_PRESETS, } from "../../lib/provider-presets.js";
+import { appendAppPasswordHint, computeSmtpAutoFill, deriveSmtpHostFromImap, } from "./account-form-helpers.js";
+/**
+ * True when the account authenticates via Microsoft OAuth — not a
+ * password-based IMAP account. Used to hide irrelevant credential /
+ * server fields and show a read-only summary instead.
+ *
+ * Exported for unit tests.
+ */
+export const isOAuthMicrosoftAccount = (account) => account.authType === "oauthMicrosoft";
+/**
+ * Derive the initial state of the "use different SMTP credentials" checkbox
+ * from a persisted account. Returns true when the account stores an SMTP
+ * username distinct from the IMAP username (i.e. the user previously opted
+ * in to separate SMTP credentials).
+ *
+ * The API response intentionally omits the SMTP password, so `smtpUsername`
+ * is the only available signal.
+ */
+export const deriveUseDifferentSmtpCreds = (account) => {
+    const smtpUsername = account.smtpUsername?.trim();
+    if (!smtpUsername)
+        return false;
+    return smtpUsername !== account.username;
+};
+const accountFormSchema = z.object({
+    email: z.string().email().min(1, "Email is required"),
+    displayName: z.string().optional(),
+    username: z.string().optional(),
+    password: z.string().optional(),
+    imapHost: z.string().min(1, "IMAP host is required"),
+    imapPort: z.coerce.number().int().min(1).max(65535),
+    imapTls: z.boolean(),
+    imapStartTls: z.boolean(),
+    smtpHost: z.string().optional(),
+    smtpPort: z.coerce.number().int().min(1).max(65535).optional(),
+    smtpTls: z.boolean().optional(),
+    smtpStartTls: z.boolean().optional(),
+    smtpUsername: z.string().optional(),
+    smtpPassword: z.string().optional(),
+    useDifferentSmtpCreds: z.boolean().optional(),
+});
+export const AccountFormPanel = ({ isOpen, onClose, account, focusSmtp, }) => {
+    const queryClient = useQueryClient();
+    const isEditing = !!account;
+    // Selected provider preset (empty string = "Custom / other", manual entry)
+    const [presetId, setPresetId] = useState("");
+    // When a preset is selected its server fields are read-only until the
+    // user opts into manual editing via the Advanced toggle.
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    const selectedPreset = getPresetById(presetId);
+    const serversLocked = !!selectedPreset && !advancedOpen;
+    const smtpSectionRef = useRef(null);
+    const form = useForm({
+        resolver: zodResolver(accountFormSchema),
+        defaultValues: {
+            email: "",
+            displayName: "",
+            username: "",
+            password: "",
+            imapHost: "",
+            imapPort: 993,
+            imapTls: true,
+            imapStartTls: false,
+            smtpHost: "",
+            smtpPort: 587,
+            smtpTls: false,
+            smtpStartTls: true,
+            useDifferentSmtpCreds: false,
+        },
+    });
+    // Populate form when editing an existing account
+    useEffect(() => {
+        if (account) {
+            const useDifferentSmtpCreds = deriveUseDifferentSmtpCreds(account);
+            form.reset({
+                email: account.email,
+                displayName: account.displayName || "",
+                username: account.username || "",
+                password: "",
+                imapHost: account.imapHost,
+                imapPort: account.imapPort,
+                imapTls: account.imapTls,
+                imapStartTls: account.imapStartTls,
+                smtpHost: account.smtpHost || "",
+                smtpPort: account.smtpPort || 587,
+                smtpTls: account.smtpTls || false,
+                smtpStartTls: account.smtpStartTls || true,
+                smtpUsername: useDifferentSmtpCreds ? account.smtpUsername || "" : "",
+                smtpPassword: "",
+                useDifferentSmtpCreds,
+            });
+        }
+        else {
+            form.reset({
+                email: "",
+                displayName: "",
+                username: "",
+                password: "",
+                imapHost: "",
+                imapPort: 993,
+                imapTls: true,
+                imapStartTls: false,
+                smtpHost: "",
+                smtpPort: 587,
+                smtpTls: false,
+                smtpStartTls: true,
+                useDifferentSmtpCreds: false,
+            });
+        }
+    }, [account, form]);
+    const testMutation = useMutation({
+        ...accountOperationsTestConnectionMutation(),
+    });
+    const createMutation = useMutation({
+        ...accountOperationsCreateAccountMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: configOperationsGetConfigQueryKey(),
+            });
+            onClose();
+        },
+    });
+    const updateMutation = useMutation({
+        ...accountDetailOperationsUpdateAccountMutation(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: configOperationsGetConfigQueryKey(),
+            });
+            onClose();
+        },
+    });
+    const handleTestImap = () => {
+        const values = form.getValues();
+        const useStoredPassword = isEditing && !values.password;
+        testMutation.mutate({
+            body: {
+                accountId: useStoredPassword ? account?.accountId : undefined,
+                username: values.username || values.email,
+                password: useStoredPassword ? undefined : values.password || undefined,
+                imapHost: values.imapHost,
+                imapPort: Number(values.imapPort),
+                imapTls: values.imapTls,
+                imapStartTls: values.imapStartTls,
+            },
+        });
+    };
+    const handleTestSmtp = () => {
+        const values = form.getValues();
+        const useStoredPassword = isEditing && !values.password;
+        testMutation.mutate({
+            body: {
+                accountId: useStoredPassword ? account?.accountId : undefined,
+                username: values.username || values.email,
+                password: useStoredPassword ? undefined : values.password || undefined,
+                imapHost: values.imapHost,
+                imapPort: Number(values.imapPort),
+                imapTls: values.imapTls,
+                imapStartTls: values.imapStartTls,
+                smtpHost: values.smtpHost || undefined,
+                smtpPort: values.smtpPort ? Number(values.smtpPort) : undefined,
+                smtpTls: values.smtpTls,
+                smtpStartTls: values.smtpStartTls,
+                smtpUsername: values.useDifferentSmtpCreds
+                    ? values.smtpUsername
+                    : undefined,
+                smtpPassword: values.useDifferentSmtpCreds
+                    ? values.smtpPassword
+                    : undefined,
+            },
+        });
+    };
+    const handleSubmit = form.handleSubmit((values) => {
+        // Validate password for new accounts
+        if (!isEditing && !values.password) {
+            form.setError("password", { message: "Password is required" });
+            return;
+        }
+        // Safety net: when the user filled IMAP but left SMTP blank,
+        // derive sensible SMTP defaults from the IMAP host so the account
+        // can actually send mail. Only fills blanks — never overrides
+        // values the user typed. See issue #196.
+        const autoFill = computeSmtpAutoFill({
+            imapHost: values.imapHost,
+            smtpHost: values.smtpHost,
+            smtpPort: values.smtpPort,
+            smtpTls: values.smtpTls,
+            smtpStartTls: values.smtpStartTls,
+        });
+        if (autoFill) {
+            form.setValue("smtpHost", autoFill.smtpHost);
+            form.setValue("smtpPort", autoFill.smtpPort);
+            form.setValue("smtpTls", autoFill.smtpTls);
+            form.setValue("smtpStartTls", autoFill.smtpStartTls);
+        }
+        const effectiveSmtpHost = autoFill?.smtpHost ?? values.smtpHost;
+        const effectiveSmtpPort = autoFill?.smtpPort ?? values.smtpPort;
+        const effectiveSmtpTls = autoFill?.smtpTls ?? values.smtpTls;
+        const effectiveSmtpStartTls = autoFill?.smtpStartTls ?? values.smtpStartTls;
+        const baseBody = {
+            email: values.email,
+            displayName: values.displayName?.trim() || undefined,
+            username: values.username || undefined,
+            imapHost: values.imapHost,
+            imapPort: Number(values.imapPort),
+            imapTls: values.imapTls,
+            imapStartTls: values.imapStartTls,
+            smtpHost: effectiveSmtpHost || undefined,
+            smtpPort: effectiveSmtpPort ? Number(effectiveSmtpPort) : undefined,
+            smtpTls: effectiveSmtpTls,
+            smtpStartTls: effectiveSmtpStartTls,
+            smtpUsername: values.useDifferentSmtpCreds
+                ? values.smtpUsername || undefined
+                : undefined,
+            smtpPassword: values.useDifferentSmtpCreds
+                ? values.smtpPassword || undefined
+                : undefined,
+        };
+        if (isEditing && account) {
+            const body = {
+                ...baseBody,
+                password: values.password || undefined,
+            };
+            updateMutation.mutate({ path: { accountId: account.accountId }, body });
+        }
+        else {
+            // Password is validated above for new accounts
+            const body = {
+                ...baseBody,
+                password: values.password,
+            };
+            createMutation.mutate({ body });
+        }
+    });
+    const isSaving = createMutation.isPending || updateMutation.isPending;
+    const { signature, setSignature, isSaving: isSignatureSaving, } = useSignature(account?.accountId);
+    const [signatureText, setSignatureText] = useState(signature.plainText);
+    const { languages, setLanguages, isSaving: isLanguagesSaving, } = useComposeLanguages(account?.accountId);
+    const languagesSection = (_jsxs("section", { children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3", children: "Writing languages" }), _jsx(ComposeLanguageSetting, { value: languages, onChange: setLanguages, busy: isLanguagesSaving })] }));
+    useEffect(() => {
+        setSignatureText(signature.plainText);
+    }, [signature.plainText]);
+    useEffect(() => {
+        if (!isOpen || !focusSmtp)
+            return;
+        const el = smtpSectionRef.current;
+        if (!el)
+            return;
+        const id = window.setTimeout(() => {
+            el.scrollIntoView({ behavior: "smooth", block: "start" });
+        }, 250);
+        return () => window.clearTimeout(id);
+    }, [isOpen, focusSmtp]);
+    const handleSignatureBlur = useCallback(() => {
+        if (signatureText !== signature.plainText) {
+            setSignature(signatureText, signatureText);
+        }
+    }, [signatureText, signature.plainText, setSignature]);
+    const handleSecurityChange = (type) => {
+        const { tls, startTls } = securityToApi(type);
+        form.setValue("imapTls", tls);
+        form.setValue("imapStartTls", startTls);
+        const currentPort = form.getValues("imapPort");
+        const isDefaultPort = currentPort === 993 || currentPort === 143;
+        if (isDefaultPort)
+            form.setValue("imapPort", type === "tls" ? 993 : 143);
+    };
+    const handleSmtpSecurityChange = (type) => {
+        const { tls, startTls } = securityToApi(type);
+        form.setValue("smtpTls", tls);
+        form.setValue("smtpStartTls", startTls);
+        const currentPort = form.getValues("smtpPort");
+        const isDefaultPort = currentPort === 465 || currentPort === 587 || currentPort === 25;
+        if (isDefaultPort) {
+            const port = type === "tls" ? 465 : type === "starttls" ? 587 : 25;
+            form.setValue("smtpPort", port);
+        }
+    };
+    const handlePrefillFromImap = () => {
+        const imapHost = form.getValues("imapHost");
+        form.setValue("smtpHost", deriveSmtpHostFromImap(imapHost));
+        form.setValue("smtpTls", false);
+        form.setValue("smtpStartTls", true);
+        form.setValue("smtpPort", 587);
+    };
+    const handlePresetChange = (id) => {
+        setPresetId(id);
+        setAdvancedOpen(false);
+        const preset = getPresetById(id);
+        if (!preset)
+            return;
+        const imapSecurity = securityToApi(preset.imap.security);
+        form.setValue("imapHost", preset.imap.host);
+        form.setValue("imapPort", preset.imap.port);
+        form.setValue("imapTls", imapSecurity.tls);
+        form.setValue("imapStartTls", imapSecurity.startTls);
+        const smtpSecurity = securityToApi(preset.smtp.security);
+        form.setValue("smtpHost", preset.smtp.host);
+        form.setValue("smtpPort", preset.smtp.port);
+        form.setValue("smtpTls", smtpSecurity.tls);
+        form.setValue("smtpStartTls", smtpSecurity.startTls);
+        const email = form.getValues("email").trim();
+        const username = form.getValues("username")?.trim();
+        if (email && !username)
+            form.setValue("username", email);
+    };
+    const presetHint = selectedPreset?.passwordHelp.text;
+    const imapError = appendAppPasswordHint(testMutation.data?.imapError, presetHint);
+    const smtpError = appendAppPasswordHint(testMutation.data?.smtpError, presetHint);
+    const isOAuthAccount = account ? isOAuthMicrosoftAccount(account) : false;
+    // OAuth Microsoft accounts: show a read-only summary panel instead of
+    // the credential / server configuration form.
+    if (isOAuthAccount && isEditing) {
+        return (_jsx(SlidePanel, { isOpen: isOpen, onClose: onClose, title: "Edit Account", footer: _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Close" }), children: _jsxs("div", { className: "space-y-6", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3", children: "Microsoft 365 Account" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-md border border-line bg-surface-sunken px-3 py-2.5 text-sm text-fg-muted", children: [_jsx("span", { className: "block text-2xs font-medium uppercase tracking-wider text-fg-subtle mb-1", children: "Email" }), _jsx("span", { className: "text-fg", children: account?.email })] }), _jsxs("div", { className: "rounded-md border border-line bg-surface-sunken px-3 py-2.5 text-sm text-fg-muted", children: [_jsx("span", { className: "block text-2xs font-medium uppercase tracking-wider text-fg-subtle mb-1", children: "Authentication" }), _jsx("span", { className: "text-fg", children: "Microsoft OAuth (XOAUTH2)" })] }), _jsx("p", { className: "text-xs text-fg-muted", children: "Server settings are managed automatically for Microsoft 365 accounts. To update credentials, use the Reconnect button." })] })] }), isEditing && (_jsxs("section", { children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3", children: "Signature" }), _jsx("div", { className: "space-y-3", children: _jsxs("div", { children: [_jsx("label", { htmlFor: "email-sig-view", className: "text-sm font-medium mb-1.5 block", children: "Email Signature" }), _jsx("textarea", { id: "email-sig-view", value: signatureText, onChange: (e) => setSignatureText(e.target.value), onBlur: handleSignatureBlur, rows: 5, className: "w-full px-3 py-2 border border-line rounded-md bg-surface-sunken text-sm text-fg placeholder:text-fg-subtle focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30 transition-colors resize-y outline-none", placeholder: "Enter your email signature..." }), _jsx("p", { className: "text-xs text-fg-muted mt-1", children: isSignatureSaving
+                                                ? "Saving signature..."
+                                                : "This signature will be appended to new emails." })] }) })] })), isEditing && languagesSection] }) }));
+    }
+    return (_jsx(SlidePanel, { isOpen: isOpen, onClose: onClose, title: isEditing ? "Edit Account" : "Add Account", footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", form: "account-form", variant: "primary", disabled: isSaving, children: isSaving ? "Saving..." : "Save Account" })] }), children: _jsxs("form", { id: "account-form", onSubmit: handleSubmit, className: "space-y-6", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3", children: "Account Information" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "account-provider", className: "text-sm font-medium mb-1.5 block", children: "Provider" }), _jsxs(Select, { id: "account-provider", value: presetId, onChange: (e) => handlePresetChange(e.target.value), children: [_jsx("option", { value: "", children: "Custom / other" }), PROVIDER_PRESETS.map((preset) => (_jsx("option", { value: preset.id, children: preset.label }, preset.id)))] }), _jsx("p", { className: "text-xs text-fg-muted mt-1", children: "Pick your email provider to fill in server settings automatically, or choose Custom to enter them by hand." })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "account-email", className: "text-sm font-medium mb-1.5 block", children: "Email Address" }), _jsx(Input, { id: "account-email", ...form.register("email"), placeholder: "alice@example.com" }), form.formState.errors.email && (_jsx("p", { className: "text-sm text-danger mt-1", children: form.formState.errors.email.message }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "account-displayName", className: "text-sm font-medium mb-1.5 block", children: "Display name (optional)" }), _jsx(Input, { id: "account-displayName", ...form.register("displayName"), placeholder: "Alice" }), _jsx("p", { className: "text-xs text-fg-muted mt-1", children: "What to call this account in Remit. Leave blank to use a name derived from the address." })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "account-username", className: "text-sm font-medium mb-1.5 block", children: "Username" }), _jsx(Input, { id: "account-username", ...form.register("username"), placeholder: "Same as email if empty" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "account-password", className: "text-sm font-medium mb-1.5 block", children: "Password" }), _jsx(PasswordInput, { id: "account-password", ...form.register("password"), placeholder: isEditing ? "Leave empty to keep current" : "" }), form.formState.errors.password && (_jsx("p", { className: "text-sm text-danger mt-1", children: form.formState.errors.password.message })), selectedPreset && (_jsxs("p", { className: "text-xs text-fg-muted mt-1", children: [selectedPreset.passwordHelp.text, " ", _jsx("a", { href: selectedPreset.passwordHelp.url, target: "_blank", rel: "noopener noreferrer", className: "text-accent hover:underline", children: "Get an app password" })] }))] })] })] }), _jsxs("section", { children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider", children: "Incoming Mail (IMAP)" }), selectedPreset && (_jsx("button", { type: "button", onClick: () => setAdvancedOpen((v) => !v), className: "text-xs text-fg-muted hover:text-fg transition-colors", children: advancedOpen ? "Use preset settings" : "Advanced" }))] }), serversLocked && (_jsxs("p", { className: "text-xs text-fg-muted mb-3", children: ["Server settings are pre-filled for ", selectedPreset?.label, " and locked. Choose Advanced to edit them by hand."] })), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "imap-host", className: "text-sm font-medium mb-1.5 block", children: "Server" }), _jsx(Input, { id: "imap-host", ...form.register("imapHost"), readOnly: serversLocked, placeholder: "imap.example.com" }), form.formState.errors.imapHost && (_jsx("p", { className: "text-sm text-danger mt-1", children: form.formState.errors.imapHost.message }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "imap-port", className: "text-sm font-medium mb-1.5 block", children: "Port" }), _jsx(Input, { id: "imap-port", ...form.register("imapPort"), readOnly: serversLocked, type: "number" })] }), _jsxs("div", { children: [_jsx("span", { className: "text-sm font-medium mb-1.5 block", children: "Security" }), _jsxs("div", { className: "space-y-1.5 mt-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: form.watch("imapTls"), onChange: () => handleSecurityChange("tls") }), "TLS (Port 993)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: !form.watch("imapTls") && form.watch("imapStartTls"), onChange: () => handleSecurityChange("starttls") }), "STARTTLS (Port 143)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: !form.watch("imapTls") && !form.watch("imapStartTls"), onChange: () => handleSecurityChange("none") }), "None (Unencrypted)"] })] })] })] }), _jsx(Button, { type: "button", variant: "secondary", onClick: handleTestImap, disabled: testMutation.isPending, className: "w-full", icon: testMutation.isPending ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : undefined, children: testMutation.isPending ? "Testing..." : "Test IMAP Connection" }), testMutation.data && (_jsxs("div", { className: cn("p-2 rounded-md text-sm", testMutation.data.imapSuccess
+                                        ? "bg-positive/10 text-positive"
+                                        : "bg-danger-soft text-danger"), children: [testMutation.data.imapSuccess ? (_jsx(Check, { className: "inline size-4 mr-1" })) : (_jsx(X, { className: "inline size-4 mr-1" })), testMutation.data.imapSuccess ? "IMAP Connected" : imapError] }))] })] }), _jsxs("section", { ref: smtpSectionRef, "data-testid": "smtp-section", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider", children: "Outgoing Mail (SMTP)" }), !serversLocked && (_jsx("button", { type: "button", onClick: handlePrefillFromImap, disabled: !form.watch("imapHost"), className: "text-xs text-fg-muted hover:text-fg transition-colors disabled:opacity-50", children: "Pre-fill from IMAP" }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "smtp-host", className: "text-sm font-medium mb-1.5 block", children: "Server" }), _jsx(Input, { id: "smtp-host", ...form.register("smtpHost"), readOnly: serversLocked, placeholder: "smtp.example.com" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "smtp-port", className: "text-sm font-medium mb-1.5 block", children: "Port" }), _jsx(Input, { id: "smtp-port", ...form.register("smtpPort"), readOnly: serversLocked, type: "number" })] }), _jsxs("div", { children: [_jsx("span", { className: "text-sm font-medium mb-1.5 block", children: "Security" }), _jsxs("div", { className: "space-y-1.5 mt-2", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: form.watch("smtpTls") === true, onChange: () => handleSmtpSecurityChange("tls") }), "TLS (Port 465)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: !form.watch("smtpTls") &&
+                                                                        form.watch("smtpStartTls") === true, onChange: () => handleSmtpSecurityChange("starttls") }), "STARTTLS (Port 587)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "radio", disabled: serversLocked, checked: !form.watch("smtpTls") && !form.watch("smtpStartTls"), onChange: () => handleSmtpSecurityChange("none") }), "None (Unencrypted)"] })] })] })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("input", { type: "checkbox", ...form.register("useDifferentSmtpCreds") }), "Use different credentials for SMTP"] }), form.watch("useDifferentSmtpCreds") && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "smtp-username", className: "text-sm font-medium mb-1.5 block", children: "SMTP Username" }), _jsx(Input, { id: "smtp-username", ...form.register("smtpUsername") })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "smtp-password", className: "text-sm font-medium mb-1.5 block", children: "SMTP Password" }), _jsx(PasswordInput, { id: "smtp-password", ...form.register("smtpPassword") })] })] })), _jsx(Button, { type: "button", variant: "secondary", onClick: handleTestSmtp, disabled: testMutation.isPending || !form.watch("smtpHost"), className: "w-full", icon: testMutation.isPending ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : undefined, children: testMutation.isPending ? "Testing..." : "Test SMTP Connection" }), testMutation.data?.smtpSuccess !== undefined && (_jsxs("div", { className: cn("p-2 rounded-md text-sm", testMutation.data.smtpSuccess
+                                        ? "bg-positive/10 text-positive"
+                                        : "bg-danger-soft text-danger"), children: [testMutation.data.smtpSuccess ? (_jsx(Check, { className: "inline size-4 mr-1" })) : (_jsx(X, { className: "inline size-4 mr-1" })), testMutation.data.smtpSuccess ? "SMTP Connected" : smtpError] }))] })] }), isEditing && (_jsxs("section", { children: [_jsx("h3", { className: "text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3", children: "Signature" }), _jsx("div", { className: "space-y-3", children: _jsxs("div", { children: [_jsx("label", { htmlFor: "email-sig-edit", className: "text-sm font-medium mb-1.5 block", children: "Email Signature" }), _jsx("textarea", { id: "email-sig-edit", value: signatureText, onChange: (e) => setSignatureText(e.target.value), onBlur: handleSignatureBlur, rows: 5, className: "w-full px-3 py-2 border border-line rounded-md bg-surface-sunken text-sm text-fg placeholder:text-fg-subtle focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30 transition-colors resize-y outline-none", placeholder: "Enter your email signature..." }), _jsx("p", { className: "text-xs text-fg-muted mt-1", children: isSignatureSaving
+                                            ? "Saving signature..."
+                                            : "This signature will be appended to new emails." })] }) })] })), isEditing && languagesSection] }) }));
+};

package/dist/src/components/settings/AccountServices.d.ts

@@ -0,0 +1,6 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+export interface AccountServicesProps {
+    account: RemitImapAccountResponse;
+    onRemoveAccount: () => void;
+}
+export declare function AccountServices({ account, onRemoveAccount, }: AccountServicesProps): import("react").JSX.Element;

package/dist/src/components/settings/AccountServices.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { accountDetailOperationsUpdateAccountMutation, configOperationsGetConfigQueryKey, microsoftOAuthOperationsMicrosoftOAuthStartMutation, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { microsoftServicesGranted } from "@remit/mail-oauth-service";
+import { AccountServiceChangeDialog, formatErrorMessage, } from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { REDIRECT_STALL_MESSAGE, useRedirectEnded, } from "../../hooks/useRedirectEnded";
+import { softErrorMeta } from "../../lib/error-classifier";
+import { AccountServicesCard, } from "./AccountServicesCard";
+const SERVICES = ["Mail", "Calendar"];
+const PROVIDER_NAME = "Microsoft";
+const isMicrosoft = (account) => account.authType === "oauthMicrosoft";
+const withService = (services, service) => SERVICES.filter((candidate) => candidate === service || services.includes(candidate));
+export function AccountServices({ account, onRemoveAccount, }) {
+    const queryClient = useQueryClient();
+    const [change, setChange] = useState(null);
+    const [refusal, setRefusal] = useState(null);
+    const [redirecting, setRedirecting] = useState(null);
+    const save = useMutation({
+        ...accountDetailOperationsUpdateAccountMutation(),
+        meta: softErrorMeta,
+        onSuccess: () => queryClient.invalidateQueries({
+            queryKey: configOperationsGetConfigQueryKey(),
+        }),
+    });
+    const consent = useMutation({
+        ...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
+        meta: softErrorMeta,
+    });
+    const markRedirectStarted = useRedirectEnded((end) => {
+        const service = redirecting;
+        setRedirecting(null);
+        if (end !== "stalled" || service === null)
+            return;
+        setRefusal({ service, intent: "on", message: REDIRECT_STALL_MESSAGE });
+    });
+    const enabled = save.isPending && save.variables?.body.syncedServices
+        ? save.variables.body.syncedServices
+        : account.syncedServices;
+    const offered = isMicrosoft(account) ? SERVICES : ["Mail"];
+    const consented = isMicrosoft(account)
+        ? microsoftServicesGranted(account.grantedScopes)
+        : offered;
+    const commit = (services, service, intent) => {
+        setRefusal(null);
+        save.mutate({
+            path: { accountId: account.accountId },
+            body: { syncedServices: services },
+        }, {
+            onError: (error) => setRefusal({ service, intent, message: formatErrorMessage(error) }),
+        });
+    };
+    const startConsent = (service) => {
+        setRefusal(null);
+        consent.mutate({
+            body: {
+                email: account.email,
+                services: withService(enabled, service),
+            },
+        }, {
+            onSuccess: (data) => {
+                setRedirecting(service);
+                markRedirectStarted();
+                window.location.assign(data.authorizationUrl);
+            },
+            onError: (error) => setRefusal({
+                service,
+                intent: "on",
+                message: formatErrorMessage(error),
+            }),
+        });
+    };
+    const requestChange = (service, intent) => {
+        if (intent === "off") {
+            setChange({ kind: enabled.length === 1 ? "last" : "disable", service });
+            return;
+        }
+        if (!consented.includes(service)) {
+            setChange({ kind: "enable", service });
+            return;
+        }
+        commit(withService(enabled, service), service, "on");
+    };
+    const confirm = () => {
+        const confirmed = change;
+        setChange(null);
+        if (confirmed === null)
+            return;
+        if (confirmed.kind === "last") {
+            onRemoveAccount();
+            return;
+        }
+        if (confirmed.kind === "enable") {
+            startConsent(confirmed.service);
+            return;
+        }
+        commit(enabled.filter((service) => service !== confirmed.service), confirmed.service, "off");
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(AccountServicesCard, { providerName: PROVIDER_NAME, offered: offered, enabled: enabled, consented: consented, disabled: save.isPending || consent.isPending || redirecting !== null, refusal: refusal, onRequestChange: requestChange }), _jsx(AccountServiceChangeDialog, { change: change, providerName: PROVIDER_NAME, onConfirm: confirm, onCancel: () => setChange(null) })] }));
+}

package/dist/src/components/settings/AccountServicesCard.d.ts

@@ -0,0 +1,16 @@
+import { type AccountService, type AccountServiceIntent } from "@remit/ui";
+export interface AccountServiceRefusal {
+    service: AccountService;
+    intent: AccountServiceIntent;
+    message: string;
+}
+export interface AccountServicesCardProps {
+    providerName: string;
+    offered: AccountService[];
+    enabled: AccountService[];
+    consented: AccountService[];
+    disabled: boolean;
+    refusal: AccountServiceRefusal | null;
+    onRequestChange: (service: AccountService, intent: AccountServiceIntent) => void;
+}
+export declare function AccountServicesCard({ providerName, offered, enabled, consented, disabled, refusal, onRequestChange, }: AccountServicesCardProps): import("react").JSX.Element | null;

package/dist/src/components/settings/AccountServicesCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountServiceToggles, Banner, } from "@remit/ui";
+import { buildBugReportContext, buildGitHubIssueUrl, } from "../../lib/bug-report";
+const refusalTitle = (refusal) => `Couldn't turn ${refusal.service.toLowerCase()} ${refusal.intent}`;
+const reportHref = (refusal) => buildGitHubIssueUrl(buildBugReportContext({
+    title: `Bug: ${refusalTitle(refusal)}`,
+    errorMessage: `${refusalTitle(refusal)} — ${refusal.message}`,
+}));
+export function AccountServicesCard({ providerName, offered, enabled, consented, disabled, refusal, onRequestChange, }) {
+    if (offered.length < 2)
+        return null;
+    return (_jsxs("section", { className: "space-y-2 rounded-sm border border-line bg-surface px-row-inset py-3", children: [_jsx(AccountServiceToggles, { providerName: providerName, offered: offered, enabled: enabled, consented: consented, disabled: disabled, onRequestChange: onRequestChange }), refusal && (_jsxs(Banner, { tone: "danger", variant: "soft", children: [_jsx("p", { className: "font-medium", children: refusalTitle(refusal) }), _jsx("p", { className: "mt-0.5 break-words text-fg-muted", children: refusal.message }), _jsx("a", { href: reportHref(refusal), target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-block font-medium text-accent hover:underline", children: "Report an issue" })] }))] }));
+}

package/dist/src/components/settings/AdvancedNavIcon.d.ts

@@ -0,0 +1 @@
+export declare function AdvancedNavIcon(): import("react").JSX.Element;

package/dist/src/components/settings/AdvancedNavIcon.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The Advanced nav icon, with the update dot.
+ *
+ * A dot on the way to settings is the entire notification budget an available
+ * update gets outside the pane — no count, no copy, no action. Everywhere else
+ * stays silent.
+ */
+import { AttentionDot } from "@remit/ui";
+import { Wrench } from "lucide-react";
+import { useOptionalSelfUpdate } from "../../hooks/use-system-update";
+export function AdvancedNavIcon() {
+    const selfUpdate = useOptionalSelfUpdate();
+    const updateAvailable = selfUpdate?.surface.status === "ready" &&
+        selfUpdate.surface.section.status === "available";
+    return (_jsx(AttentionDot, { label: updateAvailable ? "Update available" : undefined, children: _jsx(Wrench, { className: "size-4" }) }));
+}

package/dist/src/components/settings/CalendarCreateCard.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarDetails } from "./CalendarDetailsForm";
+export interface NewCalendar extends CalendarDetails {
+    urlSegment: string;
+}
+export interface CalendarCreateCardProps {
+    isBusy: boolean;
+    /** The server's words for the last create it turned down; empty when none. */
+    problem: string;
+    /** Resolves true once the server has the calendar, so the form can clear. */
+    onCreate: (calendar: NewCalendar) => Promise<boolean>;
+}
+export declare function CalendarCreateCard({ isBusy, problem, onCreate, }: CalendarCreateCardProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarCreateCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings › Calendars: adding a calendar.
+ *
+ * The address is the collection's identity and the path a CalDAV client
+ * bookmarks, so it is asked for rather than hidden. It follows the name until
+ * the reader edits it, and the server decides whether it is free — a taken one
+ * comes back in the server's words where the button is.
+ */
+import { Banner, Button, Card, CardBody, CardHeader, CardTitle, Input, } from "@remit/ui";
+import { Plus } from "lucide-react";
+import { useId, useState } from "react";
+import { UNZONED_CALENDAR } from "../../hooks/calendar";
+import { calendarUrlSegmentFor } from "../../lib/calendar-collection-copy";
+import { TimeZoneSelect } from "./TimeZoneSelect";
+export function CalendarCreateCard({ isBusy, problem, onCreate, }) {
+    const [displayName, setDisplayName] = useState("");
+    const [typedSegment, setTypedSegment] = useState(undefined);
+    const [timezone, setTimezone] = useState(UNZONED_CALENDAR);
+    const titleId = useId();
+    const nameId = useId();
+    const segmentId = useId();
+    const zoneId = useId();
+    const urlSegment = typedSegment ?? calendarUrlSegmentFor(displayName);
+    const ready = displayName.trim() !== "" && urlSegment.trim() !== "";
+    return (_jsxs(Card, { className: "max-w-xl", role: "region", "aria-labelledby": titleId, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { id: titleId, children: "New calendar" }) }), _jsx(CardBody, { children: _jsxs("form", { className: "space-y-3", onSubmit: (event) => {
+                        event.preventDefault();
+                        if (!ready)
+                            return;
+                        void onCreate({
+                            displayName: displayName.trim(),
+                            urlSegment: urlSegment.trim(),
+                            timezone,
+                        }).then((created) => {
+                            if (!created)
+                                return;
+                            setDisplayName("");
+                            setTypedSegment(undefined);
+                            setTimezone(UNZONED_CALENDAR);
+                        });
+                    }, children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: nameId, className: "text-xs font-medium text-fg-muted", children: "Name" }), _jsx(Input, { id: nameId, value: displayName, maxLength: 140, disabled: isBusy, onChange: (event) => setDisplayName(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: segmentId, className: "text-xs font-medium text-fg-muted", children: "Address" }), _jsx(Input, { id: segmentId, value: urlSegment, maxLength: 64, disabled: isBusy, onChange: (event) => setTypedSegment(event.target.value) })] }), _jsxs("div", { className: "space-y-1 sm:col-span-2", children: [_jsx("label", { htmlFor: zoneId, className: "text-xs font-medium text-fg-muted", children: "Time zone" }), _jsx(TimeZoneSelect, { id: zoneId, value: timezone, disabled: isBusy, onChange: setTimezone })] })] }), _jsx("p", { className: "text-xs text-fg-muted", children: "The address names the calendar for CalDAV clients and cannot be changed later. The name and zone can." }), problem !== "" && (_jsxs(Banner, { tone: "danger", variant: "soft", children: [_jsx("p", { className: "font-medium", children: "The calendar was not added." }), _jsx("p", { className: "mt-0.5 break-words", children: problem })] })), _jsx(Button, { type: "submit", variant: "primary", size: "sm", disabled: isBusy || !ready, icon: _jsx(Plus, { className: "size-3.5" }), children: isBusy ? "Adding…" : "Add calendar" })] }) })] }));
+}

package/dist/src/components/settings/CalendarDetailsForm.d.ts

@@ -0,0 +1,15 @@
+export interface CalendarDetails {
+    displayName: string;
+    timezone: string;
+}
+export interface CalendarDetailsFormProps {
+    /** What the server holds now. */
+    calendarName: string;
+    timezone: string;
+    isBusy: boolean;
+    /** The server's words for the last write it turned down; empty when none. */
+    problem: string;
+    onSave: (details: CalendarDetails) => void;
+    onDelete: () => void;
+}
+export declare function CalendarDetailsForm({ calendarName, timezone, isBusy, problem, onSave, onDelete, }: CalendarDetailsFormProps): import("react").JSX.Element;

package/dist/src/components/settings/CalendarDetailsForm.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Settings › Calendars: one calendar's name and zone, and deleting it.
+ *
+ * Presentational. The draft starts from what the server holds and the parent
+ * remounts it when that changes, so a saved rename reads back from the listing
+ * rather than from what was typed. A delete always asks first: the calendar
+ * goes with every event in it, and nothing on this page can tell an empty one
+ * from a full one without reading all of its time.
+ */
+import { Banner, Button, ConfirmDialog, Input } from "@remit/ui";
+import { Save, Trash2 } from "lucide-react";
+import { useId, useState } from "react";
+import { deleteCalendarConfirmCopy } from "../../lib/calendar-collection-copy";
+import { TimeZoneSelect } from "./TimeZoneSelect";
+export function CalendarDetailsForm({ calendarName, timezone, isBusy, problem, onSave, onDelete, }) {
+    const [displayName, setDisplayName] = useState(calendarName);
+    const [zone, setZone] = useState(timezone);
+    const [confirming, setConfirming] = useState(false);
+    const nameId = useId();
+    const zoneId = useId();
+    const trimmed = displayName.trim();
+    const changed = trimmed !== calendarName || zone !== timezone;
+    const copy = deleteCalendarConfirmCopy(calendarName);
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { className: "space-y-3", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (!changed || trimmed === "")
+                        return;
+                    onSave({ displayName: trimmed, timezone: zone });
+                }, children: [_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: nameId, className: "text-xs font-medium text-fg-muted", children: "Name" }), _jsx(Input, { id: nameId, value: displayName, maxLength: 140, disabled: isBusy, onChange: (event) => setDisplayName(event.target.value) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("label", { htmlFor: zoneId, className: "text-xs font-medium text-fg-muted", children: "Time zone" }), _jsx(TimeZoneSelect, { id: zoneId, value: zone, disabled: isBusy, onChange: setZone })] })] }), problem !== "" && (_jsxs(Banner, { tone: "danger", variant: "soft", children: [_jsxs("p", { className: "font-medium", children: [calendarName, " was not changed."] }), _jsx("p", { className: "mt-0.5 break-words", children: problem })] })), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "submit", variant: "secondary", size: "sm", disabled: isBusy || !changed || trimmed === "", icon: _jsx(Save, { className: "size-3.5" }), children: "Save changes" }), _jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: isBusy, icon: _jsx(Trash2, { className: "size-3.5" }), onClick: () => setConfirming(true), children: "Delete calendar" })] })] }), _jsx(ConfirmDialog, { isOpen: confirming, title: copy.title, description: copy.description, confirmLabel: "Delete calendar", destructive: true, onConfirm: () => {
+                    setConfirming(false);
+                    onDelete();
+                }, onCancel: () => setConfirming(false) })] }));
+}