jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add modal dialog to create API clients

Browse Source
This commit is contained in:
Johannes Zellner
2016-06-07 10:42:54 +02:00
parent f0e9256d46
commit c86392cd60
2 changed files with 96 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
webadmin/src/views/account.html
View File

@@ -99,6 +99,49 @@
</div>
</div>
<!-- Modal add client -->
<div class="modal fade" id="clientAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add API Client</h4>
</div>
<div class="modal-body">
<form name="clientAddForm" role="form" novalidate ng-submit="clientAdd.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (clientAddForm.name.$dirty && clientAddForm.name.$invalid) || (!clientAddForm.name.$dirty && clientAdd.error.name) }">
<label class="control-label">Name</label>
<div class="control-label" ng-show="(!clientAddForm.name.$dirty && clientAdd.error.name) || (clientAddForm.name.$dirty && clientAddForm.name.$invalid)">
<small ng-show="clientAddForm.name.$error.required">A name is required</small>
<small ng-show="!clientAddForm.name.$dirty && clientAdd.error.name">{{ clientAdd.error.name }}</small>
</div>
<input type="text" class="form-control" ng-model="clientAdd.name" name="name" required autofocus>
</div>
<div class="form-group" ng-class="{ 'has-error': (clientAddForm.scope.$dirty && clientAddForm.scope.$invalid) || (!clientAddForm.scope.$dirty && clientAdd.error.scope) }">
<label class="control-label">Scope</label>
<div class="control-label" ng-show="(!clientAddForm.scope.$dirty && clientAdd.error.scope) || (clientAddForm.scope.$dirty && clientAddForm.scope.$invalid)">
<small ng-show="clientAddForm.scope.$error.required">A scope is required</small>
<small ng-show="!clientAddForm.scope.$dirty && clientAdd.error.scope">{{ clientAdd.error.scope }}</small>
</div>
<input type="text" class="form-control" ng-model="clientAdd.scope" name="scope" required>
</div>
<div class="form-group" ng-class="{ 'has-error': (clientAddForm.redirectURI.$dirty && clientAddForm.redirectURI.$invalid) || (!clientAddForm.redirectURI.$dirty && clientAdd.error.redirectURI) }">
<label class="control-label">Redirect URI</label>
<div class="control-label" ng-show="!clientAddForm.redirectURI.$dirty && clientAdd.error.redirectURI">
<small ng-show="!clientAddForm.redirectURI.$dirty && clientAdd.error.redirectURI">{{ clientAdd.error.redirectURI }}</small>
</div>
<input type="text" class="form-control" ng-model="clientAdd.redirectURI" name="redirectURI" placeholder="Only required if OAuth logins are used">
</div>
<input class="hide" type="submit" ng-disabled="clientAddForm.$invalid || clientAdd.busy"/>
</form>
</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="clientAdd.submit()" ng-disabled="clientAddForm.$invalid || clientAdd.busy"><i class="fa fa-spinner fa-pulse" ng-show="clientAdd.busy"></i> Add API Client</button>
</div>
</div>
</div>
</div>
<br/>
<div class="section-header">
@@ -140,12 +183,16 @@
</div>
</div>
<br/>
<div class="section-header">
<div class="text-left">
<h3>Application Access</h3>
<h3>Application and API Access <button class="btn btn-primary btn-outline pull-right" ng-click="clientAdd.show()"><i class="fa fa-plus"></i> New API Client</button></h3>
</div>
</div>
<br/>
<!-- we will always at least have the webadmin token here, so activeClients always will have one entry with at least one token -->
<div class="card" ng-repeat="client in activeClients" style="margin-bottom: 15px;" ng-hide="client.tokenCount === 0">
<div class="grid-item-top">

48
webadmin/src/views/account.js
View File

@@ -156,6 +156,54 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
}
};
$scope.clientAdd = {
busy: false,
error: {},
name: '',
scope: '',
redirectURI: '',
show: function () {
$scope.clientAdd.busy = false;
$scope.clientAdd.error = {};
$scope.clientAdd.name = '';
$scope.clientAdd.scope = '*';
$scope.clientAdd.redirectURI = '';
$scope.clientAddForm.$setUntouched();
$scope.clientAddForm.$setPristine();
$('#clientAddModal').modal('show');
},
submit: function () {
$scope.groupAdd.busy = true;
$scope.groupAdd.error = {};
Client.createGroup($scope.groupAdd.name, function (error) {
$scope.groupAdd.busy = false;
if (error && error.statusCode === 409) {
$scope.groupAdd.error.name = 'Name already taken';
$scope.groupAddForm.name.$setPristine();
$('#groupAddName').focus();
return;
}
if (error && error.statusCode === 400) {
$scope.groupAdd.error.name = error.message;
$scope.groupAddForm.name.$setPristine();
$('#groupAddName').focus();
return;
}
if (error) return console.error('Unable to create group.', error.statusCode, error.message);
refresh();
$('#groupAddModal').modal('hide');
});
}
};
$scope.removeAccessTokens = function (client) {
client.busy = true;