Merge pull request #1638 from CTemplar/dev

Release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ctemplar",
-  "version": "2.5.65",
+  "version": "2.5.66",
   "license": "Apache",
   "main": "electron-main.js",
   "description": "Angular webclient (with Linux, macOS and Windows desktop clients) for CTemplar's encrypted email service.",

src/app/app.component.ts

@@ -10,6 +10,7 @@ import { AppState, AuthState, LoadingState } from './store/datatypes';
 import { quotes, QuoteType } from './store/quotes';
 import { FinalLoading } from './store';
 import { PROMO_CODE_KEY, REFFERAL_CODE_KEY, REFFERAL_ID_KEY } from './shared/config';
+import { scrollIntoView } from './shared/util/dom-utils';
 
 @UntilDestroy()
 @Component({
@@ -51,7 +52,7 @@ export class AppComponent implements OnInit {
 
     // Listen to changes in fragment and scroll to the target anchor if found
     this.activatedRoute.fragment.pipe(filter(Boolean)).subscribe(fragment => {
-      document.querySelector(`#${fragment}`)?.scrollIntoView();
+      scrollIntoView(document.querySelector(`#${fragment}`));
     });
 
     // this language will be used as a fallback when a translation isn't found in the current language

src/app/mail/mail-detail/mail-detail-body/mail-detail-body.component.html

@@ -121,7 +121,7 @@
               id="{{ mail?.id }}-raw-mail-content"
               [innerHTML]="
                 mail?.is_html
-                  ? (decryptedContents | safe: 'sanitize':disableExternalImages)
+                  ? (decryptedContents | fixoutlookquotes | safe: 'sanitize':disableExternalImages)
                   : (decryptedContents | linebreaktobrtag | safe: 'sanitize':disableExternalImages)
               "
             ></div>

src/app/mail/mail-detail/mail-detail.component.ts

@@ -14,6 +14,8 @@ import { PRIMARY_WEBSITE } from '../../shared/config';
 import { FilenamePipe } from '../../shared/pipes/filename.pipe';
 import { EmailFormatPipe } from '../../shared/pipes/email-formatting.pipe';
 import { SafePipe } from '../../shared/pipes/safe.pipe';
+import { scrollIntoView } from '../../shared/util/dom-utils';
+import { intersection, difference } from '../../shared/util/utils';
 import {
   BlackListDeleteLocal,
   ClearMailDetail,
@@ -952,6 +954,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
     const newMail: Mail = {
       content: '',
     };
+    let cc: string[] = [];
     const previousMails = this.getPreviousMail(index, isChildMail, mainReply);
     this.composeMailData[mail.id] = {
       subject: `Re: ${mail.subject}`,
@@ -979,6 +982,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
           ...mail.children[mail.children.length - 1].cc,
           ...mail.children[mail.children.length - 1].bcc,
         ]);
+        cc = [...mail.children[mail.children.length - 1].cc];
       } else {
         for (let childIndex = mail.children.length; childIndex > 0; childIndex -= 1) {
           if (
@@ -992,12 +996,14 @@ export class MailDetailComponent implements OnInit, OnDestroy {
               ...mail.children[childIndex - 1].cc,
               ...mail.children[childIndex - 1].bcc,
             ]);
+            cc = [...mail.children[childIndex - 1].cc];
             break;
           }
         }
       }
     } else {
       newReceivers = new Set([...mail.receiver, mail.sender, ...mail.cc, ...mail.bcc]);
+      cc = [...mail.cc];
     }
 
     // Set drafts's mailbox from the list of available mailboxes
@@ -1007,7 +1013,10 @@ export class MailDetailComponent implements OnInit, OnDestroy {
       : this.mailboxes.find(mailbox => newReceivers.has(mailbox.email));
     this.composeMailData[mail.id].selectedMailbox = selectedMailbox;
     newReceivers.delete(selectedMailbox?.email);
-    newMail.receiver = newReceivers ? [...newReceivers] : [];
+
+    const newReceiversArray = newReceivers ? [...newReceivers] : [];
+    newMail.cc = intersection(newReceiversArray, cc);
+    newMail.receiver = difference(newReceiversArray, cc);
     newMail.mailbox = selectedMailbox?.id;
 
     this.selectedMailToInclude = mail;
@@ -1358,7 +1367,7 @@ export class MailDetailComponent implements OnInit, OnDestroy {
   scrollTo(elementReference: any) {
     if (elementReference) {
       setTimeout(() => {
-        elementReference.scrollIntoView({ behavior: 'smooth' });
+        scrollIntoView(elementReference);
       }, 100);
     }
   }

src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.html

@@ -381,24 +381,12 @@
                 class="text-danger display-emails"
                 [ngClass]="{ 'text-dark': mailFolder !== mailFolderTypes.DRAFT }"
               >
-                <ng-container *ngIf="mailFolder === mailFolderTypes.DRAFT; else otherFolders">
-                  <ng-template class="text-danger">
-                    <span [translate]="'mail_sidebar.draft'">Draft</span>
-                  </ng-template>
-                </ng-container>
-                <ng-container #otherFodlers>
-                  <ng-conatiner *ngIf="mail.folder === mailFolderTypes.DRAFT; else nonDraftMail">
-                    <span [translate]="'mail_sidebar.draft'" class="text-danger">Draft</span>
-                  </ng-conatiner>
-                  <ng-template #nonDraftMail>
-                    <label [ngbTooltip]="getMailSenderReceiverInfo(mail)" placement="right">{{
-                      getMailSenderReceiverInfo(mail)
-                    }}</label>
-                  </ng-template>
-                  <span *ngIf="mail.thread_count > 1 && isConversationView" class="email-child-count">
-                    ({{ mail.thread_count }})
-                  </span>
-                </ng-container>
+                <label [ngbTooltip]="mail?.participantsInfo" placement="right">
+                  {{ mail?.participantsInfo }}
+                </label>
+                <span *ngIf="mail.thread_count > 1 && isConversationView" class="email-child-count">
+                  ({{ mail.thread_count }})
+                </span>
                 <span class="position-relative" *ngIf="mailFolder !== mailFolderTypes.DRAFT">
                   <i
                     *ngIf="mail.last_action_thread"
@@ -588,24 +576,12 @@
                 class="text-danger display-emails"
                 [ngClass]="{ 'text-dark': mailFolder !== mailFolderTypes.DRAFT }"
               >
-                <ng-container *ngIf="mailFolder === mailFolderTypes.DRAFT; else otherFolders">
-                  <ng-template class="text-danger">
-                    <span [translate]="'mail_sidebar.draft'">Draft</span>
-                  </ng-template>
-                </ng-container>
-                <ng-container #otherFodlers>
-                  <ng-conatiner *ngIf="mail.folder === mailFolderTypes.DRAFT; else nonDraftMail">
-                    <span [translate]="'mail_sidebar.draft'" class="text-danger">Draft</span>
-                  </ng-conatiner>
-                  <ng-template #nonDraftMail>
-                    <label [ngbTooltip]="getMailSenderReceiverInfo(mail)" placement="right">{{
-                      getMailSenderReceiverInfo(mail)
-                    }}</label>
-                  </ng-template>
-                  <span *ngIf="mail.thread_count > 1 && isConversationView" class="email-child-count">
-                    ({{ mail.thread_count }})
-                  </span>
-                </ng-container>
+                <label [ngbTooltip]="mail?.participantsInfo" placement="right">
+                  {{ mail?.participantsInfo }}
+                </label>
+                <span *ngIf="mail.thread_count > 1 && isConversationView" class="email-child-count">
+                  ({{ mail.thread_count }})
+                </span>
                 <i *ngIf="mail.is_verified" class="fa fa-check-circle verified-sender"></i>
               </a>
               <span class="mail-inbox-message d-md-block">

src/app/mail/mail-list/mail-folder/generic-folder/generic-folder.component.ts

@@ -147,6 +147,7 @@ export class GenericFolderComponent implements OnInit, AfterViewInit {
           this.MAX_EMAIL_PAGE_LIMIT = mailState.total_mail_count;
           this.mails = [...mailState.mails].map(mail => {
             mail.mailLink = this.getMailLink(mail);
+            mail.participantsInfo = this.getParticipantsInfo(mail);
             return mail;
           });
           if (this.mails.length > 0) {
@@ -489,6 +490,18 @@ export class GenericFolderComponent implements OnInit, AfterViewInit {
     return `/mail/${this.mailFolder}/page/${this.PAGE + 1}/message/${mail.id}`;
   }
 
+  // generate the Participants Info to show in the first column of inbox and tooltip
+  getParticipantsInfo(mail: Mail): string {
+    const participants = Object.values(mail?.participants);
+    if (
+      (this.mailFolder === MailFolderType.DRAFT || mail.folder === MailFolderType.DRAFT) &&
+      participants.length === 0
+    ) {
+      return this.translate.instant('mail_sidebar.draft');
+    }
+    return participants?.join(', ');
+  }
+
   openDraftMail(mail: Mail) {
     if (this.mailFolder === MailFolderType.DRAFT && !mail.has_children) {
       this.composeMailService.openComposeMailDialog({
@@ -752,87 +765,6 @@ export class GenericFolderComponent implements OnInit, AfterViewInit {
     return !currentFolderMap || !currentFolderMap.mails || currentFolderMap.mails.length === 0;
   }
 
-  /**
-   * @name getMailSenderReceiverInfo
-   * @description Function to get tooltip, receiver, sender info.
-   * @params Mail, isToolTip
-   * @returns {String} The list of email or name for sender, receiver
-   */
-  getMailSenderReceiverInfo(mail: Mail) {
-    let info = '';
-    switch (this.mailFolder) {
-      case this.mailFolderTypes.DRAFT: {
-        info = 'Draft';
-
-        break;
-      }
-      case this.mailFolderTypes.INBOX: {
-        const participantList: any = Object.values(mail.participants);
-        info = participantList.join(',  ');
-
-        break;
-      }
-      case this.mailFolderTypes.SENT:
-      case this.mailFolderTypes.OUTBOX: {
-        info = mail.receiver_list;
-        if (mail.cc_display?.length > 0) {
-          const cc = mail.cc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-          info = `${info}, ${cc}`;
-        }
-        if (mail.bcc_display?.length > 0) {
-          const bcc = mail.bcc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-          info = `${info}, bcc: ${bcc}`;
-        }
-
-        break;
-      }
-      default: {
-        // For Search, All Emails, Custom Folders
-        switch (mail.folder) {
-          case MailFolderType.INBOX:
-            const participantList: any = Object.values(mail.participants);
-            info = participantList.join(',  ');
-            break;
-          case MailFolderType.SENT:
-          case MailFolderType.OUTBOX:
-            info = mail.receiver_list;
-            if (mail.cc_display?.length > 0) {
-              const cc = mail.cc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-              info = `${info}, ${cc}`;
-            }
-            if (mail.bcc_display?.length > 0) {
-              const bcc = mail.bcc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-              info = `${info}, bcc: ${bcc}`;
-            }
-            break;
-
-          case MailFolderType.DRAFT:
-            info = 'Draft';
-            break;
-
-          default:
-            if (mail.send) {
-              info = mail.receiver_list;
-              if (mail.cc_display?.length > 0) {
-                const cc = mail.cc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-                info = `${info}, ${cc}`;
-              }
-              if (mail.bcc_display?.length > 0) {
-                const bcc = mail.bcc_display.map((item: EmailDisplay) => item.name ?? item.email).join(', ');
-                info = `${info}, bcc: ${bcc}`;
-              }
-            } else {
-              const participants: any = Object.values(mail.participants);
-              info = participants.join(',  ');
-            }
-            break;
-        }
-      }
-    }
-
-    return info;
-  }
-
   @HostListener('window:keydown', ['$event'])
   onKeyDown(event: KeyboardEvent) {
     if (event.code === KEY_LEFT_CONTROL) {
@@ -857,6 +789,3 @@ export class GenericFolderComponent implements OnInit, AfterViewInit {
     }
   }
 }
-function value(arg0: ([key, value]: [string, unknown]) => string, value: any) {
-  throw new Error('Function not implemented.');
-}

src/app/mail/mail-settings/addresses-signature/addresses-signature.component.html

@@ -195,7 +195,7 @@ <h5 class="ui-header-subtitle text-dark mb-0">
         <div class="col-6">
           <button
             type="button"
-            *ngIf="mailboxes?.length < settings?.email_count"
+            *ngIf="mailboxes?.length < settings?.email_count && !reorder"
             (click)="onAddNewAddress()"
             class="btn btn-sm btn-secondary"
           >
@@ -206,7 +206,7 @@ <h5 class="ui-header-subtitle text-dark mb-0">
           <button
             class="btn btn-sm btn-secondary"
             (click)="startReorder()"
-            *ngIf="!reorder && mailboxes?.length > 1"
+            *ngIf="!reorder && mailboxes?.length > 1 && !newAddressOptions.isAddingNew"
             [ngbTooltip]="'settings.reorder_addresses' | translate"
             [translate]="'settings.reorder'"
           >
@@ -357,7 +357,20 @@ <h5 class="ui-header-subtitle text-dark mb-0">
             </div>
           </form>
         </li>
-        <li class="ui-list-item ui-list-item-xs-full" *ngFor="let mailbox of mailboxes; let i = index">
+      </ul>
+      <ul
+        cdkDropList
+        [cdkDropListDisabled]="!reorder"
+        (cdkDropListDropped)="onAliasDrop($event)"
+        class="ui-list ui-list-styled list-styled addresses-list"
+      >
+        <li
+          cdkDrag
+          cdkDragHandle
+          class="ui-list-item ui-list-item-xs-full"
+          [class.alias-drag-handle]="reorder"
+          *ngFor="let mailbox of mailboxes; let i = index"
+        >
           <div class="row row-xs align-items-center">
             <div class="col-10 col-sm-8">
               <div class="form-label text-dark mb-0">
@@ -371,24 +384,6 @@ <h5 class="ui-header-subtitle text-dark mb-0">
               </div>
             </div>
             <div class="col-2 col-sm-4 row">
-              <!-- Reorder Action - Sort Up, Sort Down -->
-              <div class="col" align="right" *ngIf="reorder">
-                <i
-                  class="fas fa-chevron-up cursor-pointer mr-2"
-                  [class.hidden]="i === 0"
-                  [ngbTooltip]="'settings.move_up' | translate"
-                  (click)="sortUp(i)"
-                >
-                </i>
-                <i
-                  class="fas fa-chevron-down cursor-pointer"
-                  [class.hidden]="i === mailboxes.length - 1"
-                  [ngbTooltip]="'settings.move_down' | translate"
-                  (click)="sortDown(i)"
-                >
-                </i>
-              </div>
-              <!-- Reorder Action - Sort Up, Sort Down -->
               <ul
                 *ngIf="!reorder && !mailbox.inProgress"
                 class="col setting-actions-list d-flex align-items-center justify-content-end list-styled text-right"

src/app/mail/mail-settings/addresses-signature/addresses-signature.component.scss

@@ -59,3 +59,7 @@
     }
   }
 }
+
+.alias-drag-handle {
+  cursor: move;
+}

src/app/mail/mail-settings/addresses-signature/addresses-signature.component.ts

@@ -7,6 +7,7 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { ChangeEvent } from '@ckeditor/ckeditor5-angular';
 import { TranslateService } from '@ngx-translate/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 import * as DecoupledEditor from '../../../../assets/js/ckeditor-build/ckeditor';
 import { SafePipe } from '../../../shared/pipes/safe.pipe';
@@ -402,6 +403,13 @@ export class AddressesSignatureComponent implements OnInit {
     });
   }
 
+  onAliasDrop(event: CdkDragDrop<Mailbox[]>) {
+    moveItemInArray(this.mailboxes, event.previousIndex, event.currentIndex);
+    this.mailboxes.forEach((folder: Mailbox, index) => {
+      folder.sort_order = index + 1;
+    });
+  }
+
   startReorder() {
     this.reorder = true;
     this.unmodifiedMailboxes = this.mailboxes.map(x => ({ ...x }));