From 0a1a0113389ea9da94a9f9e8541e910154736fe3 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Mon, 27 Aug 2018 15:26:52 -0700
Subject: [PATCH] Move the API token to account page

The OAuth page is less and less useful. Moreover, the tokens are
actually tied to the user and not for the system.
---
 src/index.html         |  2 +-
 src/views/account.html | 40 +++++++++++++++++++++++++++++++++++++++-
 src/views/account.js   | 42 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0b98a8f82..2b1a06547 100644
--- a/src/index.html
+++ b/src/index.html
@@ -157,7 +157,7 @@
                             <ul class="dropdown-menu" role="menu">
                                 <li><a href="#/account"><i class="fa fa-user fa-fw"></i> Account</a></li>
                                 <li ng-show="user.admin"><a href="#/activity"><i class="fa fa-list-alt fa-fw"></i> Activity</a></li>
-                                <li ng-show="user.admin"><a href="#/tokens"><i class="fa fa-key fa-fw"></i> API Access</a></li>
+                                <!-- <li ng-show="user.admin"><a href="#/tokens"><i class="fa fa-key fa-fw"></i> API Access</a></li> -->
                                 <li ng-show="user.admin"><a href="#/backups"><i class="fa fa-archive fa-fw"></i> Backups</a></li>
                                 <li ng-show="user.admin"><a href="#/domains"><i class="fa fa-globe fa-fw"></i> Domains</a></li>
                                 <li ng-show="user.admin"><a href="#/email"><i class="fa fa-envelope fa-fw"></i> Email</a></li>
diff --git a/src/views/account.html b/src/views/account.html
index d43c05961..827671c1b 100644
--- a/src/views/account.html
+++ b/src/views/account.html
@@ -191,7 +191,22 @@
         </div>
       </div>
     </div>
-  </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>
 
 <div class="content">
 
@@ -246,6 +261,29 @@
 
   <br/>
 
+  <div class="text-left">
+    <h3>Access 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">
+      <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>
+                  <br/>
+                  <h4 class="text-muted">Active Tokens</h4>
+                  <hr/>
+                  <p ng-repeat="token in apiClient.activeTokens">
+                      <span ng-click-select>{{ token.accessToken }}</span> <button class="btn btn-xs btn-danger pull-right" ng-click="removeToken(apiClient, token)" title="Revoke Token"><i class="fa fa-trash-o"></i></button>
+                  </p>
+              </div>
+          </div>
+      </div>
+  </div>
+
+  <br/>
+
   <div class="text-left">
     <h3>Sessions</h3>
   </div>
diff --git a/src/views/account.js b/src/views/account.js
index 0a5f3a965..911050636 100644
--- a/src/views/account.js
+++ b/src/views/account.js
@@ -9,6 +9,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
     $scope.activeTokens = 0;
     $scope.activeClients = [];
     $scope.webadminClient = {};
+    $scope.apiClient = {};
 
     $scope.twoFactorAuthentication = {
         busy: false,
@@ -294,6 +295,46 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
         }
     };
 
+    $scope.tokenAdd = {
+        busy: false,
+        token: {},
+
+        show: function (client) {
+            $scope.tokenAdd.busy = true;
+            $scope.tokenAdd.token = {};
+
+            var expiresAt = Date.now() + 100 * 365 * 24 * 60 * 60 * 1000;   // ~100 years from now
+
+            Client.createTokenByClientId(client.id, '*' /* scope */, expiresAt, function (error, result) {
+                if (error && error.statusCode === 412) {
+                    var actionScope = $scope.$new(true);
+                    actionScope.action = '/#/settings';
+
+                    Client.notify('Not allowed', 'You have to enable the external API in the settings.', false, 'error', actionScope);
+
+                    return;
+                } else if (error) {
+                    return console.error(error);
+                }
+
+                $scope.tokenAdd.busy = false;
+                $scope.tokenAdd.token = result;
+
+                $('#tokenAddModal').modal('show');
+
+                refreshClientTokens(client);
+            });
+        }
+    };
+
+    $scope.removeToken = function (client, token) {
+        Client.delToken(client.id, token.accessToken, function (error) {
+            if (error) console.error(error);
+
+            refreshClientTokens(client);
+        });
+    };
+
     function revokeTokensByClient(client, callback) {
         Client.delTokensByClientId(client.id, function (error) {
             if (error) console.error(error);
@@ -332,6 +373,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
 
                 $scope.activeClients = activeClients.filter(function (c) { return c.id !== 'cid-sdk' && c.id !== 'cid-webadmin'; });
                 $scope.webadminClient = activeClients.filter(function (c) { return c.id === 'cid-webadmin'; })[0];
+                $scope.apiClient = activeClients.filter(function (c) { return c.id === 'cid-sdk'; })[0];
 
                 $scope.activeTokenCount = $scope.activeClients.reduce(function (prev, cur) { return prev + cur.activeTokens.length; }, 0);
                 $scope.activeTokenCount += $scope.webadminClient ? $scope.webadminClient.activeTokens.length : 0;