add ui for token generation

webadmin/src/views/account.html

@@ -163,6 +163,23 @@
     </div>
 </div>
 
+<!-- Modal add token -->
+<div class="modal fade" id="tokenAddModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">New token created</h4>
+            </div>
+            <div class="modal-body">
+                <b ng-click-select>{{ tokenAdd.token.accessToken }}</b>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <br/>
 
 <div class="section-header">
@@ -242,7 +259,7 @@
 
                                 <hr/>
 
-                                <h4 class="text-muted">Your Tokens</h4>
+                                <h4 class="text-muted">Your Tokens <button class="btn btn-xs btn-primary btn-outline pull-right" ng-click="tokenAdd.show()"><i class="fa fa-plus"></i> New Token</button></h4>
                                 <p ng-repeat="token in client.activeTokens">
                                     <b ng-click-select>{{ token.accessToken }}</b> <button class="btn btn-xs btn-danger pull-right" ng-click="" title="Revoke Token"><i class="fa fa-trash-o"></i></button>
                                 </p>

webadmin/src/views/account.js

@@ -231,6 +231,27 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
         }
     };
 
+    $scope.tokenAdd = {
+        busy: false,
+        token: {},
+
+        show: function (client) {
+            $scope.tokenAdd.busy = true;
+            $scope.tokenAdd.token = {};
+
+            Client.createTokenByClientId(client.id, function (error, result) {
+                if (error) console.error(error);
+
+                $scope.tokenAdd.busy = false;
+                $scope.tokenAdd.token = result;
+
+                $('#tokenAddModal').modal('show');
+
+                // refresh token list
+            });
+        }
+    };
+
     $scope.removeAccessTokens = function (client) {
         client.busy = true;