Fix Security step UX issues (#314) (#319)

- always show server certificates section - set server certificate key size as required - add certificate key size unit - add missing 'X.509' in labels
vmware · Jan 19, 2018 · 2861cd5 · 2861cd5
1 parent 086a86d
commit 2861cd5
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 27 deletions.
diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/create-vch-wizard.component.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/create-vch-wizard.component.html
@@ -116,7 +116,7 @@
 
   </clr-wizard-page>
 
-  <clr-wizard-page [clrWizardPageNextDisabled]="securityStep.form.get('useClientAuth').value && securityStep.form.invalid"
+  <clr-wizard-page [clrWizardPageNextDisabled]="securityStep.form.invalid"
                    clrWizardPagePreventDefault="true"
                    (clrWizardPageOnLoad)="onPageLoad(securityStep.onPageLoad())"
                    (clrWizardPageOnCancel)="onCancel()"

diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/create-vch-wizard.component.ts b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/create-vch-wizard.component.ts
@@ -449,15 +449,19 @@ export class CreateVchWizardComponent implements OnInit {
       auth.client = {'certificate_authorities': payload.security['tlsCa'].map(cert => ({pem: cert.content}))};
     }
 
-    if (payload.security.certificateKeySize) {
+    if (payload.security.tlsCname) {
       auth.server = {
         generate: {
           size: {
             value: parseInt(payload.security.certificateKeySize, 10),
             units: 'bit'
           },
           cname: payload.security.tlsCname
-        }
+        },
+      };
+
+      if (payload.security.organization) {
+        auth.server.generate['organization'] = [payload.security.organization]
       }
     } else if (payload.security.tlsServerCert) {
       auth.server = {
@@ -469,7 +473,7 @@ export class CreateVchWizardComponent implements OnInit {
         generate: {
           size: {
             value: 2048,
-            units: 'bits'
+            units: 'bit'
           },
           organization: [payload.general.name],
           cname: payload.general.name

diff --git a/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html b/h5c/vic/src/vic-webapp/src/app/create-vch-wizard/registry-access/registry-access.html
@@ -112,7 +112,7 @@
     <div formArrayName="registryCas" *ngFor="let registryCa of form.get('registryCas')['controls']; index as i; last as isLast">
       <div [formGroupName]="i" class="form-group row mb-0">
         <div class="col-xs-6 text-truncate">
-          <span class="text-muted" *ngIf="!registryCaContents[i]">Select certificate pem file</span>
+          <span class="text-muted" *ngIf="!registryCaContents[i]">Select X.509 certificate pem file</span>
           <span *ngIf="registryCaContents[i]">
             {{ registryCaContents[i].name }}, expires: {{ registryCaContents[i].expires | date : 'mediumDate'}}
           </span>

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
@@ -17,7 +17,7 @@ import { Component, Input } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { CreateVchWizardService } from '../create-vch-wizard.service';
-import { numberPattern, whiteListRegistryPattern } from '../../shared/utils/validators';
+import { numberPattern } from '../../shared/utils/validators';
 import {
   parseCertificatePEMFileContent,
   CertificateInfo,
@@ -53,6 +53,7 @@ export class SecurityComponent {
       ]],
       organization: '',
       certificateKeySize: ['2048', [
+        Validators.required,
         Validators.pattern(numberPattern)
       ]],
       tlsServerCert: ['', [
@@ -129,10 +130,12 @@ export class SecurityComponent {
       .subscribe(v => {
         if (v === 'autogenerated') {
           this.form.get('tlsCname').enable();
+          this.form.get('certificateKeySize').enable();
           this.form.get('tlsServerCert').disable();
           this.form.get('tlsServerKey').disable();
         } else {
           this.form.get('tlsCname').disable();
+          this.form.get('certificateKeySize').disable();
           this.form.get('tlsServerCert').enable();
           this.form.get('tlsServerKey').enable();
         }
@@ -160,27 +163,26 @@ export class SecurityComponent {
     const certKeySizeValue = this.form.get('certificateKeySize').value;
     const useClientAuthValue = this.form.get('useClientAuth').value;
 
-    // Docker API Access
+    if (serverCertSourceValue === 'autogenerated') {
+      if (tlsCnameValue) {
+        results['tlsCname'] = tlsCnameValue;
+      }
+      if (orgValue) {
+        results['organization'] = orgValue;
+      }
+      if (certKeySizeValue) {
+        results['certificateKeySize'] = certKeySizeValue;
+      }
+    } else {
+      results['tlsServerCert'] = this.tlsServerCertContents;
+      results['tlsServerKey'] = this.tlsServerKeyContents;
+    }
+
     if (!useClientAuthValue) {
       // if security is off, use --no-tls-verify
       results['noTlsverify'] = true;
       results['tlsCa'] = [];
     } else {
-      if (serverCertSourceValue === 'autogenerated') {
-        if (tlsCnameValue) {
-          results['tlsCname'] = tlsCnameValue;
-        }
-        if (orgValue) {
-          results['organization'] = orgValue;
-        }
-        if (certKeySizeValue) {
-          results['certificateKeySize'] = certKeySizeValue;
-        }
-      } else {
-        results['tlsServerCert'] = this.tlsServerCertContents;
-        results['tlsServerKey'] = this.tlsServerKeyContents;
-      }
-
       results['tlsCa'] = this.tlsCaContents;
     }
 

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
@@ -36,7 +36,7 @@
         <div [formGroupName]="i" class="form-group row mb-0">
           <div class="col-xs-6 text-truncate">
             <span class="text-muted" *ngIf="!tlsCaContents[i]" [ngClass]="{'required': i === 0}">
-              Select certificate pem file
+              Select X.509 certificate pem file
             </span>
             <span *ngIf="tlsCaContents[i]">
               {{ tlsCaContents[i].name }}, expires: {{ tlsCaContents[i].expires | date : 'mediumDate'}}
@@ -61,7 +61,7 @@
       </div>
     </div>
   </section>
-  <section class="form-block" id='security' *ngIf="form.get('useClientAuth').value">
+  <section class="form-block" id="security">
     <label>Server Certificates</label>
     <div class="form-group row">
       <div class="col-xs-3">
@@ -89,7 +89,7 @@
                  role="tooltip"
                  class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
                  [class.invalid]="form.get('tlsCname').invalid && (form.get('tlsCname').dirty || form.get('tlsCname').touched)">
-            <input id="tls-cname" class="form-control" type="text" formControlName="tlsCname">
+            <input id="tls-cname" class="form-control" type="text" placeholder="*.local" formControlName="tlsCname">
             <span class="tooltip-content" *ngIf="form.get('tlsCname').hasError('required')">
               Common Name (CN) cannot be empty
             </span>
@@ -111,20 +111,24 @@
       </div>
       <div class="form-group row">
         <div class="col-xs-3">
-          <label for="certificate-key-size">Certificate key size</label>
+          <label class="required" for="certificate-key-size">Certificate key size</label>
         </div>
-        <div class="col-xs-4">
+        <div class="col-xs-2">
           <label for="certificate-key-size"
                  aria-haspopup="true"
                  role="tooltip"
                  class="form-control tooltip tooltip-validation tooltip-md tooltip-top-left"
                  [class.invalid]="form.get('certificateKeySize').invalid && (form.get('certificateKeySize').dirty || form.get('certificateKeySize').touched)">
             <input id="certificate-key-size" class="form-control" type="text" formControlName="certificateKeySize">
+            <span class="tooltip-content" *ngIf="form.get('certificateKeySize').hasError('required')">
+              Certificate key size cannot be empty
+            </span>
             <span class="tooltip-content" *ngIf="form.get('certificateKeySize').hasError('pattern')">
               Certificate key size should be numeric
             </span>
           </label>
         </div>
+        <span>bits</span>
       </div>
     </div>
     <div *ngIf="form.get('serverCertSource').value === 'existing'">