src/components/common/VnChangePassword.vue

@@ -76,48 +76,42 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         v-if="props.askOldPass"
                         :label="t('Old password')"
                         v-model="passwords.oldPassword"
-                        :type="showPwd ? 'password' : 'text'"
+                        type="password"
                         :required="true"
                         autofocus
-                    >
-                        <template #append>
-                            <QIcon
-                                :name="showPwd ? 'visibility_off' : 'visibility'"
-                                class="cursor-pointer"
-                                @click="showPwd = !showPwd"
-                            />
-                        </template>
-                    </VnInput>
+                        :clearable="true"
+                        :show-pwd="showPwd"
+                        @update:show-pwd="showPwd = $event"
+                    />
                     <VnInput
                         :required="true"
                         autofocus
                         v-model="passwords.newPassword"
                         :label="$t('New password')"
-                        :type="showPwd ? 'password' : 'text'"
-                        hint=""
+                        :show-pwd="showPwd"
+                        @update:show-pwd="showPwd = $event"
                     >
-                        <template #append>
+                        <!-- <template #append>
                             <QIcon
                                 :name="showPwd ? 'visibility_off' : 'visibility'"
                                 class="cursor-pointer"
                                 @click="showPwd = !showPwd"
                             />
-                        </template>
+                        </template> -->
                     </VnInput>
                     <VnInput
                         :label="t('Repeat password')"
                         v-model="passwords.repeatPassword"
-                        :type="showRpPwd ? 'password' : 'text'"
-                        hint=""
-                    >
-                        <template #append>
+                        type="password"
+                        :toggle-visibility="true"
+                    />
+                    <!-- <template #append>
                             <QIcon
                                 :name="showRpPwd ? 'visibility_off' : 'visibility'"
                                 class="cursor-pointer"
                                 @click="showRpPwd = !showRpPwd"
                             />
-                        </template>
-                    </VnInput>
+                        </template> -->
                 </QCardSection>
             </QForm>
             <QCardActions>

src/components/common/VnInput.vue

@@ -42,9 +42,15 @@ const $props = defineProps({
         type: Number,
         default: null,
     },
+    toggleVisibility: {
+        // Nueva propiedad
+        type: Boolean,
+        default: false,
+    },
 });
 
 const vnInputRef = ref(null);
+const showPassword = ref(false); // Estado para la visibilidad de contraseña
 const value = computed({
     get() {
         return $props.modelValue;
@@ -124,7 +130,7 @@ const handleInsertMode = (e) => {
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            :type="$attrs.type"
+            :type="toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type"
             :class="{ required: isRequired }"
             @keyup.enter="emit('keyup.enter')"
             @keydown="handleKeydown"
@@ -134,10 +140,18 @@ const handleInsertMode = (e) => {
             hide-bottom-space
             :data-cy="$attrs.dataCy ?? $attrs.label + '_input'"
         >
-            <template v-if="$slots.prepend" #prepend>
+            <template #prepend>
                 <slot name="prepend" />
             </template>
             <template #append>
+                <!-- Icono para mostrar/ocultar contraseña -->
+                <QIcon
+                    v-if="toggleVisibility"
+                    :name="showPassword ? 'visibility_off' : 'visibility'"
+                    class="cursor-pointer"
+                    @click="showPassword = !showPassword"
+                />
+                <!-- Ícono para borrar el valor -->
                 <QIcon
                     name="close"
                     size="xs"
@@ -155,7 +169,7 @@ const handleInsertMode = (e) => {
                             emit('remove');
                         }
                     "
-                ></QIcon>
+                />
                 <slot name="append" v-if="$slots.append && !$attrs.disabled" />
                 <QIcon v-if="info" name="info">
                     <QTooltip max-width="350px">
@@ -166,18 +180,3 @@ const handleInsertMode = (e) => {
         </QInput>
     </div>
 </template>
-<i18n>
-    en:
-        inputMin: Must be more than {value}
-        maxLength: The value exceeds {value} characters
-        inputMax: Must be less than {value}
-    es:
-        inputMin: Debe ser mayor a {value}
-        maxLength: El valor excede los {value} carácteres
-        inputMax: Debe ser menor a {value}
-</i18n>
-<style lang="scss">
-.q-field__append {
-    padding-inline: 0;
-}
-</style>