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

Add token add api and separate api tokens from rest

Browse Source
This commit is contained in:
Johannes Zellner
2020-02-07 21:40:43 +01:00
parent 467edb6b32
commit 62562f051c
2 changed files with 101 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/profile.html
+72 -13
View File
@@ -275,6 +275,48 @@
</div>
</div>
<!-- Modal add api token -->
<div class="modal fade" id="apiTokenAddModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create API Token</h4>
</div>
<div class="modal-body">
<div ng-hide="tokens.add.accessToken">
<form name="apiTokenAddForm" role="form" novalidate ng-submit="tokens.add.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (apiTokenAddForm.name.$dirty && apiTokenAddForm.name.$invalid) || (!apiTokenAddForm.name.$dirty && tokens.add.error)}">
<label class="control-label">API Token Name</label>
<div class="control-label" ng-show="(!apiTokenAddForm.name.$dirty && tokens.add.error) || (apiTokenAddForm.name.$dirty && apiTokenAddForm.name.$invalid)">
<small ng-show="apiTokenAddForm.name.$error.required">A name is required</small>
<small ng-show="tokens.add.error.name">{{ tokens.add.error }}</small>
</div>
<input type="text" class="form-control" id="inputApiTokenName" ng-model="tokens.add.name" name="name" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="apiTokenAddForm.$invalid"/>
</form>
</div>
<div ng-show="tokens.add.accessToken">
New API token:
<br/>
<b ng-click-select>{{ tokens.add.accessToken }}</b>
<br/>
<br/>
<p>Please copy the API token now. It won't be shown again for security purposes.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="tokens.add.submit()" ng-hide="tokens.add.accessToken" ng-disabled="apiTokenAddForm.$invalid || tokens.add.busy">
<i class="fa fa-circle-notch fa-spin" ng-show="tokens.add.busy"></i> Generate API Token
</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
@@ -368,31 +410,32 @@
<br/>
<div class="text-left">
<h3>Login and API Tokens <button class="btn btn-primary btn-sm pull-right" ng-click="tokens.add.show()" ng-show="user.admin"><i class="fa fa-plus"></i> New API Token</button></h3>
<div class="text-left" ng-show="user.admin">
<h3>API Tokens <button class="btn btn-primary btn-sm pull-right" ng-click="tokens.add.show()"><i class="fa fa-plus"></i> New API Token</button></h3>
</div>
<div class="card">
<div class="card" ng-show="user.admin">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>You have {{ tokens.webadminTokens.length }} active web token(s), {{ tokens.cliTokens.length }} active CLI token(s) and {{ tokens.apiTokens.length }} API token(s).</p>
<table class="table table-hover" style="margin: 0;">
<thead>
<tr>
<th style="width: 45%">Name</th>
<th style="width: 49.5%">Type</th>
<th style="width: 5%" class="text-right">Actions</th>
<th style="width: 50%">Name</th>
<th style="width: 40%">Expires At</th>
<th style="width: 10%" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="token in tokens.allTokens">
<td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
<tr ng-show="tokens.apiTokens.length === 0">
<td colspan="3" class="text-center">No API Tokens created</td>
</tr>
<tr ng-repeat="token in tokens.apiTokens">
<td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
{{ token.name || 'unnamed' }}
</td>
<td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
{{ token.clientId }}
<td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
{{ token.expiresAt | prettyLongDate }}
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-danger" ng-click="tokens.revokeToken(token)" uib-tooltip="Revoke Token"><i class="far fa-trash-alt"></i></button>
@@ -400,8 +443,24 @@
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<div class="text-left">
<h3>Login Tokens</h3>
</div>
<div class="card">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>You have {{ tokens.webadminTokens.length }} active web token(s) and {{ tokens.cliTokens.length }}.</p>
<button class="btn btn-outline btn-danger pull-right" ng-click="tokens.revokeAllWebAndCliTokens()">Logout From All</button>
<br/>
<button class="btn btn-outline btn-danger pull-right" ng-click="tokens.revokeAll()">Logout From All</button>
</div>
</div>
</div>
src/views/profile.js
+29 -2
View File
@@ -508,10 +508,12 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
$scope.tokens.webadminTokens = result.filter(function (c) { return c.clientId === 'cid-webadmin'; });
$scope.tokens.cliTokens = result.filter(function (c) { return c.clientId === 'cid-cli'; });
$scope.tokens.apiTokens = result.filter(function (c) { return c.clientId === 'cid-sdk'; });
console.log($scope.tokens.apiTokens)
});
},
revokeAll: function () {
revokeAllWebAndCliTokens: function () {
$scope.tokens.busy = true;
asyncForEach($scope.tokens.webadminTokens.concat($scope.tokens.cliTokens), function (token, callback) {
@@ -530,13 +532,38 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
busy: false,
error: null,
name: '',
accessToken: '',
show: function () {
$scope.tokens.add.name = '';
$scope.tokens.add.accessToken = '';
$scope.tokens.add.busy = false;
$scope.tokens.add.error = null;
$scope.apiTokenAddForm.name.$setPristine();
$('#apiTokenAddModal').modal('show');
},
submit: function () {
$scope.tokens.add.busy = true;
Client.createToken($scope.tokens.add.name, function (error, result) {
if (error) {
if (error.statusCode === 400) {
$scope.tokens.add.error = error.message;
$scope.apiTokenAddForm.name.$setPristine();
$('#inputApiTokenName').focus();
} else {
console.error('Unable to create password.', error);
}
return;
}
$scope.tokens.add.busy = false;
$scope.tokens.add.accessToken = result.accessToken;
$scope.tokens.refresh();
});
}
},
@@ -574,7 +601,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
};
// setup all the dialog focus handling
['passwordChangeModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
['passwordChangeModal', 'apiTokenAddModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {
$(this).find("[autofocus]:first").focus();
});