3 files changed, 68 insertions, 1 deletions

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 901de34..b43d6fe 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -89,3 +89,12 @@ a:hover, a:focus {
     align-items: center;
     justify-content: center;
 }
+
+.access-token-input {
+    padding: 5px 0;
+    width: 450px;
+}
+
+.access-token-input > input, .access-token-input i {
+    cursor: copy !important;
+}
diff --git a/frontend/index.html b/frontend/index.html
index 2d97e1c..20154da 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -36,6 +36,21 @@
     </span>
   </el-dialog>
 
+  <el-dialog title="Access Tokens" :visible.sync="accessTokensDialogVisible" width="30%">
+    Tokens can be used with the surfer <a href="https://www.npmjs.com/package/cloudron-surfer" target="_blank">cli tool</a> or using the Api directly.
+    They are shared between all users.
+    <br/>
+    <br/>
+    <div>
+      <div v-for="accessToken in accessTokens">
+        <el-input suffix-icon="el-icon-copy-document" v-model="accessToken" class="access-token-input" @focus="onCopyAccessToken" size="small"></el-input>
+        <el-button icon="el-icon-delete" type="danger" size="small" @click="onDeleteAccessToken(accessToken)"></el-button>
+      </div>
+    </div>
+    <br/>
+    <el-button @click="onCreateAccessToken()" size="small" type="primary">Create Access Token</el-button>
+  </el-dialog>
+
   <el-header>
     <el-row type="flex" justify="space-between">
       <div style="padding: 7px;">
@@ -66,6 +81,7 @@
             </el-dropdown-item>
             <el-dropdown-item disabled divided>WebDAV Endpoint</el-dropdown-item>
             <el-dropdown-item><a href="/_webdav/" target="_blank">{{ origin }}/_webdav/</a></el-dropdown-item>
+            <el-dropdown-item command="apiAccess" divided><i class="el-icon-connection"></i> Access Tokens</el-dropdown-item>
             <el-dropdown-item command="about" divided><i class="el-icon-info"></i> About</el-dropdown-item>
             <el-dropdown-item command="logout" id="logoutButton"><i class="el-icon-circle-close"></i> Logout</el-dropdown-item>
           </el-dropdown-menu>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index d99a840..05cbe9c 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -43,6 +43,8 @@ function initWithToken(accessToken) {
             app.folderListingEnabled = !!result.body.folderListingEnabled;
 
             loadDirectory(decode(window.location.hash.slice(1)));
+
+            app.refreshAccessTokens();
         });
     });
 }
@@ -278,7 +280,9 @@ var app = new Vue({
             password: '',
             busy: false
         },
-        entries: []
+        entries: [],
+        accessTokens: [],
+        accessTokensDialogVisible: false
     },
     methods: {
         onLogin: function () {
@@ -312,6 +316,8 @@ var app = new Vue({
                   }).then(function () {}).catch(function () {});
             } else if (command === 'logout') {
                 logout();
+            } else if (command === 'apiAccess') {
+                this.accessTokensDialogVisible = true;
             }
         },
         onDownload: function (entry) {
@@ -415,6 +421,42 @@ var app = new Vue({
                 });
             }).catch(function () {});
         },
+        refreshAccessTokens: function () {
+            var that = this;
+
+            superagent.get('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                if (error && !result) return that.$message.error(error.message);
+
+                that.accessTokens = result.body.accessTokens;
+            });
+        },
+        onCopyAccessToken: function (event) {
+            event.target.select();
+            document.execCommand('copy');
+
+            this.$message({ type: 'success', message: 'Access token copied to clipboard' });
+        },
+        onCreateAccessToken: function () {
+            var that = this;
+
+            superagent.post('/api/tokens').query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                if (error && !result) return that.$message.error(error.message);
+
+                that.refreshAccessTokens();
+            });
+        },
+        onDeleteAccessToken: function (token) {
+            var that = this;
+
+            this.$confirm('All actions from apps using this token will fail!', 'Really delete this access token?', { confirmButtonText: 'Yes Delete', cancelButtonText: 'No' }).then(function () {
+                superagent.delete('/api/tokens/' + token).query({ access_token: localStorage.accessToken }).end(function (error, result) {
+                    if (error && !result) return that.$message.error(error.message);
+
+                    that.refreshAccessTokens();
+                });
+            }).catch(function () {});
+
+        },
         prettyDate: function (row, column, cellValue, index) {
             var date = new Date(cellValue),
             diff = (((new Date()).getTime() - date.getTime()) / 1000),