From 345486ba3fc150e8a4ecc23e1a5cbb35ddd7c69d Mon Sep 17 00:00:00 2001
From: JohanDelValleV <johandvv@gmail.com>
Date: Mon, 7 Dec 2020 13:53:36 -0600
Subject: [PATCH 1/2] added dynamic textfields for nonProxyHosts

---
 .gitignore                                    |  1 +
 .../manage-settings.component.html            | 42 +++++++++-------
 .../manage-settings.component.ts              | 48 +++++++++++++------
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/.gitignore b/.gitignore
index 4c3c0ae..6824fa0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,3 +46,4 @@ src/aql/*
 
 # Avoid unintentionally changing the environment files.
 src/environments/*
+debug.log
diff --git a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html
index 8052827..7eb047a 100644
--- a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts
index ba2a62a..43c9caf 100644
--- a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts
+++ b/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);
     }
 

From 5abb2da354b177f4f3c21c06c47e77b1c2d85d77 Mon Sep 17 00:00:00 2001
From: JohanDelValleV <johandvv@gmail.com>
Date: Mon, 7 Dec 2020 18:09:45 -0600
Subject: [PATCH 2/2] Resolved changes on draft PR

---
 .../manage-settings.component.html            | 31 ++++++++++--------
 .../manage-settings.component.ts              | 32 +++++++------------
 2 files changed, 29 insertions(+), 34 deletions(-)

diff --git a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html
index 7eb047a..48c098e 100644
--- a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html
+++ b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.html
@@ -1,6 +1,9 @@
 <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">
@@ -60,9 +63,13 @@
                     <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>
@@ -102,8 +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>
@@ -165,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>
@@ -193,23 +199,20 @@
                             </mat-error>
                         </mat-form-field>
                     </div>
-                    <div *ngIf="showNonProxyHostButton()">
+                    <div formArrayName="nonProxyHosts">
                         <button mat-raised-button color="primary" type="button" (click)="addNonProxyHost()">
-                            Add nonProxyHost
+                            Add non-proxy hosts
                         </button>
                         <div fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%"
-                            *ngFor="let control of nonProxyHost.controls; index as i">
+                        *ngFor="let control of nonProxyHosts.controls; let i = index" fxLayout.lt-md="column" fxLayout="row" fxLayoutGap="3%">
                             <mat-form-field>
-                                <input matInput placeholder="Host" [formControl]="nonProxyHost.controls[i]">
+                                <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>
-
-                    <!-- TODO: nonProxyHosts similar to CORS origins. -->
-
                 </div>
             </mat-tab>
         </mat-tab-group>
diff --git a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts
index 43c9caf..1fb3d86 100644
--- a/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts
+++ b/src/app/modules/server-settings/pages/manage-settings/manage-settings.component.ts
@@ -19,7 +19,7 @@ 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'] }
     ];
@@ -76,6 +76,7 @@ export class ManageSettingsComponent implements OnInit, OnDestroy {
             })
         });
 
+        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(
@@ -127,23 +128,6 @@ 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);
@@ -156,9 +140,17 @@ 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);
     }
+    
+    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 ||