Integrates text-security npm module to Secrets component

Prevents shoulder surfing

Author: rewanthtammana

package.json

@@ -9,8 +9,11 @@
   },
   "dependencies": {
     "ansi_up": "^3.0.0",
+    "file-loader": "^4.1.0",
     "lodash.throttle": "^4.1.1",
     "portal-vue": "^1.5.0",
+    "text-security": "^1.2.0",
+    "url-loader": "^2.1.0",
     "vue": "^2.5.17",
     "vue-click-outside": "^1.0.7",
     "vue-i18n": "^8.2.1",

src/components/editable-list/Secrets.vue

@@ -17,7 +17,7 @@
 
     <template slot="fields">
       <BaseInput name="secret.name" v-model="secret.name" placeholder="Secret Name" type="text"/>
-      <BaseTextArea name="secret.data" v-model="secret.data" placeholder="Secret Value"/>
+      <BaseTextArea name="secret.data" v-model="secret.data" class="hide_secret" placeholder="Secret Value"/>
       <BaseCheckbox v-model="secret.pullRequest" style="margin-bottom: 12px;">Allow Pull Requests</BaseCheckbox>
     </template>
   </EditableList>
@@ -86,6 +86,11 @@ export default {
 </script>
 
 <style scoped>
+@import "../../../node_modules/text-security/dist/text-security-disc.css";
+.hide_secret {
+    font-family: 'text-security-disc';
+}
+
 .icon-secrets-empty {
   display: block;
   margin: 0 auto 20px;