Adding some niceties around the way users are associated with tokens. (#1012)

* Adding some niceties around the way users are associated with tokens. - Includes user typeahead - Tooltips - User information displayed in table - Default to current user when no user is passed
2017-12-05 10:57:17 -08:00
parent a756a74b49
commit ad88637f22
9 changed files with 118 additions and 63 deletions
--- a/lemur/static/app/angular/api_keys/api_key/api_key.js
+++ b/lemur/static/app/angular/api_keys/api_key/api_key.js
@ -1,50 +1,18 @@
 'use strict';

 angular.module('lemur')
-  .controller('ApiKeysCreateController', function ($scope, $uibModalInstance, PluginService, ApiKeyService, LemurRestangular, toaster) {
+  .controller('ApiKeysCreateController', function ($scope, $uibModalInstance, PluginService, ApiKeyService, UserService, LemurRestangular, toaster) {
    $scope.apiKey = LemurRestangular.restangularizeElement(null, {}, 'keys');

+    $scope.origin = window.location.origin;
+
    $scope.save = function (apiKey) {
      ApiKeyService.create(apiKey).then(
        function (responseBody) {
          toaster.pop({
            type: 'success',
            title: 'Success!',
-            body: 'Successfully Created JWT!'
-          });
-          $scope.jwt = responseBody.jwt;
-        }, function (response) {
-          toaster.pop({
-            type: 'error',
-            title: apiKey.name || 'Unnamed Api Key',
-            body: 'lemur-bad-request',
-            bodyOutputType: 'directive',
-            directiveData: response.data,
-            timeout: 100000
-          });
-        });
-    };
-
-    $scope.cancel = function () {
-      $uibModalInstance.dismiss('cancel');
-    };
-
-    $scope.close = function() {
-      $uibModalInstance.close();
-    };
-  })
-  .controller('ApiKeysEditController', function ($scope, $uibModalInstance, ApiKeyService, LemurRestangular, toaster, editId) {
-    LemurRestangular.one('keys', editId).customGET('described').then(function(apiKey) {
-      $scope.apiKey = apiKey;
-    });
-
-    $scope.save = function (apiKey) {
-      ApiKeyService.update(apiKey).then(
-        function (responseBody) {
-          toaster.pop({
-            type: 'success',
-            title: 'Success',
-            body: 'Successfully updated JWT!'
+            body: 'Successfully Created API Token!'
          });
          $scope.jwt = responseBody.jwt;
        }, function (response) {
@ -66,4 +34,45 @@ angular.module('lemur')
    $scope.close = function() {
      $uibModalInstance.close();
    };
+
+    $scope.userService = UserService;
+  })
+  .controller('ApiKeysEditController', function ($scope, $uibModalInstance, ApiKeyService, UserService, LemurRestangular, toaster, editId) {
+    LemurRestangular.one('keys', editId).customGET('described').then(function(apiKey) {
+      $scope.apiKey = apiKey;
+      $scope.selectedUser = apiKey.user;
+    });
+
+    $scope.origin = window.location.origin;
+
+    $scope.save = function (apiKey) {
+      ApiKeyService.update(apiKey).then(
+        function (responseBody) {
+          toaster.pop({
+            type: 'success',
+            title: 'Success',
+            body: 'Successfully updated API Token!'
+          });
+          $scope.jwt = responseBody.jwt;
+        }, function (response) {
+          toaster.pop({
+            type: 'error',
+            title: apiKey.name || 'Unnamed API Key',
+            body: 'lemur-bad-request',
+            bodyOutputType: 'directive',
+            directiveData: response.data,
+            timeout: 100000
+          });
+        });
+    };
+
+    $scope.cancel = function () {
+      $uibModalInstance.dismiss('cancel');
+    };
+
+    $scope.close = function() {
+      $uibModalInstance.close();
+    };
+
+    $scope.userService = UserService;
  });
--- a/lemur/static/app/angular/api_keys/api_key/api_key.tpl.html
+++ b/lemur/static/app/angular/api_keys/api_key/api_key.tpl.html
@ -1,10 +1,13 @@
 <div class="modal-header" ng-show="!jwt">
  <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-  <h3><span ng-show="!apiKey.fromServer">Create</span><span ng-show="apiKey.fromServer">Edit</span></h3>
+  <h3>
+    <span ng-show="!apiKey.fromServer">Create Token</span>
+    <span ng-show="apiKey.fromServer">Edit Token</span>
+  </h3>
 </div>
 <div class="modal-header" ng-show="jwt">
  <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-  <h3><span>Token</span></h3>
+  <h3><span>Token Pickup</span></h3>
 </div>
 <div class="modal-body" ng-show="!jwt">
 <form name="createForm" class="form-horizontal" role="form" novalidate>
@ -14,17 +17,20 @@
      Name
    </label>
    <div class="col-sm-10">
-      <input name="name" ng-model="apiKey.name" placeholder="A Cool API Key" class="form-control" required/>
+      <input name="name" ng-model="apiKey.name" placeholder="ExampleService" class="form-control" required/>
      <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an api key name</p>
    </div>
  </div>
-  <div class="form-group"
-    ng-class="{'has-error': createForm.user_id.$invalid, 'has-success': !createForm.user_id.$invalid&&createForm.user_id.$dirty}">
+  <div class="form-group">
    <label class="control-label col-sm-2">
-      User ID
+      User
    </label>
    <div class="col-sm-10">
-      <input name="user_id" ng-model="apiKey.userId" placeholder="42" class="form-control" type="number" required/>
+      <input type="text" ng-model="apiKey.user" placeholder="My username..."
+             uib-typeahead="user.username for user in userService.findUserByName($viewValue)" typeahead-loading="loadingUsers"
+             class="form-control input-md" typeahead-on-select="apiKey.attachUser($item)"
+             uib-tooltip="This user will be tied to the generated key. All key permissions will mirror the users. Current user is the default."
+             uib-tooltip-trigger="focus" uib-tooltip-placement="top" typeahead-wait-ms="500">
      <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an API Key User ID.</p>
    </div>
  </div>
@ -34,15 +40,19 @@
      TTL
    </label>
    <div class="col-sm-10">
-      <input name="ttl" ng-model="apiKey.ttl" placeholder="-1" class="form-control" type="number" required/>
+      <input name="ttl" ng-model="apiKey.ttl" placeholder="-1" class="form-control" type="number"
+             uib-tooltip="Number of days for the token to last. -1 meaning the token will not expire."
+             uib-tooltip-trigger="focus" uib-tooltip-placement="top" required/>
      <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an API Key TTL.</p>
    </div>
  </div>
 </form>
 </div>
-<div ng-show="jwt">
-  <h3>Successfully exported!</h3>
-  <h4>Your Token is: <pre><code>{{ jwt }}</code></pre></h4>
+<div class="modal-body" ng-show="jwt">
+  <h4>Pass the following token on every Lemur API request:</h4>
+  <pre><code>{{ jwt }}</code></pre>
+  <h4>Example usuage:</h4>
+  <pre><code>curl -i {{ origin }}/certificates -H "Authorization: Bearer {{ jwt }}</code></pre>
 </div>
 <div class="modal-footer" ng-show="!jwt">
  <button ng-click="save(apiKey)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
@ -51,4 +61,3 @@
 <div class="modal-footer" ng-show="jwt">
  <button ng-click="close()" class="btn btn-primary">Close</button>
 </div>
-
--- a/lemur/static/app/angular/api_keys/services.js
+++ b/lemur/static/app/angular/api_keys/services.js
@ -2,10 +2,18 @@

 angular.module('lemur')
  .service('ApiKeyApi', function (LemurRestangular) {
+    LemurRestangular.extendModel('keys', function (obj) {
+      return angular.extend(obj, {
+        attachUser: function (user) {
+          this.user = user;
+        }
+      });
+    });
    return LemurRestangular.all('keys');
  })
  .service('ApiKeyService', function ($location, ApiKeyApi) {
    var ApiKeyService = this;
+
    ApiKeyService.update = function(apiKey) {
      return apiKey.put();
    };
--- a/lemur/static/app/angular/api_keys/view/view.tpl.html
+++ b/lemur/static/app/angular/api_keys/view/view.tpl.html
@ -19,8 +19,8 @@
              <td data-title="'Name'" sortable="'name'" align="center">
                {{ apiKey.name || 'Unnamed Api Key' }}
              </td>
-              <td data-title="'User ID'" sortable="'user_id'" align="center">
-                {{ apiKey.userId }}
+              <td data-title="'User'" align="center">
+                {{ apiKey.user.email }}
              </td>
              <td data-title="'TTL'" align="center">
                {{ apiKey.ttl == -1 ? 'Forever' : apiKey.ttl }}