issue #4269 Individual message per recipient (#4284)

* wip

* wip

* eslint fix

* test rendering of recipients after successful sending

* lint fix

* testing PWD-encrypted message in reply thread

* lint fix

* lint fix

* wip

* fixes

* removed extra test code

* use Reply-To to reply to PWD recipients from pubkey-encrypted message

* lint fix

* support for pwd-encrypted messages with no pubkey recipients

* added tests for content of uploaded pwd-protected message

* returned legacy mode

* lint fix

* error handling when sending multiple messages

* test fix / lint fix

* lint fix

* lint fix

* display a supplementary operation error as a toast

* lint fix

* lint fix

* don't fail the test on reported 'Test error'

* simplify

* Refactored attempSendMsg and bindMessage into separate functions

* rename

* moved getEmailWithOptionalName to storage module

* using a type guard for RecipientType

* added comments

* optimizing refactoring

* tslint fix

* refactored msg formatter

* fix S/MIME drafts

* updated remarks

* refactored pwd-related code to a separate method formatttSendablePwdMsgs

* separate recipients and attachments to render into a separate renderSentMessage object

* renamed createPgpMimeAttachments to formatEncryptedMimeDataAsPgpMimeMetaAttachments

* Use plain sendableNonPwdMsg for pubkey recipients

* lint fix

* corrected legacy pwd message

* fixed test setup

* Added a test for one legacy pwd recipient and one pubkey recipient of a message

* fix

Co-authored-by: Roman Shevchenko <roman@flowcrypt.com>
Co-authored-by: Tom <tom@flowcrypt.com>

Author: 3 people

extension/chrome/elements/attachment.htm

@@ -20,7 +20,7 @@
   <div id="header">
     <span></span>
   </div>
-  <div id="name"></div>
+  <div id="name" data-test="attachment-name"></div>
 
   <script src="/lib/purify.js"></script>
   <script src="/lib/jquery.min.js"></script>

extension/chrome/elements/compose-modules/compose-draft-module.ts

@@ -119,8 +119,8 @@ export class ComposeDraftModule extends ViewModule<ComposeView> {
     if (this.hasBodyChanged(this.view.inputModule.squire.getHTML()) || this.hasSubjectChanged(String(this.view.S.cached('input_subject').val())) || forceSave) {
       this.currentlySavingDraft = true;
       try {
-        const msgData = this.view.inputModule.extractAll();
-        const { pubkeys } = await this.view.storageModule.collectSingleFamilyKeys([], msgData.from, true);
+        const msgData = await this.view.inputModule.extractAll();
+        const { pubkeys } = await this.view.storageModule.collectSingleFamilyKeys([], msgData.from.email, true);
         // collectSingleFamilyKeys filters out bad keys, but only if there are any good keys available
         //  if no good keys available, it leaves bad keys so we can explain the issue here
         if (pubkeys.some(pub => pub.pubkey.expiration && pub.pubkey.expiration < Date.now())) {
@@ -133,7 +133,7 @@ export class ComposeDraftModule extends ViewModule<ComposeView> {
           throw new UnreportableError('Your account keys are not usable for encryption');
         }
         msgData.pwd = undefined; // not needed for drafts
-        const sendable = await new EncryptedMsgMailFormatter(this.view, true).sendableMsg(msgData, pubkeys);
+        const sendable = await new EncryptedMsgMailFormatter(this.view, true).sendableNonPwdMsg(msgData, pubkeys);
         if (this.view.replyParams?.inReplyTo) {
           sendable.headers.References = this.view.replyParams.inReplyTo;
           sendable.headers['In-Reply-To'] = this.view.replyParams.inReplyTo;

extension/chrome/elements/compose-modules/compose-err-module.ts

@@ -5,7 +5,7 @@
 import { Browser } from '../../../js/common/browser/browser.js';
 import { BrowserEventErrHandler, Ui } from '../../../js/common/browser/ui.js';
 import { Catch } from '../../../js/common/platform/catch.js';
-import { NewMsgData, SendBtnTexts } from './compose-types.js';
+import { NewMsgData, SendBtnTexts, SendMsgsResult } from './compose-types.js';
 import { ApiErr } from '../../../js/common/api/shared/api-error.js';
 import { BrowserExtension } from '../../../js/common/browser/browser-extension.js';
 import { BrowserMsg } from '../../../js/common/browser/browser-msg.js';
@@ -27,6 +27,11 @@ export class ComposeErrModule extends ViewModule<ComposeView> {
 
   private debugId = Str.sloppyRandom();
 
+  private static getErrSayingSomeMessagesHaveBeenSent = (sendMsgsResult: SendMsgsResult) => {
+    return 'Messages to some recipients were sent successfully, while messages to ' +
+      Str.formatEmailList(sendMsgsResult.failures.map(el => el.recipient)) + ' encountered ';
+  };
+
   public handle = (couldNotDoWhat: string): BrowserEventErrHandler => {
     return {
       network: async () => await Ui.modal.info(`Could not ${couldNotDoWhat} (network error). Please try again.`),
@@ -61,22 +66,34 @@ export class ComposeErrModule extends ViewModule<ComposeView> {
     }
   };
 
-  public handleSendErr = async (e: any) => {
+  public handleSendErr = async (e: any, sendMsgsResult?: SendMsgsResult) => {
     this.view.errModule.debug(`handleSendErr: ${String(e)}`);
     if (ApiErr.isNetErr(e)) {
-      let netErrMsg = 'Could not send message due to network error. Please check your internet connection and try again.\n';
-      netErrMsg += '(This may also be caused by <a href="https://flowcrypt.com/docs/help/network-error.html" target="_blank">missing extension permissions</a>).';
+      let netErrMsg: string | undefined;
+      if (sendMsgsResult?.success.length) {
+        // there were some successful sends
+        netErrMsg = ComposeErrModule.getErrSayingSomeMessagesHaveBeenSent(sendMsgsResult) +
+          'network errors. Please check your internet connection and try again.';
+      } else {
+        netErrMsg = 'Could not send message due to network error. Please check your internet connection and try again.\n' +
+          '(This may also be caused by <a href="https://flowcrypt.com/docs/help/network-error.html" target="_blank">missing extension permissions</a>).';
+      }
       await Ui.modal.error(netErrMsg, true);
     } else if (ApiErr.isAuthErr(e)) {
       BrowserMsg.send.notificationShowAuthPopupNeeded(this.view.parentTabId, { acctEmail: this.view.acctEmail });
       Settings.offerToLoginWithPopupShowModalOnErr(this.view.acctEmail);
     } else if (ApiErr.isReqTooLarge(e)) {
       await Ui.modal.error(`Could not send: message or attachments too large.`);
     } else if (ApiErr.isBadReq(e)) {
+      let gmailErrMsg: string | undefined;
+      if (sendMsgsResult?.success.length) {
+        gmailErrMsg = ComposeErrModule.getErrSayingSomeMessagesHaveBeenSent(sendMsgsResult) + 'error(s) from Gmail';
+      }
       if (e.resMsg === AjaxErrMsgs.GOOGLE_INVALID_TO_HEADER || e.resMsg === AjaxErrMsgs.GOOGLE_RECIPIENT_ADDRESS_REQUIRED) {
-        await Ui.modal.error('Error from google: Invalid recipients\n\nPlease remove recipients, add them back and re-send the message.');
+        await Ui.modal.error((gmailErrMsg || 'Error from google') + ': Invalid recipients\n\nPlease remove recipients, add them back and re-send the message.');
       } else {
-        if (await Ui.modal.confirm(`Google returned an error when sending message. Please help us improve FlowCrypt by reporting the error to us.`)) {
+        if (await Ui.modal.confirm((gmailErrMsg || 'Google returned an error when sending message') +
+          `. Please help us improve FlowCrypt by reporting the error to us.`)) {
           const page = '/chrome/settings/modules/help.htm';
           const pageUrlParams = { bugReport: BrowserExtension.prepareBugReport(`composer: send: bad request (errMsg: ${e.resMsg})`, {}, e) };
           await Browser.openSettingsPage('index.htm', this.view.acctEmail, page, pageUrlParams);
@@ -125,7 +142,7 @@ export class ComposeErrModule extends ViewModule<ComposeView> {
     if (!subject && ! await Ui.modal.confirm('Send without a subject?')) {
       throw new ComposerResetBtnTrigger();
     }
-    let footer = await this.view.footerModule.getFooterFromStorage(from);
+    let footer = await this.view.footerModule.getFooterFromStorage(from.email);
     if (footer) { // format footer the way it would be in outgoing plaintext
       footer = Xss.htmlUnescape(Xss.htmlSanitizeAndStripAllTags(this.view.footerModule.createFooterHtml(footer), '\n')).trim();
     }

extension/chrome/elements/compose-modules/compose-input-module.ts

@@ -60,14 +60,14 @@ export class ComposeInputModule extends ViewModule<ComposeView> {
     return this.view.S.cached('fineuploader').find('.qq-upload-file').toArray().map((el) => $(el).text().trim());
   };
 
-  public extractAll = (): NewMsgData => {
+  public extractAll = async (): Promise<NewMsgData> => {
     const recipients = this.mapRecipients(this.view.recipientsModule.getValidRecipients());
     const subject = this.view.isReplyBox && this.view.replyParams ? this.view.replyParams.subject : String($('#input_subject').val() || '');
     const plaintext = this.view.inputModule.extract('text', 'input_text');
     const plainhtml = this.view.inputModule.extract('html', 'input_text');
     const password = this.view.S.cached('input_password').val();
     const pwd = typeof password === 'string' && password ? password : undefined;
-    const from = this.view.senderModule.getSender();
+    const from = await this.view.storageModule.getEmailWithOptionalName(this.view.senderModule.getSender());
     return { recipients, subject, plaintext, plainhtml, pwd, from };
   };
 

extension/chrome/elements/compose-modules/compose-recipients-module.ts

@@ -2,7 +2,7 @@
 
 'use strict';
 
-import { ChunkedCb, EmailProviderContact, RecipientType } from '../../../js/common/api/shared/api.js';
+import { Api, ChunkedCb, EmailProviderContact, RecipientType } from '../../../js/common/api/shared/api.js';
 import { ContactInfoWithSortedPubkeys, KeyUtil, PubkeyInfo } from '../../../js/common/core/crypto/key.js';
 import { PUBKEY_LOOKUP_RESULT_FAIL } from './compose-err-module.js';
 import { ProviderContactsQuery, Recipients } from '../../../js/common/api/email-provider/email-provider-api.js';
@@ -160,9 +160,8 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
 
   public addRecipients = async (recipients: Recipients, triggerCallback: boolean = true) => {
     const newRecipients: ValidRecipientElement[] = [];
-    for (const [key, value] of Object.entries(recipients)) {
-      if (['to', 'cc', 'bcc'].includes(key)) {
-        const sendingType = key as RecipientType;
+    for (const [sendingType, value] of Object.entries(recipients)) {
+      if (Api.isRecipientHeaderNameType(sendingType)) {
         if (value?.length) {
           const recipientsContainer = this.view.S.cached('input_addresses_container_outer').find(`#input-container-${sendingType}`);
           for (const email of value) {

extension/chrome/elements/compose-modules/compose-render-module.ts

@@ -8,8 +8,7 @@ import { BrowserMsg } from '../../../js/common/browser/browser-msg.js';
 import { Catch } from '../../../js/common/platform/catch.js';
 import { KeyImportUi } from '../../../js/common/ui/key-import-ui.js';
 import { Lang } from '../../../js/common/lang.js';
-import { Recipients } from '../../../js/common/api/email-provider/email-provider-api.js';
-import { SendableMsg } from '../../../js/common/api/email-provider/sendable-msg.js';
+import { ParsedRecipients, Recipients } from '../../../js/common/api/email-provider/email-provider-api.js';
 import { Str } from '../../../js/common/core/common.js';
 import { Ui } from '../../../js/common/browser/ui.js';
 import { Xss } from '../../../js/common/platform/xss.js';
@@ -114,7 +113,7 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
     }
   };
 
-  public renderReplySuccess = (msg: SendableMsg, msgId: string) => {
+  public renderReplySuccess = (attachments: Attachment[], recipients: ParsedRecipients, msgId: string) => {
     this.view.renderModule.renderReinsertReplyBox(msgId);
     if (!this.view.sendBtnModule.popover.choices.encrypt) {
       this.view.S.cached('replied_body').removeClass('pgp_secure');
@@ -125,13 +124,13 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
     this.view.S.cached('replied_body').css('width', ($('table#compose').width() || 500) - 30);
     this.view.S.cached('compose_table').css('display', 'none');
     this.view.S.cached('reply_msg_successful').find('div.replied_from').text(this.view.senderModule.getSender());
-    this.view.S.cached('reply_msg_successful').find('div.replied_to span').text(msg.headers.To.replace(/,/g, ', '));
-    if (msg.recipients.cc !== undefined && msg.recipients.cc.length > 0) {
-      this.view.S.cached('reply_msg_successful').find('div.replied_cc span').text(msg.recipients.cc.join(', '));
+    this.view.S.cached('reply_msg_successful').find('div.replied_to span').text(Str.formatEmailList(recipients.to || []));
+    if (recipients.cc !== undefined && recipients.cc.length > 0) {
+      this.view.S.cached('reply_msg_successful').find('div.replied_cc span').text(Str.formatEmailList(recipients.cc));
       $('.replied_cc').show();
     }
-    if (msg.recipients.bcc !== undefined && msg.recipients.bcc.length > 0) {
-      this.view.S.cached('reply_msg_successful').find('div.replied_bcc span').text(msg.recipients.bcc.join(', '));
+    if (recipients.bcc !== undefined && recipients.bcc.length > 0) {
+      this.view.S.cached('reply_msg_successful').find('div.replied_bcc span').text(Str.formatEmailList(recipients.bcc));
       $('.replied_bcc').show();
     }
     const repliedBodyEl = this.view.S.cached('reply_msg_successful').find('div.replied_body');
@@ -141,7 +140,7 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
       this.renderReplySuccessMimeAttachments(this.view.inputModule.extractAttachments());
     } else {
       Xss.sanitizeRender(repliedBodyEl, Str.escapeTextAsRenderableHtml(this.view.inputModule.extract('text', 'input_text', 'SKIP-ADDONS')));
-      this.renderReplySuccessAttachments(msg.attachments, msgId, this.view.sendBtnModule.popover.choices.encrypt);
+      this.renderReplySuccessAttachments(attachments, msgId, this.view.sendBtnModule.popover.choices.encrypt);
     }
     const t = new Date();
     const time = ((t.getHours() !== 12) ? (t.getHours() % 12) : 12) + ':' + (t.getMinutes() < 10 ? '0' : '') + t.getMinutes() + ((t.getHours() >= 12) ? ' PM ' : ' AM ') + '(0 minutes ago)';