added dynamic textfields for nonProxyHosts

.gitignore

@@ -46,3 +46,4 @@ src/aql/*
 
 # Avoid unintentionally changing the environment files.
 src/environments/*
+debug.log

src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html

@@ -14,7 +14,8 @@
                 <div class="tabContent">
                     <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="10%">
                         <mat-form-field>
-                            <input matInput placeholder="Instance name" formControlName="instanceName" autocomplete="off">
+                            <input matInput placeholder="Instance name" formControlName="instanceName"
+                                autocomplete="off">
                             <mat-hint>Give this instance a cool name.</mat-hint>
                             <mat-error>
                                 <form-field-errors formControlName="instanceName"></form-field-errors>
@@ -108,7 +109,7 @@
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-select placeholder="Encryption" formControlName="connection" [disableOptionCentering]="true" >
+                            <mat-select placeholder="Encryption" formControlName="connection" [disableOptionCentering]="true">
                                 <mat-option>None</mat-option>
                                 <mat-option value="plain">Plain</mat-option>
                                 <mat-option value="ssl">SSL</mat-option>
@@ -136,7 +137,7 @@
                         </mat-form-field>
                     </div>
 
-<!--
+                    <!--
                     // TODO: Make it possible to send a testing email when we have support for this.
                     <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%">
                         <div >
@@ -170,7 +171,7 @@
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-select placeholder="Type" formControlName="type" [disableOptionCentering]="true">
+                            <mat-select placeholder="Type" formControlName="type" [disableOptionCentering]="true" #proxyType>
                                 <mat-option>None</mat-option>
                                 <mat-option value="DIRECT">Direct</mat-option>
                                 <mat-option value="HTTP">HTTP</mat-option>
@@ -198,9 +199,20 @@
                             </mat-error>
                         </mat-form-field>
                     </div>
-
-                    <!-- TODO: nonProxyHosts similar to CORS origins. -->
-
+                    <div formArrayName="nonProxyHosts">
+                        <button mat-raised-button color="primary" type="button" (click)="addNonProxyHost()">
+                            Add non-proxy hosts
+                        </button>
+                        <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%"
+                        *ngFor="let control of nonProxyHosts.controls; let i = index" fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%">
+                            <mat-form-field>
+                                <input matInput placeholder="Host" [formControlName]="i">
+                                <button mat-icon-button matSuffix (click)="removeNonProxyHost(i)">
+                                    <i class="ion-md-trash"></i>
+                                </button>
+                            </mat-form-field>
+                        </div>
+                    </div>
                 </div>
             </mat-tab>
         </mat-tab-group>
@@ -210,11 +222,12 @@
                 Back
             </button>
 
-            <button mat-raised-button color="primary" type="submit" [disabled]="!settingsForm.valid || (loading$ | async)">
+            <button mat-raised-button color="primary" type="submit"
+                [disabled]="!settingsForm.valid || (loading$ | async)">
                 Save
             </button>
         </div>
         <div>&nbsp;</div>
 
     </form>
-</app-page-container>
+</app-page-container>

src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts

@@ -1,13 +1,13 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {BehaviorSubject, of, Subject} from 'rxjs';
-import {Actions, Store} from '@ngxs/store';
-import {catchError} from 'rxjs/operators';
-import {ToastrService} from 'ngx-toastr';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { BehaviorSubject, of, Subject } from 'rxjs';
+import { Actions, Store } from '@ngxs/store';
+import { catchError } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
 
-import {Breadcrumb} from '../../../../shared/layout/components/breadcrumb/breadcrumb.model';
-import {ServerSettingsService} from '../../services/server-settings.service';
-import {ApiResponse, handleFormError} from '../../../core/core.model';
+import { Breadcrumb } from '../../../../shared/layout/components/breadcrumb/breadcrumb.model';
+import { ServerSettingsService } from '../../services/server-settings.service';
+import { ApiResponse, handleFormError } from '../../../core/core.model';
 
 @Component({
     selector: 'app-manage-settings',
@@ -19,18 +19,18 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
     loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
     settingsForm: FormGroup;
-
+    nonProxyHosts: FormArray;
     breadcrumbs: Breadcrumb[] = [
-        {label: 'Global settings', url: ['/admin/server-settings']}
+        { label: 'Global settings', url: ['/admin/server-settings'] }
     ];
 
     private destroy = new Subject();
 
     constructor(private actions: Actions,
-                private cdr: ChangeDetectorRef,
-                private service: ServerSettingsService,
-                private store: Store,
-                private notify: ToastrService) {
+        private cdr: ChangeDetectorRef,
+        private service: ServerSettingsService,
+        private store: Store,
+        private notify: ToastrService) {
     }
 
     ngOnInit() {
@@ -72,10 +72,11 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
                 type: new FormControl(),
                 username: new FormControl(),
                 password: new FormControl(),
-                nonProxyHosts: new FormControl()
+                nonProxyHosts: new FormArray([])
             })
         });
 
+        this.nonProxyHosts = this.settingsForm.get('proxyConfigurationForm.nonProxyHosts') as FormArray;
         let valueBeforeDisable = '';
         this.getCorsConfigurationGroup('corsAllowAll').valueChanges.subscribe(value => {
             const allowedOrigins = this.getCorsConfigurationGroup('allowedOrigins');
@@ -103,7 +104,7 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
         });
 
         this.loading$.next(true);
-
+        
         this.service
             .getSettings()
             .pipe(
@@ -141,6 +142,15 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
         const group = this.settingsForm.get('proxyConfigurationForm');
         return field === null ? group : group.get(field);
     }
+
+    addNonProxyHost() {
+        this.nonProxyHosts.push(new FormControl('', Validators.required));
+        this.cdr.detectChanges();
+    }
+
+    removeNonProxyHost(index: number) {
+        this.nonProxyHosts.removeAt(index);
+    }
 
     basicSettingsInvalid() {
         return this.settingsForm.get('instanceName').invalid ||