mirror of
https://github.com/portainer/portainer.git
synced 2025-08-08 15:25:22 +02:00
refactor(settings): migrate ssl panel to react [EE-5506] (#9163)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
c752b98120
commit
60ae6a63fc
11 changed files with 204 additions and 211 deletions
|
|
@ -10,6 +10,7 @@ import { ApplicationSettingsPanel } from '@/react/portainer/settings/SettingsVie
|
|||
import { KubeSettingsPanel } from '@/react/portainer/settings/SettingsView/KubeSettingsPanel';
|
||||
import { HelmCertPanel } from '@/react/portainer/settings/SettingsView/HelmCertPanel';
|
||||
import { HiddenContainersPanel } from '@/react/portainer/settings/SettingsView/HiddenContainersPanel/HiddenContainersPanel';
|
||||
import { SSLSettingsPanelWrapper } from '@/react/portainer/settings/SettingsView/SSLSettingsPanel/SSLSettingsPanel';
|
||||
|
||||
export const settingsModule = angular
|
||||
.module('portainer.app.react.components.settings', [])
|
||||
|
|
@ -26,6 +27,10 @@ export const settingsModule = angular
|
|||
'applicationSettingsPanel',
|
||||
r2a(withReactQuery(ApplicationSettingsPanel), ['onSuccess'])
|
||||
)
|
||||
.component(
|
||||
'sslSettingsPanel',
|
||||
r2a(withReactQuery(SSLSettingsPanelWrapper), [])
|
||||
)
|
||||
.component('helmCertPanel', r2a(withReactQuery(HelmCertPanel), []))
|
||||
.component(
|
||||
'hiddenContainersPanel',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import angular from 'angular';
|
||||
|
||||
import { sslCertificate } from './ssl-certificate';
|
||||
|
||||
export default angular.module('portainer.settings.general', []).component('sslCertificateSettings', sslCertificate).name;
|
||||
export default angular.module('portainer.settings.general', []).name;
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import controller from './ssl-certificate.controller.js';
|
||||
|
||||
export const sslCertificate = {
|
||||
templateUrl: './ssl-certificate.html',
|
||||
controller,
|
||||
};
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
class SslCertificateController {
|
||||
/* @ngInject */
|
||||
constructor($async, $scope, $state, SSLService, Notifications) {
|
||||
Object.assign(this, { $async, $scope, $state, SSLService, Notifications });
|
||||
|
||||
this.cert = null;
|
||||
this.originalValues = {
|
||||
forceHTTPS: false,
|
||||
certFile: null,
|
||||
keyFile: null,
|
||||
};
|
||||
|
||||
this.formValues = {
|
||||
certFile: null,
|
||||
keyFile: null,
|
||||
forceHTTPS: false,
|
||||
};
|
||||
|
||||
this.state = {
|
||||
actionInProgress: false,
|
||||
reloadingPage: false,
|
||||
};
|
||||
|
||||
this.certFilePattern = `.pem,.crt,.cer,.cert`;
|
||||
this.keyFilePattern = `.pem,.key`;
|
||||
|
||||
this.save = this.save.bind(this);
|
||||
this.onChangeForceHTTPS = this.onChangeForceHTTPS.bind(this);
|
||||
}
|
||||
|
||||
isFormChanged() {
|
||||
return Object.entries(this.originalValues).some(([key, value]) => value != this.formValues[key]);
|
||||
}
|
||||
|
||||
onChangeForceHTTPS(checked) {
|
||||
return this.$scope.$evalAsync(() => {
|
||||
this.formValues.forceHTTPS = checked;
|
||||
});
|
||||
}
|
||||
|
||||
async save() {
|
||||
return this.$async(async () => {
|
||||
this.state.actionInProgress = true;
|
||||
try {
|
||||
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 new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
location.reload();
|
||||
this.state.reloadingPage = true;
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Failed applying changes');
|
||||
}
|
||||
this.state.actionInProgress = false;
|
||||
});
|
||||
}
|
||||
|
||||
wasHTTPsChanged() {
|
||||
return this.originalValues.forceHTTPS !== this.formValues.forceHTTPS;
|
||||
}
|
||||
|
||||
async $onInit() {
|
||||
return this.$async(async () => {
|
||||
try {
|
||||
const certInfo = await this.SSLService.get();
|
||||
|
||||
this.formValues.forceHTTPS = !certInfo.httpEnabled;
|
||||
this.originalValues.forceHTTPS = this.formValues.forceHTTPS;
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Failed loading certificate info');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default SslCertificateController;
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="key" title-text="SSL certificate"></rd-widget-header>
|
||||
<rd-widget-body>
|
||||
<form class="form-horizontal" name="$ctrl.sslForm">
|
||||
<span class="small">
|
||||
<p class="text-muted vertical-center">
|
||||
<pr-icon icon="'alert-circle'" class-name="'icon-warning =vertical-center'"></pr-icon>
|
||||
Forcing HTTPs only will cause Portainer to stop listening on the HTTP port. Any edge agent environment that is using HTTP will no longer be available.
|
||||
</p>
|
||||
</span>
|
||||
<div class="form-group">
|
||||
<por-switch-field
|
||||
checked="$ctrl.formValues.forceHTTPS"
|
||||
label="'Force HTTPS only'"
|
||||
on-change="($ctrl.onChangeForceHTTPS)"
|
||||
field-class="'col-sm-12'"
|
||||
label-class="'col-sm-3 col-lg-2'"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
|
||||
<span class="small text-muted vertical-center my-3">
|
||||
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
|
||||
Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections.
|
||||
</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">
|
||||
SSL/TLS certificate
|
||||
<portainer-tooltip message="'Select an X.509 certificate file, commonly a crt, cer or pem file.'"></portainer-tooltip>
|
||||
</span>
|
||||
<button
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="$ctrl.sslForm.certFile.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="$ctrl.sslForm.certFile.$error">
|
||||
<p ng-message="pattern">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
File type is invalid.</p
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SSL Key -->
|
||||
<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">
|
||||
SSL/TLS private key
|
||||
<portainer-tooltip message="'Select a private key file, commonly a key, or pem file.'"></portainer-tooltip>
|
||||
</span>
|
||||
<button
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="$ctrl.sslForm.keyFile.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="$ctrl.sslForm.keyFile.$error">
|
||||
<p ng-message="pattern">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
File type is invalid.</p
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-sm !ml-0"
|
||||
ng-disabled="$ctrl.state.actionInProgress || !$ctrl.isFormChanged()"
|
||||
ng-click="$ctrl.save()"
|
||||
button-spinner="$ctrl.state.actionInProgress"
|
||||
analytics-on
|
||||
analytics-if="$ctrl.wasHTTPsChanged()"
|
||||
analytics-category="portainer"
|
||||
analytics-event="portainer-settings-edit"
|
||||
analytics-properties="{ metadata: { forceHTTPS: $ctrl.formValues.forceHTTPS } }"
|
||||
>
|
||||
<span ng-hide="$ctrl.state.actionInProgress || $ctrl.state.reloadingPage">Apply changes</span>
|
||||
<span ng-show="$ctrl.state.actionInProgress">Saving in progress...</span>
|
||||
<span ng-show="$ctrl.state.reloadingPage">Reloading Page...</span>
|
||||
</button>
|
||||
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px">{{ state.formValidationError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<helm-cert-panel></helm-cert-panel>
|
||||
|
||||
<ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
|
||||
<ssl-settings-panel></ssl-settings-panel>
|
||||
|
||||
<hidden-containers-panel></hidden-containers-panel>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue