Merge pull request #528 from Adamant-im/feat/show-passphrase

feat: show/hide passphrase in text inputs
Adamant-im · Sep 17, 2023 · dbae1b8 · dbae1b8
2 parents cbcf7f5 + 8c38a96
commit dbae1b8
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 88 deletions.
diff --git a/src/components/ExportKeysForm.vue b/src/components/ExportKeysForm.vue
@@ -1,13 +1,7 @@
 <template>
   <v-form @submit.prevent="revealKeys">
-    <div
-      v-if="keys.length"
-      :class="`${className}__keys`"
-    >
-      <div
-        v-for="key in keys"
-        :key="key.crypto"
-      >
+    <div v-if="keys.length" :class="`${className}__keys`">
+      <div v-for="key in keys" :key="key.crypto">
         <v-text-field
           v-model="key.key"
           :readonly="true"
@@ -29,11 +23,7 @@
               :class="`${className}__btn-copy`"
               @click="copyKey(key.key)"
             >
-              <v-icon
-                :class="`${className}__icon`"
-                icon="mdi-content-copy"
-                size="20"
-              />
+              <v-icon :class="`${className}__icon`" icon="mdi-content-copy" size="20" />
             </v-btn>
           </template>
         </v-text-field>
@@ -53,44 +43,39 @@
     </div>
 
     <div :class="`${className}__disclaimer a-text-regular-enlarged`">
-      {{ t("options.export_keys.disclaimer") }}
+      {{ t('options.export_keys.disclaimer') }}
     </div>
 
     <v-text-field
       v-model.trim="passphrase"
       class="a-input"
       variant="underlined"
       color="primary"
-      type="text"
+      :type="showPassphrase ? 'text' : 'password'"
     >
       <template #label>
         <span class="font-weight-medium">
           {{ t('options.export_keys.passphrase') }}
         </span>
       </template>
       <template #append-inner>
-        <v-menu
-          :offset-overflow="true"
-          :offset-y="false"
-          left
-          eager
-        >
+        <v-btn @click="togglePassphraseVisibility" icon :ripple="false" :size="28" variant="plain">
+          <v-icon :icon="showPassphrase ? 'mdi-eye' : 'mdi-eye-off'" :size="24" />
+        </v-btn>
+
+        <v-menu :offset-overflow="true" :offset-y="false" left eager>
           <template #activator="{ props }">
-            <v-icon
-              v-bind="props"
-              icon="mdi-dots-vertical"
-            />
+            <v-btn v-bind="props" icon variant="plain" :size="28" :ripple="false">
+              <v-icon icon="mdi-dots-vertical" :size="24" />
+            </v-btn>
           </template>
           <v-list>
             <v-list-item @click="showQrcodeScanner = true">
               <v-list-item-title>{{ t('transfer.decode_from_camera') }}</v-list-item-title>
             </v-list-item>
             <v-list-item link>
               <v-list-item-title>
-                <qrcode-capture
-                  @detect="onDetectQrcode"
-                  @error="onDetectQrcodeError"
-                >
+                <qrcode-capture @detect="onDetectQrcode" @error="onDetectQrcodeError">
                   <span>{{ t('transfer.decode_from_image') }}</span>
                 </qrcode-capture>
               </v-list-item-title>
@@ -101,11 +86,7 @@
     </v-text-field>
 
     <div class="text-center">
-      <v-btn
-        :class="`${className}__export_keys_button`"
-        class="a-btn-primary"
-        @click="revealKeys"
-      >
+      <v-btn :class="`${className}__export_keys_button`" class="a-btn-primary" @click="revealKeys">
         {{ t('options.export_keys.button') }}
       </v-btn>
     </div>
@@ -130,11 +111,9 @@ import { ref, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
-function getBtcKey (crypto, passphrase, asWif) {
+function getBtcKey(crypto, passphrase, asWif) {
   const keyPair = getBtcAccount(crypto, passphrase).keyPair
-  const key = asWif
-    ? keyPair.toWIF()
-    : keyPair.privateKey.toString('hex')
+  const key = asWif ? keyPair.toWIF() : keyPair.privateKey.toString('hex')
 
   return {
     crypto: crypto,
@@ -143,7 +122,7 @@ function getBtcKey (crypto, passphrase, asWif) {
   }
 }
 
-function getLskKey (crypto, passphrase) {
+function getLskKey(crypto, passphrase) {
   const keyPair = getLskAccount(crypto, passphrase).keyPair
   const key = keyPair.secretKey.toString('hex')
 
@@ -160,7 +139,7 @@ export default defineComponent({
     QrcodeScannerDialog
   },
 
-  setup () {
+  setup() {
     const passphrase = ref('')
     const showQrcodeScanner = ref(false)
     const store = useStore()
@@ -218,10 +197,15 @@ export default defineComponent({
       })
     }
     const copyAll = () => {
-      const allKeys = keys.value.map(k => `${k.cryptoName}\r\n${k.key}`).join('\r\n\r\n')
+      const allKeys = keys.value.map((k) => `${k.cryptoName}\r\n${k.key}`).join('\r\n\r\n')
       copyKey(allKeys)
     }
 
+    const showPassphrase = ref(false)
+    const togglePassphraseVisibility = () => {
+      showPassphrase.value = !showPassphrase.value
+    }
+
     return {
       passphrase,
       showQrcodeScanner,
@@ -233,7 +217,9 @@ export default defineComponent({
       onScanQrcode,
       revealKeys,
       copyKey,
-      copyAll
+      copyAll,
+      showPassphrase,
+      togglePassphraseVisibility
     }
   }
 })

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-form
-    ref="form"
-    class="login-form"
-    @submit.prevent="submit"
-  >
+  <v-form ref="form" class="login-form" @submit.prevent="submit">
     <v-row no-gutters>
       <slot>
         <v-text-field
@@ -12,24 +8,29 @@
           autocomplete="current-password"
           class="text-center"
           color="#BBDEFB"
-          type="password"
+          :type="showPassphrase ? 'text' : 'password'"
           variant="underlined"
-        />
+        >
+          <template #append-inner>
+            <v-btn
+              @click="togglePassphraseVisibility"
+              icon
+              :ripple="false"
+              :size="28"
+              variant="plain"
+            >
+              <v-icon :icon="showPassphrase ? 'mdi-eye' : 'mdi-eye-off'" :size="24" />
+            </v-btn>
+          </template>
+        </v-text-field>
       </slot>
 
       <slot name="append-outer" />
     </v-row>
 
-    <v-row
-      align="center"
-      justify="center"
-      no-gutters
-    >
+    <v-row align="center" justify="center" no-gutters>
       <slot name="button">
-        <v-btn
-          class="login-form__button a-btn-primary"
-          @click="submit"
-        >
+        <v-btn class="login-form__button a-btn-primary" @click="submit">
           <v-progress-circular
             v-show="showSpinner"
             indeterminate
@@ -43,10 +44,7 @@
     </v-row>
 
     <transition name="slide-fade">
-      <v-row
-        justify="center"
-        no-gutters
-      >
+      <v-row justify="center" no-gutters>
         <slot name="qrcode-renderer" />
       </v-row>
     </transition>
@@ -55,8 +53,8 @@
 
 <script>
 import { validateMnemonic } from 'bip39'
-import { computed, ref, defineComponent } from 'vue';
-import { useStore } from 'vuex';
+import { computed, ref, defineComponent } from 'vue'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   props: {
@@ -70,11 +68,16 @@ export default defineComponent({
     const store = useStore()
     const showSpinner = ref(false)
 
+    const showPassphrase = ref(false)
+    const togglePassphraseVisibility = () => {
+      showPassphrase.value = !showPassphrase.value
+    }
+
     const passphrase = computed({
-      get () {
+      get() {
         return props.modelValue
       },
-      set (value) {
+      set(value) {
         emit('update:modelValue', value)
       }
     })
@@ -113,6 +116,8 @@ export default defineComponent({
     return {
       showSpinner,
       passphrase,
+      showPassphrase,
+      togglePassphraseVisibility,
       submit,
       freeze,
       antiFreeze,

diff --git a/src/components/PasswordSetDialog.vue b/src/components/PasswordSetDialog.vue
@@ -1,8 +1,5 @@
 <template>
-  <v-dialog
-    v-model="show"
-    width="500"
-  >
+  <v-dialog v-model="show" width="500">
     <v-card>
       <v-card-title class="a-text-header">
         {{ $t('login_via_password.popup_title') }}
@@ -17,26 +14,36 @@
           autofocus
           autocomplete="new-password"
           class="a-input"
-          type="password"
+          :type="showPassword ? 'text' : 'password'"
           variant="underlined"
           :label="$t('login_via_password.enter_password')"
           :name="Date.now()"
           @keyup.enter="submit"
-        />
+        >
+          <template #append-inner>
+            <v-btn
+              @click="togglePasswordVisibility"
+              icon
+              :ripple="false"
+              :size="28"
+              variant="plain"
+            >
+              <v-icon :icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" :size="24" />
+            </v-btn>
+          </template>
+        </v-text-field>
 
         <div class="a-text-regular-enlarged">
-          {{ $t('login_via_password.article_hint') }} <a @click="openLink(userPasswordAgreementLink)">{{ $t('login_via_password.article') }}</a>.
+          {{ $t('login_via_password.article_hint') }}
+          <a @click="openLink(userPasswordAgreementLink)">{{ $t('login_via_password.article') }}</a
+          >.
         </div>
       </v-card-text>
 
       <v-card-actions class="pa-3">
         <v-spacer />
 
-        <v-btn
-          variant="text"
-          class="a-btn-regular"
-          @click="show = false"
-        >
+        <v-btn variant="text" class="a-btn-regular" @click="show = false">
           {{ $t('transfer.confirm_cancel') }}
         </v-btn>
 
@@ -76,51 +83,56 @@ export default {
     password: '',
     showSpinner: false,
     disabledButton: false,
-    userPasswordAgreementLink: UserPasswordArticleLink
+    userPasswordAgreementLink: UserPasswordArticleLink,
+    showPassword: false
   }),
   computed: {
     show: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('update:modelValue', value)
       }
     },
-    isValidForm () {
+    isValidForm() {
       return this.password.length > 0
     }
   },
   methods: {
-    openLink (link) {
+    openLink(link) {
       window.open(link, '_blank', 'resizable,scrollbars,status,noopener')
     },
-    submit () {
+    submit() {
       if (!this.isValidForm) {
         return
       }
       this.disabledButton = true
       this.showSpinner = true
 
-      this.$store.dispatch('setPassword', this.password)
-        .then(encodedPassword => {
+      this.$store
+        .dispatch('setPassword', this.password)
+        .then((encodedPassword) => {
           this.password = ''
 
           this.$emit('password', encodedPassword)
 
           return encodedPassword
         })
-        .then(encodedPassword => {
+        .then((encodedPassword) => {
           return saveState(this.$store)
         })
-        .catch(err => {
+        .catch((err) => {
           console.error(err)
         })
         .finally(() => {
           this.disabledButton = false
           this.showSpinner = false
           this.show = false
         })
+    },
+    togglePasswordVisibility() {
+      this.showPassword = !this.showPassword
     }
   }
 }