Fix: Exposes AWS keys and secrets #21

Fix: Sidebar icons sizing inconsistency #24

Author: Arattian

package-lock.json

@@ -16,9 +16,9 @@
     "test:unit": "vue-cli-service test:unit --coverage"
   },
   "dependencies": {
-    "aws-sdk": "^2.392.0",
+    "aws-sdk": "^2.395.0",
     "electron-default-menu": "^1.0.1",
-    "element-ui": "^2.4.11",
+    "element-ui": "^2.5.2",
     "lodash": "^4.17.11",
     "vue": "^2.5.22",
     "vue-awesome": "^3.3.1",

package.json

@@ -12,8 +12,10 @@
               el-option(v-for="(region, index) in regionList" :key="index" :label="region" :value="region")
           el-form-item(label="Access Key Id" required)
             el-input(v-model="configs.accessKeyId" placeholder="AWS access key id")
-          el-form-item(label="Secret Access Key" @keyup.enter.native="submitRemoteForm" required)
-            el-input(v-model="configs.secretAccessKey" placeholder="AWS secret access key")
+          el-form-item(label="Secret Access Key"  @keyup.enter.native="submitRemoteForm" required)
+            el-input(v-model="configs.secretAccessKey" :type="inputType" placeholder="AWS secret access key")
+              template(slot="append")
+                el-button(icon="el-icon-view" @click="showSecretKey")
         ActionButtons(
           :cancelHandler="setToDefault"
           :confirmHandler="submitRemoteForm"
@@ -50,6 +52,7 @@
     },
   })
   export default class ConnectDatabase extends Vue {
+    private inputType: string = 'password';
     @Prop(Function) private submitRemoteForm: any;
     @Prop(Function) private submitLocalForm: any;
     @Prop(Function) private setToDefault: any;
@@ -60,6 +63,13 @@
     private mounted() {
       this.setToDefault();
     }
+    private showSecretKey() {
+      if (this.inputType === 'password') {
+        this.inputType = 'text';
+      } else {
+        this.inputType = 'password';
+      }
+    }
   }
 </script>
 

src/components/ConnectDatabase.vue

@@ -20,7 +20,6 @@
     el-row(class="container")
       .list-item(v-for="(table, index) in tableList" :key="index" @click="switchTable(table)" :class="{active: isActive(table)}")
         .info
-          v-icon(name="list-alt" class="icon")
           span {{ table }}
       span(v-if="!tableList.length") Empty database
 </template>