From 0d9ba62d375a9423cfce045da325c5ae96293e08 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 26 Dec 2024 07:34:31 +0100
Subject: [PATCH] fix: refs #7699 fix vnChangePassword, clean VnInput

---
 src/components/common/VnChangePassword.vue | 43 +++++++++-------------
 src/components/common/VnInput.vue          |  5 +--
 2 files changed, 18 insertions(+), 30 deletions(-)

diff --git a/src/components/common/VnChangePassword.vue b/src/components/common/VnChangePassword.vue
index 4077359ff..c17c0ffbd 100644
--- a/src/components/common/VnChangePassword.vue
+++ b/src/components/common/VnChangePassword.vue
@@ -19,8 +19,6 @@ const changePassDialog = ref();
 const passwords = ref({ newPassword: null, repeatPassword: null });
 const requirements = ref([]);
 const isLoading = ref(false);
-const showPwd = ref(true);
-const showRpPwd = ref(true);
 
 const validate = async () => {
     const { newPassword, repeatPassword, oldPassword } = passwords.value;
@@ -79,39 +77,32 @@ defineExpose({ show: () => changePassDialog.value.show() });
                         type="password"
                         :required="true"
                         autofocus
-                        :clearable="true"
-                        :show-pwd="showPwd"
-                        @update:show-pwd="showPwd = $event"
+                        :toggle-visibility="true"
                     />
                     <VnInput
-                        :required="true"
-                        autofocus
+                        :label="t('New password')"
                         v-model="passwords.newPassword"
-                        :label="$t('New password')"
-                        :show-pwd="showPwd"
-                        @update:show-pwd="showPwd = $event"
-                    >
-                        <!-- <template #append>
-                            <QIcon
-                                :name="showPwd ? 'visibility_off' : 'visibility'"
-                                class="cursor-pointer"
-                                @click="showPwd = !showPwd"
-                            />
-                        </template> -->
-                    </VnInput>
+                        type="password"
+                        :required="true"
+                        :toggle-visibility="true"
+                        :info="
+                            t('passwordRequirements', {
+                                length: requirements.length,
+                                nAlpha: requirements.nAlpha,
+                                nUpper: requirements.nUpper,
+                                nDigits: requirements.nDigits,
+                                nPunct: requirements.nPunct,
+                            })
+                        "
+                        autofocus
+                    />
+
                     <VnInput
                         :label="t('Repeat password')"
                         v-model="passwords.repeatPassword"
                         type="password"
                         :toggle-visibility="true"
                     />
-                    <!-- <template #append>
-                            <QIcon
-                                :name="showRpPwd ? 'visibility_off' : 'visibility'"
-                                class="cursor-pointer"
-                                @click="showRpPwd = !showRpPwd"
-                            />
-                        </template> -->
                 </QCardSection>
             </QForm>
             <QCardActions>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 31a3cd411..f2fdb8ef1 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -43,14 +43,13 @@ const $props = defineProps({
         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 showPassword = ref(false);
 const value = computed({
     get() {
         return $props.modelValue;
@@ -144,14 +143,12 @@ const handleInsertMode = (e) => {
                 <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"