Mail account edit dialog

src-ui/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { NgxFileDropModule } from 'ngx-file-drop'
 import { TextComponent } from './components/common/input/text/text.component'
 import { SelectComponent } from './components/common/input/select/select.component'
 import { CheckComponent } from './components/common/input/check/check.component'
+import { PasswordComponent } from './components/common/input/password/password.component'
 import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component'
 import { TagsComponent } from './components/common/input/tags/tags.component'
 import { SortableDirective } from './directives/sortable.directive'
@@ -76,6 +77,7 @@ import { StoragePathEditDialogComponent } from './components/common/edit-dialog/
 import { SettingsService } from './services/settings.service'
 import { TasksComponent } from './components/manage/tasks/tasks.component'
 import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { MailAccountEditDialogComponent } from './components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
 
 import localeBe from '@angular/common/locales/be'
 import localeCs from '@angular/common/locales/cs'
@@ -142,6 +144,7 @@ function initializeApp(settings: SettingsService) {
     TagEditDialogComponent,
     DocumentTypeEditDialogComponent,
     StoragePathEditDialogComponent,
+    MailAccountEditDialogComponent,
     TagComponent,
     ClearableBadge,
     PageHeaderComponent,
@@ -157,6 +160,7 @@ function initializeApp(settings: SettingsService) {
     TextComponent,
     SelectComponent,
     CheckComponent,
+    PasswordComponent,
     SaveViewConfigDialogComponent,
     TagsComponent,
     SortableDirective,

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()
+  }
+}

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

@@ -222,28 +222,48 @@
       <ng-template ngbNavContent>
 
         <h4 i18n>Mail accounts</h4>
-        <div formGroupName="mailAccounts">
+        <ul formGroupName="mailAccounts">
 
-            <div *ngFor="let account of mailAccounts" [formGroupName]="account.id" class="row">
-              <div class="mb-3 col">
-                {{account.name}}
+            <li class="row mb-1">
+              <div class="row">
+                <div class="col" i18n>Name</div>
+                <div class="col" i18n>Server</div>
+                <div class="col">&nbsp;</div>
               </div>
-            </div>
+            </li>
+
+            <li *ngFor="let account of mailAccounts" [formGroupName]="account.id" class="row mb-1">
+              <div class="row">
+                <div class="col"><button class="btn btn-link p-0" type="button" (click)="editMailAccount(account)">{{account.name}}</button></div>
+                <div class="col">{{account.imap_server}}</div>
+                <div class="col"><button class="btn btn-primary" type="button" (click)="editMailAccount(account)" i18n>Edit</button></div>
+              </div>
+            </li>
 
             <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
-        </div>
+        </ul>
 
-        <h4 i18n>Mail rules</h4>
-        <div formGroupName="mailRules">
+        <h4 class="mt-4" i18n>Mail rules</h4>
+        <ul formGroupName="mailRules">
 
-            <div *ngFor="let rule of mailRules" [formGroupName]="rule.id" class="row">
-              <div class="mb-3 col">
-                {{rule.name}}
+            <li class="row mb-1">
+              <div class="row">
+                <div class="col" i18n>Name</div>
+                <div class="col" i18n>Account</div>
+                <div class="col">&nbsp;</div>
               </div>
-            </div>
+            </li>
+
+            <li *ngFor="let rule of mailRules" [formGroupName]="rule.id" class="row">
+              <div class="row">
+                <div class="col"><button class="btn btn-link p-0" type="button" (click)="editMailRule(rule)">{{rule.name}}</button></div>
+                <div class="col">{{rule.account.name}}</div>
+                <div class="col"><button class="btn btn-primary" type="button" (click)="editMailRule(rule)" i18n>Edit</button></div>
+              </div>
+            </li>
 
             <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
-        </div>
+        </ul>
 
       </ng-template>
     </li>

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

@@ -33,6 +33,8 @@ import { PaperlessMailAccount } from 'src/app/data/paperless-mail-account'
 import { PaperlessMailRule } from 'src/app/data/paperless-mail-rule'
 import { MailAccountService as MailAccountService } from 'src/app/services/rest/mail-account.service'
 import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
 
 @Component({
   selector: 'app-settings',
@@ -104,7 +106,8 @@ export class SettingsComponent
     @Inject(LOCALE_ID) public currentLocale: string,
     private viewportScroller: ViewportScroller,
     private activatedRoute: ActivatedRoute,
-    public readonly tourService: TourService
+    public readonly tourService: TourService,
+    private modalService: NgbModal
   ) {
     this.settings.settingsSaved.subscribe(() => {
       if (!this.savePending) this.initialize()
@@ -470,4 +473,32 @@ export class SettingsComponent
   clearThemeColor() {
     this.settingsForm.get('themeColor').patchValue('')
   }
+
+  editMailAccount(account: PaperlessMailAccount) {
+    console.log(account)
+
+    var modal = this.modalService.open(MailAccountEditDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+    modal.componentInstance.dialogMode = 'edit'
+    modal.componentInstance.object = account
+    // modal.componentInstance.success
+    //   .pipe(
+    //     switchMap((newStoragePath) => {
+    //       return this.storagePathService
+    //         .listAll()
+    //         .pipe(map((storagePaths) => ({ newStoragePath, storagePaths })))
+    //     })
+    //   )
+    //   .pipe(takeUntil(this.unsubscribeNotifier))
+    //   .subscribe(({ newStoragePath, storagePaths }) => {
+    //     this.storagePaths = storagePaths.results
+    //     this.documentForm.get('storage_path').setValue(newStoragePath.id)
+    //   })
+  }
+
+  editMailRule(rule: PaperlessMailRule) {
+    console.log(rule)
+  }
 }

src-ui/src/app/data/paperless-mail-account.ts

@@ -1,11 +1,17 @@
 import { ObjectWithId } from './object-with-id'
 
 export enum IMAPSecurity {
-  None = 0,
-  SSL = 1,
-  STARTTLS = 2,
+  None = 1,
+  SSL = 2,
+  STARTTLS = 3,
 }
 
+export const IMAPSecurityLabels: Array<{ id: number; name: string }> = [
+  { id: IMAPSecurity.None, name: $localize`No encryption` },
+  { id: IMAPSecurity.SSL, name: $localize`SSL` },
+  { id: IMAPSecurity.STARTTLS, name: $localize`STARTTLS` },
+]
+
 export interface PaperlessMailAccount extends ObjectWithId {
   name: string