Initial support for CA Certificates for endpoints

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.html

@@ -18,10 +18,12 @@ <h1 class="create-endpoint__section-title">{{endpoint.definition.label}} Informa
     formControlName="createSystemEndpointField" (change)="toggleCreateSystemEndpoint()"
     [ngClass]="{'hide': fixedUrl, 'show': !fixedUrl}">Create a system endpoint (visible to all users)
   </mat-checkbox>
-  <mat-checkbox matInput name="skipSll" formControlName="skipSllField"
-    [ngClass]="{'hide': fixedUrl, 'show': !fixedUrl}">Skip SSL validation for the
-    endpoint
-  </mat-checkbox>
+  <mat-checkbox [disabled]="showCACertField" matInput name="skipSll" formControlName="skipSllField">Skip SSL validation for the endpoint</mat-checkbox>
+  <mat-checkbox matInput (change)="toggleCACertField()">Use a CA Certificate for the endpoint</mat-checkbox>
+  <div [ngClass]="{'create-endpoint__shown': showCACertField}" class="create-endpoint__advanced" spellcheck=false>
+    <span class="create-endpoint__cacert-title">Specify CA Certificate:</span>
+    <textarea rows="10" class="create-endpoint__cacert" matInput formControlName="caCertField" name="caCert"></textarea>
+  </div>
   <div [ngClass]="{'hide': !showAdvancedFields, 'show': showAdvancedFields}" class="create-endpoint__section">
     <mat-checkbox matInput (change)="toggleAdvancedOptions()">Show Advanced Options</mat-checkbox>
     <div [ngClass]="{'create-endpoint__shown': showAdvancedOptions}" class="create-endpoint__advanced">

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.scss

@@ -1,10 +1,12 @@
+$checkbox-margin: 30px;
+
 :host {
   height: 100%;
   width: 100%;
 }
 
 mat-checkbox {
-  padding-top: 40px;
+  padding-top: $checkbox-margin;
 }
 
 form.stepper-form {
@@ -20,14 +22,14 @@ form.stepper-form {
 
 .create-endpoint {
   &__section {
-    margin-top: 40px;
+    margin-top: $checkbox-margin;
 
     &-title {
       font-size: 16px;
     }
   }
   &__sso {
-    margin-top: 40px;
+    margin-top: $checkbox-margin;
   }
   &__advanced {
     display: flex;
@@ -46,6 +48,16 @@ form.stepper-form {
   &__shown {
     height: auto;
   }
+  &__cacert-title {
+    font-size: 14px;
+    margin: 10px 0;
+  }
+  &__cacert {
+    font-family: "Source Code Pro";
+    font-size: 14px;
+    line-break: anywhere;
+    max-width: 580px;
+  } 
 }
 
 .hide {

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.ts

@@ -56,7 +56,9 @@ export class CreateEndpointCfStep1Component extends CreateEndpointHelperComponen
   endpoint: StratosCatalogEndpointEntity;
   show = false;
 
+  showCACertField = false;
   showAdvancedOptions = false;
+  lastSkipSSLValue = false;
 
   constructor(
     private fb: FormBuilder,
@@ -77,6 +79,7 @@ export class CreateEndpointCfStep1Component extends CreateEndpointHelperComponen
       clientIDField: ['', []],
       clientSecretField: ['', []],
       createSystemEndpointField: [true, []],
+      caCertField: ['', []],
     });
 
     const epType = getIdFromRoute(activatedRoute, 'type');
@@ -90,16 +93,24 @@ export class CreateEndpointCfStep1Component extends CreateEndpointHelperComponen
 
   onNext: StepOnNextFunction = () => {
     const { subType, type } = this.endpoint.getTypeAndSubtype();
+
+    // SSL Setttings
+    let sslAllow = this.registerForm.value.skipSllField;
+    if (this.showCACertField) {
+      sslAllow = false;
+    }
+
     return stratosEntityCatalog.endpoint.api.register<ActionState>(
       type,
       subType,
       this.registerForm.value.nameField,
       this.registerForm.value.urlField,
-      this.registerForm.value.skipSllField,
+      sslAllow,
       this.registerForm.value.clientIDField,
       this.registerForm.value.clientSecretField,
       this.registerForm.value.ssoAllowedField,
       this.registerForm.value.createSystemEndpointField,
+      this.registerForm.value.caCertField,
     ).pipe(
       pairwise(),
       filter(([oldVal, newVal]) => (oldVal.busy && !newVal.busy)),
@@ -150,6 +161,16 @@ export class CreateEndpointCfStep1Component extends CreateEndpointHelperComponen
     this.showAdvancedOptions = !this.showAdvancedOptions;
   }
 
+  toggleCACertField() {
+    this.showCACertField = !this.showCACertField;
+    if (this.showCACertField) {
+      this.lastSkipSSLValue = this.registerForm.value.skipSllField;
+      this.registerForm.controls.skipSllField.setValue(false);
+    } else {
+      this.registerForm.controls.skipSllField.setValue(this.lastSkipSSLValue);
+    }
+  }
+
   toggleCreateSystemEndpoint() {
     // wait a tick for validators to adjust to new data in the directive
     setTimeout(() => {

src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint-step/edit-endpoint-step.component.html

@@ -12,12 +12,15 @@ <h1 class="edit-endpoint__section-title">{{definition.label}} Information</h1>
     </mat-form-field>
     <mat-checkbox matInput name="skipSSL" formControlName="skipSSL">Skip SSL validation for the endpoint
     </mat-checkbox>
+    <mat-checkbox checked="showCACertField" matInput (change)="toggleCACertField()">Use a CA Certificate for the endpoint</mat-checkbox>
+    <div [ngClass]="{'edit-endpoint__shown': showCACertField}" class="edit-endpoint__advanced" spellcheck=false>
+      <span class="edit-endpoint__cacert-title">Specify CA Certificate:</span>
+      <textarea rows="10" class="edit-endpoint__cacert" matInput formControlName="caCert" name="caCert"></textarea>
+    </div>
     <div *ngIf="showAdvancedFields" class="edit-endpoint__section">
       <h1 class="edit-endpoint__section-title">Advanced Information (Optional)</h1>
-
       <mat-checkbox matInput name="setClientInfo" formControlName="setClientInfo">Update Client ID and Client Secret
       </mat-checkbox>
-
       <mat-form-field>
         <input matInput id="client_id" name="client_id" formControlName="clientID" placeholder="Client ID" required>
         <mat-error *ngIf="clientID.errors && clientID.errors.required">Client ID is required</mat-error>

src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint-step/edit-endpoint-step.component.scss

@@ -1,20 +1,53 @@
+$checkbox-margin: 30px;
+
 :host {
   flex: 1;
 }
 
 mat-checkbox {
-  padding-top: 40px;
+  padding-top: $checkbox-margin;
+}
+
+form.stepper-form {
+  max-width: unset;
+  mat-form-field,
+  mat-checkbox {
+    max-width: 450px;
+  }
+  P {
+    max-width: unset;
+  }
 }
 
 .edit-endpoint {
   &__section {
-    margin-top: 40px;
+    margin-top: $checkbox-margin;
 
     &-title {
       font-size: 16px;
     }
   }
   &__sso {
-    margin-top: 40px;
+    margin-top: $checkbox-margin;
+  }
+  &__advanced {
+    display: flex;
+    flex-direction: column;
+    height: 0;
+    margin-left: 24px;
+    overflow: hidden;
+  }
+  &__cacert-title {
+    font-size: 14px;
+    margin: 10px 0;
+  }
+  &__cacert {
+    font-family: "Source Code Pro";
+    font-size: 14px;
+    line-break: anywhere;
+    max-width: 580px;
+  }  
+  &__shown {
+    height: auto;
   }
 }

src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint-step/edit-endpoint-step.component.ts

@@ -43,6 +43,8 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
   formChangeSub: Subscription;
   setClientInfo = false;
   show = false;
+  showCACertField = false;
+  lastSkipSSLValue = false;
 
   constructor(
     activatedRoute: ActivatedRoute,
@@ -52,6 +54,7 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
       url: new FormControl('', [Validators.required as any]),
       skipSSL: new FormControl(false),
       setClientInfo: new FormControl(false),
+      caCert: new FormControl(''),
       clientID: new FormControl(''),
       clientSecret: new FormControl(''),
       allowSSO: new FormControl(false),
@@ -90,6 +93,9 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
       first()
     ).subscribe(endpoint => {
       this.setAdvancedFields(endpoint);
+      this.lastSkipSSLValue = endpoint.skip_ssl_validation;
+      this.showCACertField = !!endpoint.ca_cert;
+      this.updateSSLFieldCheckbox();
       this.editEndpoint.setValue({
         name: endpoint.name,
         url: getFullEndpointApiUrl(endpoint),
@@ -130,17 +136,20 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
     return this.endpoint$.pipe(
       first(),
       switchMap(endpoint => {
+        const caCert = this.showCACertField ? this.editEndpoint.value.caCert : undefined;
+        const skipSSL = this.showCACertField ? false : this.editEndpoint.value.skipSSL;
         return stratosEntityCatalog.endpoint.api.update<ActionState>(
           this.endpointID,
           this.endpointID, {
           endpointType: endpoint.cnsi_type,
           id: this.endpointID,
           name: this.editEndpoint.value.name,
-          skipSSL: this.editEndpoint.value.skipSSL,
+          skipSSL,
           setClientInfo: this.editEndpoint.value.setClientInfo,
           clientID: this.editEndpoint.value.clientID,
           clientSecret: this.editEndpoint.value.clientSecret,
           allowSSO: this.editEndpoint.value.allowSSO,
+          caCert,
         }
         ).pipe(
           pairwise(),
@@ -170,4 +179,22 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
     this.endpointTypeSupportsSSO = isCloudFoundry;
   }
 
+  toggleCACertField() {
+    this.showCACertField = !this.showCACertField;
+    if (this.showCACertField) {
+      this.lastSkipSSLValue = this.editEndpoint.value.skipSSL;
+      this.editEndpoint.controls.skipSSL.setValue(false);
+    } else {
+      this.editEndpoint.controls.skipSSL.setValue(this.lastSkipSSLValue);
+    }
+    this.updateSSLFieldCheckbox();
+  }
+
+  private updateSSLFieldCheckbox() {
+    if (this.showCACertField) {
+      this.editEndpoint.controls.skipSSL.disable();
+    } else {
+      this.editEndpoint.controls.skipSSL.enable();
+    }
+  }
 }

src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.html

@@ -14,10 +14,10 @@
         </div>
       </mat-tab>
       <mat-tab label="Certificate Content">
-        <div class="kube-certs-auth__form__content">
-          <span>Specify Certificate:</span>
+        <div class="kube-certs-auth__form__content" spellcheck=false>
+          <span class="kube-certs-auth__label">Specify Certificate:</span>
           <textarea matInput formControlName="cert"></textarea>
-          <span>Specify Certificate key:</span>
+          <span class="kube-certs-auth__label">Specify Certificate key:</span>
           <textarea matInput formControlName="certKey"></textarea>
         </div>
       </mat-tab>

src/frontend/packages/kubernetes/src/kubernetes/auth-forms/kubernetes-certs-auth-form/kubernetes-certs-auth-form.component.scss

@@ -19,7 +19,13 @@
       textarea {
         max-height: 75px;
         min-height: 60px;
+        font-family: "Source Code Pro";
+        font-size: 14px;
+        line-break: anywhere;
       }
     }
+    &__label {
+      font-size: 14px;
+    }
   }
 }

src/frontend/packages/store/src/actions/endpoint.actions.ts

@@ -216,6 +216,7 @@ export class RegisterEndpoint extends SingleBaseEndpointAction {
     public clientSecret = '',
     public ssoAllowed: boolean,
     public createSystemEndpoint: boolean,
+    public caCert: string = '',
   ) {
     super(
       REGISTER_ENDPOINTS,
@@ -242,6 +243,7 @@ export class UpdateEndpoint extends SingleBaseEndpointAction {
     public clientID: string,
     public clientSecret: string,
     public allowSSO: boolean,
+    public caCert: string = '',
   ) {
     super(
       UPDATE_ENDPOINT,

src/frontend/packages/store/src/effects/endpoint.effects.ts

@@ -187,15 +187,15 @@ export class EndpointsEffect {
   @Effect() register$ = this.actions$.pipe(
     ofType<RegisterEndpoint>(REGISTER_ENDPOINTS),
     mergeMap(action => {
-
       const paramsObj = {
         cnsi_name: action.name,
         api_endpoint: action.endpoint,
         skip_ssl_validation: action.skipSslValidation ? 'true' : 'false',
-        cnsi_client_id: action.clientID,
-        cnsi_client_secret: action.clientSecret,
+        cnsi_client_id: action.clientID || '',
+        cnsi_client_secret: action.clientSecret || '',
         sso_allowed: action.ssoAllowed ? 'true' : 'false',
-        create_system_endpoint: action.createSystemEndpoint ? 'true' : 'false'
+        create_system_endpoint: action.createSystemEndpoint ? 'true' : 'false',
+        ca_cert: action.caCert || '',
       };
       // Do not include sub_type in HttpParams if it doesn't exist (falsies get stringified and sent)
       if (action.endpointSubType) {
@@ -230,9 +230,10 @@ export class EndpointsEffect {
         name: action.name,
         skipSSL: action.skipSSL,
         setClientInfo: action.setClientInfo,
-        clientID: action.clientID,
-        clientSecret: action.clientSecret,
+        clientID: action.clientID || '',
+        clientSecret: action.clientSecret || '',
         allowSSO: action.allowSSO,
+        ca_cert: action.caCert || '',
       };
 
       // Encode auth values in the body, not the query string

src/frontend/packages/store/src/stratos-action-builders.ts

@@ -61,6 +61,7 @@ export interface EndpointActionBuilder extends OrchestratedActionBuilders {
     clientSecret?: string,
     ssoAllowed?: boolean,
     createSystemEndpointField?: boolean,
+    caCert?: string,
   ) => RegisterEndpoint;
   update: (
     guid: string,
@@ -74,6 +75,7 @@ export interface EndpointActionBuilder extends OrchestratedActionBuilders {
       clientID: string,
       clientSecret: string,
       allowSSO: boolean,
+      caCert?: string,
     }
   ) => UpdateEndpoint;
 }
@@ -106,6 +108,7 @@ export const endpointActionBuilder: EndpointActionBuilder = {
     clientSecret?: string,
     ssoAllowed?: boolean,
     createSystemEndpoint?: boolean,
+    caCert?: string,
   ) => new RegisterEndpoint(
     endpointType,
     endpointSubType,
@@ -116,6 +119,7 @@ export const endpointActionBuilder: EndpointActionBuilder = {
     clientSecret,
     ssoAllowed,
     createSystemEndpoint,
+    caCert,
   ),
   update: (
     guid: string,
@@ -129,6 +133,7 @@ export const endpointActionBuilder: EndpointActionBuilder = {
       clientID: string,
       clientSecret: string,
       allowSSO: boolean,
+      caCert?: string,
     }
   ) => new UpdateEndpoint(
     args.endpointType,
@@ -138,7 +143,8 @@ export const endpointActionBuilder: EndpointActionBuilder = {
     args.setClientInfo,
     args.clientID,
     args.clientSecret,
-    args.allowSSO
+    args.allowSSO,
+    args.caCert,
   ),
 };