From f3bf348214da08eb3c420fb5d159c009220b6244 Mon Sep 17 00:00:00 2001 From: Mechiel Lukkien Date: Thu, 8 Feb 2024 18:03:48 +0100 Subject: [PATCH] webmail: show unicode for internationalized email addresses by default before, we showed the xn-- ascii names, along with the unicode name. but users of internationalized email don't want to see any xn-- names. we now put those in an html title attribute for some cases, so you can still see them if you really want to, by hovering. after talking to arnt at fosdem. --- webmail/lib.ts | 58 +++++++++++++++------------------ webmail/msg.js | 53 +++++++++++++----------------- webmail/text.js | 53 +++++++++++++----------------- webmail/webmail.js | 80 ++++++++++++++++++++-------------------------- webmail/webmail.ts | 27 ++++++++-------- 5 files changed, 117 insertions(+), 154 deletions(-) diff --git a/webmail/lib.ts b/webmail/lib.ts index f580e50..9806a44 100644 --- a/webmail/lib.ts +++ b/webmail/lib.ts @@ -88,35 +88,32 @@ const displayName = (s: string) => { return s } +const formatDomain = (dom: api.Domain) => dom.Unicode || dom.ASCII + // format an address with both name and email address. const formatAddress = (a: api.MessageAddress): string => { - let s = '<' + a.User + '@' + a.Domain.ASCII + '>' + let s = '<' + a.User + '@' + formatDomain(a.Domain) + '>' if (a.Name) { s = displayName(a.Name) + ' ' + s } return s } -// returns an address with all available details, including unicode version if -// available. -const formatAddressFull = (a: api.MessageAddress): string => { - let s = '' - if (a.Name) { - s = a.Name + ' ' +// Like formatAddress, but returns an element with a title (for hover) with the ASCII domain, in case of IDN. +const formatAddressElem = (a: api.MessageAddress): string | HTMLElement => { + if (!a.Domain.Unicode) { + return formatAddress(a) } - s += '<' + a.User + '@' + a.Domain.ASCII + '>' - if (a.Domain.Unicode) { - s += ' (' + a.User + '@' + a.Domain.Unicode + ')' - } - return s + return dom.span(a.Name ? [displayName(a.Name), ' '] : '', '<', a.User, '@', dom.span(attr.title(a.Domain.ASCII), formatDomain(a.Domain)), '>') } -// like formatAddressFull, but underline domain with dmarc-like validation if appropriate. -const formatAddressFullValidated = (a: api.MessageAddress, m: api.Message, use: boolean): (string | HTMLElement)[] => { - const domainText = (s: string): HTMLElement | string => { +// like formatAddress, but underline domain with dmarc-like validation if appropriate. +const formatAddressValidated = (a: api.MessageAddress, m: api.Message, use: boolean): (string | HTMLElement)[] => { + const domainText = (domstr: string, ascii: string): HTMLElement | string => { if (!use) { - return s + return domstr } + const extra = domstr === ascii ? '' : '; domain '+ascii // We want to show how "approved" this message is given the message From's domain. // We have MsgFromValidation available. It's not the greatest, being a mix of // potential strict validations, actual DMARC policy validation, potential relaxed @@ -150,9 +147,10 @@ const formatAddressFullValidated = (a: api.MessageAddress, m: api.Message, use: break; default: // Also for zero value, when unknown. E.g. for sent messages added with IMAP. - return dom.span(attr.title('Unknown DMARC verification result.'), s) + title = 'Unknown DMARC verification result.' + return dom.span(attr.title(title+extra), domstr) } - return dom.span(attr.title(title), style({borderBottom: '1.5px solid '+color, textDecoration: 'none'}), s) + return dom.span(attr.title(title+extra), style({borderBottom: '1.5px solid '+color, textDecoration: 'none'}), domstr) } let l: (string | HTMLElement)[] = [] @@ -160,12 +158,8 @@ const formatAddressFullValidated = (a: api.MessageAddress, m: api.Message, use: l.push(a.Name + ' ') } l.push('<' + a.User + '@') - l.push(domainText(a.Domain.ASCII)) + l.push(domainText(formatDomain(a.Domain), a.Domain.ASCII)) l.push('>') - if (a.Domain.Unicode) { - // Not underlining because unicode domain may already cause underlining. - l.push(' (' + a.User + '@' + a.Domain.Unicode+')') - } return l } @@ -175,13 +169,11 @@ const formatAddressShort = (a: api.MessageAddress): string => { if (n && !n.includes('<') && !n.includes('@') && !n.includes('>')) { return n } - return '<' + a.User + '@' + a.Domain.ASCII + '>' + return '<' + a.User + '@' + formatDomain(a.Domain) + '>' } // return just the email address. -const formatEmailASCII = (a: api.MessageAddress): string => { - return a.User + '@' + a.Domain.ASCII -} +const formatEmail = (a: api.MessageAddress) => a.User + '@' + formatDomain(a.Domain) const equalAddress = (a: api.MessageAddress, b: api.MessageAddress) => { return (!a.User || !b.User || a.User === b.User) && a.Domain.ASCII === b.Domain.ASCII @@ -189,17 +181,17 @@ const equalAddress = (a: api.MessageAddress, b: api.MessageAddress) => { const addressList = (allAddrs: boolean, l: api.MessageAddress[]) => { if (l.length <= 5 || allAddrs) { - return dom.span(join(l.map(a => formatAddressFull(a)), () => ', ')) + return dom.span(join(l.map(a => formatAddressElem(a)), () => ', ')) } let elem = dom.span( join( - l.slice(0, 4).map(a => formatAddressFull(a)), + l.slice(0, 4).map(a => formatAddressElem(a)), () => ', ' ), ' ', - dom.clickbutton('More...', attr.title('More addresses:\n'+l.slice(4).map(a => formatAddressFull(a)).join(',\n')), function click() { + dom.clickbutton('More...', attr.title('More addresses:\n'+l.slice(4).map(a => formatAddress(a)).join(',\n')), function click() { const nelem = dom.span( - join(l.map(a => formatAddressFull(a)), () => ', '), + join(l.map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { elem.replaceWith(addressList(allAddrs, l)) @@ -226,7 +218,7 @@ const loadMsgheaderView = (msgheaderelem: HTMLElement, mi: api.MessageItem, more dom.td( style({width: '100%'}), dom.div(style({display: 'flex', justifyContent: 'space-between'}), - dom.div(join((msgenv.From || []).map(a => formatAddressFullValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), + dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div( attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0], @@ -236,7 +228,7 @@ const loadMsgheaderView = (msgheaderelem: HTMLElement, mi: api.MessageItem, more ), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr( dom.td('Reply-To:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})), - dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressFull(a)), () => ', ')), + dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', ')), ), dom.tr( dom.td('To:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})), diff --git a/webmail/msg.js b/webmail/msg.js index 8e3e16f..fb4d371 100644 --- a/webmail/msg.js +++ b/webmail/msg.js @@ -1020,33 +1020,29 @@ const displayName = (s) => { } return s; }; +const formatDomain = (dom) => dom.Unicode || dom.ASCII; // format an address with both name and email address. const formatAddress = (a) => { - let s = '<' + a.User + '@' + a.Domain.ASCII + '>'; + let s = '<' + a.User + '@' + formatDomain(a.Domain) + '>'; if (a.Name) { s = displayName(a.Name) + ' ' + s; } return s; }; -// returns an address with all available details, including unicode version if -// available. -const formatAddressFull = (a) => { - let s = ''; - if (a.Name) { - s = a.Name + ' '; +// Like formatAddress, but returns an element with a title (for hover) with the ASCII domain, in case of IDN. +const formatAddressElem = (a) => { + if (!a.Domain.Unicode) { + return formatAddress(a); } - s += '<' + a.User + '@' + a.Domain.ASCII + '>'; - if (a.Domain.Unicode) { - s += ' (' + a.User + '@' + a.Domain.Unicode + ')'; - } - return s; + return dom.span(a.Name ? [displayName(a.Name), ' '] : '', '<', a.User, '@', dom.span(attr.title(a.Domain.ASCII), formatDomain(a.Domain)), '>'); }; -// like formatAddressFull, but underline domain with dmarc-like validation if appropriate. -const formatAddressFullValidated = (a, m, use) => { - const domainText = (s) => { +// like formatAddress, but underline domain with dmarc-like validation if appropriate. +const formatAddressValidated = (a, m, use) => { + const domainText = (domstr, ascii) => { if (!use) { - return s; + return domstr; } + const extra = domstr === ascii ? '' : '; domain ' + ascii; // We want to show how "approved" this message is given the message From's domain. // We have MsgFromValidation available. It's not the greatest, being a mix of // potential strict validations, actual DMARC policy validation, potential relaxed @@ -1081,21 +1077,18 @@ const formatAddressFullValidated = (a, m, use) => { break; default: // Also for zero value, when unknown. E.g. for sent messages added with IMAP. - return dom.span(attr.title('Unknown DMARC verification result.'), s); + title = 'Unknown DMARC verification result.'; + return dom.span(attr.title(title + extra), domstr); } - return dom.span(attr.title(title), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), s); + return dom.span(attr.title(title + extra), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), domstr); }; let l = []; if (a.Name) { l.push(a.Name + ' '); } l.push('<' + a.User + '@'); - l.push(domainText(a.Domain.ASCII)); + l.push(domainText(formatDomain(a.Domain), a.Domain.ASCII)); l.push('>'); - if (a.Domain.Unicode) { - // Not underlining because unicode domain may already cause underlining. - l.push(' (' + a.User + '@' + a.Domain.Unicode + ')'); - } return l; }; // format just the name if present and it doesn't look like an address, or otherwise just the email address. @@ -1104,21 +1097,19 @@ const formatAddressShort = (a) => { if (n && !n.includes('<') && !n.includes('@') && !n.includes('>')) { return n; } - return '<' + a.User + '@' + a.Domain.ASCII + '>'; + return '<' + a.User + '@' + formatDomain(a.Domain) + '>'; }; // return just the email address. -const formatEmailASCII = (a) => { - return a.User + '@' + a.Domain.ASCII; -}; +const formatEmail = (a) => a.User + '@' + formatDomain(a.Domain); const equalAddress = (a, b) => { return (!a.User || !b.User || a.User === b.User) && a.Domain.ASCII === b.Domain.ASCII; }; const addressList = (allAddrs, l) => { if (l.length <= 5 || allAddrs) { - return dom.span(join(l.map(a => formatAddressFull(a)), () => ', ')); + return dom.span(join(l.map(a => formatAddressElem(a)), () => ', ')); } - let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddressFull(a)).join(',\n')), function click() { - const nelem = dom.span(join(l.map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { + let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddress(a)).join(',\n')), function click() { + const nelem = dom.span(join(l.map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { elem.replaceWith(addressList(allAddrs, l)); })); elem.replaceWith(nelem); @@ -1135,7 +1126,7 @@ const loadMsgheaderView = (msgheaderelem, mi, moreHeaders, refineKeyword, allAdd const receivedlocal = new Date(received.getTime()); dom._kids(msgheaderelem, // todo: make addresses clickable, start search (keep current mailbox if any) - dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressFullValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressFull(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { + dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { await refineKeyword(kw); })) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td()))); }; diff --git a/webmail/text.js b/webmail/text.js index ccb643c..8009152 100644 --- a/webmail/text.js +++ b/webmail/text.js @@ -1020,33 +1020,29 @@ const displayName = (s) => { } return s; }; +const formatDomain = (dom) => dom.Unicode || dom.ASCII; // format an address with both name and email address. const formatAddress = (a) => { - let s = '<' + a.User + '@' + a.Domain.ASCII + '>'; + let s = '<' + a.User + '@' + formatDomain(a.Domain) + '>'; if (a.Name) { s = displayName(a.Name) + ' ' + s; } return s; }; -// returns an address with all available details, including unicode version if -// available. -const formatAddressFull = (a) => { - let s = ''; - if (a.Name) { - s = a.Name + ' '; +// Like formatAddress, but returns an element with a title (for hover) with the ASCII domain, in case of IDN. +const formatAddressElem = (a) => { + if (!a.Domain.Unicode) { + return formatAddress(a); } - s += '<' + a.User + '@' + a.Domain.ASCII + '>'; - if (a.Domain.Unicode) { - s += ' (' + a.User + '@' + a.Domain.Unicode + ')'; - } - return s; + return dom.span(a.Name ? [displayName(a.Name), ' '] : '', '<', a.User, '@', dom.span(attr.title(a.Domain.ASCII), formatDomain(a.Domain)), '>'); }; -// like formatAddressFull, but underline domain with dmarc-like validation if appropriate. -const formatAddressFullValidated = (a, m, use) => { - const domainText = (s) => { +// like formatAddress, but underline domain with dmarc-like validation if appropriate. +const formatAddressValidated = (a, m, use) => { + const domainText = (domstr, ascii) => { if (!use) { - return s; + return domstr; } + const extra = domstr === ascii ? '' : '; domain ' + ascii; // We want to show how "approved" this message is given the message From's domain. // We have MsgFromValidation available. It's not the greatest, being a mix of // potential strict validations, actual DMARC policy validation, potential relaxed @@ -1081,21 +1077,18 @@ const formatAddressFullValidated = (a, m, use) => { break; default: // Also for zero value, when unknown. E.g. for sent messages added with IMAP. - return dom.span(attr.title('Unknown DMARC verification result.'), s); + title = 'Unknown DMARC verification result.'; + return dom.span(attr.title(title + extra), domstr); } - return dom.span(attr.title(title), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), s); + return dom.span(attr.title(title + extra), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), domstr); }; let l = []; if (a.Name) { l.push(a.Name + ' '); } l.push('<' + a.User + '@'); - l.push(domainText(a.Domain.ASCII)); + l.push(domainText(formatDomain(a.Domain), a.Domain.ASCII)); l.push('>'); - if (a.Domain.Unicode) { - // Not underlining because unicode domain may already cause underlining. - l.push(' (' + a.User + '@' + a.Domain.Unicode + ')'); - } return l; }; // format just the name if present and it doesn't look like an address, or otherwise just the email address. @@ -1104,21 +1097,19 @@ const formatAddressShort = (a) => { if (n && !n.includes('<') && !n.includes('@') && !n.includes('>')) { return n; } - return '<' + a.User + '@' + a.Domain.ASCII + '>'; + return '<' + a.User + '@' + formatDomain(a.Domain) + '>'; }; // return just the email address. -const formatEmailASCII = (a) => { - return a.User + '@' + a.Domain.ASCII; -}; +const formatEmail = (a) => a.User + '@' + formatDomain(a.Domain); const equalAddress = (a, b) => { return (!a.User || !b.User || a.User === b.User) && a.Domain.ASCII === b.Domain.ASCII; }; const addressList = (allAddrs, l) => { if (l.length <= 5 || allAddrs) { - return dom.span(join(l.map(a => formatAddressFull(a)), () => ', ')); + return dom.span(join(l.map(a => formatAddressElem(a)), () => ', ')); } - let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddressFull(a)).join(',\n')), function click() { - const nelem = dom.span(join(l.map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { + let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddress(a)).join(',\n')), function click() { + const nelem = dom.span(join(l.map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { elem.replaceWith(addressList(allAddrs, l)); })); elem.replaceWith(nelem); @@ -1135,7 +1126,7 @@ const loadMsgheaderView = (msgheaderelem, mi, moreHeaders, refineKeyword, allAdd const receivedlocal = new Date(received.getTime()); dom._kids(msgheaderelem, // todo: make addresses clickable, start search (keep current mailbox if any) - dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressFullValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressFull(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { + dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { await refineKeyword(kw); })) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td()))); }; diff --git a/webmail/webmail.js b/webmail/webmail.js index 4dedbb8..8501866 100644 --- a/webmail/webmail.js +++ b/webmail/webmail.js @@ -1020,33 +1020,29 @@ const displayName = (s) => { } return s; }; +const formatDomain = (dom) => dom.Unicode || dom.ASCII; // format an address with both name and email address. const formatAddress = (a) => { - let s = '<' + a.User + '@' + a.Domain.ASCII + '>'; + let s = '<' + a.User + '@' + formatDomain(a.Domain) + '>'; if (a.Name) { s = displayName(a.Name) + ' ' + s; } return s; }; -// returns an address with all available details, including unicode version if -// available. -const formatAddressFull = (a) => { - let s = ''; - if (a.Name) { - s = a.Name + ' '; +// Like formatAddress, but returns an element with a title (for hover) with the ASCII domain, in case of IDN. +const formatAddressElem = (a) => { + if (!a.Domain.Unicode) { + return formatAddress(a); } - s += '<' + a.User + '@' + a.Domain.ASCII + '>'; - if (a.Domain.Unicode) { - s += ' (' + a.User + '@' + a.Domain.Unicode + ')'; - } - return s; + return dom.span(a.Name ? [displayName(a.Name), ' '] : '', '<', a.User, '@', dom.span(attr.title(a.Domain.ASCII), formatDomain(a.Domain)), '>'); }; -// like formatAddressFull, but underline domain with dmarc-like validation if appropriate. -const formatAddressFullValidated = (a, m, use) => { - const domainText = (s) => { +// like formatAddress, but underline domain with dmarc-like validation if appropriate. +const formatAddressValidated = (a, m, use) => { + const domainText = (domstr, ascii) => { if (!use) { - return s; + return domstr; } + const extra = domstr === ascii ? '' : '; domain ' + ascii; // We want to show how "approved" this message is given the message From's domain. // We have MsgFromValidation available. It's not the greatest, being a mix of // potential strict validations, actual DMARC policy validation, potential relaxed @@ -1081,21 +1077,18 @@ const formatAddressFullValidated = (a, m, use) => { break; default: // Also for zero value, when unknown. E.g. for sent messages added with IMAP. - return dom.span(attr.title('Unknown DMARC verification result.'), s); + title = 'Unknown DMARC verification result.'; + return dom.span(attr.title(title + extra), domstr); } - return dom.span(attr.title(title), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), s); + return dom.span(attr.title(title + extra), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), domstr); }; let l = []; if (a.Name) { l.push(a.Name + ' '); } l.push('<' + a.User + '@'); - l.push(domainText(a.Domain.ASCII)); + l.push(domainText(formatDomain(a.Domain), a.Domain.ASCII)); l.push('>'); - if (a.Domain.Unicode) { - // Not underlining because unicode domain may already cause underlining. - l.push(' (' + a.User + '@' + a.Domain.Unicode + ')'); - } return l; }; // format just the name if present and it doesn't look like an address, or otherwise just the email address. @@ -1104,21 +1097,19 @@ const formatAddressShort = (a) => { if (n && !n.includes('<') && !n.includes('@') && !n.includes('>')) { return n; } - return '<' + a.User + '@' + a.Domain.ASCII + '>'; + return '<' + a.User + '@' + formatDomain(a.Domain) + '>'; }; // return just the email address. -const formatEmailASCII = (a) => { - return a.User + '@' + a.Domain.ASCII; -}; +const formatEmail = (a) => a.User + '@' + formatDomain(a.Domain); const equalAddress = (a, b) => { return (!a.User || !b.User || a.User === b.User) && a.Domain.ASCII === b.Domain.ASCII; }; const addressList = (allAddrs, l) => { if (l.length <= 5 || allAddrs) { - return dom.span(join(l.map(a => formatAddressFull(a)), () => ', ')); + return dom.span(join(l.map(a => formatAddressElem(a)), () => ', ')); } - let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddressFull(a)).join(',\n')), function click() { - const nelem = dom.span(join(l.map(a => formatAddressFull(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { + let elem = dom.span(join(l.slice(0, 4).map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('More...', attr.title('More addresses:\n' + l.slice(4).map(a => formatAddress(a)).join(',\n')), function click() { + const nelem = dom.span(join(l.map(a => formatAddressElem(a)), () => ', '), ' ', dom.clickbutton('Less...', function click() { elem.replaceWith(addressList(allAddrs, l)); })); elem.replaceWith(nelem); @@ -1135,7 +1126,7 @@ const loadMsgheaderView = (msgheaderelem, mi, moreHeaders, refineKeyword, allAdd const receivedlocal = new Date(received.getTime()); dom._kids(msgheaderelem, // todo: make addresses clickable, start search (keep current mailbox if any) - dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressFullValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressFull(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { + dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() { await refineKeyword(kw); })) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td()))); }; @@ -2470,7 +2461,7 @@ const compose = (opts) => { let haveFrom = false; const fromOptions = accountAddresses.map(a => { const selected = opts.from && opts.from.length === 1 && equalAddress(a, opts.from[0]) || loginAddress && equalAddress(a, loginAddress) && (!opts.from || envelopeIdentity(opts.from)); - const o = dom.option(formatAddressFull(a), selected ? attr.selected('') : []); + const o = dom.option(formatAddress(a), selected ? attr.selected('') : []); if (selected) { haveFrom = true; } @@ -2480,7 +2471,7 @@ const compose = (opts) => { const a = addressSelf(opts.from[0]); if (a) { const fromAddr = { Name: a.Name, User: opts.from[0].User, Domain: a.Domain }; - const o = dom.option(formatAddressFull(fromAddr), attr.selected('')); + const o = dom.option(formatAddress(fromAddr), attr.selected('')); fromOptions.unshift(o); } } @@ -2823,12 +2814,12 @@ const newMsgitemView = (mi, msglistView, otherMailbox, listMailboxes, receivedTi ta.push(a); } } - let title = fa.map(a => formatAddressFull(a)).join(', '); + let title = fa.map(a => formatAddress(a)).join(', '); if (ta.length > 0) { if (title) { title += ',\n'; } - title += 'addressed: ' + ta.map(a => formatAddressFull(a)).join(', '); + title += 'addressed: ' + ta.map(a => formatAddress(a)).join(', '); } return [ attr.title(title), @@ -2966,8 +2957,7 @@ let attachmentView = null; const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoaded, refineKeyword, parsedMessageOpt) => { const mi = miv.messageitem; const m = mi.Message; - const formatEmailAddress = (a) => a.User + '@' + a.Domain.ASCII; - const fromAddress = mi.Envelope.From && mi.Envelope.From.length === 1 ? formatEmailAddress(mi.Envelope.From[0]) : ''; + const fromAddress = mi.Envelope.From && mi.Envelope.From.length === 1 ? formatEmail(mi.Envelope.From[0]) : ''; // Some operations below, including those that can be reached through shortcuts, // need a parsed message. So we keep a promise around for having that parsed // message. Operations always await it. Once we have the parsed message, the await @@ -3006,7 +2996,7 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad let onWroteLine = ''; if (mi.Envelope.Date && mi.Envelope.From && mi.Envelope.From.length === 1) { const from = mi.Envelope.From[0]; - const name = from.Name || formatEmailAddress(from); + const name = from.Name || formatEmail(from); const datetime = mi.Envelope.Date.toLocaleDateString(undefined, { weekday: "short", year: "numeric", month: "short", day: "numeric" }) + ' at ' + mi.Envelope.Date.toLocaleTimeString(); onWroteLine = 'On ' + datetime + ', ' + name + ' wrote:\n'; } @@ -3159,7 +3149,7 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad const trashMailboxID = listMailboxes().find(mb => mb.Trash)?.ID; // Initially called with potentially null pm, once loaded called again with pm set. const loadButtons = (pm) => { - dom._kids(msgbuttonElem, dom.div(dom._class('pad'), (!pm || !pm.ListReplyAddress) ? [] : dom.clickbutton('Reply to list', attr.title('Compose a reply to this mailing list.'), clickCmd(cmdReplyList, shortcuts)), ' ', (pm && pm.ListReplyAddress && formatEmailAddress(pm.ListReplyAddress) === fromAddress) ? [] : dom.clickbutton('Reply', attr.title('Compose a reply to the sender of this message.'), clickCmd(cmdReply, shortcuts)), ' ', (mi.Envelope.To || []).length <= 1 && (mi.Envelope.CC || []).length === 0 && (mi.Envelope.BCC || []).length === 0 ? [] : + dom._kids(msgbuttonElem, dom.div(dom._class('pad'), (!pm || !pm.ListReplyAddress) ? [] : dom.clickbutton('Reply to list', attr.title('Compose a reply to this mailing list.'), clickCmd(cmdReplyList, shortcuts)), ' ', (pm && pm.ListReplyAddress && formatEmail(pm.ListReplyAddress) === fromAddress) ? [] : dom.clickbutton('Reply', attr.title('Compose a reply to the sender of this message.'), clickCmd(cmdReply, shortcuts)), ' ', (mi.Envelope.To || []).length <= 1 && (mi.Envelope.CC || []).length === 0 && (mi.Envelope.BCC || []).length === 0 ? [] : dom.clickbutton('Reply all', attr.title('Compose a reply to all participants of this message.'), clickCmd(cmdReplyAll, shortcuts)), ' ', dom.clickbutton('Forward', attr.title('Compose a forwarding message, optionally including attachments.'), clickCmd(cmdForward, shortcuts)), ' ', dom.clickbutton('Archive', attr.title('Move to the Archive mailbox.'), clickCmd(msglistView.cmdArchive, shortcuts)), ' ', m.MailboxID === trashMailboxID ? dom.clickbutton('Delete', attr.title('Permanently delete message.'), clickCmd(msglistView.cmdDelete, shortcuts)) : dom.clickbutton('Trash', attr.title('Move to the Trash mailbox.'), clickCmd(msglistView.cmdTrash, shortcuts)), ' ', dom.clickbutton('Junk', attr.title('Move to Junk mailbox, marking as junk and causing this message to be used in spam classification of new incoming messages.'), clickCmd(msglistView.cmdJunk, shortcuts)), ' ', dom.clickbutton('Move to...', function click(e) { @@ -5435,7 +5425,7 @@ const init = async () => { let requestMsgID = 0; // If > 0, we are still expecting a parsed message for the view, coming from the query. Either we get it and set msgitemViewActive and clear this, or we get to the end of the data and clear it. const updatePageTitle = () => { const mb = mailboxlistView && mailboxlistView.activeMailbox(); - const addr = loginAddress ? loginAddress.User + '@' + (loginAddress.Domain.Unicode || loginAddress.Domain.ASCII) : ''; + const addr = loginAddress ? loginAddress.User + '@' + formatDomain(loginAddress.Domain) : ''; if (!mb) { document.title = [addr, 'Mox Webmail'].join(' - '); } @@ -6117,7 +6107,7 @@ const init = async () => { window.clearTimeout(eventID); eventID = 0; } - document.title = ['(not connected)', loginAddress ? (loginAddress.User + '@' + (loginAddress.Domain.Unicode || loginAddress.Domain.ASCII)) : '', 'Mox Webmail'].filter(s => s).join(' - '); + document.title = ['(not connected)', loginAddress ? (loginAddress.User + '@' + formatDomain(loginAddress.Domain)) : '', 'Mox Webmail'].filter(s => s).join(' - '); dom._kids(connectionElem); if (noreconnect) { dom._kids(statusElem, capitalizeFirst(errmsg) + ', not automatically retrying. '); @@ -6162,14 +6152,14 @@ const init = async () => { connecting = false; sseID = start.SSEID; loginAddress = start.LoginAddress; - dom._kids(loginAddressElem, loginAddress.User + '@' + (loginAddress.Domain.Unicode || loginAddress.Domain.ASCII)); - const loginAddr = formatEmailASCII(loginAddress); + dom._kids(loginAddressElem, formatEmail(loginAddress)); + const loginAddr = formatEmail(loginAddress); accountAddresses = start.Addresses || []; accountAddresses.sort((a, b) => { - if (formatEmailASCII(a) === loginAddr) { + if (formatEmail(a) === loginAddr) { return -1; } - if (formatEmailASCII(b) === loginAddr) { + if (formatEmail(b) === loginAddr) { return 1; } if (a.Domain.ASCII !== b.Domain.ASCII) { diff --git a/webmail/webmail.ts b/webmail/webmail.ts index 5505898..de18aaa 100644 --- a/webmail/webmail.ts +++ b/webmail/webmail.ts @@ -1578,7 +1578,7 @@ const compose = (opts: ComposeOptions) => { let haveFrom = false const fromOptions = accountAddresses.map(a => { const selected = opts.from && opts.from.length === 1 && equalAddress(a, opts.from[0]) || loginAddress && equalAddress(a, loginAddress) && (!opts.from || envelopeIdentity(opts.from)) - const o = dom.option(formatAddressFull(a), selected ? attr.selected('') : []) + const o = dom.option(formatAddress(a), selected ? attr.selected('') : []) if (selected) { haveFrom = true } @@ -1588,7 +1588,7 @@ const compose = (opts: ComposeOptions) => { const a = addressSelf(opts.from[0]) if (a) { const fromAddr: api.MessageAddress = {Name: a.Name, User: opts.from[0].User, Domain: a.Domain} - const o = dom.option(formatAddressFull(fromAddr), attr.selected('')) + const o = dom.option(formatAddress(fromAddr), attr.selected('')) fromOptions.unshift(o) } } @@ -2126,12 +2126,12 @@ const newMsgitemView = (mi: api.MessageItem, msglistView: MsglistView, otherMail ta.push(a) } } - let title = fa.map(a => formatAddressFull(a)).join(', ') + let title = fa.map(a => formatAddress(a)).join(', ') if (ta.length > 0) { if (title) { title += ',\n' } - title += 'addressed: '+ta.map(a => formatAddressFull(a)).join(', ') + title += 'addressed: '+ta.map(a => formatAddress(a)).join(', ') } return [ attr.title(title), @@ -2331,8 +2331,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l const mi = miv.messageitem const m = mi.Message - const formatEmailAddress = (a: api.MessageAddress) => a.User + '@' + a.Domain.ASCII - const fromAddress = mi.Envelope.From && mi.Envelope.From.length === 1 ? formatEmailAddress(mi.Envelope.From[0]) : '' + const fromAddress = mi.Envelope.From && mi.Envelope.From.length === 1 ? formatEmail(mi.Envelope.From[0]) : '' // Some operations below, including those that can be reached through shortcuts, // need a parsed message. So we keep a promise around for having that parsed @@ -2370,7 +2369,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l let onWroteLine = '' if (mi.Envelope.Date && mi.Envelope.From && mi.Envelope.From.length === 1) { const from = mi.Envelope.From[0] - const name = from.Name || formatEmailAddress(from) + const name = from.Name || formatEmail(from) const datetime = mi.Envelope.Date.toLocaleDateString(undefined, {weekday: "short", year: "numeric", month: "short", day: "numeric"}) + ' at ' + mi.Envelope.Date.toLocaleTimeString() onWroteLine = 'On ' + datetime + ', ' + name + ' wrote:\n' } @@ -2565,7 +2564,7 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l dom._kids(msgbuttonElem, dom.div(dom._class('pad'), (!pm || !pm.ListReplyAddress) ? [] : dom.clickbutton('Reply to list', attr.title('Compose a reply to this mailing list.'), clickCmd(cmdReplyList, shortcuts)), ' ', - (pm && pm.ListReplyAddress && formatEmailAddress(pm.ListReplyAddress) === fromAddress) ? [] : dom.clickbutton('Reply', attr.title('Compose a reply to the sender of this message.'), clickCmd(cmdReply, shortcuts)), ' ', + (pm && pm.ListReplyAddress && formatEmail(pm.ListReplyAddress) === fromAddress) ? [] : dom.clickbutton('Reply', attr.title('Compose a reply to the sender of this message.'), clickCmd(cmdReply, shortcuts)), ' ', (mi.Envelope.To || []).length <= 1 && (mi.Envelope.CC || []).length === 0 && (mi.Envelope.BCC || []).length === 0 ? [] : dom.clickbutton('Reply all', attr.title('Compose a reply to all participants of this message.'), clickCmd(cmdReplyAll, shortcuts)), ' ', dom.clickbutton('Forward', attr.title('Compose a forwarding message, optionally including attachments.'), clickCmd(cmdForward, shortcuts)), ' ', @@ -5471,7 +5470,7 @@ const init = async () => { const updatePageTitle = () => { const mb = mailboxlistView && mailboxlistView.activeMailbox() - const addr = loginAddress ? loginAddress.User+'@'+(loginAddress.Domain.Unicode || loginAddress.Domain.ASCII) : '' + const addr = loginAddress ? loginAddress.User+'@'+formatDomain(loginAddress.Domain) : '' if (!mb) { document.title = [addr, 'Mox Webmail'].join(' - ') } else { @@ -6413,7 +6412,7 @@ const init = async () => { window.clearTimeout(eventID) eventID = 0 } - document.title = ['(not connected)', loginAddress ? (loginAddress.User+'@'+(loginAddress.Domain.Unicode || loginAddress.Domain.ASCII)) : '', 'Mox Webmail'].filter(s => s).join(' - ') + document.title = ['(not connected)', loginAddress ? (loginAddress.User+'@'+formatDomain(loginAddress.Domain)) : '', 'Mox Webmail'].filter(s => s).join(' - ') dom._kids(connectionElem) if (noreconnect) { dom._kids(statusElem, capitalizeFirst(errmsg)+', not automatically retrying. ') @@ -6460,14 +6459,14 @@ const init = async () => { connecting = false sseID = start.SSEID loginAddress = start.LoginAddress - dom._kids(loginAddressElem, loginAddress.User + '@' + (loginAddress.Domain.Unicode || loginAddress.Domain.ASCII)) - const loginAddr = formatEmailASCII(loginAddress) + dom._kids(loginAddressElem, formatEmail(loginAddress)) + const loginAddr = formatEmail(loginAddress) accountAddresses = start.Addresses || [] accountAddresses.sort((a, b) => { - if (formatEmailASCII(a) === loginAddr) { + if (formatEmail(a) === loginAddr) { return -1 } - if (formatEmailASCII(b) === loginAddr) { + if (formatEmail(b) === loginAddr) { return 1 } if (a.Domain.ASCII !== b.Domain.ASCII) {