Solucion a comentarios 5

src/i18n/en/index.js

@@ -161,6 +161,8 @@ export default {
             hasDebt: 'Customer has debt',
             notChecked: 'Customer not checked',
             noWebAccess: 'Web access is disabled',
+            passwordRequirements:
+                'The password must have at least { length } length characters, {nAlpha} alphabetic characters, {nUpper} capital letters, {nDigits} digits and {nPunct} symbols (Ex: $%&.)\n',
         },
         summary: {
             basicData: 'Basic data',

src/i18n/es/index.js

@@ -160,6 +160,8 @@ export default {
             hasDebt: 'El cliente tiene riesgo',
             notChecked: 'El cliente no está comprobado',
             noWebAccess: 'El acceso web está desactivado',
+            passwordRequirements:
+                'La contraseña debe tener al menos { length } caracteres de longitud, {nAlpha} caracteres alfabéticos, {nUpper} letras mayúsculas, {nDigits} dígitos y {nPunct} símbolos (Ej: $%&.)',
         },
         summary: {
             basicData: 'Datos básicos',

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -143,7 +143,7 @@ const updateData = () => {
                                         {{ t('Grade') }}:
                                     </div>
                                     <div class="text-weight-bold">
-                                        {{ item.insurances[0].grade }}
+                                        {{ item.insurances[0].grade || '-' }}
                                     </div>
                                 </div>
                                 <div class="flex">

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -1,24 +1,63 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import { useQuasar } from 'quasar';
+
+import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
 
 const { t } = useI18n();
+const quasar = useQuasar();
 const route = useRoute();
 
+const updateUserRef = ref(null);
+const canChangePassword = ref(0);
+const userPasswords = ref(0);
+const isLoading = ref(false);
+
 const filter = { where: { id: `${route.params.id}` } };
+
+const showChangePasswordDialog = () => {
+    quasar.dialog({
+        component: CustomerChangePassword,
+        componentProps: {
+            id: route.params.id,
+            userPasswords: userPasswords.value,
+            promise: refreshData,
+        },
+    });
+};
+
+const refreshData = () => {
+    updateUserRef.value.fetch();
+};
 </script>
 
 <template>
+    <FetchData
+        :url="`Clients/${route.params.id}/hasCustomerRole`"
+        @on-fetch="(data) => (canChangePassword = data)"
+        auto-load
+    />
+    <FetchData
+        @on-fetch="(data) => (userPasswords = data[0])"
+        auto-load
+        url="UserPasswords"
+    />
+
     <FormModel
+        :default-actions="false"
         :filter="filter"
         :observe-form-changes="false"
         :url-update="`Clients/${route.params.id}/updateUser`"
         :url="'VnUsers/preview'"
         model="client"
+        ref="updateUserRef"
     >
         <template #form="{ data, validate }">
             <div v-if="data?.length">
@@ -63,6 +102,35 @@ const filter = { where: { id: `${route.params.id}` } };
                         </div>
                     </VnRow>
                 </div>
+
+                <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('globals.cancel')"
+                        :loading="isLoading"
+                        class="q-mr-sm"
+                        color="primary"
+                        flat
+                        type="reset"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('Change password')"
+                        :loading="isLoading"
+                        @click.stop="showChangePasswordDialog()"
+                        class="q-mr-sm"
+                        color="primary"
+                        v-if="canChangePassword"
+                    />
+                    <QBtn
+                        :disabled="isLoading || canChangePassword"
+                        :label="t('globals.save')"
+                        :loading="isLoading"
+                        color="primary"
+                        type="submit"
+                    />
+                </div>
             </div>
         </template>
     </FormModel>
@@ -74,4 +142,5 @@ 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/Customer/components/CustomerChangePassword.vue

@@ -0,0 +1,140 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+
+import useNotify from 'src/composables/useNotify';
+
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { dialogRef } = useDialogPluginComponent();
+const { notify } = useNotify();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    userPasswords: {
+        type: Object,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+const newPassword = ref('');
+const requestPassword = ref('');
+
+const onSubmit = async () => {
+    isLoading.value = true;
+
+    if (newPassword.value !== requestPassword.value) {
+        notify(t("Passwords don't match"), 'negative');
+        isLoading.value = false;
+        return;
+    }
+
+    const payload = {
+        newPassword: newPassword.value,
+    };
+    try {
+        await axios.patch(`Clients/${$props.id}/setPassword`, payload);
+        await $props.promise();
+    } catch (error) {
+        notify('errors.create', 'negative');
+    } finally {
+        isLoading.value = false;
+        if (closeButton.value) closeButton.value.click();
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <QCard class="q-pa-lg">
+            <QCardSection>
+                <QForm @submit.prevent="onSubmit">
+                    <span
+                        ref="closeButton"
+                        class="row justify-end close-icon"
+                        v-close-popup
+                    >
+                        <QIcon name="close" size="sm" />
+                    </span>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput
+                                :label="t('New password')"
+                                clearable
+                                v-model="newPassword"
+                                type="password"
+                            >
+                                <template #append>
+                                    <QIcon name="info" class="cursor-info">
+                                        <QTooltip>
+                                            {{
+                                                t('customer.card.passwordRequirements', {
+                                                    length: $props.userPasswords.length,
+                                                    nAlpha: $props.userPasswords.nAlpha,
+                                                    nDigits: $props.userPasswords.nDigits,
+                                                    nPunct: $props.userPasswords.nPunct,
+                                                    nUpper: $props.userPasswords.nUpper,
+                                                })
+                                            }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </template>
+                            </VnInput>
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                :label="t('Request password')"
+                                clearable
+                                v-model="requestPassword"
+                                type="password"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :disabled="isLoading"
+                            :label="t('globals.cancel')"
+                            :loading="isLoading"
+                            class="q-ml-sm"
+                            color="primary"
+                            flat
+                            type="reset"
+                            v-close-popup
+                        />
+                        <QBtn
+                            :disabled="isLoading"
+                            :label="t('Change password')"
+                            :loading="isLoading"
+                            color="primary"
+                            type="submit"
+                        />
+                    </div>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    New password: Nueva contraseña
+    Request password: Repetir contraseña
+    Change password: Cambiar contraseña
+    Passwords don't match: Las contraseñas no coinciden
+</i18n>

src/pages/Customer/components/CustomerNewPayment.vue

@@ -52,14 +52,14 @@ const filterBanks = {
 const filterClientFindOne = {
     fields: ['email'],
     where: {
-        id: `${route.params.id}`,
+        id: route.params.id,
     },
 };
 
 const initialData = reactive({
     amountPaid: $props.totalCredit,
     bankFk: null,
-    clientFk: `${route.params.id}`,
+    clientFk: route.params.id,
     companyFk: $props.companyId,
     compensationAccount: null,
     description: null,