add tokens to UI under the Account Settings.

Adds support for adding and removing API tokens.

src/app/features/account/accountCtrl.js

@@ -9,10 +9,20 @@ function (angular) {
   module.controller('AccountCtrl', function($scope, $http, backendSrv) {
   module.controller('AccountCtrl', function($scope, $http, backendSrv) {
 
 
     $scope.collaborator = {};
     $scope.collaborator = {};
+    $scope.token = {
+      role: "ReadWrite"
+    };
+    $scope.roleTypes = [
+      "ReadWrite",
+      "Read"
+    ];
+    $scope.showTokens = false;
 
 
     $scope.init = function() {
     $scope.init = function() {
       $scope.getAccount();
       $scope.getAccount();
       $scope.getOtherAccounts();
       $scope.getOtherAccounts();
+      $scope.getTokens();
+      
     };
     };
 
 
     $scope.getAccount = function() {
     $scope.getAccount = function() {
@@ -35,6 +45,25 @@ function (angular) {
       }).then($scope.getOtherAccounts);
       }).then($scope.getOtherAccounts);
     };
     };
 
 
+    $scope.getTokens = function() {
+      backendSrv.get('/api/tokens').then(function(tokens) {
+        $scope.tokens = tokens;
+      });
+    }
+
+    $scope.removeToken = function(id) {
+      backendSrv.delete('/api/tokens/'+id).then($scope.getTokens);
+    }
+
+    $scope.addToken = function() {
+      backendSrv.request({
+        method: 'PUT',
+        url: '/api/tokens',
+        data: $scope.token,
+        desc: 'Add token'
+      }).then($scope.getTokens);
+    }
+
     $scope.update = function() {
     $scope.update = function() {
       if (!$scope.accountForm.$valid) { return; }
       if (!$scope.accountForm.$valid) { return; }
 
 

src/app/features/account/partials/account.html

@@ -83,6 +83,45 @@
 			</table>
 			</table>
 
 
 		</div>
 		</div>
+		<div class="clearfix"></div><br><br>
+		<div class="section">
+			<div class="dashboard-editor-header">
+				<div class="dashboard-editor-title">
+					<i class="fa fa-key"></i>
+					API Tokens
+					<a ng-click="showTokens=!showTokens">
+						<i class="fa fa-sort-up" ng-show="showTokens"></i>
+						<i class="fa fa-sort-down" ng-hide="showTokens"></i>
+					</a>
+				</div>
+			</div>
+			<br>
+			<div ng-show="showTokens">
+				<div class="editor-row">
+					<div class="editor-option">
+						<form name="addTokenrForm" class="form-inline">
+							<label class="small">Add a Token</label>
+							<input type="text" class="input-xlarge" ng-model='token.name' placeholder="Name"></input>
+							<select ng-model="token.role" ng-options="r for r in roleTypes"></select>
+							<button class="btn btn-success" ng-click="addToken()">Add</button>
+						</form>
+					</div>
+				</div>
+				<table class="grafana-options-table">
+					<tr ng-repeat="t in tokens">
+						<td>{{t.name}}</td>
+						<td>{{t.role}}</td>
+						<td>{{t.token}}</td>
+						<td style="width: 1%">
+							<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
+								<i class="fa fa-remove"></i>
+							</a>
+						</td>
+					</tr>
+				</table>
+			</div>
+
+		</div>
 	</div>
 	</div>
 </div>
 </div>