Add a progress bar for the renewal task
This commit is contained in:
@@ -220,7 +220,7 @@
|
||||
<div class="col-md-8">
|
||||
<p ng-show="createBackup.busy">{{ createBackup.message }}</p>
|
||||
<p ng-hide="createBackup.busy">
|
||||
<div class="has-error" ng-show="createBackup.percent === 100">{{ createBackup.errorMessage }}</div>
|
||||
<div class="has-error" ng-show="!createBackup.active">{{ createBackup.errorMessage }}</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-right">
|
||||
|
||||
@@ -198,25 +198,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal renew certs -->
|
||||
<div class="modal fade" id="renewCertsModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Renew certs for all domains?</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This will renew certs of all apps installed. Only certs that are expiring in next 30 days will be renewed. It can take ~5 minutes to renew and install the certificates. Check the <a href="/#/activity">activity log</a> for renewal status. </p>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" ng-click="renewCerts.submit()" ng-disabled="renewCerts.busy"><i class="fa fa-circle-notch fa-spin" ng-show="renewCerts.busy"></i> Renew Certs</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal domain remove -->
|
||||
<div class="modal fade" id="domainRemoveModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
@@ -303,9 +284,31 @@
|
||||
<p>
|
||||
Cloudron renews Let's Encrypt certificates automatically. Use this options to trigger a renewal immediately.
|
||||
</p>
|
||||
<button class="btn btn-primary pull-right" ng-click="renewCerts.show()" title="Renew Certs for all Domains">Renew Certs</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<br/>
|
||||
<div class="col-md-12" style="margin-bottom: 10px;">
|
||||
<div ng-show="renewCerts.busy" class="progress progress-striped active animateMe">
|
||||
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ renewCerts.percent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p ng-show="renewCerts.busy">{{ renewCerts.message }}</p>
|
||||
<p ng-hide="renewCerts.busy">
|
||||
<div class="has-error" ng-show="!renewCerts.active">{{ renewCerts.errorMessage }}</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<button class="btn btn-outline btn-primary" ng-click="renewCerts.renew()" ng-disabled="renewCerts.busy" style="margin-right: 10px">Renew All Certs</button>
|
||||
<a class="btn btn-primary pull-right" ng-href="/logs.html?taskId={{renewCerts.taskId}}" ng-enabled="renewCerts.taskId" target="_blank">Show Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-left" ng-show="!config.managed">
|
||||
|
||||
@@ -354,32 +354,59 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
|
||||
|
||||
$scope.renewCerts = {
|
||||
busy: false,
|
||||
error: null,
|
||||
percent: 0,
|
||||
message: '',
|
||||
errorMessage: '',
|
||||
taskId: '',
|
||||
|
||||
show: function () {
|
||||
$scope.renewCerts.reset();
|
||||
$('#renewCertsModal').modal('show');
|
||||
},
|
||||
checkStatus: function () {
|
||||
Client.getLatestTaskByType('renewcerts', function (error, task) {
|
||||
if (error) return console.error(error);
|
||||
|
||||
submit: function () {
|
||||
$scope.renewCerts.busy = true;
|
||||
$scope.renewCerts.error = null;
|
||||
if (!task) return;
|
||||
|
||||
Client.renewCerts(null /* all domains */, function (error) {
|
||||
if (error) {
|
||||
Client.error(error);
|
||||
} else {
|
||||
$('#renewCertsModal').modal('hide');
|
||||
$scope.renewCerts.reset();
|
||||
}
|
||||
|
||||
$scope.renewCerts.busy = false;
|
||||
$scope.renewCerts.taskId = task.id;
|
||||
$scope.renewCerts.updateStatus();
|
||||
});
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
$scope.renewCerts.busy = false;
|
||||
$scope.renewCerts.error = null;
|
||||
updateStatus: function () {
|
||||
Client.getTask($scope.renewCerts.taskId, function (error, data) {
|
||||
if (error) return window.setTimeout($scope.renewCerts.updateStatus, 5000);
|
||||
|
||||
if (!data.active) {
|
||||
$scope.renewCerts.busy = false;
|
||||
$scope.renewCerts.message = '';
|
||||
$scope.renewCerts.percent = 100; // indicates that 'result' is valid
|
||||
$scope.renewCerts.errorMessage = data.errorMessage;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.renewCerts.busy = true;
|
||||
$scope.renewCerts.percent = data.percent;
|
||||
$scope.renewCerts.message = data.message;
|
||||
window.setTimeout($scope.renewCerts.updateStatus, 500);
|
||||
});
|
||||
},
|
||||
|
||||
renew: function () {
|
||||
$scope.renewCerts.busy = true;
|
||||
$scope.renewCerts.percent = 0;
|
||||
$scope.renewCerts.message = '';
|
||||
$scope.renewCerts.errorMessage = '';
|
||||
|
||||
Client.renewCerts(null /* all domains */, function (error, taskId) {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
$scope.renewCerts.errorMessage = error.message;
|
||||
|
||||
$scope.renewCerts.busy = false;
|
||||
} else {
|
||||
$scope.renewCerts.taskId = taskId;
|
||||
$scope.renewCerts.updateStatus();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -478,6 +505,8 @@ angular.module('Application').controller('DomainsController', ['$scope', '$locat
|
||||
$scope.dyndnsConfigure.refresh();
|
||||
}
|
||||
});
|
||||
|
||||
$scope.renewCerts.checkStatus();
|
||||
});
|
||||
|
||||
document.getElementById('gcdnsKeyFileInput').onchange = readFileLocally($scope.domainConfigure.gcdnsKey, 'content', 'keyFileName');
|
||||
|
||||
Reference in New Issue
Block a user