Hide api token ui behind 'tokens' query and ensure button sizes are consistent

This commit is contained in:
Johannes Zellner
2019-11-07 12:08:51 +01:00
parent 3a0c29988e
commit c6d2e6cda3
2 changed files with 50 additions and 53 deletions

View File

@@ -277,8 +277,8 @@
<tr>
<td class="text-right" colspan="2" style="vertical-align: top;">
<br/>
<button class="btn btn-outline btn-xs btn-danger" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'Disable' : 'Enable' }} 2FA</button>
<button class="btn btn-outline btn-xs btn-danger" ng-click="passwordchange.show()" ng-hide="user.source">Change Password</button>
<button class="btn btn-primary" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'Disable' : 'Enable' }} 2FA</button>
<button class="btn btn-danger" ng-click="passwordchange.show()" ng-hide="user.source">Change Password</button>
</td>
</tr>
</table>
@@ -287,61 +287,57 @@
</div>
</div>
<br/>
<div class="text-left" ng-show="user.admin">
<h3>API Tokens <button class="btn btn-xs btn-primary btn-outline pull-right" ng-click="tokenAdd.show(apiClient)"><i class="fa fa-plus"></i> New Token</button> </h3>
</div>
<!-- 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-show="user.admin">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>These tokens can be used to access the <a ng-href="{{ config.webServerOrigin + '/developer/api/' }}" target="_blank">Cloudron API</a>.</p>
<table class="table table-hover">
<thead>
<tr>
<th style="width:70%">Name</th>
<th style="width: 5%" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="token in apiClient.activeTokens">
<td class="text-left elide-table-cell">
{{ token.name || '-' }}
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-danger pull-right" ng-click="removeToken(apiClient, token)" title="Revoke Token"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/>
<div class="text-left" ng-show="user.admin">
<h3>Sessions</h3>
</div>
<div class="card" ng-show="user.admin">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>You are logged into {{ activeClients.length + 1 }} app(s), including this session.</p>
<span ng-show="activeTokenCount > 1">
<hr/>
<h4>Active Apps:</h4>
<p ng-repeat="client in activeClients"><b>{{ client.name }} - {{client.activeTokens.length}} time(s)</b></p>
<hr/>
</span>
<button class="btn btn-outline btn-xs btn-danger pull-right" ng-click="revokeTokens()">Logout From All</button>
</div>
</div>
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>You are logged into {{ activeClients.length + 1 }} app(s), including this session.</p>
<span ng-show="activeTokenCount > 1">
<br/>
<h4>Active Sessions:</h4>
<p ng-repeat="client in activeClients"><b>{{ client.name }} - {{client.activeTokens.length}} time(s)</b></p>
<br/>
</span>
<button class="btn btn-outline btn-danger pull-right" ng-click="revokeTokens()">Logout From All</button>
</div>
</div>
</div>
</div>
<div class="text-left" ng-show="user.admin && showApiTokens">
<h3>API Tokens <button class="btn btn-primary btn-sm pull-right" ng-click="tokenAdd.show(apiClient)"><i class="fa fa-plus"></i> New Token</button></h3>
</div>
<!-- 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-show="user.admin && showApiTokens">
<div class="grid-item-top">
<div class="row">
<div class="col-xs-12">
<p>These tokens can be used to access the <a ng-href="{{ config.webServerOrigin + '/developer/api/' }}" target="_blank">Cloudron API</a>.</p>
<table class="table table-hover">
<thead>
<tr>
<th style="width:70%">Name</th>
<th style="width: 5%" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="token in apiClient.activeTokens">
<td class="text-left elide-table-cell">
{{ token.name || '-' }}
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-xs btn-danger pull-right" ng-click="removeToken(apiClient, token)" title="Revoke Token"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>