serv/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-01-14 01:06:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

webmail: show unicode for internationalized email addresses by default

Browse source 
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.
This commit is contained in:
Mechiel Lukkien 2024-02-08 18:03:48 +01:00
parent 39f4800290
commit f3bf348214
No known key found for this signature in database
5 changed files with 117 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
webmail/lib.ts
View file

@ -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'})),

53
webmail/msg.js
View file

@ -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())));
};

53
webmail/text.js
View file

@ -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())));
};

80
webmail/webmail.js
View file

@ -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) {

27
webmail/webmail.ts
View file

@ -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) {