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

@@ -1,9 +1,6 @@
 <app-page-container [breadcrumbs]="breadcrumbs" [loading]="loading$">
 
-    <form fxLayout="column"
-          class="inputFullWidth"
-          [formGroup]="settingsForm"
-          (submit)="save()">
+    <form fxLayout="column" class="inputFullWidth" [formGroup]="settingsForm" (submit)="save()">
 
         <mat-tab-group [dynamicHeight]="true">
             <mat-tab label="Basic settings">
@@ -14,7 +11,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>
@@ -62,13 +60,9 @@
                     <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="10%">
                         <mat-form-field floatLabel="always">
                             <mat-label>Origins</mat-label>
-                            <textarea matInput
-                                      cdkTextareaAutosize
-                                      #autosize="cdkTextareaAutosize"
-                                      cdkAutosizeMinRows="1"
-                                      cdkAutosizeMaxRows="15"
-                                      formControlName="allowedOrigins"
-                            ></textarea>
+                            <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize"
+                                cdkAutosizeMinRows="1" cdkAutosizeMaxRows="15"
+                                formControlName="allowedOrigins"></textarea>
                             <mat-hint>Insert one origin per line</mat-hint>
                             <mat-error>
                                 <form-field-errors formControlName="allowedOrigins"></form-field-errors>
@@ -108,7 +102,8 @@
                         </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 +131,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 >
@@ -198,6 +193,20 @@
                             </mat-error>
                         </mat-form-field>
                     </div>
+                    <div *ngIf="showNonProxyHostButton()">
+                        <button mat-raised-button color="primary" type="button" (click)="addNonProxyHost()">
+                            Add nonProxyHost
+                        </button>
+                        <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%"
+                            *ngFor="let control of nonProxyHost.controls; index as i">
+                            <mat-form-field>
+                                <input matInput placeholder="Host" [formControl]="nonProxyHost.controls[i]">
+                                <button mat-icon-button matSuffix (click)="removeNonProxyHost(i)">
+                                    <i class="ion-md-trash"></i>
+                                </button>
+                            </mat-form-field>
+                        </div>
+                    </div>
 
                     <!-- TODO: nonProxyHosts similar to CORS origins. -->
 
@@ -210,11 +219,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',
@@ -21,16 +21,16 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
     settingsForm: FormGroup;
 
     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,7 +72,7 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
                 type: new FormControl(),
                 username: new FormControl(),
                 password: new FormControl(),
-                nonProxyHosts: new FormControl()
+                nonProxyHosts: new FormArray([])
             })
         });
 
@@ -127,6 +127,23 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
         this.destroy.complete();
     }
 
+    get nonProxyHost(): FormArray {
+        return this.settingsForm.get('proxyConfigurationForm.nonProxyHosts') as FormArray;
+    }
+
+    addNonProxyHost() {
+        const group = this.settingsForm.get('proxyConfigurationForm');
+        group['controls']['nonProxyHosts'].push(new FormControl(''));
+    }
+
+    removeNonProxyHost(index: number) {
+        this.nonProxyHost.removeAt(index);
+    }
+
+    showNonProxyHostButton() {
+        return this.settingsForm.get('proxyConfigurationForm').value.type === undefined;
+    }
+
     getCorsConfigurationGroup(field = null) {
         const group = this.settingsForm.get('corsConfigurationForm');
         return field === null ? group : group.get(field);
@@ -139,6 +156,7 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
 
     getProxyConfigurationGroup(field = null) {
         const group = this.settingsForm.get('proxyConfigurationForm');
+        console.log(group);
         return field === null ? group : group.get(field);
     }