X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=frontend%2Findex.html;h=dd4c635e2d923b204452556b91e5d778db7c619d;hb=6bbbdec8cd000259f978baf67ce8f54d5c3d4ed8;hp=b3a6bbaaf70cdc1eea6b0d1c603b2f887484157d;hpb=b59e67174a605a02045bc1dc85a821add2aea616;p=perso%2FImmae%2FProjets%2FNodejs%2FSurfer.git

diff --git a/frontend/index.html b/frontend/index.html
index b3a6bba..dd4c635 100644
--- 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,23 @@
     </span>
   </el-dialog>
 
+  <el-dialog title="Access Tokens" :visible.sync="accessTokensDialogVisible" width="40%">
+    Access tokens are useful to programmatically deploy assets for example within a CI/CD pipeline.
+    See the <a href="https://cloudron.io/documentation/apps/surfer/" target="_blank">docs</a> for more information on how to use this token.
+    <br/>
+    <br/>
+    <el-alert title="Tokens are shared between all users." type="warning" show-icon :closable="false"></el-alert>
+    <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 +83,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 +102,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="32px" width="32px" style="object-fit: cover;"/>
             </template>
           </el-table-column>
           <el-table-column prop="filePath" label="Name" sortable>
@@ -96,9 +115,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>