Merge branch 'master' into persistent-ledger

assets/style/style.css

@@ -2824,6 +2824,19 @@ input {
     border: 0px;
 }
 
+.input-group-toggle {
+    cursor: pointer;
+    background-color: rgb(127, 32, 255);
+    border: 2px solid #AF9CC6;
+    color: rgb(233, 222, 255);
+    padding: 10px 8px !important;
+    display: inline-block;
+    width: 10%;
+    border-left-width: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
 .cur-pointer {
     cursor: pointer;
 }

scripts/Password.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { translation } from './i18n.js';
+import { ref } from 'vue';
+
+const props = defineProps({
+    showToggle: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+    },
+    testid: {
+        type: String,
+    },
+});
+
+const password = defineModel('password', {
+    default: '',
+});
+const isVisible = defineModel('isVisible', {
+    default: false,
+});
+const passwordInput = ref(null);
+
+function focus() {
+    passwordInput?.value?.focus();
+}
+
+defineExpose({ focus });
+</script>
+
+<template>
+    <div class="input-group">
+        <input
+            :type="isVisible ? 'text' : 'password'"
+            ref="passwordInput"
+            v-model="password"
+            :placeholder="placeholder || translation.walletPassword"
+            class="center-text textboxTransparency"
+            :style="`${
+                showToggle
+                    ? 'width: 90%; border-top-right-radius: 0; border-bottom-right-radius: 0;'
+                    : 'width: 100%;'
+            } font-family: monospace;`"
+            :data-testid="testid || null"
+        />
+        <span
+            v-if="showToggle"
+            @click="isVisible = !isVisible"
+            class="input-group-toggle input-group-text p-0"
+            style="height: 100%"
+        >
+            <i :class="'fa-solid fa-' + (isVisible ? 'eye' : 'eye-slash')"></i>
+        </span>
+    </div>
+</template>

scripts/dashboard/CreateWallet.vue

@@ -5,6 +5,7 @@ import { generateMnemonic } from 'bip39';
 import { translation } from '../i18n.js';
 import { ref, watch, toRefs } from 'vue';
 import newWalletIcon from '../../assets/icons/icon-new-wallet.svg';
+import Password from '../Password.vue';
 
 const emit = defineEmits(['importWallet']);
 const showModal = ref(false);
@@ -90,12 +91,10 @@ async function generateWallet() {
                     <br />
                     <div v-if="advancedMode">
                         <br />
-                        <input
-                            class="center-text"
-                            type="password"
+                        <Password
+                            v-model:password="passphrase"
+                            testid="passPhrase"
                             :placeholder="translation.optionalPassphrase"
-                            v-model="passphrase"
-                            data-testid="passPhrase"
                         />
                     </div>
                 </div>

scripts/dashboard/GenKeyWarning.vue

@@ -2,6 +2,7 @@
 import { translation, tr, ALERTS } from '../i18n.js';
 import { ref } from 'vue';
 import Modal from '../Modal.vue';
+import Password from '../Password.vue';
 import { MIN_PASS_LENGTH } from '../chain_params.js';
 import { createAlert } from '../misc';
 
@@ -13,6 +14,10 @@ const props = defineProps({
     isEncrypt: Boolean,
 });
 
+const isDualPasswordVisible = defineModel('isVisible', {
+    default: false,
+});
+
 const currentPassword = ref('');
 const password = ref('');
 const passwordConfirm = ref('');
@@ -90,37 +95,25 @@ function submit() {
                 </h5>
             </template>
             <template #body>
-                <input
-                    class="center-text textboxTransparency passwordTxtbox"
-                    data-i18n="encryptPasswordCurrent"
-                    v-model="currentPassword"
-                    style="width: 100%; font-family: monospace"
-                    type="password"
-                    :placeholder="translation.encryptPasswordCurrent"
-                    v-show="isEncrypt"
-                    data-testid="currentPasswordModal"
-                />
-                <input
-                    class="center-text textboxTransparency passwordTxtbox"
-                    v-model="password"
-                    data-i18n="encryptPasswordFirst"
-                    style="width: 100%; font-family: monospace"
-                    type="password"
+                <div v-show="isEncrypt">
+                    <Password
+                        v-model:password="currentPassword"
+                        testid="currentPasswordModal"
+                        :placeholder="translation.encryptPasswordCurrent"
+                    />
+                </div>
+                <Password
+                    v-model:password="password"
+                    v-model:isVisible="isDualPasswordVisible"
+                    testid="newPasswordModal"
                     :placeholder="translation.encryptPasswordFirst"
-                    data-testid="newPasswordModal"
                 />
-                <input
-                    class="center-text textboxTransparency passwordTxtbox"
-                    v-model="passwordConfirm"
-                    data-i18n="encryptPasswordSecond"
-                    style="
-                        width: 100%;
-                        font-family: monospace;
-                        margin-bottom: 0px;
-                    "
-                    type="password"
+                <Password
+                    v-model:password="passwordConfirm"
+                    v-model:isVisible="isDualPasswordVisible"
+                    :showToggle="false"
+                    testid="confirmPasswordModal"
                     :placeholder="translation.encryptPasswordSecond"
-                    data-testid="confirmPasswordModal"
                 />
             </template>
             <template #footer>

scripts/dashboard/RestoreWallet.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { nextTick, ref, toRefs, watch } from 'vue';
 import Modal from '../Modal.vue';
+import Password from '../Password.vue';
 import { ALERTS, translation } from '../i18n.js';
 import { Database } from '../database.js';
 import { decrypt } from '../aes-gcm';
@@ -33,6 +34,7 @@ async function submit() {
         createAlert('warning', ALERTS.FAILED_TO_IMPORT);
     }
 }
+
 function close() {
     emit('close');
     password.value = '';
@@ -52,13 +54,7 @@ function close() {
 
             <template #body>
                 <p style="opacity: 0.75" v-if="!!reason">{{ reason }}</p>
-                <input
-                    type="password"
-                    ref="passwordInput"
-                    v-model="password"
-                    :placeholder="translation.walletPassword"
-                    style="text-align: center"
-                />
+                <Password v-model:password="password" ref="passwordInput" />
             </template>
             <template #footer>
                 <button