UI: Mail server page add checkbox change password

@@ -39,7 +39,7 @@
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>admin.smtp-protocol</mat-label>
-            <mat-select matInput formControlName="smtpProtocol">
+            <mat-select formControlName="smtpProtocol">
               <mat-option *ngFor="let protocol of smtpProtocols" [value]="protocol">
                 {{protocol.toUpperCase()}}
               </mat-option>
@@ -126,10 +126,13 @@
             <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                    autocomplete="new-username"/>
           </mat-form-field>
-          <mat-form-field class="mat-block">
+          <mat-checkbox *ngIf="!isAdd" formControlName="changePassword" style="padding-bottom: 16px;">
+            {{ 'admin.change-password' | translate }}
+          </mat-checkbox>
+          <mat-form-field class="mat-block" *ngIf="mailSettings.get('changePassword').value || isAdd">
             <mat-label translate>common.password</mat-label>
             <input matInput formControlName="password" type="password"
-                   placeholder="{{ 'common.enter-password' | translate }}" autocomplete="new-password"/>
+                   placeholder="{{ 'common.enter-password' | translate }}" autocomplete="new-password">
           </mat-form-field>
           <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
             <button mat-raised-button type="button"

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
@@ -26,20 +26,25 @@ import { ActionNotificationShow } from '@core/notification/notification.actions'
 import { TranslateService } from '@ngx-translate/core';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 import { isString } from '@core/utils';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-mail-server',
   templateUrl: './mail-server.component.html',
   styleUrls: ['./mail-server.component.scss', './settings-card.scss']
 })
-export class MailServerComponent extends PageComponent implements OnInit, HasConfirmForm {
+export class MailServerComponent extends PageComponent implements OnInit, OnDestroy, HasConfirmForm {
 
   mailSettings: FormGroup;
   adminSettings: AdminSettings<MailServerSettings>;
   smtpProtocols = ['smtp', 'smtps'];
+  isAdd = true;
 
   tlsVersions = ['TLSv1', 'TLSv1.1', 'TLSv1.2', 'TLSv1.3'];
 
+  private destroy$ = new Subject();
+
   constructor(protected store: Store<AppState>,
               private router: Router,
               private adminService: AdminService,
@@ -56,12 +61,21 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
         if (this.adminSettings.jsonValue && isString(this.adminSettings.jsonValue.enableTls)) {
           this.adminSettings.jsonValue.enableTls = (this.adminSettings.jsonValue.enableTls as any) === 'true';
         }
+        this.isAdd = this.adminSettings.jsonValue.isAdd;
+        delete this.adminSettings.jsonValue.isAdd;
         this.mailSettings.reset(this.adminSettings.jsonValue);
+        this.enableMailPassword(this.isAdd);
         this.enableProxyChanged();
       }
     );
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+    super.ngOnDestroy();
+  }
+
   buildMailServerSettingsForm() {
     this.mailSettings = this.fb.group({
       mailFrom: ['', [Validators.required]],
@@ -81,14 +95,23 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
       proxyUser: [''],
       proxyPassword: [''],
       username: [''],
+      changePassword: [false],
       password: ['']
     });
     this.registerDisableOnLoadFormControl(this.mailSettings.get('smtpProtocol'));
     this.registerDisableOnLoadFormControl(this.mailSettings.get('enableTls'));
     this.registerDisableOnLoadFormControl(this.mailSettings.get('enableProxy'));
-    this.mailSettings.get('enableProxy').valueChanges.subscribe(() => {
+    this.registerDisableOnLoadFormControl(this.mailSettings.get('changePassword'));
+    this.mailSettings.get('enableProxy').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
       this.enableProxyChanged();
     });
+    this.mailSettings.get('changePassword').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value) => {
+      this.enableMailPassword(value);
+    });
   }
 
   enableProxyChanged(): void {
@@ -102,8 +125,16 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
     }
   }
 
+  enableMailPassword(enable: boolean) {
+    if (enable) {
+      this.mailSettings.get('password').enable({emitEvent: false});
+    } else {
+      this.mailSettings.get('password').disable({emitEvent: false});
+    }
+  }
+
   sendTestMail(): void {
-    this.adminSettings.jsonValue = {...this.adminSettings.jsonValue, ...this.mailSettings.value};
+    this.adminSettings.jsonValue = {...this.adminSettings.jsonValue, ...this.mailSettingsFormValue};
     this.adminService.sendTestMail(this.adminSettings).subscribe(
       () => {
         this.store.dispatch(new ActionNotificationShow({ message: this.translate.instant('admin.test-mail-sent'),
@@ -113,12 +144,11 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
   }
 
   save(): void {
-    this.adminSettings.jsonValue = {...this.adminSettings.jsonValue, ...this.mailSettings.value};
+    this.adminSettings.jsonValue = {...this.adminSettings.jsonValue, ...this.mailSettingsFormValue};
     this.adminService.saveAdminSettings(this.adminSettings).subscribe(
       (adminSettings) => {
-        if (!adminSettings.jsonValue.password) {
-          adminSettings.jsonValue.password = this.mailSettings.value.password;
-        }
+        adminSettings.jsonValue.password = this.mailSettings.value.password;
+        adminSettings.jsonValue.changePassword = this.mailSettings.value.changePassword;
         this.adminSettings = adminSettings;
         this.mailSettings.reset(this.adminSettings.jsonValue);
       }
@@ -129,4 +159,9 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
     return this.mailSettings;
   }
 
+  private get mailSettingsFormValue(): MailServerSettings {
+    const formValue = this.mailSettings.value;
+    delete formValue.changePassword;
+    return formValue;
+  }
 }

@@ -27,6 +27,7 @@ export interface AdminSettings<T> {
 export declare type SmtpProtocol = 'smtp' | 'smtps';
 
 export interface MailServerSettings {
+  isAdd: boolean;
   mailFrom: string;
   smtpProtocol: SmtpProtocol;
   smtpHost: string;
@@ -34,7 +35,8 @@ export interface MailServerSettings {
   timeout: number;
   enableTls: boolean;
   username: string;
-  password: string;
+  changePassword?: boolean;
+  password?: string;
   enableProxy: boolean;
   proxyHost: string;
   proxyPort: number;

@@ -104,6 +104,7 @@
         "proxy-port-range": "Proxy port should be in a range from 1 to 65535.",
         "proxy-user": "Proxy user",
         "proxy-password": "Proxy password",
+        "change-password": "Change password",
         "send-test-mail": "Send test mail",
         "sms-provider": "SMS provider",
         "sms-provider-settings": "SMS provider settings",