Add the 'show password' feature

README.md

@@ -3,7 +3,6 @@
 [![Build Status][build-img]][build-link]
 [![License][license-img]][license-link]
 [![Maintainability][maint-img]][maint-link]
-![Visitors][visitors-img]
 
 Browser-based ETH vanity address generator
 
@@ -84,4 +83,3 @@ npm run build
 [license-link]: https://raw.githubusercontent.com/bokub/vanity-eth/master/LICENSE
 [maint-img]: https://flat.badgen.net/codeclimate/maintainability/bokub/vanity-eth
 [maint-link]: https://codeclimate.com/github/bokub/vanity-eth/maintainability
-[visitors-img]: https://flat.badgen.net/runkit/vanity-eth-visits-oleal3y7ahxg

src/css/fonts.sass

@@ -34,20 +34,32 @@
 
 [class^="icon-"], [class*=" icon-"]
   font-family: 'icomoon' !important
-  speak: none
+  speak: never
   font-style: normal
   font-weight: normal
   font-variant: normal
   text-transform: none
   line-height: 1
+
+  /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
 
-.icon-star:before
-  content: "\e900"
-.icon-download:before
-  content: "\e901"
-.icon-ethereum:before
-  content: "\e902"
+
 .icon-lock:before
+  content: "\e900"
+
+.icon-ethereum:before
+  content: "\e901"
+
+.icon-eye-off:before
+  content: "\e902"
+
+.icon-eye-on:before
   content: "\e903"
+
+.icon-star:before
+  content: "\e904"
+
+.icon-download:before
+  content: "\e905"

src/vue/Description.vue

@@ -66,7 +66,6 @@
         methods: {
             scrollDown() {
                 this.scrollTo(document.getElementById('input-panel'), -1);
-                this.$root.$emit('event', 'Start now');
             },
             scrollTo(element, lastValue) {
                 let currentValue = window.scrollY;

src/vue/Input.vue

@@ -106,12 +106,10 @@
             startGen: function () {
                 if (!this.running && !this.inputError && !this.error) {
                     this.$emit('start');
-                    this.$root.$emit('event', 'Generate');
                 }
             },
             stopGen: function () {
                 this.$emit('stop');
-                this.$root.$emit('event', 'Stop');
             }
         },
         watch: {

src/vue/Result.vue

@@ -5,11 +5,11 @@
             <div class="col">
                 <div>Address: <span class="output" v-text="address"></span></div>
                 <div>Private key:
-                    <span class="output" v-if="privateKey" v-text="reveal ? privateKey : 'Click to reveal'" @click="reveal = true"></span>
+                    <span class="output" v-if="privateKey" v-text="reveal ? privateKey : 'Click to reveal'" @click="revealKey()"></span>
                 </div>
             </div>
             <div class="col-lg-2 col-12">
-                <button data-remodal-target="modal" class="save button-large" :disabled="!privateKey">
+                <button data-remodal-target="modal" class="save button-large" :disabled="!privateKey" @click="openSave()">
                     <i class="icon-lock"></i>&nbsp;&nbsp;&nbsp;Save
                 </button>
             </div>
@@ -39,6 +39,15 @@
                     id.appendChild(blockies({seed: addr.toLocaleLowerCase(), scale: 6}));
                 }
             }
+        },
+        methods: {
+            revealKey() {
+                this.reveal = true;
+                this.$root.$emit('event', 'Reveal');
+            },
+            openSave() {
+                this.$root.$emit('event', 'Save');
+            }
         }
     };
 </script>

src/vue/Save.vue

@@ -5,8 +5,11 @@
         <form @submit.prevent="save">
             <div>
                 <input class="hidden" type="text" autocomplete="username">
-                <input type="password" autocomplete="new-password" class="text-input-large" v-model="password"
+                <input :type="showPassword ? 'text' : 'password'" autocomplete="new-password" class="text-input-large" v-model="password"
                        placeholder="Password">
+                <button type="button" class="show-password" @click="showPassword = !showPassword">
+                    <i :class="showPassword ? 'icon-eye-off' : 'icon-eye-on'"></i>
+                </button>
             </div>
             <div>
                 <button type="button" class="button-large" @click="save" :disabled="!password || !privateKey || loading"
@@ -31,6 +34,7 @@
         },
         data: function () {
             return {
+                showPassword: false,
                 password: '',
                 loading: false
             };
@@ -128,5 +132,14 @@
                 color: $text
         .hidden
             display: none
-
+    .show-password
+        position: absolute
+        border: none
+        font-size: 24px
+        background: rgba(0,0,0,0)
+        color: $text
+        transform: translate(-50px, 12px)
+        outline: none !important
+        box-shadow: none !important
+        -webkit-appearance: none
 </style>