feat(cert): ce teasers for ca cert [EE-5252] (#8769)

app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.html

@@ -11,7 +11,10 @@
     <div class="actionBar">
       <form class="form-horizontal" name="addUserHelmRepoForm">
         <div class="form-group">
-          <span class="col-sm-12 text-muted small"> Add a Helm repository. All Helm charts in the repository will be added to the list. </span>
+          <span class="col-sm-12 text-muted small">
+            <pr-icon icon="'info'" mode="'primary'"></pr-icon>
+            Add a Helm repository. All Helm charts in the repository will be added to the list.
+          </span>
         </div>
 
         <div class="form-group mb-2">

app/portainer/services/api/sslService.js

@@ -13,7 +13,7 @@ function SSLServiceFactory(SSL) {
     return SSL.get().$promise;
   }
 
-  function upload(httpEnabled, cert, key) {
+  function upload(SSLPayload) {
-    return SSL.upload({ httpEnabled, cert, key }).$promise;
+    return SSL.upload(SSLPayload).$promise;
   }
 }

app/portainer/settings/general/index.js

@@ -1,5 +1,6 @@
 import angular from 'angular';
 
 import { sslCertificate } from './ssl-certificate';
+import { sslCaFileSettings } from './ssl-ca-file-settings';
 
-export default angular.module('portainer.settings.general', []).component('sslCertificateSettings', sslCertificate).name;
+export default angular.module('portainer.settings.general', []).component('sslCertificateSettings', sslCertificate).component('sslCaFileSettings', sslCaFileSettings).name;

app/portainer/settings/general/ssl-ca-file-settings/index.js

@@ -0,0 +1,6 @@
+import controller from './ssl-ca-file-settings-controller.js';
+
+export const sslCaFileSettings = {
+  templateUrl: './ssl-ca-file-settings.html',
+  controller,
+};

app/portainer/settings/general/ssl-ca-file-settings/ssl-ca-file-settings-controller.js

@@ -0,0 +1,9 @@
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+class SslCaFileSettingsController {
+  /* @ngInject */
+  constructor() {
+    this.limitedFeature = FeatureId.CA_FILE;
+  }
+}
+
+export default SslCaFileSettingsController;

app/portainer/settings/general/ssl-ca-file-settings/ssl-ca-file-settings.html

@@ -0,0 +1,43 @@
+<div class="be-indicator-container limited-be">
+  <div class="overlay">
+    <div class="limited-be-link vertical-center"
+      ><be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator
+      ><portainer-tooltip message="'This feature is currently limited to Business Edition users only. '"></portainer-tooltip
+    ></div>
+    <div class="limited-be-content">
+      <rd-widget>
+        <rd-widget-header icon="key" title-text="Certificate Authority file for Kubernetes Helm repositories"></rd-widget-header>
+        <rd-widget-body>
+          <form class="form-horizontal" name="$ctrl.sslForm">
+            <span class="small text-muted vertical-center mb-3">
+              <pr-icon icon="'info'" mode="'primary'"></pr-icon>
+              Provide an additional CA file containing certificate(s) for HTTPS connections to Helm repositories.
+            </span>
+
+            <!-- SSL Cert -->
+            <div class="form-group">
+              <div class="col-sm-12 flex items-center">
+                <span class="space-right control-label col-sm-3 col-lg-2 !p-0 text-left">
+                  CA File
+                  <portainer-tooltip message="'Select a CA file containing your X.509 certificate(s), commonly a crt, cer or pem file.'"></portainer-tooltip>
+                </span>
+                <button class="btn btn-sm btn-primary !ml-0"> Select a file </button>
+                <span class="ml-1 flex h-full items-center">
+                  <pr-icon icon="'x-circle'" class-name="'icon-danger'"></pr-icon>
+                </span>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <div class="col-sm-12">
+                <button type="button" class="btn btn-primary btn-sm !ml-0">
+                  <span>Apply changes</span>
+                </button>
+              </div>
+            </div>
+          </form>
+        </rd-widget-body>
+      </rd-widget>
+    </div>
+  </div>
+</div>

app/portainer/settings/general/ssl-certificate/ssl-certificate.controller.js

@@ -21,9 +21,8 @@ class SslCertificateController {
       reloadingPage: false,
     };
 
-    const pemPattern = '.pem';
+    this.certFilePattern = `.pem,.crt,.cer,.cert`;
-    this.certFilePattern = `${pemPattern},.crt,.cer,.cert`;
+    this.keyFilePattern = `.pem,.key`;
-    this.keyFilePattern = `${pemPattern},.key`;
 
     this.save = this.save.bind(this);
     this.onChangeForceHTTPS = this.onChangeForceHTTPS.bind(this);
@@ -46,7 +45,7 @@ class SslCertificateController {
         const cert = this.formValues.certFile ? await this.formValues.certFile.text() : null;
         const key = this.formValues.keyFile ? await this.formValues.keyFile.text() : null;
         const httpEnabled = !this.formValues.forceHTTPS;
-        await this.SSLService.upload(httpEnabled, cert, key);
+        await this.SSLService.upload({ httpEnabled, cert, key });
 
         await new Promise((resolve) => setTimeout(resolve, 2000));
         location.reload();

app/portainer/settings/general/ssl-certificate/ssl-certificate.html

@@ -16,22 +16,33 @@
               label="'Force HTTPS only'"
               on-change="($ctrl.onChangeForceHTTPS)"
               field-class="'col-sm-12'"
-              label-class="'col-sm-2'"
+              label-class="'col-sm-3 col-lg-2'"
             ></por-switch-field>
           </div>
 
-          <div class="form-group">
+          <span class="small text-muted vertical-center my-3">
-            <span class="col-sm-12 control-label"> Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections. </span>
+            <pr-icon icon="'info'" mode="'primary'"></pr-icon>
-          </div>
+            Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections.
+          </span>
 
+          <!-- SSL Cert -->
           <div class="form-group">
-            <span class="col-sm-12"> Upload a X.509 certificate, commonly a crt, a cer, or a pem file. </span>
+            <div class="col-sm-12 flex items-center">
-          </div>
+              <span class="space-right control-label col-sm-3 col-lg-2 !p-0 text-left">
-
+                SSL/TLS certificate
-          <div class="form-group">
+                <portainer-tooltip message="'Select an X.509 certificate file, commonly a crt, cer or pem file.'"></portainer-tooltip>
-            <div class="col-sm-12">
+              </span>
-              <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.certFile" ngf-pattern="$ctrl.certFilePattern" name="certFile"> Select file </button>
+              <button
-              <span style="margin-left: 5px">
+                class="btn btn-sm btn-primary !ml-0"
+                ngf-select
+                ng-model="$ctrl.formValues.certFile"
+                ngf-pattern="$ctrl.certFilePattern"
+                name="certFile"
+                ngf-accept="$ctrl.certFilePattern"
+              >
+                Select a file
+              </button>
+              <span class="ml-1 flex h-full items-center">
                 {{ $ctrl.formValues.certFile.name }}
                 <pr-icon icon="'x-circle'" class-name="'icon-danger'" ng-if="!$ctrl.formValues.certFile"></pr-icon>
               </span>
@@ -48,14 +59,24 @@
             </div>
           </div>
 
+          <!-- SSL Key -->
           <div class="form-group">
-            <span class="col-sm-12"> Upload a private key, commonly a key, or a pem file. </span>
+            <div class="col-sm-12 flex items-center">
-          </div>
+              <span class="space-right control-label col-sm-3 col-lg-2 !p-0 text-left">
-
+                SSL/TLS private key
-          <div class="form-group">
+                <portainer-tooltip message="'Select a private key file, commonly a key, or pem file.'"></portainer-tooltip>
-            <div class="col-sm-12">
+              </span>
-              <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.keyFile" ngf-pattern="$ctrl.keyFilePattern" name="keyFile"> Select file </button>
+              <button
-              <span style="margin-left: 5px">
+                class="btn btn-sm btn-primary !ml-0"
+                ngf-select
+                ng-model="$ctrl.formValues.keyFile"
+                ngf-pattern="$ctrl.keyFilePattern"
+                name="keyFile"
+                ngf-accept="$ctrl.certFilePattern"
+              >
+                Select a file
+              </button>
+              <span class="ml-1 flex h-full items-center">
                 {{ $ctrl.formValues.keyFile.name }}
                 <pr-icon icon="'x-circle'" class-name="'icon-danger'" ng-if="!$ctrl.formValues.keyFile"></pr-icon>
               </span>
@@ -76,7 +97,7 @@
             <div class="col-sm-12">
               <button
                 type="button"
-                class="btn btn-primary btn-sm"
+                class="btn btn-primary btn-sm !ml-0"
                 ng-disabled="$ctrl.state.actionInProgress || !$ctrl.isFormChanged()"
                 ng-click="$ctrl.save()"
                 button-spinner="$ctrl.state.actionInProgress"

app/portainer/views/settings/settings.html

@@ -208,6 +208,7 @@
   </div>
 </div>
 
+<ssl-ca-file-settings></ssl-ca-file-settings>
 <ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
 
 <div class="row">

app/react/portainer/feature-flags/enums.ts

@@ -40,4 +40,5 @@ export enum FeatureId {
   K8S_ROLLING_RESTART = 'k8s-rolling-restart',
   K8SINSTALL = 'k8s-install',
   K8S_ANNOTATIONS = 'k8s-annotations',
+  CA_FILE = 'ca-file',
 }

app/react/portainer/feature-flags/feature-flags.service.ts

@@ -45,6 +45,7 @@ export async function init(edition: Edition) {
     [FeatureId.K8S_ADM_ONLY_USR_INGRESS_DEPLY]: Edition.BE,
     [FeatureId.K8S_ROLLING_RESTART]: Edition.BE,
     [FeatureId.K8S_ANNOTATIONS]: Edition.BE,
+    [FeatureId.CA_FILE]: Edition.BE,
   };
 
   state.currentEdition = currentEdition;