Add access token ui and rest api

[perso/Immae/Projets/Nodejs/Surfer.git] / frontend / index.html

diff --git a/frontend/index.html b/frontend/index.html
index b3a6bbaaf70cdc1eea6b0d1c603b2f887484157d..20154da6a77229223d711d829c3a30f1b284ceea 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,12 +6,13 @@
 
     <link rel="icon" type="image/png" href="/_admin/img/logo.png">
 
-    <link rel="stylesheet" href="/_admin/css/theme-chalk.css">
+    <link rel="stylesheet" href="/_admin/css/theme-chalk_2.11.1.css">
     <link rel="stylesheet" href="/_admin/css/style.css">
 
     <script src="/_admin/js/jquery-1.12.1.min.js"></script>
-    <script src="/_admin/js/vue.js"></script>
-    <script src="/_admin/js/element-ui.js"></script>
+    <script src="/_admin/js/vue.min.js"></script>
+    <script src="/_admin/js/element-ui_2.11.1.min.js"></script>
+    <script src="/_admin/js/element-ui_en_2.11.1.min.js"></script>
     <script src="/_admin/js/filesize.min.js"></script>
     <script src="/_admin/js/superagent.js"></script>
 
@@ -35,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;">
@@ -65,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>
@@ -83,7 +100,7 @@
         <el-table :data="entries" style="max-width: 1280px;width: 100%" height="100%" empty-text="Folder is emtpy" :default-sort="{ prop: 'filePath', order: 'descending' }" @row-click="open">
           <el-table-column prop="previewUrl" label="Type" width="100px" sortable>
             <template slot-scope="scope">
-              <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/>
+              <img v-bind:src="scope.row.previewUrl" height="48px" width="48px" style="object-fit: cover;"/>
             </template>
           </el-table-column>
           <el-table-column prop="filePath" label="Name" sortable>
@@ -96,9 +113,9 @@
           <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column>
           <el-table-column label="Actions" align="right" width="200px" class-name="list-actions">
             <template slot-scope="scope">
-              <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
               <el-button size="small" icon="el-icon-edit" circle v-show="!scope.row.rename" @click.stop="onRename(scope.row, scope)"></el-button>
-              <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button>
+              <el-button size="small" icon="el-icon-download" circle v-show="!scope.row.rename && scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
+              <el-button size="small" icon="el-icon-delete" circle v-show="!scope.row.rename" @click.stop="onDelete(scope.row)"></el-button>
             </template>
           </el-table-column>
         </el-table>