Mail account edit dialog

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

@@ -0,0 +1,26 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col">
+        <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
+        <app-input-text i18n-title title="IMAP Server" formControlName="imap_server" [error]="error?.imap_server"></app-input-text>
+        <app-input-text i18n-title title="IMAP Port" formControlName="imap_server" [error]="error?.imap_port"></app-input-text>
+        <app-input-select i18n-title title="IMAP Security" [items]="imapSecurityOptions" formControlName="imap_security"></app-input-select>
+      </div>
+      <div class="col">
+        <app-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></app-input-text>
+        <app-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></app-input-password>
+        <app-input-text i18n-title title="Character Set" formControlName="character_set" [error]="error?.character_set"></app-input-text>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <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>
+</form>

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

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core'
+import { FormControl, FormGroup } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import {
+  IMAPSecurity,
+  IMAPSecurityLabels,
+  PaperlessMailAccount,
+} from 'src/app/data/paperless-mail-account'
+import { MailAccountService } from 'src/app/services/rest/mail-account.service'
+
+@Component({
+  selector: 'app-mail-account-edit-dialog',
+  templateUrl: './mail-account-edit-dialog.component.html',
+  styleUrls: ['./mail-account-edit-dialog.component.scss'],
+})
+export class MailAccountEditDialogComponent extends EditDialogComponent<PaperlessMailAccount> {
+  constructor(service: MailAccountService, activeModal: NgbActiveModal) {
+    super(service, activeModal)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new mail account`
+  }
+
+  getEditTitle() {
+    return $localize`Edit mail account`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(null),
+      imap_server: new FormControl(null),
+      imap_port: new FormControl(null),
+      imap_security: new FormControl(IMAPSecurity.SSL),
+      username: new FormControl(null),
+      password: new FormControl(null),
+      character_set: new FormControl('UTF-8'),
+    })
+  }
+
+  get imapSecurityOptions() {
+    return IMAPSecurityLabels
+  }
+}

src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts

@@ -5,7 +5,6 @@ import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { ToastService } from 'src/app/services/toast.service'
 
 @Component({
   selector: 'app-storage-path-edit-dialog',
@@ -13,12 +12,8 @@ import { ToastService } from 'src/app/services/toast.service'
   styleUrls: ['./storage-path-edit-dialog.component.scss'],
 })
 export class StoragePathEditDialogComponent extends EditDialogComponent<PaperlessStoragePath> {
-  constructor(
-    service: StoragePathService,
-    activeModal: NgbActiveModal,
-    toastService: ToastService
-  ) {
-    super(service, activeModal, toastService)
+  constructor(service: StoragePathService, activeModal: NgbActiveModal) {
+    super(service, activeModal)
   }
 
   get pathHint() {

src-ui/src/app/components/common/input/password/password.component.html

@@ -0,0 +1,8 @@
+<div class="mb-3">
+  <label class="form-label" [for]="inputId">{{title}}</label>
+  <input #inputField type="password" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
+  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  <div class="invalid-feedback">
+    {{error}}
+  </div>
+</div>

src-ui/src/app/components/common/input/password/password.component.ts

@@ -0,0 +1,21 @@
+import { Component, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PasswordComponent),
+      multi: true,
+    },
+  ],
+  selector: 'app-input-password',
+  templateUrl: './password.component.html',
+  styleUrls: ['./password.component.scss'],
+})
+export class PasswordComponent extends AbstractInputComponent<string> {
+  constructor() {
+    super()
+  }
+}