domma-cms 1.7.0 → 1.7.1

package/plugins/support/admin/lib/email.js

@@ -0,0 +1,191 @@
+/**
+ * Email someone from this Tool: Email Pro's compose window when the user can
+ * send from it, otherwise the device's mail program through `mailto:`.
+ *
+ * Core makes the choice (`/admin/js/lib/mail-compose.js`, CMS 1.6.61+). It is
+ * imported at RUN time, never statically, so this Tool still loads on an older
+ * core - where every action keeps the plain `mailto:` it always had.
+ *
+ * `emailTo()` is for menu actions; `routeMailLinks()` is for a visible
+ * `<a href="mailto:…">` - the link stays a link (copy, hover, middle-click all
+ * still work) and a plain click goes the same way as the menu action.
+ *
+ * @module support/admin/lib/email
+ */
+
+const CORE = '/admin/js/lib/mail-compose.js';
+let core = null;
+
+/** The core module, or null on a core without it. Asked once. */
+const loadCore = () => (core ??= import(CORE).catch(() => null));
+
+/** Longest subject or body carried (as core's). */
+const MAX_TEXT = 2000;
+/** Longest mailto: handed to the device - mail programs cut or refuse longer ones. */
+const MAX_MAILTO = 1800;
+
+/**
+ * Something that can only be an email address: one @, no spaces or line
+ * breaks, nothing that would start another recipient or a query.
+ *
+ * @param   {*} value
+ * @returns {boolean}
+ */
+export function looksLikeAddress(value) {
+    return typeof value === 'string' && /^[^\s@<>,;"?&]+@[^\s@<>,;"?&]+$/.test(value);
+}
+
+/** Valid addresses only, once each (ignoring case), from a string, `{address}`/`{email}`, or a list. */
+function addressesOf(list) {
+    const seen = new Set();
+    return (Array.isArray(list) ? list : list == null ? [] : [list])
+        .map(x => String(typeof x === 'string' ? x : (x?.address ?? x?.email ?? '')).trim())
+        .filter(a => looksLikeAddress(a) && !seen.has(a.toLowerCase()) && seen.add(a.toLowerCase()));
+}
+
+/** Trim and cap; a subject loses its line breaks (they would be a header). */
+function cleanText(value, {oneLine = false} = {}) {
+    let text = String(value ?? '');
+    if (oneLine) text = text.replace(/[\r\n]+/g, ' ');
+    return text.slice(0, MAX_TEXT).trim();
+}
+
+/**
+ * The request as a `mailto:` link (the fallback on an older core).
+ *
+ * @param   {{to?: *, cc?: *, bcc?: *, subject?: string, body?: string}} request
+ * @returns {string}
+ */
+export function mailtoHref({to, cc, bcc, subject, body} = {}) {
+    const enc = (list) => addressesOf(list).map(a => encodeURIComponent(a).replace(/%40/g, '@')).join(',');
+    const s = cleanText(subject, {oneLine: true});
+    const b = cleanText(body);
+    const query = [];
+    if (enc(cc)) query.push(`cc=${enc(cc)}`);
+    if (enc(bcc)) query.push(`bcc=${enc(bcc)}`);
+    if (s) query.push(`subject=${encodeURIComponent(s)}`);
+    if (b) query.push(`body=${encodeURIComponent(b)}`);
+    return `mailto:${enc(to)}${query.length ? `?${query.join('&')}` : ''}`;
+}
+
+/** Copy text: the clipboard, else the old copy command, else a box to copy it from by hand. */
+async function copyText(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch { /* next */ }
+    const box = document.createElement('textarea');
+    box.className = 'form-input';
+    box.readOnly = true;
+    box.rows = 6;
+    box.value = text;
+    try {
+        box.style.position = 'fixed';
+        box.style.opacity = '0';
+        document.body.appendChild(box);
+        box.select();
+        if (document.execCommand('copy')) return true;
+    } catch { /* next */ } finally {
+        box.remove();
+        box.style.position = '';
+        box.style.opacity = '';
+    }
+    const modal = E.modal({title: 'Copy the addresses', size: 'medium', buttons: [{id: 'close', text: 'Close', variant: 'secondary'}]});
+    modal.element.appendChild(box);   // light DOM: setContent would strip the textarea
+    modal.open();
+    box.select();
+    return false;
+}
+
+/**
+ * Hand the request to the device's mail program - unless the link would be
+ * too long for it, when the addresses are copied instead and the toast says
+ * what did not go.
+ */
+async function openMailto(request) {
+    const href = mailtoHref(request);
+    if (href.length <= MAX_MAILTO) {
+        location.href = href;
+        return 'mailto';
+    }
+    const all = addressesOf([...addressesOf(request.to), ...addressesOf(request.cc), ...addressesOf(request.bcc)]);
+    const copied = all.length ? await copyText(all.join(', ')) : false;
+    const lost = [cleanText(request.subject) && 'the subject', cleanText(request.body) && 'the message'].filter(Boolean);
+    E.toast(`Too long for your mail program to open. ${all.length
+        ? `${copied ? 'The' : 'Copy the'} ${all.length} address${all.length === 1 ? '' : 'es'}${copied ? ' are copied' : ''} - paste them into Bcc of a new email.` : ''}${lost.length ? ` Not carried over: ${lost.join(' and ')}.` : ''}`,
+    {type: 'warning', duration: 9000});
+    return 'copied';
+}
+
+const decode = (s) => { try { return decodeURIComponent(s); } catch { return s; } };
+
+/**
+ * A `mailto:` link read back into a request (what a visible link carries).
+ * When the address part holds anything that is not an address, the query
+ * is ignored: an address stored as `me@x.com?body=…` must not prefill a message.
+ *
+ * @param   {string} href
+ * @returns {null|{to: string[], cc: string[], bcc: string[], subject: string, body: string}}
+ */
+export function parseMailto(href) {
+    const m = String(href ?? '').match(/^mailto:([^?]*)(?:\?(.*))?$/i);
+    if (!m) return null;
+    const split = (s) => decode(s || '').split(/[,;]/).map(x => x.trim()).filter(Boolean);
+    const named = split(m[1]);
+    const out = {to: addressesOf(named), cc: [], bcc: [], subject: '', body: ''};
+    if (named.some(a => !looksLikeAddress(a))) return out;
+    for (const pair of (m[2] || '').split('&')) {
+        const i = pair.indexOf('=');
+        if (i < 1) continue;
+        const key = pair.slice(0, i).toLowerCase();
+        const value = pair.slice(i + 1);
+        if (key === 'to') out.to = addressesOf([...out.to, ...split(value)]);
+        else if (key === 'cc' || key === 'bcc') out[key] = addressesOf([...out[key], ...split(value)]);
+        else if (key === 'subject') out.subject = cleanText(decode(value), {oneLine: true});
+        else if (key === 'body') out.body = cleanText(decode(value));
+    }
+    return out;
+}
+
+/**
+ * Email someone. Recipients are `{name, address}`, `{name, email}` or bare
+ * addresses; several people belong in `bcc`, so nobody sees the others.
+ * With nobody to address (a link to pass on) compose still opens, To empty.
+ *
+ * @param   {{to?: *, cc?: *, bcc?: *, subject?: string, body?: string}} request
+ * @returns {Promise<'compose'|'mailto'|'copied'|'none'>}
+ */
+export async function emailTo(request = {}) {
+    const mail = await loadCore();
+    if (!mail) return openMailto(request);
+    const r = mail.composeRequest(request);
+    if (r.to.length || r.cc.length || r.bcc.length) return mail.openEmail(r);
+    if (await mail.emailReady()) {
+        location.hash = mail.composeHash(r);
+        return 'compose';
+    }
+    location.href = mail.mailtoHref(r);
+    return 'mailto';
+}
+
+/**
+ * Send plain clicks on the `mailto:` links inside `root` through `emailTo()`.
+ * A modified click (new tab/window) or one already handled is left alone.
+ *
+ * @param   {Element} root
+ * @returns {() => void} removes the listener
+ */
+export function routeMailLinks(root) {
+    if (!root) return () => {};
+    const onClick = (e) => {
+        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        const a = e.target?.closest?.('a[href^="mailto:" i]');
+        if (!a || !root.contains(a)) return;
+        const request = parseMailto(a.getAttribute('href'));
+        if (!request) return;
+        e.preventDefault();
+        emailTo(request);
+    };
+    root.addEventListener('click', onClick);
+    return () => root.removeEventListener('click', onClick);
+}

package/plugins/support/admin/views/desk.js

@@ -18,6 +18,7 @@ import {
     refreshBadge, rowKeys, stamp, store, telHref, threadFiles, threadRows, when
 } from '../lib/kit.js';
 import {DRAFT_KEYS, afterSend, draftQuestion, draftText, draftValues, newDraftQuestion, ticketPrint} from '../lib/drafts.js';
+import {looksLikeAddress, routeMailLinks} from '../lib/email.js';
 
 const ROW = `
 <div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
@@ -154,9 +155,11 @@ export async function mount(root, ctx) {
     const tel = view.querySelector('[data-ref="tel"]');
     scope(M.effect(() => {
         const c = contact.value || {};
-        if (c.email) mailLink.setAttribute('href', `mailto:${c.email}`);
+        if (looksLikeAddress(c.email)) mailLink.setAttribute('href', `mailto:${encodeURIComponent(c.email)}`);
         if (c.phone) tel.setAttribute('href', telHref(c.phone));
     }));
+    // Domma's address stays a link; a click goes to Email Pro's compose when this user can send from it.
+    scope(routeMailLinks(view));
 
     // The first load shows a skeleton in the slot; a reload keeps the list on screen.
     let loaded = false;

package/plugins/support/admin/views/inbox.js

@@ -13,6 +13,7 @@ import {
     threadFiles, threadRows, when
 } from '../lib/kit.js';
 import {DRAFT_KEYS, afterSend, draftQuestion, draftText, draftValues, ticketPrint} from '../lib/drafts.js';
+import {looksLikeAddress, routeMailLinks} from '../lib/email.js';
 
 const ROW = `
 <div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
@@ -234,6 +235,7 @@ export async function mount(root, ctx) {
         let guard = null;
         let savedNotes = saved.notes;
         let stopScroll = () => {};
+        let stopMail = () => {};
         let menu = null;
 
         const run = async (fn) => {
@@ -249,7 +251,7 @@ export async function mount(root, ctx) {
             size: 'lg',
             model: {thread, status, statusLabel, tone, urgent, archived, draft, hasDraft, after, notes, busy},
             cleanup: () => {
-                stopScroll(); stopFiles(); shown.dispose(); menu?.destroy?.();
+                stopScroll(); stopMail(); stopFiles(); shown.dispose(); menu?.destroy?.();
                 [cur, thread, status, statusLabel, tone, urgent, archived, hasDraft].forEach(c => c.dispose?.());
                 panels.release('detail');
             },
@@ -258,7 +260,7 @@ export async function mount(root, ctx) {
     <div><dt>Status</dt><dd><span class="sp-chip" data-bind-class="tone.value" data-bind-text="statusLabel.value"></span>
       <span class="sp-chip is-muted" data-bind-hidden="!archived.value">Archived</span></dd></div>
     <div><dt>Site</dt><dd>${siteUrl ? `<a href="${esc(siteUrl)}" target="_blank" rel="noopener">${esc(t.siteName)}</a>` : esc(t.siteName)}</dd></div>
-    <div><dt>From</dt><dd>${esc(t.userName)}${t.userEmail ? ` · <a href="mailto:${esc(t.userEmail)}">${esc(t.userEmail)}</a>` : ''}</dd></div>
+    <div><dt>From</dt><dd>${esc(t.userName)}${t.userEmail ? ` · ${looksLikeAddress(t.userEmail) ? `<a href="mailto:${esc(encodeURIComponent(t.userEmail))}">${esc(t.userEmail)}</a>` : esc(t.userEmail)}` : ''}</dd></div>
     <div><dt>About</dt><dd>${esc(labelOf(t.category))}</dd></div>
     <div><dt>Opened</dt><dd>${esc(stamp(t.createdAt))}</dd></div>
     ${t.where ? `<div><dt>Where</dt><dd>${esc(t.where)}</dd></div>` : ''}
@@ -329,6 +331,8 @@ export async function mount(root, ctx) {
             was: offer.state === 'keep' ? offer.draft.was : ticketPrint(t, {notes: true})
         });
         panels.set('detail', {key: tid, close: (how) => guard.close(how)});
+        // The customer's address stays a link; a click goes to Email Pro's compose when it can.
+        stopMail = routeMailLinks(panel.panel);
         // Keep the newest message in view as the thread grows.
         const box = panel.panel.querySelector('.sp-thread-host');
         stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });

package/plugins/support/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "support",
   "displayName": "Support",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "tier": "free",
   "description": "Get help from Domma straight from your admin: our email, phone and hours always to hand, and a conversation with the Domma team for anything you need - urgent requests first. Right-click a request to archive, resolve or remove it.",
   "author": "Domma CMS",
@@ -61,7 +61,7 @@
     ],
     "views": {
       "plugin-support": {
-        "entry": "support/admin/views/support.js?v=1.2.0",
+        "entry": "support/admin/views/support.js?v=1.2.1",
         "exportName": "supportView"
       }
     }

package/plugins/support/tests/email.test.js

@@ -0,0 +1,69 @@
+/**
+ * admin/lib/email.js - the mailto: fallback and link reading (node has no
+ * /admin/js/lib/mail-compose.js, so emailTo() here is the older-core path).
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {emailTo, looksLikeAddress, mailtoHref, parseMailto} from '../admin/lib/email.js';
+
+test('mailtoHref: one person in To, subject and body encoded, @ readable', () => {
+    assert.equal(mailtoHref({to: [{name: 'Ann', address: 'ann+x@example.test'}], subject: 'Hi & bye', body: 'Line 1\nLine 2'}),
+        'mailto:ann%2Bx@example.test?subject=Hi%20%26%20bye&body=Line%201%0ALine%202');
+});
+
+test('mailtoHref: several people in Bcc, strings and contacts alike', () => {
+    assert.equal(mailtoHref({bcc: ['a@x.test', {email: 'b@x.test'}], subject: 'S'}), 'mailto:?bcc=a@x.test,b@x.test&subject=S');
+});
+
+test('parseMailto reads back what mailtoHref writes, and plain links', () => {
+    const r = parseMailto(mailtoHref({to: 'a@x.test', cc: ['c@x.test'], bcc: ['b@x.test', 'd@x.test'], subject: 'Hi + there', body: 'Join: https://x.test/?a=1&b=2'}));
+    assert.deepEqual(r, {to: ['a@x.test'], cc: ['c@x.test'], bcc: ['b@x.test', 'd@x.test'], subject: 'Hi + there', body: 'Join: https://x.test/?a=1&b=2'});
+    assert.deepEqual(parseMailto('mailto:ann@example.test'), {to: ['ann@example.test'], cc: [], bcc: [], subject: '', body: ''});
+    assert.equal(parseMailto('https://example.test'), null);
+});
+
+test('emailTo on a core without mail-compose.js keeps the old mailto:', async () => {
+    const saved = globalThis.location;
+    globalThis.location = {href: '', hash: ''};
+    try {
+        assert.equal(await emailTo({to: [{name: 'Ann', address: 'ann@example.test'}], subject: 'Hello'}), 'mailto');
+        assert.equal(globalThis.location.href, 'mailto:ann@example.test?subject=Hello');
+        assert.equal(globalThis.location.hash, '');
+    } finally {
+        globalThis.location = saved;
+    }
+});
+
+test('fallback hardening: bad addresses dropped, repeats once, subject one line, text capped', () => {
+    for (const bad of ['a b@x.test', 'a@x.test\r\nBcc: c@x.test', '<a@x.test>', 'a@x.test,b@x.test', 'a@x.test?body=hi', 'nobody']) assert.equal(looksLikeAddress(bad), false, bad);
+    const href = mailtoHref({to: ['A@x.test', 'a@x.test', 'a b@x.test', 'me@x.test?body=evil'], subject: 'Hi\r\nBcc: c@x.test', body: 'x'.repeat(3000)});
+    assert.ok(href.startsWith('mailto:A@x.test?subject=Hi%20Bcc%3A%20c%40x.test&body='), href);
+    assert.equal(decodeURIComponent(href.split('body=')[1]).length, 2000);
+});
+
+test('parseMailto ignores the query when the address part is not an address', () => {
+    // An address stored as "me@x.com?body=..." and encoded into a link.
+    assert.deepEqual(parseMailto(`mailto:${encodeURIComponent('me@x.test?body=Pay now')}`), {to: [], cc: [], bcc: [], subject: '', body: ''});
+    assert.deepEqual(parseMailto('mailto:me@x.test%0D%0Abcc:z@x.test?subject=Hi&bcc=y@x.test'), {to: [], cc: [], bcc: [], subject: '', body: ''});
+    assert.deepEqual(parseMailto('mailto:?subject=Join&body=link').subject, 'Join');
+});
+
+test('emailTo on an old core: a mailto over 1800 characters is not opened - the addresses are copied', async () => {
+    const saved = {location: globalThis.location, E: globalThis.E, nav: Object.getOwnPropertyDescriptor(globalThis, 'navigator')};
+    let copied = '';
+    const toasts = [];
+    globalThis.location = {href: '', hash: ''};
+    globalThis.E = {toast: (m) => toasts.push(m)};
+    Object.defineProperty(globalThis, 'navigator', {value: {clipboard: {writeText: async (t) => { copied = t; }}}, configurable: true});
+    try {
+        const bcc = Array.from({length: 120}, (_, i) => `person${i}@example.test`);
+        assert.equal(await emailTo({bcc, subject: 'News'}), 'copied');
+        assert.equal(globalThis.location.href, '');
+        assert.equal(copied, bcc.join(', '));
+        assert.match(toasts[0], /120 addresses are copied.*Not carried over: the subject/);
+    } finally {
+        globalThis.location = saved.location;
+        globalThis.E = saved.E;
+        if (saved.nav) Object.defineProperty(globalThis, 'navigator', saved.nav); else delete globalThis.navigator;
+    }
+});