From b3f62cc10d1fc5fe57a6828bd3b11102acb45187 Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Fri, 20 Nov 2020 11:58:31 +0100
Subject: [PATCH] Add the 'show password' feature

---
 README.md                     |   2 --
 src/assets/fonts/icomoon.woff | Bin 1428 -> 2020 bytes
 src/assets/icomoon.json       |   1 +
 src/css/fonts.sass            |  28 ++++++++++++++++++++--------
 src/vue/Description.vue       |   1 -
 src/vue/Input.vue             |   2 --
 src/vue/Result.vue            |  13 +++++++++++--
 src/vue/Save.vue              |  17 +++++++++++++++--
 8 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/icomoon.json

diff --git a/README.md b/README.md
index 37d88db..c807487 100644
--- a/README.md
+++ b/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
diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff
index 6f81af3447d1ca87c50b6150e35606add3c17082..64449075ab67a2ecf4c5226f3c43a67cf7ca194f 100644
GIT binary patch
delta 1053
zcmYjQOH30{6uoyIoq<9IglPw%d;<NU(1y>HLID#=O9YG2RHGZEL8K%UP)I~Jg+N>w
zV<L5d8(Enccj87635dABuyJQZV+>n$B^zb%zD_}2=FGf%-g)=VJ@e*K_D-(#_PJ09
z5NJp{kezzY0VbzR1rMvNiG|*HbOZonv=HG?FMYh<A06e~GR2u`<n<5Uxk21J07g7p
zzPGmWBGwnZ4q%!jjgO<~)AuVeB8huNv7JMD%Ra>7W8=haQ|#uj&BFTNa4+e)#S9{>
z92upoGaenM!lI4h@)Yu5U?>{zBd&#t-{pARne}I6cyx^Vp_fVP7|j@)PUhe#G$qes
z7v1M@Ao)hPmGA}?i$w`~y$wU<DhRN?zsg$KDrE5HYA_2;1!!`hu5VxfoAnKo{vMk#
zu(qTJ@%56hzqh-%NN-OSXbW3_Qfi_JI)K~ZtjI+VR#r$dN}^PXsw66EDc0Bd8qwE)
zbyihMcu;HbncA?CE*UKfaUOIz8k{cVN>2M4X|IL0QyQ7lIb9SVERmQk$ZmPlb>U<r
z9G=lMd)Z~*yev!kSy}lK>yh`qmDidlY!1J^ThiqbL?&e(x3;=Z7YVbXn9x@WT#DxP
zgcPMMh=Ql9ghc+S_L3%BxTdErowB00m8!^_IXP-!BoOFm8*tB4QHcgsaO>L++l0Bc
z-0fej3EPAW!BVYOb(OUihpIw~t3Y27MMVjDyjwv;q`V}uJ0&TccPwG#YrlDdJIFuO
zB-sd13}@gXS(x_DO17!igPxr(>e|VvLq~}C@8MCgMoyBjR#HTAj=Zj~vkH)I%dRD~
znQ%CA81m@Zp$F|#eq)|8E!BZ$Sd}R;QTXe3yZsytj4nC?fk>fxbpHIHS*P8Y8QvI4
zc)~odrdC^s^%<%BNgbyvk$fOjJovG7Ew|-2Wb^+3;PaR6p9jxm4{JPcHu%&com~K7
qmLEe{=loHm6lPH9cwU7GwBZw6#;?TkN@nOc4loG($A9^YJ;i^pea996

delta 457
zcmXw$%S!@L6o=25>*N!ZeAOmg)FLV)kOChFfkTv33u##lW*RsuC}fb-s-Rtt3)|Pa
zMVqu1mMH{oYSCZNvRza}G<L4mz&Gcf@1B_-cjm=fF}rqFBnc4c5-VWt)dfKHQExvP
zckP$rikt($6m7&f?zN}mq@3sOhI+#vwq$yDi`+d?<oKe)u~b6d1Ykj$ndR6@h0hd8
zas}!~Ir=;HkWvct469P_;W*0BOlRXXx6H0c403QDI*MGRVAkP7JuKkO$V!6TD}^3%
zP8W^exon;SL>|(gW3*yyRkdIknHt3<x>s>qMe!gYK(pImA=UsL7y+ixh@u_EF+@#k
zVF3MFTc@?rj{&W9Th}6ZT^G7PAGMlbDhv4;ujFt#9g=t2m+`m(DTw%bn>gCA2H(M~
zBLVPyF%<f*>X|qfG4y?J69g)}|D!3C`yNc-fDs77I_v@e+WhSXm;`<t0D=Fc%kaQC
F{sOuCT%`a2

diff --git a/src/assets/icomoon.json b/src/assets/icomoon.json
new file mode 100644
index 0000000..2bbe9be
--- /dev/null
+++ b/src/assets/icomoon.json
@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M182.857 438.857h292.571v-109.714c0-80.571-65.714-146.286-146.286-146.286s-146.286 65.714-146.286 146.286v109.714zM658.286 493.714v329.143c0 30.286-24.571 54.857-54.857 54.857h-548.571c-30.286 0-54.857-24.571-54.857-54.857v-329.143c0-30.286 24.571-54.857 54.857-54.857h18.286v-109.714c0-140.571 115.429-256 256-256s256 115.429 256 256v109.714h18.286c30.286 0 54.857 24.571 54.857 54.857z"],"attrs":[{}],"width":658,"isMulticolor":false,"isMulticolor2":false,"tags":["lock"],"grid":14},"attrs":[{}],"properties":{"order":65,"id":0,"name":"lock","prevSize":28,"code":59648},"setIdx":0,"setId":6,"iconIdx":0},{"icon":{"paths":["M509.611 766.72l-314.197-185.6 314.155 442.88 314.453-442.88-314.539 185.6zM514.389 0l-314.283 521.515 314.24 185.771 314.24-185.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["ethereum"],"grid":0},"attrs":[{}],"properties":{"order":66,"id":1,"name":"ethereum","prevSize":32,"code":59649},"setIdx":0,"setId":6,"iconIdx":1},{"icon":{"paths":["M945.942 14.058c-18.746-18.744-49.136-18.744-67.882 0l-202.164 202.164c-51.938-15.754-106.948-24.222-163.896-24.222-223.318 0-416.882 130.042-512 320 41.122 82.124 100.648 153.040 173.022 207.096l-158.962 158.962c-18.746 18.746-18.746 49.136 0 67.882 9.372 9.374 21.656 14.060 33.94 14.060s24.568-4.686 33.942-14.058l864-864c18.744-18.746 18.744-49.138 0-67.884zM416 320c42.24 0 78.082 27.294 90.92 65.196l-121.724 121.724c-37.902-12.838-65.196-48.68-65.196-90.92 0-53.020 42.98-96 96-96zM110.116 512c38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.862-7.3-9.962 27.328-15.412 56.822-15.412 87.596 0 54.89 17.286 105.738 46.7 147.418l-60.924 60.924c-52.446-36.842-97.202-83.882-131.66-138.342z","M768 442c0-27.166-4.256-53.334-12.102-77.898l-321.808 321.808c24.568 7.842 50.742 12.090 77.91 12.090 141.382 0 256-114.618 256-256z","M830.026 289.974l-69.362 69.362c1.264 0.786 2.53 1.568 3.786 2.368 60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-38.664 0-76.902-4.76-113.962-14.040l-76.894 76.894c59.718 21.462 123.95 33.146 190.856 33.146 223.31 0 416.876-130.042 512-320-45.022-89.916-112.118-166.396-193.974-222.026z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye-blocked","views","vision","visit","banned","blocked","forbidden","private"],"grid":16},"attrs":[{},{},{}],"properties":{"order":69,"id":2,"name":"eye-off","prevSize":32,"code":59650},"setIdx":0,"setId":6,"iconIdx":2},{"icon":{"paths":["M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["eye","views","vision","visit"],"grid":16},"attrs":[{}],"properties":{"order":67,"id":3,"name":"eye-on","prevSize":32,"code":59651},"setIdx":0,"setId":6,"iconIdx":3},{"icon":{"paths":["M1024 397.050l-353.78-51.408-158.22-320.582-158.216 320.582-353.784 51.408 256 249.538-60.432 352.352 316.432-166.358 316.432 166.358-60.434-352.352 256.002-249.538z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["star-full","rate","star","favorite","bookmark"],"grid":16},"attrs":[{}],"properties":{"order":68,"id":4,"name":"star","prevSize":32,"code":59652},"setIdx":0,"setId":6,"iconIdx":4},{"icon":{"paths":["M736 448l-256 256-256-256h160v-384h192v384zM480 704h-480v256h960v-256h-480zM896 832h-128v-64h128v64z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"tags":["download","save","store"],"grid":16},"attrs":[{}],"properties":{"order":70,"id":5,"name":"download","prevSize":32,"code":59653},"setIdx":0,"setId":6,"iconIdx":5}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showCodes":false,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon","majorVersion":1,"minorVersion":0},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"cssVars":false,"cssVarsFormat":"scss","noie8":true,"ie7":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"name":"icomoon","classSelector":".icon","height":32,"columns":16,"margin":16},"historySize":50,"gridSize":16,"showGrid":true,"showLiga":false}}
\ No newline at end of file
diff --git a/src/css/fonts.sass b/src/css/fonts.sass
index 74d588c..8797c4a 100644
--- a/src/css/fonts.sass
+++ b/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: "\e903"
\ No newline at end of file
+  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"
diff --git a/src/vue/Description.vue b/src/vue/Description.vue
index f91e807..d7d35ec 100644
--- a/src/vue/Description.vue
+++ b/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;
diff --git a/src/vue/Input.vue b/src/vue/Input.vue
index 1604efc..340ab54 100644
--- a/src/vue/Input.vue
+++ b/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: {
diff --git a/src/vue/Result.vue b/src/vue/Result.vue
index efe8422..6726813 100644
--- a/src/vue/Result.vue
+++ b/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>
diff --git a/src/vue/Save.vue b/src/vue/Save.vue
index c8c3db7..bccdb9d 100644
--- a/src/vue/Save.vue
+++ b/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>