Merge pull request #388 from CTemplar/dev

v1.1.25

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

@@ -148,6 +148,12 @@
             </div>
           </div>
         </li>
+        <li *ngIf="mailFolder === mailFolderTypes.TRASH && mails?.length > 0">
+          <a (click)="confirmEmptyTrash()" class="btn btn-sm" placement="top"
+             [ngbTooltip]="'Delete all messages'">
+            <i class="icon icon-garbage position-left"></i> Delete All
+          </a>
+        </li>
       </ul>
     </div>
 
@@ -358,4 +364,27 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<!-- Confirm empty trash modal -->
+<ng-template #confirmEmptyTrashModal let-c="close" let-d="dismiss">
+  <div class="modal-header">
+    <h3 class="modal-title w-100 text-dark"><strong>Confirm Delete</strong></h3>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="d()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body bg-faded">
+    <div class="mail-actions-form-holder modal-mail-actions-form-holder">
+      <div class="form-group">
+        Are you sure, you want to delete all messages in trash?
+      </div>
+      <div class="form-group text-right mb-0">
+        <button (click)="d()" class="btn btn-secondary btn-sm mr-1" role="button">Cancel</button>
+        <button (click)="emptyTrashConfirmed()" class="btn btn-danger btn-sm" role="button">
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</ng-template><!-- /.Confirm empty trash modal ends -->

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

@@ -1,10 +1,14 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 import { OnDestroy, TakeUntilDestroy } from 'ngx-take-until-destroy';
 import { Observable } from 'rxjs';
+import { timer } from 'rxjs/internal/observable/timer';
+import { takeUntil } from 'rxjs/operators';
 import {
   DeleteMail,
+  EmptyTrash,
   GetMailDetailSuccess,
   GetMails,
   GetUnreadMailsCount,
@@ -18,8 +22,6 @@ import { Folder, Mail, MailFolderType } from '../../../../store/models';
 import { SearchState } from '../../../../store/reducers/search.reducers';
 import { SharedService } from '../../../../store/services';
 import { ComposeMailService } from '../../../../store/services/compose-mail.service';
-import { takeUntil } from 'rxjs/operators';
-import { timer } from 'rxjs/internal/observable/timer';
 
 @TakeUntilDestroy()
 @Component({
@@ -32,6 +34,9 @@ export class GenericFolderComponent implements OnInit, OnDestroy, OnChanges {
   @Input() mailFolder: MailFolderType;
   @Input() showProgress: boolean;
   @Input() fetchMails: boolean;
+
+  @ViewChild('confirmEmptyTrashModal') confirmEmptyTrashModal;
+
   customFolders: Folder[];
 
   mailFolderTypes = MailFolderType;
@@ -50,12 +55,14 @@ export class GenericFolderComponent implements OnInit, OnDestroy, OnChanges {
   private searchText: string;
   private mailState: MailState;
   private isAutoRefreshPaused: boolean;
+  private confirmEmptyTrashModalRef: NgbModalRef;
 
   constructor(public store: Store<AppState>,
               private router: Router,
               private activatedRoute: ActivatedRoute,
               private sharedService: SharedService,
-              private composeMailService: ComposeMailService) {
+              private composeMailService: ComposeMailService,
+              private modalService: NgbModal) {
   }
 
   ngOnInit() {
@@ -217,6 +224,18 @@ export class GenericFolderComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
+  confirmEmptyTrash() {
+    this.confirmEmptyTrashModalRef = this.modalService.open(this.confirmEmptyTrashModal, {
+      centered: true,
+      windowClass: 'modal-sm users-action-modal'
+    });
+  }
+
+  emptyTrashConfirmed() {
+    this.store.dispatch(new EmptyTrash());
+    this.confirmEmptyTrashModalRef.dismiss();
+  }
+
   openMail(mail: Mail) {
     if (this.mailFolder === MailFolderType.DRAFT) {
       this.composeMailService.openComposeMailDialog({ draft: mail });

src/app/mail/mail-settings/mail-filters/mail-filters.component.html

@@ -208,7 +208,7 @@ <h3 class="modal-title w-100 text-dark"><strong>Confirm Delete</strong></h3>
         Are you sure, you want to delete filter <b>"{{selectedFilter?.name}}"</b>?
       </div>
       <div class="form-group text-right mb-0">
-        <button (click)="d()" class="btn btn-secondary btn-sm" role="button">Cancel</button>
+        <button (click)="d()" class="btn btn-secondary btn-sm mr-1" role="button">Cancel</button>
         <button (click)="deleteFilter()" class="btn btn-danger btn-sm" role="button">
           Delete
         </button>

src/app/shared/components/bitcoin-form/bitcoin-form.component.html

@@ -14,7 +14,7 @@ <h5><strong>1612e9NUhwCGDAizMfk5VQa3pzMemDSGik</strong></h5>
           </div>
           <div class="card-body text-center">
             <img class="p-4"
-                 src="https://api.qrserver.com/v1/create-qr-code/?size=225x225&data=1612e9NUhwCGDAizMfk5VQa3pzMemDSGik"
+                 src="{{apiUrl}}qr-code/?size=225x225&data=1612e9NUhwCGDAizMfk5VQa3pzMemDSGik"
                  alt="captcha">
           </div>
         </div>

src/app/shared/components/bitcoin-form/bitcoin-form.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { apiUrl } from '../../config';
 
 @Component({
   selector: 'app-bitcoin-form',
@@ -7,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BitcoinFormComponent implements OnInit {
 
+  public apiUrl: string = apiUrl;
   constructor() { }
 
   ngOnInit() {

src/app/shared/components/users-billing-info/users-billing-info.component.html

@@ -85,7 +85,7 @@ <h5><strong *ngIf="bitcoinState?.loaded">
                        *ngIf="bitcoinState?.loaded">{{bitcoinState.newWalletAddress}}</p>
                     <img *ngIf="bitcoinState?.loaded"
                          class="mb-3"
-                         src="https://api.qrserver.com/v1/create-qr-code/?size=225x225&data=bitcoin:{{bitcoinState.newWalletAddress}}?amount={{bitcoinState.bitcoinRequired}}"
+                         src="{{apiUrl}}qr-code/?size=225x225&data=bitcoin:{{bitcoinState.newWalletAddress}}?amount={{bitcoinState.bitcoinRequired}}"
                          alt="captcha">
                     <app-loading-spinner [showSpinner]="!bitcoinState?.loaded"></app-loading-spinner>
                   </div>

src/app/shared/components/users-billing-info/users-billing-info.component.ts

@@ -33,6 +33,7 @@ import { takeUntil } from 'rxjs/operators';
 import { UserAccountInitDialogComponent } from '../../../users/dialogs/user-account-init-dialog/user-account-init-dialog.component';
 import { DynamicScriptLoaderService } from '../../services/dynamic-script-loader.service';
 import { timer } from 'rxjs/internal/observable/timer';
+import { apiUrl } from '../../config';
 
 @TakeUntilDestroy()
 @Component({
@@ -78,6 +79,7 @@ export class UsersBillingInfoComponent implements OnDestroy, OnInit {
   authState: AuthState;
   isScriptsLoaded: boolean;
   isScriptsLoading: boolean;
+  apiUrl: string = apiUrl;
 
   readonly destroyed$: Observable<boolean>;
   private checkTransactionResponse: CheckTransactionResponse;

src/app/shared/pipes/safe.pipe.ts

@@ -112,14 +112,18 @@ export class SafePipe implements PipeTransform {
       let regex = /https?:\/\/[^\s]+/g;
       if (typeof (textData) === 'string') {
         let matches = textData.match(regex);
-        matches.forEach((match) => {
-          textData = textData.split(match).join(`<a href="${match}" target="_blank" rel="noopener">${match}</a>`);
-        });
+        if (matches) {
+          matches.forEach((match) => {
+            textData = textData.split(match).join(`<a href="${match}" target="_blank" rel="noopener">${match}</a>`);
+          });
+        }
         regex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
         matches = textData.match(regex);
-        matches.forEach((match) => {
-          textData = textData.split(match).join(`<a href="mailto:${match}" target="_blank" rel="noopener">${match}</a>`);
-        });
+        if (matches) {
+          matches.forEach((match) => {
+            textData = textData.split(match).join(`<a href="mailto:${match}" target="_blank" rel="noopener">${match}</a>`);
+          });
+        }
       }
       textData = textData.replace(/\n/g, '<br>');
     }

src/app/store/actions/mail.actions.ts

@@ -39,6 +39,9 @@ export enum MailActionTypes {
   SET_DEFAULT_MAILBOX_SUCCESS = '[MAILBOX] SET DEFAULT MAILBOX SUCCESS',
   UPDATE_MAILBOX_ORDER = '[MAILBOX] UPDATE ORDER',
   UPDATE_MAILBOX_ORDER_SUCCESS = '[MAILBOX] UPDATE ORDER SUCCESS',
+  EMPTY_TRASH = '[Mail] EMPTY TRASH',
+  EMPTY_TRASH_SUCCESS = '[Mail] EMPTY TRASH SUCCESS',
+  EMPTY_TRASH_FAILURE = '[Mail] EMPTY TRASH FAILURE',
 }
 
 export class GetMails implements Action {
@@ -262,6 +265,27 @@ export class UpdateMailboxOrderSuccess implements Action {
   }
 }
 
+export class EmptyTrash implements Action {
+  readonly type = MailActionTypes.EMPTY_TRASH;
+
+  constructor(public payload?: any) {
+  }
+}
+
+export class EmptyTrashSuccess implements Action {
+  readonly type = MailActionTypes.EMPTY_TRASH_SUCCESS;
+
+  constructor(public payload?: any) {
+  }
+}
+
+export class EmptyTrashFailure implements Action {
+  readonly type = MailActionTypes.EMPTY_TRASH_FAILURE;
+
+  constructor(public payload: any) {
+  }
+}
+
 export type MailActions =
   | GetMails
   | GetMailsSuccess
@@ -298,4 +322,7 @@ export type MailActions =
   | SetDefaultMailbox
   | SetDefaultMailboxSuccess
   | UpdateMailboxOrder
-  | UpdateMailboxOrderSuccess;
+  | UpdateMailboxOrderSuccess
+  | EmptyTrash
+  | EmptyTrashSuccess
+  | EmptyTrashFailure;

src/app/store/effects/mail.effects.ts

@@ -12,7 +12,7 @@ import {
   AccountDetailsGet,
   CreateMail,
   DeleteFolder,
-  DeleteMailSuccess,
+  DeleteMailSuccess, EmptyTrash, EmptyTrashFailure, EmptyTrashSuccess,
   GetMailDetail,
   GetMailDetailSuccess,
   GetMails,
@@ -165,4 +165,19 @@ export class MailEffects {
         );
     }));
 
+  @Effect()
+  emptyTrashEffect: Observable<any> = this.actions.pipe(
+    ofType(MailActionTypes.EMPTY_TRASH),
+    map((action: EmptyTrash) => action.payload),
+    switchMap(payload => {
+      return this.mailService.emptyTrash()
+        .pipe(
+          switchMap(res => of(new EmptyTrashSuccess(res))),
+          catchError(err => of(
+            new SnackErrorPush({message: `Failed to delete all messages.`}),
+            new EmptyTrashFailure(err.error)
+          ))
+        );
+    }));
+
 }

src/app/store/reducers/mail.reducers.ts

@@ -221,6 +221,19 @@ export function reducer(
       return { ...state, mails: [...state.mails], noUnreadCountChange: true };
     }
 
+    case MailActionTypes.EMPTY_TRASH: {
+      return { ...state, inProgress: true, noUnreadCountChange: true };
+    }
+
+    case MailActionTypes.EMPTY_TRASH_SUCCESS: {
+      state.folders.set(MailFolderType.TRASH, []);
+      return { ...state, mails: [], inProgress: false };
+    }
+
+    case MailActionTypes.EMPTY_TRASH_FAILURE: {
+      return { ...state, inProgress: false };
+    }
+
     default: {
       return state;
     }

src/app/store/services/mail.service.ts

@@ -157,6 +157,10 @@ export class MailService {
     return this.http.post<any>(`${apiUrl}emails/mailbox-order/`, data);
   }
 
+  emptyTrash() {
+    return this.http.post<any>(`${apiUrl}emails/empty-trash/`, null);
+  }
+
   private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
 

src/app/store/services/users.service.ts

@@ -178,6 +178,7 @@ export class UsersService {
       'emails-forward/send-verification-code',
       'emails-forward/verify-verification-code',
       'emails/folder-order',
+      'emails/empty-trash',
       'users/autoresponder'
     ];
     if (authenticatedUrls.indexOf(url) > -1) {