Add test mail account

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.html

@@ -21,6 +21,16 @@
     </div>
   </div>
   <div class="modal-footer">
+    <div class="m-0 me-2">
+      <ngb-alert #testResultAlert *ngIf="testResult" [type]="testResult" class="mb-0 py-2" (closed)="testResult = null">{{testResultMessage}}</ngb-alert>
+    </div>
+    <button type="button" class="btn btn-outline-primary" (click)="test()" [disabled]="networkActive || testActive">
+      <ng-container *ngIf="testActive">
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+        <span class="visually-hidden mr-1" i18n>Loading...</span>
+      </ng-container>
+      <ng-container i18n>Test</ng-container>
+    </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
     <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
   </div>

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.scss

@@ -0,0 +1,4 @@
+::ng-deep .alert-dismissible .btn-close {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+}

src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import {
   IMAPSecurity,
@@ -21,6 +21,12 @@ const IMAP_SECURITY_OPTIONS = [
   styleUrls: ['./mail-account-edit-dialog.component.scss'],
 })
 export class MailAccountEditDialogComponent extends EditDialogComponent<PaperlessMailAccount> {
+  testActive: boolean = false
+  testResult: string
+  alertTimeout
+
+  @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
+
   constructor(
     service: MailAccountService,
     activeModal: NgbActiveModal,
@@ -53,4 +59,33 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<Paperles
   get imapSecurityOptions() {
     return IMAP_SECURITY_OPTIONS
   }
+
+  test() {
+    this.testActive = true
+    this.testResult = null
+    clearTimeout(this.alertTimeout)
+    const mailService = this.service as MailAccountService
+    const newObject = Object.assign(
+      Object.assign({}, this.object),
+      this.objectForm.value
+    )
+    mailService.test(newObject).subscribe({
+      next: (result: { success: boolean }) => {
+        this.testActive = false
+        this.testResult = result.success ? 'success' : 'danger'
+        this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
+      },
+      error: (e) => {
+        this.testActive = false
+        this.testResult = 'danger'
+        this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
+      },
+    })
+  }
+
+  get testResultMessage() {
+    return this.testResult === 'success'
+      ? $localize`Successfully connected to the mail server`
+      : $localize`Unable to connect to the mail server`
+  }
 }