mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 13:55:21 +02:00
feat(api): TLS endpoint creation and init overhaul (#1173)
This commit is contained in:
Anthony Lapenna
GitHub
parent
87825f7ebb
commit
8d4807c9e7
26 changed files with 828 additions and 481 deletions
12
app/directives/endpointSecurity/por-endpoint-security.js
Normal file
12
app/directives/endpointSecurity/por-endpoint-security.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
angular.module('portainer').component('porEndpointSecurity', {
|
||||
templateUrl: 'app/directives/endpointSecurity/porEndpointSecurity.html',
|
||||
controller: 'porEndpointSecurityController',
|
||||
bindings: {
|
||||
// This object will be populated with the form data.
|
||||
// Model reference in endpointSecurityModel.js
|
||||
formData: '=',
|
||||
// The component will use this object to initialize the default values
|
||||
// if present.
|
||||
endpoint: '<'
|
||||
}
|
||||
});
|
||||
126
app/directives/endpointSecurity/porEndpointSecurity.html
Normal file
126
app/directives/endpointSecurity/porEndpointSecurity.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<div>
|
||||
<!-- tls-checkbox -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<label for="tls" class="control-label text-left">
|
||||
TLS
|
||||
<portainer-tooltip position="bottom" message="Enable this option if you need to connect to the Docker endpoint with TLS."></portainer-tooltip>
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" ng-model="$ctrl.formData.TLS"><i></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !tls-checkbox -->
|
||||
<div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS">
|
||||
TLS mode
|
||||
</div>
|
||||
<!-- note -->
|
||||
<div class="form-group" ng-if="$ctrl.formData.TLS">
|
||||
<div class="col-sm-12">
|
||||
<span class="small text-muted">
|
||||
You can find out more information about how to protect a Docker environment with TLS in the <a href="https://docs.docker.com/engine/security/https/" target="_blank">Docker documentation</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"></div>
|
||||
<!-- endpoint-tls-mode -->
|
||||
<div class="form-group" style="margin-bottom: 0" ng-if="$ctrl.formData.TLS">
|
||||
<div class="boxselector_wrapper">
|
||||
<div>
|
||||
<input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca">
|
||||
<label for="tls_client_ca">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
TLS with server and client verification
|
||||
</div>
|
||||
<p>Use client certificates and server verification</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca">
|
||||
<label for="tls_client_noca">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
TLS with client verification only
|
||||
</div>
|
||||
<p>Use client certificates without server verification</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca">
|
||||
<label for="tls_ca">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
TLS with server verification only
|
||||
</div>
|
||||
<p>Only verify the server certificate</p>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only">
|
||||
<label for="tls_only">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
TLS only
|
||||
</div>
|
||||
<p>No server/client verification</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !endpoint-tls-mode -->
|
||||
<div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS && $ctrl.formData.TLSMode !== 'tls_only'">
|
||||
Required TLS files
|
||||
</div>
|
||||
<!-- tls-file-upload -->
|
||||
<div ng-if="$ctrl.formData.TLS">
|
||||
<!-- tls-file-ca -->
|
||||
<div class="form-group" ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_ca'">
|
||||
<label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
|
||||
<div class="col-sm-9 col-lg-10">
|
||||
<button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
|
||||
<span style="margin-left: 5px;">
|
||||
{{ $ctrl.formData.TLSCACert.name }}
|
||||
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" aria-hidden="true"></i>
|
||||
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCACert" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !tls-file-ca -->
|
||||
<!-- tls-files-cert-key -->
|
||||
<div ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_client_noca'">
|
||||
<!-- tls-file-cert -->
|
||||
<div class="form-group">
|
||||
<label for="tls_cert" class="col-sm-3 col-lg-2 control-label text-left">TLS certificate</label>
|
||||
<div class="col-sm-9 col-lg-10">
|
||||
<button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCert">Select file</button>
|
||||
<span style="margin-left: 5px;">
|
||||
{{ $ctrl.formData.TLSCert.name }}
|
||||
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" aria-hidden="true"></i>
|
||||
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCert" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !tls-file-cert -->
|
||||
<!-- tls-file-key -->
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 col-lg-2 control-label text-left">TLS key</label>
|
||||
<div class="col-sm-9 col-lg-10">
|
||||
<button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSKey">Select file</button>
|
||||
<span style="margin-left: 5px;">
|
||||
{{ $ctrl.formData.TLSKey.name }}
|
||||
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" aria-hidden="true"></i>
|
||||
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSKey" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !tls-file-key -->
|
||||
</div>
|
||||
<!-- tls-files-cert-key -->
|
||||
</div>
|
||||
<!-- !tls-file-upload -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
angular.module('portainer')
|
||||
.controller('porEndpointSecurityController', [function () {
|
||||
var ctrl = this;
|
||||
|
||||
function initComponent() {
|
||||
if (ctrl.endpoint) {
|
||||
var endpoint = ctrl.endpoint;
|
||||
var TLS = endpoint.TLSConfig.TLS;
|
||||
ctrl.formData.TLS = TLS;
|
||||
var CACert = endpoint.TLSConfig.TLSCACert;
|
||||
ctrl.formData.TLSCACert = CACert;
|
||||
var cert = endpoint.TLSConfig.TLSCert;
|
||||
ctrl.formData.TLSCert = cert;
|
||||
var key = endpoint.TLSConfig.TLSKey;
|
||||
ctrl.formData.TLSKey = key;
|
||||
|
||||
if (TLS) {
|
||||
if (CACert && cert && key) {
|
||||
ctrl.formData.TLSMode = 'tls_client_ca';
|
||||
} else if (cert && key) {
|
||||
ctrl.formData.TLSMode = 'tls_client_noca';
|
||||
} else if (CACert) {
|
||||
ctrl.formData.TLSMode = 'tls_ca';
|
||||
} else {
|
||||
ctrl.formData.TLSMode = 'tls_only';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initComponent();
|
||||
}]);
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
function EndpointSecurityFormData() {
|
||||
this.TLS = false;
|
||||
this.TLSMode = 'tls_client_ca';
|
||||
this.TLSCACert = null;
|
||||
this.TLSCert = null;
|
||||
this.TLSKey = null;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue