Add external ldap progress bar

This commit is contained in:
Girish Ramakrishnan
2019-11-07 11:35:04 -08:00
parent 2e6e320bd9
commit 836a3659b6
2 changed files with 104 additions and 18 deletions
+72 -7
View File
@@ -472,21 +472,86 @@
<div class="card card-large">
<div class="row">
<div class="col-md-12">
<p>Cloudron will authenticate users against the configured LDAP server.</p>
<p>LDAP authentication is currently <b>{{ externalLdap.provider === 'noop' ? 'disabled' : 'enabled' }}.</p>
Cloudron will authenticate users against the configured LDAP server.
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Provider</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.provider }}</span>
</div>
</div>
<button class="btn btn-primary pull-right" ng-click="externalLdap.show()">Configure</button>
<button class="btn btn-success pull-right" ng-disabled="externalLdap.provider === 'noop'" ng-click="externalLdap.sync()"><i class="fa fa-circle-notch fa-spin" ng-show="externalLdap.syncBusy"></i> Synchronize</button>
<a class="btn btn-primary pull-right" ng-show="externalLdap.taskId" ng-href="/logs.html?taskId={{ externalLdap.taskId }}" target="_blank">Show Logs</a>
<div class="row" ng-show="externalLdap.provider !== 'noop'">
<div class="col-xs-6">
<span class="text-muted">Server URL</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.url }}</span>
</div>
</div>
<div class="row" ng-show="externalLdap.provider !== 'noop'">
<div class="col-xs-6">
<span class="text-muted">Base DN</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.baseDn }}</span>
</div>
</div>
<div class="row" ng-show="externalLdap.provider !== 'noop'">
<div class="col-xs-6">
<span class="text-muted">Filter</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.filter }}</span>
</div>
</div>
<div class="row" ng-show="externalLdap.provider !== 'noop'">
<div class="col-xs-6">
<span class="text-muted">Username Field</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.usernameField || 'uid' }}</span>
</div>
</div>
<div class="row" ng-show="externalLdap.provider !== 'noop'">
<div class="col-xs-6">
<span class="text-muted">Auth</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ externalLdap.bindDn ? 'Yes' : 'No' }}</span>
</div>
</div>
<div class="row">
<br/>
<div class="col-md-12" style="margin-bottom: 10px;">
<div ng-show="externalLdap.busy" class="progress progress-striped active animateMe">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ externalLdap.percent }}%"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p ng-show="externalLdap.busy">{{ externalLdap.message }}</p>
<p ng-hide="externalLdap.busy">
<div class="has-error" ng-show="!externalLdap.active">{{ externalLdap.errorMessage }}</div>
</p>
</div>
<div class="col-md-6">
<div class="col-md-6 text-right">
<button class="btn btn-primary pull-right" ng-click="externalLdap.show()">Configure</button>
<button class="btn btn-success pull-right" ng-disabled="externalLdap.provider === 'noop'" ng-click="externalLdap.sync()"><i class="fa fa-circle-notch fa-spin" ng-show="externalLdap.busy"></i> Synchronize</button>
<a class="btn btn-primary pull-right" ng-show="externalLdap.taskId" ng-href="/logs.html?taskId={{ externalLdap.taskId }}" target="_blank">Show Logs</a>
</div>
</div>
</div>
+32 -11
View File
@@ -433,8 +433,10 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
$scope.externalLdap = {
busy: false,
percent: 0,
message: '',
errorMessage: '',
error: {},
syncBusy: false,
taskId: 0,
// fields
@@ -446,30 +448,49 @@ angular.module('Application').controller('UsersController', ['$scope', '$locatio
bindPassword: '',
usernameField: '',
checkStatus: function () {
Client.getLatestTaskByType('syncExternalLdap', function (error, task) {
if (error) return console.error(error);
if (!task) return;
$scope.externalLdap.taskId = task.id;
$scope.externalLdap.updateStatus();
});
},
sync: function () {
$scope.externalLdap.syncBusy = true;
$scope.externalLdap.busy = true;
Client.startExternalLdapSync(function (error, taskId) {
if (error) {
$scope.externalLdap.syncBusy = false;
$scope.externalLdap.busy = false;
console.error('Unable to start ldap syncer task.', error);
return;
}
$scope.externalLdap.taskId = taskId;
$scope.externalLdap.updateStatus();
});
},
function refreshTaskStatus() {
Client.getTask(taskId, function (error, result) {
if (error) console.error(error);
if (result && result.active) return $timeout(refreshTaskStatus, 2000);
updateStatus: function () {
Client.getTask($scope.externalLdap.taskId, function (error, data) {
if (error) return window.setTimeout($scope.externalLdap.updateStatus, 5000);
$scope.externalLdap.syncBusy = false;
if (!data.active) {
$scope.externalLdap.busy = false;
$scope.externalLdap.message = '';
$scope.externalLdap.percent = 100; // indicates that 'result' is valid
$scope.externalLdap.errorMessage = data.success ? '' : data.error.message;
refreshUsers();
});
return refreshUsers();
}
refreshTaskStatus();
$scope.externalLdap.busy = true;
$scope.externalLdap.percent = data.percent;
$scope.externalLdap.message = data.message;
window.setTimeout($scope.externalLdap.updateStatus, 3000);
});
},