Use confirm button for mail account / rule delete

src-ui/src/app/components/manage/mail/mail.component.html

@@ -36,9 +36,15 @@
               <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
                 <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
               </button>
-                  <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
+              <pngx-confirm-button
-                    <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                label="Delete"
-                    </button>
+                i18n-label
+                (confirm)="deleteMailAccount(account)"
+                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }"
+                [disabled]="!userIsOwner(account)"
+                buttonClasses="btn-sm btn-outline-danger"
+                iconName="trash">
+              </pngx-confirm-button>
             </div>
           </div>
         </div>
@@ -80,9 +86,15 @@
               <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
                 <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
               </button>
-                        <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
+              <pngx-confirm-button
-                          <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                label="Delete"
-                          </button>
+                i18n-label
+                (confirm)="deleteMailRule(rule)"
+                *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }"
+                [disabled]="!userIsOwner(rule)"
+                buttonClasses="btn-sm btn-outline-danger"
+                iconName="trash">
+              </pngx-confirm-button>
             </div>
           </div>
         </div>

src-ui/src/app/components/manage/mail/mail.component.spec.ts

@@ -42,6 +42,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+import { By } from '@angular/platform-browser'
 
 const mailAccounts = [
   { id: 1, name: 'account1' },
@@ -84,6 +86,7 @@ describe('MailComponent', () => {
         PermissionsDialogComponent,
         PermissionsFormComponent,
         SwitchComponent,
+        ConfirmButtonComponent,
       ],
       providers: [CustomDatePipe, DatePipe, PermissionsGuard],
       imports: [
@@ -183,10 +186,9 @@ describe('MailComponent', () => {
 
   it('should support delete mail account, show error if needed', () => {
     completeSetup()
-    let modal: NgbModalRef
+    const deleteButton = fixture.debugElement.query(
-    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+      By.directive(ConfirmButtonComponent)
-    component.deleteMailAccount(mailAccounts[0] as MailAccount)
+    )
-    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(mailAccountService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -194,10 +196,10 @@ describe('MailComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting mail account'))
     )
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(toastErrorSpy).toBeCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail account')
   })
@@ -222,10 +224,9 @@ describe('MailComponent', () => {
 
   it('should support delete mail rule, show error if needed', () => {
     completeSetup()
-    let modal: NgbModalRef
+    const deleteButton = fixture.debugElement.queryAll(
-    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+      By.directive(ConfirmButtonComponent)
-    component.deleteMailRule(mailRules[0] as MailRule)
+    )[2]
-    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
     const deleteSpy = jest.spyOn(mailRuleService, 'delete')
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
@@ -233,10 +234,10 @@ describe('MailComponent', () => {
     deleteSpy.mockReturnValueOnce(
       throwError(() => new Error('error deleting mail rule'))
     )
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(toastErrorSpy).toBeCalled()
     deleteSpy.mockReturnValueOnce(of(true))
-    deleteDialog.confirm()
+    deleteButton.nativeElement.dispatchEvent(new Event('confirm'))
     expect(listAllSpy).toHaveBeenCalled()
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail rule')
   })

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -106,19 +106,8 @@ export class MailComponent
   }
 
   deleteMailAccount(account: MailAccount) {
-    const modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.title = $localize`Confirm delete mail account`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail account.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Proceed`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
     this.mailAccountService.delete(account).subscribe({
       next: () => {
-          modal.close()
         this.toastService.showInfo($localize`Deleted mail account`)
         this.mailAccountService.clearCache()
         this.mailAccountService
@@ -128,13 +117,9 @@ export class MailComponent
           })
       },
       error: (e) => {
-          this.toastService.showError(
+        this.toastService.showError($localize`Error deleting mail account.`, e)
-            $localize`Error deleting mail account.`,
-            e
-          )
       },
     })
-    })
   }
 
   editMailRule(rule: MailRule = null) {
@@ -165,19 +150,8 @@ export class MailComponent
   }
 
   deleteMailRule(rule: MailRule) {
-    const modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.title = $localize`Confirm delete mail rule`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail rule.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Proceed`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      modal.componentInstance.buttonsEnabled = false
     this.mailRuleService.delete(rule).subscribe({
       next: () => {
-          modal.close()
         this.toastService.showInfo($localize`Deleted mail rule`)
         this.mailRuleService.clearCache()
         this.mailRuleService
@@ -190,7 +164,6 @@ export class MailComponent
         this.toastService.showError($localize`Error deleting mail rule.`, e)
       },
     })
-    })
   }
 
   editPermissions(object: MailRule | MailAccount) {