feat: refs #7702 ask old pass

src/components/common/VnChangePassword.vue

@@ -6,7 +6,10 @@ import VnInput from './VnInput.vue';
 import FetchData from '../FetchData.vue';
 import useNotify from 'src/composables/useNotify';
 
-const props = defineProps({ submitFn: { type: Function, default: () => {} } });
+const props = defineProps({
+    submitFn: { type: Function, default: () => {} },
+    askOldPass: { type: Boolean, default: false },
+});
 const emit = defineEmits(['onSubmit']);
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -18,8 +21,7 @@ const requirements = ref([]);
 const isLoading = ref(false);
 
 const validate = async () => {
-    const { newPassword, repeatPassword } = passwords.value;
+    const { newPassword, repeatPassword, oldPassword } = passwords.value;
-    console.log('Validating passwords:', newPassword, repeatPassword);
 
     if (!newPassword) {
         notify(t('You must enter a new password'), 'negative');
@@ -29,17 +31,14 @@ const validate = async () => {
         notify(t("Passwords don't match"), 'negative');
         return;
     }
+
     try {
         isLoading.value = true;
-        console.log('Calling submitFn with:', newPassword);
+        await props.submitFn(newPassword, oldPassword);
-
-        await props.submitFn(newPassword);
         emit('onSubmit');
     } catch (e) {
-        console.error('submitFn failed:', e);
         notify('errors.writeRequest', 'negative');
     } finally {
-        console.log('Entering finally block');
         changePassDialog.value.hide();
         isLoading.value = false;
     }
@@ -58,7 +57,7 @@ defineExpose({ show: () => changePassDialog.value.show() });
             <QCardSection>
                 <slot name="header">
                     <VnRow class="items-center" style="flex-direction: row">
-                        <span class="text-h6" v-text="t('Change password')" />
+                        <span class="text-h6" v-text="t('globals.changePass')" />
                         <QIcon
                             class="cursor-pointer"
                             name="close"
@@ -71,6 +70,14 @@ defineExpose({ show: () => changePassDialog.value.show() });
             </QCardSection>
             <QForm ref="form">
                 <QCardSection>
+                    <VnInput
+                        v-if="props.askOldPass"
+                        :label="t('Old password')"
+                        v-model="passwords.oldPassword"
+                        type="password"
+                        :required="true"
+                        autofocus
+                    />
                     <VnInput
                         :label="t('New password')"
                         v-model="passwords.newPassword"
@@ -122,7 +129,6 @@ defineExpose({ show: () => changePassDialog.value.show() });
 
 <i18n>
 es:
-    Change password: Cambiar contraseña
     New password: Nueva contraseña
     Repeat password: Repetir contraseña
     You must enter a new password: Debes introducir la nueva contraseña

src/i18n/locale/en.yml

@@ -300,6 +300,7 @@ globals:
         from: From
         To: To
         stateFk: State
+    changePass: Change password
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -304,6 +304,7 @@ globals:
         from: Desde
         To: Hasta
         stateFk: Estado
+    changePass: Cambiar contraseña
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -4,9 +4,12 @@ import { computed, ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useRoute } from 'vue-router';
+import { useAcl } from 'src/composables/useAcl';
 import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 import useNotify from 'src/composables/useNotify.js';
+
 const $props = defineProps({
     hasAccount: {
         type: Boolean,
@@ -62,6 +65,19 @@ async function sync() {
 }
 </script>
 <template>
+    <VnChangePassword
+        ref="changePassRef"
+        :ask-old-pass="true"
+        :submit-fn="
+            async (newPassword, oldPassword) => {
+                await axios.patch(`Accounts/change-password`, {
+                    userId: entityId,
+                    newPassword,
+                    oldPassword,
+                });
+            }
+        "
+    />
     <VnConfirm
         v-model="showSyncDialog"
         :message="t('account.card.actions.sync.message')"
@@ -92,6 +108,17 @@ async function sync() {
             />
         </template>
     </VnConfirm>
+    <QItem
+        v-if="
+            entityId == account.id &&
+            useAcl().hasAny([{ model: 'Account', props: '*', accessType: 'WRITE' }])
+        "
+        v-ripple
+        clickable
+        @click="$refs.changePassRef.show()"
+    >
+        <QItemSection>{{ t('globals.changePass') }}</QItemSection>
+    </QItem>
     <QItem
         v-if="account.hasAccount"
         v-ripple
@@ -138,6 +165,5 @@ async function sync() {
     <QItem v-ripple clickable @click="showSyncDialog = true">
         <QItemSection>{{ t('account.card.actions.sync.name') }}</QItemSection>
     </QItem>
-
     <QSeparator />
 </template>

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -56,7 +56,7 @@ async function hasCustomerRole() {
         </template>
         <template #moreActions>
             <QBtn
-                :label="t('Change password')"
+                :label="t('globals.changePass')"
                 color="primary"
                 icon="edit"
                 :disable="!canChangePassword"
@@ -81,5 +81,4 @@ es:
     User: Usuario
     Recovery email: Correo de recuperacion
     This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
-    Change password: Cambiar contraseña
 </i18n>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -88,7 +88,7 @@ const handlePhotoUpdated = (evt = false) => {
                 @click="$refs.changePassRef.show"
             >
                 <QItemSection>
-                    {{ t('Change password') }}
+                    {{ t('globals.changePass') }}
                 </QItemSection>
             </QItem>
         </template>
@@ -209,5 +209,4 @@ const handlePhotoUpdated = (evt = false) => {
 es:
     Click to allow the user to be disabled: Marcar para deshabilitar
     Click to exclude the user from getting disabled: Marcar para no deshabilitar
-    Change password: Cambiar contraseña
 </i18n>