Update client certificates validations in Create wizard (#242) (#245)

* Update client certificates validations in Create wizard * Fix E2E tests for security step.
vmware · Dec 14, 2017 · ee639cf · ee639cf
1 parent 4f5cd2b
commit ee639cf
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/h5c/vic/src/vic-webapp/e2e/app.e2e-spec.ts b/h5c/vic/src/vic-webapp/e2e/app.e2e-spec.ts
@@ -130,6 +130,7 @@ describe('vic-webapp', () => {
   });
 
   it('should complete security step', () => {
+    page.disableSecureAccess();
     page.clickByText('Button', 'Next');
     // check if we made it to ops user section
     page.waitForElementToBePresent(sectionOpsUser);

diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.component.spec.ts b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.component.spec.ts
@@ -72,8 +72,8 @@ describe('SecurityComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should start with a valid form',  () => {
-    expect(component.form.valid).toBe(true);
+  it('should start with a invalid form',  () => {
+    expect(component.form.invalid).toBe(true);
   });
 
   it('should validate advanced fields changes', () => {

diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.component.ts b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.component.ts
@@ -79,6 +79,14 @@ export class SecurityComponent {
 
     // Since useWhitelistRegistry is false by default, disable whitelistRegistries validations
     this.form.get('whitelistRegistries').disable();
+
+    this.ensureFirstTlsCaIsRequired();
+  }
+
+  ensureFirstTlsCaIsRequired() {
+    const firstTlsCa = (this.form.get('tlsCas') as FormArray).at(0).get('tlsCa');
+    firstTlsCa.setValidators([Validators.required]);
+    firstTlsCa.updateValueAndValidity();
   }
 
   addNewFormArrayEntry(controlName: string) {
@@ -137,6 +145,7 @@ export class SecurityComponent {
         this.tlsCaContents.shift();
         control.controls[index].reset();
       }
+      this.ensureFirstTlsCaIsRequired();
     } else if (controlName === 'registryCas') {
       if (index > 0 || (index === 0 && control.controls.length > 1)) {
         control.removeAt(index);
@@ -181,6 +190,15 @@ export class SecurityComponent {
         }
       });
 
+    this.form.get('useClientAuth').valueChanges
+      .subscribe(v => {
+        if (v) {
+          this.form.get('tlsCas').enable();
+        } else {
+          this.form.get('tlsCas').disable();
+        }
+      });
+
     this._isSetup = true;
   }
 
@@ -347,6 +365,10 @@ export class SecurityComponent {
           } else {
             targetArray.push(value);
           }
+
+          if (targetField === 'tlsCas') {
+            (this.form.get('tlsCas') as FormArray).at(index).get('tlsCa').setValue(filename);
+          }
         };
       }
     };

diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/security/security.html
@@ -273,16 +273,18 @@
                 <div [formGroupName]="i" class="form-group row mb-0">
                   <div class="col-xs-6 text-truncate">
 
-                    <span class="text-muted" *ngIf="!tlsCaContents[i]">Select certificate pem file</span>
+                    <span class="text-muted" *ngIf="!tlsCaContents[i]" [ngClass]="{'required': i === 0}">
+                      Select certificate pem file
+                    </span>
                     <span *ngIf="tlsCaContents[i]">
-                          {{ tlsCaContents[i].name }}, expires: {{ tlsCaContents[i].expires | date : 'mediumDate'}}
-                        </span>
+                      {{ tlsCaContents[i].name }}, expires: {{ tlsCaContents[i].expires | date : 'mediumDate'}}
+                    </span>
 
                     <input id="tls-ca-{{i}}"
                           class="hidden-xs-up"
                           type="file"
-                          formControlName="tlsCa"
                           (change)="addFileContent($event, 'tlsCas', i, isLast)">
+                    <input type="hidden" formControlName="tlsCa">
 
                   </div>
                   <div class="col-xs px-0 add-remove-actions">