src/components/common/VnChangePassword.vue

@@ -2,9 +2,9 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnRow from '../ui/VnRow.vue';
-import VnInput from './VnInput.vue';
 import FetchData from '../FetchData.vue';
 import useNotify from 'src/composables/useNotify';
+import VnInputPassword from './VnInputPassword.vue';
 
 const props = defineProps({
     submitFn: { type: Function, default: () => {} },
@@ -70,19 +70,17 @@ defineExpose({ show: () => changePassDialog.value.show() });
             </QCardSection>
             <QForm ref="form">
                 <QCardSection>
-                    <VnInput
+                    <VnInputPassword
                         v-if="props.askOldPass"
                         :label="t('Old password')"
                         v-model="passwords.oldPassword"
-                        type="password"
                         :required="true"
-                        autofocus
                         :toggle-visibility="true"
+                        autofocus
                     />
-                    <VnInput
+                    <VnInputPassword
                         :label="t('New password')"
                         v-model="passwords.newPassword"
-                        type="password"
                         :required="true"
                         :toggle-visibility="true"
                         :info="
@@ -97,10 +95,9 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         autofocus
                     />
 
-                    <VnInput
+                    <VnInputPassword
                         :label="t('Repeat password')"
                         v-model="passwords.repeatPassword"
-                        type="password"
                         :toggle-visibility="true"
                     />
                 </QCardSection>

src/components/common/VnInput.vue

@@ -42,10 +42,6 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
-    toggleVisibility: {
-        type: Boolean,
-        default: false,
-    },
 });
 
 const vnInputRef = ref(null);
@@ -129,7 +125,7 @@ const handleInsertMode = (e) => {
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            :type="toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type"
+            :type="$attrs.type"
             :class="{ required: isRequired }"
             @keyup.enter="emit('keyup.enter')"
             @keydown="handleKeydown"
@@ -143,12 +139,6 @@ const handleInsertMode = (e) => {
                 <slot name="prepend" />
             </template>
             <template #append>
-                <QIcon
-                    v-if="toggleVisibility"
-                    :name="showPassword ? 'visibility_off' : 'visibility'"
-                    class="cursor-pointer"
-                    @click="showPassword = !showPassword"
-                />
                 <QIcon
                     name="close"
                     size="xs"

src/components/common/VnInputPassword.vue

@@ -0,0 +1,36 @@
+<script setup>
+import VnInput from 'src/components/common/VnInput.vue';
+import { ref } from 'vue';
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    toggleVisibility: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const showPassword = ref(false);
+const model = defineModel({ type: [Number, String] });
+</script>
+<template>
+    <VnInput
+        v-bind="{ ...$attrs }"
+        v-model.number="model"
+        :type="
+            $props.toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type
+        "
+        hint=""
+    >
+        <template #append>
+            <QIcon
+                :name="showPassword ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="showPassword = !showPassword"
+            />
+        </template>
+    </VnInput>
+</template>