Improve token description

diff --git a/frontend/css/style.css b/frontend/css/style.css
index b43d6fee44c62711de2530534381a108dba32020..9d019b0fde57f4b21ccf2e9f7905d375fde92c7f 100644 (file)
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -92,7 +92,7 @@ a:hover, a:focus {
 
 .access-token-input {
     padding: 5px 0;
-    width: 450px;
+    width: 487px;
 }
 
 .access-token-input > input, .access-token-input i {

diff --git a/frontend/index.html b/frontend/index.html
index 20154da6a77229223d711d829c3a30f1b284ceea..920f8cc58f6c42fab19e6d45ca341a6a2d7a2bd4 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -37,10 +37,12 @@
   </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.
+    Access tokens are useful to programmatically deploy assets for example within a CI/CD pipeline.
+    For this they 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.
     <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>