Merge pull request #2893 from YevhenBondarenko/feature/ui-proxy

Feature/ui proxy

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html

@@ -90,33 +90,37 @@
           <tb-checkbox formControlName="enableProxy" style="display: block; padding-bottom: 16px;">
             {{ 'admin.enable-proxy' | translate }}
           </tb-checkbox>
-          <div fxLayout.gt-sm="row">
-            <mat-form-field class="mat-block"  *ngIf="enableProxy()" fxFlex="100" fxFlex.gt-sm="60">
-              <mat-label translate>admin.proxy-host</mat-label>
-              <input matInput required formControlName="proxyHost">
-              <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
-                {{ 'admin.proxy-host-required' | translate }}
-              </mat-error>
+          <div *ngIf="mailSettings.get('enableProxy').value">
+            <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
+              <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+                <mat-label translate>admin.proxy-host</mat-label>
+                <input matInput required formControlName="proxyHost">
+                <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
+                  {{ 'admin.proxy-host-required' | translate }}
+                </mat-error>
+              </mat-form-field>
+              <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                <mat-label translate>admin.proxy-port</mat-label>
+                <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
+                <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
+                  {{ 'admin.proxy-port-required' | translate }}
+                </mat-error>
+                <mat-error *ngIf="mailSettings.get('proxyPort').hasError('pattern')
+              || mailSettings.get('proxyPort').hasError('min')
+              || mailSettings.get('proxyPort').hasError('max')">
+                  {{ 'admin.proxy-port-range' | translate }}
+                </mat-error>
+              </mat-form-field>
+            </div>
+            <mat-form-field class="mat-block">
+              <mat-label translate>admin.proxy-user</mat-label>
+              <input matInput formControlName="proxyUser">
             </mat-form-field>
-            <mat-form-field class="mat-block" *ngIf="enableProxy()" fxFlex="100" fxFlex.gt-sm="40">
-              <mat-label translate>admin.proxy-port</mat-label>
-              <input matInput required formControlName="proxyPort" maxlength="5">
-              <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
-                {{ 'admin.proxy-port-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="mailSettings.get('proxyPort').hasError('pattern') || mailSettings.get('proxyPort').hasError('maxlength')">
-                {{ 'admin.proxy-port-invalid' | translate }}
-              </mat-error>
+            <mat-form-field class="mat-block">
+              <mat-label translate>admin.proxy-password</mat-label>
+              <input matInput formControlName="proxyPassword">
             </mat-form-field>
           </div>
-          <mat-form-field class="mat-block" *ngIf="enableProxy()">
-            <mat-label translate>admin.proxy-user</mat-label>
-            <input matInput formControlName="proxyUser">
-          </mat-form-field>
-          <mat-form-field class="mat-block" *ngIf="enableProxy()">
-            <mat-label translate>admin.proxy-password</mat-label>
-            <input matInput formControlName="proxyPassword">
-          </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>common.username</mat-label>
             <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"/>

ui-ngx/src/app/modules/home/pages/admin/mail-server.component.ts

@@ -20,7 +20,7 @@ import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AdminSettings, MailServerSettings, portPattern } from '@shared/models/settings.models';
+import { AdminSettings, MailServerSettings, smtpPortPattern } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
@@ -53,6 +53,7 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
       (adminSettings) => {
         this.adminSettings = adminSettings;
         this.mailSettings.reset(this.adminSettings.jsonValue);
+        this.enableProxyChanged();
       }
     );
   }
@@ -63,16 +64,16 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
       smtpProtocol: ['smtp'],
       smtpHost: ['localhost', [Validators.required]],
       smtpPort: ['25', [Validators.required,
-        Validators.pattern(portPattern),
+        Validators.pattern(smtpPortPattern),
         Validators.maxLength(5)]],
       timeout: ['10000', [Validators.required,
         Validators.pattern(/^[0-9]{1,6}$/),
         Validators.maxLength(6)]],
       enableTls: ['false'],
       tlsVersion: [],
-      enableProxy: ['false', []],
+      enableProxy: [false, []],
       proxyHost: ['', [Validators.required]],
-      proxyPort: ['', [Validators.required, Validators.maxLength(5), Validators.pattern(portPattern)]],
+      proxyPort: ['', [Validators.required, Validators.min(1), Validators.max(65535)]],
       proxyUser: [''],
       proxyPassword: [''],
       username: [''],
@@ -80,9 +81,13 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
     });
     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.enableProxyChanged();
+    });
   }
 
-  enableProxy(): boolean {
+  enableProxyChanged(): void {
     let enableProxy: boolean = this.mailSettings.get('enableProxy').value;
     if (enableProxy) {
       this.mailSettings.get('proxyHost').enable();
@@ -91,7 +96,6 @@ export class MailServerComponent extends PageComponent implements OnInit, HasCon
       this.mailSettings.get('proxyHost').disable();
       this.mailSettings.get('proxyPort').disable();
     }
-    return enableProxy;
   }
 
   sendTestMail(): void {

ui-ngx/src/app/shared/models/settings.models.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-export const portPattern: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
+export const smtpPortPattern: RegExp = /^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
 
 export interface AdminSettings<T> {
   key: string;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -94,8 +94,8 @@
         "proxy-host": "Proxy host",
         "proxy-host-required": "Proxy host is required.",
         "proxy-port": "Proxy port",
-        "proxy-port-required": "You must supply a proxy port.",
-        "proxy-port-invalid": "That doesn't look like a valid proxy port.",
+        "proxy-port-required": "Proxy port is required.",
+        "proxy-port-range": "Proxy port should be in a range from 1 to 65535.",
         "proxy-user": "Proxy user",
         "proxy-password": "Proxy password",
         "send-test-mail": "Send test mail",