Add token add api and separate api tokens from rest

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

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>