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