From 4c1cfd180e53b254457f4ef5e4867706b22aec79 Mon Sep 17 00:00:00 2001
From: Son NK <nguyenkims@hotmail.com>
Date: Fri, 29 Nov 2019 18:02:46 +0000
Subject: [PATCH] Improve UI: explain how alias is created/reused

---
 src/popup/App.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index 744ee69..92ef8e1 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -31,16 +31,18 @@
         Paste the <em>API Key</em> here 👇🏽
       </div>
 
-      <textarea v-model="apiInput" placeholder="API Key" class="form-control mt-3" style="width: 100%"></textarea>
+      <textarea v-model="apiInput" placeholder="API Key" autofocus class="form-control mt-3" style="width: 100%"></textarea>
       <br />
       <button @click="save" class="btn btn-primary">Save</button>
     </div>
 
     <!-- API Key is set -->
     <div v-else>
-      <button @click="getAlias" class="btn btn-primary mb-3">Create Alias</button>
+      <button @click="getAlias" class="btn btn-primary btn-block mb-2">
+        Create/Get Alias 👇🏽
+      </button>
       
-      <input v-model="alias" disabled class="form-control mb-3" placeholder="New alias will be created here" />
+      <input v-model="alias" disabled class="form-control mb-3" placeholder="Alias here" />
 
       <p v-if="error != ''" class="text-danger">{{error}}</p>
 
@@ -49,11 +51,21 @@
         v-clipboard="() => alias"
         v-clipboard:success="clipboardSuccessHandler"
         v-clipboard:error="clipboardErrorHandler"
-        class="btn btn-success"
+        class="btn btn-success btn-block mb-3"
       >Copy to clipboard</button>
 
+      <small class="mb-2">
+        If an alias is already created for this website, it will be <em>re-used</em>. Otherwise a <em>new</em> one will be created.
+        <br>
+        If you are using free plan, an alias will be picked randomly from your non-custom aliases.
+      </small>
+
       <hr/>
+      <a href="https://app.simplelogin.io/dashboard/" target="_blank" class="btn btn-sm btn-link float-left">
+        Manage Aliases
+      </a>
       <button @click="reset" class="btn btn-sm btn-link float-right">Logout</button>
+      <br>
     </div>
   </div>
 </template>
@@ -159,4 +171,9 @@ export default {
 p {
   font-size: 20px;
 }
+
+em {
+    font-style: normal;
+    background-color: #FFFF00;
+}
 </style>