From ec0d783672d5363bc9355052ab58fd52249adb89 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 23 Jul 2024 10:58:35 -0300
Subject: [PATCH 1/8] WIP

---
 src/boot/axios.js                        |   1 +
 src/components/common/VnForm.vue         | 207 +++++++++++++++++++++++
 src/components/common/VnInput.vue        | 124 ++++++++++++++
 src/components/common/VnSelect.vue       | 188 ++++++++++++++++++++
 src/components/ui/ChangePasswordForm.vue |  87 ++++++++++
 src/js/db/sqlService.js                  |  42 +++++
 src/pages/Account/AccountConf.vue        |   9 -
 src/pages/Account/AccountConfig.vue      | 148 ++++++++++++++++
 src/router/routes.js                     |   4 +-
 9 files changed, 799 insertions(+), 11 deletions(-)
 create mode 100644 src/components/common/VnForm.vue
 create mode 100644 src/components/common/VnInput.vue
 create mode 100644 src/components/common/VnSelect.vue
 create mode 100644 src/components/ui/ChangePasswordForm.vue
 create mode 100644 src/js/db/sqlService.js
 delete mode 100644 src/pages/Account/AccountConf.vue
 create mode 100644 src/pages/Account/AccountConfig.vue

diff --git a/src/boot/axios.js b/src/boot/axios.js
index b5758897..1f384ff3 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -38,6 +38,7 @@ export default boot(({ app }) => {
 
     app.config.globalProperties.$jApi = jApi;
     app.provide('jApi', jApi);
+    app.provide('api', api);
 });
 
 export { api, jApi };
diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
new file mode 100644
index 00000000..ccddcad2
--- /dev/null
+++ b/src/components/common/VnForm.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, inject, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import useNotify from 'src/composables/useNotify.js';
+import {
+    generateUpdateSqlQuery,
+    generateInsertSqlQuery
+} from 'src/js/db/sqlService.js';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: ''
+    },
+    table: {
+        type: String,
+        default: ''
+    },
+    schema: {
+        type: String,
+        default: ''
+    },
+    // Objeto que define las pks de la tabla. Usado para generar las queries sql correspondientes.
+    // Debe ser definido como un objeto de pares key-value, donde la clave es el nombre de la columna de la pk.
+    pks: {
+        type: Object,
+        default: () => {}
+    },
+    createModelDefault: {
+        type: Object,
+        default: () => ({
+            field: '',
+            value: ''
+        })
+    },
+    // Objeto que contiene la consulta SQL y los parámetros necesarios para obtener los datos iniciales del formulario.
+    // `query` debe ser una cadena de texto que representa la consulta SQL.
+    // `params` es un objeto que mapea los parámetros de la consulta a sus valores.
+    fetchFormDataSql: {
+        type: Object,
+        default: () => ({
+            query: '',
+            params: {}
+        })
+    },
+    // Objeto con los datos iniciales del form, si este objeto es definido, no se ejecuta la query fetchFormDataSql
+    formInitialData: {
+        type: Object,
+        default: () => {}
+    },
+    // Array de columnas que no se deben actualizar
+    columnsToIgnoreUpdate: {
+        type: Array,
+        default: () => []
+    },
+    autoLoad: {
+        type: Boolean,
+        default: true
+    },
+    isEditMode: {
+        type: Boolean,
+        default: true
+    },
+    defaultActions: {
+        type: Boolean,
+        default: true
+    },
+    saveFn: {
+        type: Function,
+        default: () => {}
+    }
+});
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+const jApi = inject('jApi');
+const { notify } = useNotify();
+
+const loading = ref(false);
+const formData = ref({});
+const addressFormRef = ref(null);
+const modelInfo = ref(null);
+// Array de nombre de columnas de la tabla
+const tableColumns = computed(
+    () => modelInfo.value?.columns.map(col => col.name) || []
+);
+// Array de nombre de columnas que fueron actualizadas y no estan en columnsToIgnoreUpdate
+const updatedColumns = computed(() => {
+    return tableColumns.value.filter(
+        colName =>
+            modelInfo.value?.data[0][colName] !== formData.value[colName] &&
+            !props.columnsToIgnoreUpdate.includes(colName)
+    );
+});
+
+const fetchFormData = async () => {
+    if (!props.fetchFormDataSql.query) return;
+    loading.value = true;
+    const { results } = await jApi.execQuery(
+        props.fetchFormDataSql.query,
+        props.fetchFormDataSql.params
+    );
+
+    modelInfo.value = results[0];
+
+    if (!modelInfo.value.data[0]) {
+        modelInfo.value.data[0] = {};
+        // Si no existen datos iniciales, se inicializan con null, en base a las columnas de la tabla
+        modelInfo.value.columns.forEach(
+            col => (modelInfo.value.data[0][col.name] = null)
+        );
+    }
+
+    formData.value = { ...modelInfo.value.data[0] };
+    loading.value = false;
+};
+
+const submit = async () => {
+    try {
+        if (props.saveFn) {
+            await props.saveFn();
+        } else {
+            const sqlQuery = generateSqlQuery();
+            await jApi.execQuery(sqlQuery, props.pks);
+        }
+
+        emit('onDataSaved');
+        notify(t('dataSaved'), 'positive');
+    } catch (error) {
+        console.error('Error updating address:', error);
+        notify(t('addressNotUpdated'), 'negative');
+    }
+};
+
+const generateSqlQuery = () => {
+    if (props.isEditMode) {
+        return generateUpdateSqlQuery(
+            props.schema,
+            props.table,
+            props.pks,
+            updatedColumns.value,
+            formData.value
+        );
+    } else {
+        return generateInsertSqlQuery(
+            props.schema,
+            props.table,
+            formData.value,
+            updatedColumns.value,
+            props.createModelDefault
+        );
+    }
+};
+
+onMounted(async () => {
+    if (!props.formInitialData && props.autoLoad) {
+        fetchFormData();
+    }
+});
+
+defineExpose({
+    formData,
+    submit
+});
+</script>
+
+<template>
+    <Teleport :to="$actions">
+        <QBtn
+            v-if="defaultActions"
+            :label="t('save')"
+            type="submit"
+            icon="check"
+            rounded
+            no-caps
+            :disabled="!updatedColumns.length"
+            @click="addressFormRef.submit()"
+        />
+    </Teleport>
+    <QCard class="form-container" v-bind="$attrs">
+        <QForm
+            v-if="!loading"
+            ref="addressFormRef"
+            class="column full-width q-gutter-y-xs"
+            @submit="submit()"
+        >
+            <span class="text-h6 text-bold">
+                {{ title }}
+            </span>
+            <slot name="form" :data="formData" />
+        </QForm>
+        <QSpinner v-else color="primary" size="3em" :thickness="2" />
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.form-container {
+    width: 100%;
+    height: max-content;
+    max-width: 544px;
+    padding: 32px;
+    display: flex;
+    justify-content: center;
+}
+</style>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
new file mode 100644
index 00000000..62984159
--- /dev/null
+++ b/src/components/common/VnInput.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits([
+    'update:modelValue',
+    'update:options',
+    'keyup.enter',
+    'remove'
+]);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false
+    },
+    info: {
+        type: String,
+        default: ''
+    },
+    clearable: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const { t } = useI18n();
+const requiredFieldRule = val => !!val || t('globals.fieldRequired');
+const vnInputRef = ref(null);
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    }
+});
+const hover = ref(false);
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? { dense: true, outlined: true, rounded: true }
+        : {};
+});
+
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
+defineExpose({
+    focus
+});
+
+const inputRules = [
+    val => {
+        const { min } = vnInputRef.value.$attrs;
+        if (min >= 0) {
+            if (Math.floor(val) < min) return t('inputMin', { value: min });
+        }
+    }
+];
+</script>
+
+<template>
+    <div
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
+    >
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            :type="$attrs.type"
+            :class="{ required: $attrs.required }"
+            :clearable="false"
+            :rules="inputRules"
+            :lazy-rules="true"
+            hide-bottom-space
+            @keyup.enter="emit('keyup.enter')"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+            <template #append>
+                <slot v-if="$slots.append && !$attrs.disabled" name="append" />
+                <QIcon
+                    v-if="
+                        hover && value && !$attrs.disabled && $props.clearable
+                    "
+                    name="close"
+                    size="xs"
+                    @click="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                />
+                <QIcon v-if="info" name="info">
+                    <QTooltip max-width="350px">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    inputMin: Must be more than {value}
+es-ES:
+    inputMin: Must be more than {value}
+ca-ES:
+    inputMin: Ha de ser més gran que {value}
+fr-FR:
+    inputMin: Doit être supérieur à {value}
+pt-PT:
+    inputMin: Deve ser maior que {value}
+</i18n>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
new file mode 100644
index 00000000..24b82017
--- /dev/null
+++ b/src/components/common/VnSelect.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null
+    },
+    options: {
+        type: Array,
+        default: () => []
+    },
+    optionLabel: {
+        type: [String],
+        default: 'name'
+    },
+    optionValue: {
+        type: String,
+        default: 'id'
+    },
+    optionFilter: {
+        type: String,
+        default: null
+    },
+    dataQuery: {
+        type: String,
+        default: ''
+    },
+    filterOptions: {
+        type: [Array],
+        default: () => []
+    },
+    isClearable: {
+        type: Boolean,
+        default: true
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true
+    },
+    fields: {
+        type: Array,
+        default: null
+    },
+    where: {
+        type: Object,
+        default: null
+    },
+    sortBy: {
+        type: String,
+        default: null
+    },
+    limit: {
+        type: [Number, String],
+        default: '30'
+    },
+    focusOnMount: {
+        type: Boolean,
+        default: false
+    },
+    useLike: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const { t } = useI18n();
+const requiredFieldRule = val => val ?? t('globals.fieldRequired');
+
+const { optionLabel, optionValue, options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+const vnSelectRef = ref();
+const lastVal = ref();
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    }
+});
+
+watch(options, newValue => {
+    setOptions(newValue);
+});
+
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.focusOnMount) {
+        setTimeout(() => vnSelectRef.value.showPopup(), 300);
+    }
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+
+function filter(val, options) {
+    const search = val.toString().toLowerCase();
+
+    if (!search) return options;
+
+    return options.filter(row => {
+        if ($props.filterOptions.length) {
+            return $props.filterOptions.some(prop => {
+                const propValue = String(row[prop]).toLowerCase();
+                return propValue.includes(search);
+            });
+        }
+
+        const id = row.id;
+        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
+
+        return id === search || optionLabel.includes(search);
+    });
+}
+
+async function filterHandler(val, update) {
+    if (!val && lastVal.value === val) {
+        lastVal.value = val;
+        return update();
+    }
+    lastVal.value = val;
+
+    if (!$props.defaultFilter) return update();
+    const newOptions = filter(val, myOptionsOriginal.value);
+    update(
+        () => {
+            myOptions.value = newOptions;
+        },
+        ref => {
+            if (val !== '' && ref.options.length > 0) {
+                ref.setOptionIndex(-1);
+                ref.moveOptionSelection(1, true);
+            }
+        }
+    );
+}
+</script>
+
+<template>
+    <QSelect
+        v-model="value"
+        :options="myOptions"
+        :option-label="optionLabel"
+        :option-value="optionValue"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        @filter="filterHandler"
+        hide-selected
+        fill-input
+        ref="vnSelectRef"
+        lazy-rules
+        :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+        virtual-scroll-slice-size="options.length"
+    >
+        <template v-if="isClearable" #append>
+            <QIcon
+                v-show="value"
+                name="close"
+                @click.stop="value = null"
+                class="cursor-pointer"
+                size="xs"
+            />
+        </template>
+        <template
+            v-for="(_, slotName) in $slots"
+            #[slotName]="slotData"
+            :key="slotName"
+        >
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+    </QSelect>
+</template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>
diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
new file mode 100644
index 00000000..591523f2
--- /dev/null
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { ref, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import VnForm from 'src/components/common/VnForm.vue';
+
+import { userStore as useUserStore } from 'stores/user';
+
+const { t } = useI18n();
+const api = inject('api');
+const vnFormRef = ref(null);
+const userStore = useUserStore();
+
+const repeatPassword = ref('');
+
+const formData = ref({
+    userId: userStore.id,
+    oldPassword: '',
+    newPassword: ''
+});
+
+const changePassword = async () => {
+    try {
+        // TODO: Add validation
+        await api.patch('Accounts/change-password', formData.value);
+    } catch (error) {
+        console.error(error);
+    }
+};
+</script>
+<template>
+    <VnForm
+        ref="vnFormRef"
+        :title="t('changePassword')"
+        :formInitialData="formData"
+        :defaultActions="false"
+        style="max-width: 300px"
+    >
+        <template #form>
+            <VnInput
+                v-model="formData.oldPassword"
+                :label="t('oldPassword')"
+                type="password"
+            />
+            <VnInput
+                v-model="formData.newPassword"
+                :label="t('newPassword')"
+                type="password"
+            />
+            <VnInput
+                v-model="repeatPassword"
+                :label="t('repeatPassword')"
+                type="password"
+            />
+            <QBtn @click="changePassword" label="saveeeee" />
+        </template>
+    </VnForm>
+</template>
+
+<i18n lang="yaml">
+en-US:
+    changePassword: Change password
+    newPassword: New password
+    oldPassword: Old password
+    repeatPassword: Repeat password
+es-ES:
+    changePassword: Cambiar contraseña
+    newPassword: Nueva contraseña
+    oldPassword: Contraseña antigua
+    repeatPassword: Repetir contraseña
+ca-ES:
+    changePassword: Canviar contrasenya
+    newPassword: Nova contrasenya
+    oldPassword: Contrasenya antiga
+    repeatPassword: Repetir contrasenya
+fr-FR:
+    changePassword: Changer le mot de passe
+    newPassword: Nouveau mot de passe
+    oldPassword: Ancien mot de passe
+    repeatPassword: Répéter le mot de passe
+pt-PT:
+    changePassword: Alterar palavra-passe
+    newPassword: Nova palavra-passe
+    oldPassword: Palavra-passe antiga
+    repeatPassword: Repetir palavra-passe
+</i18n>
diff --git a/src/js/db/sqlService.js b/src/js/db/sqlService.js
new file mode 100644
index 00000000..375e2f74
--- /dev/null
+++ b/src/js/db/sqlService.js
@@ -0,0 +1,42 @@
+export const generateUpdateSqlQuery = (
+    schema,
+    table,
+    pks,
+    columnsUpdated,
+    formData
+) => {
+    const setClauses = columnsUpdated
+        .map(colName => `${colName} = '${formData[colName]}'`)
+        .join(', ');
+    const whereClause = Object.keys(pks)
+        .map(pk => `${pk} = ${pks[pk]}`)
+        .join(' AND ');
+
+    return `
+        START TRANSACTION;
+        UPDATE ${schema}.${table} SET ${setClauses} WHERE (${whereClause});
+        SELECT ${columnsUpdated.join(', ')} FROM ${schema}.${table} WHERE (${whereClause});
+        COMMIT;
+    `;
+};
+
+export const generateInsertSqlQuery = (
+    schema,
+    table,
+    formData,
+    columnsUpdated,
+    createModelDefault
+) => {
+    const columns = [createModelDefault.field, ...columnsUpdated].join(', ');
+    const values = [
+        createModelDefault.value,
+        ...columnsUpdated.map(colName => `'${formData[colName]}'`)
+    ].join(', ');
+
+    return `
+        START TRANSACTION;
+        INSERT INTO ${schema}.${table} (${columns}) VALUES (${values});
+        SELECT id, ${columnsUpdated.join(', ')} FROM ${schema}.${table} WHERE (id = LAST_INSERT_ID());
+        COMMIT;
+    `;
+};
diff --git a/src/pages/Account/AccountConf.vue b/src/pages/Account/AccountConf.vue
deleted file mode 100644
index 87184d4d..00000000
--- a/src/pages/Account/AccountConf.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup></script>
-
-<template>
-    <QPage> // TODO: VISTA A DESARROLLAR! </QPage>
-</template>
-
-<style lang="scss" scoped></style>
-
-<i18n lang="yaml"></i18n>
diff --git a/src/pages/Account/AccountConfig.vue b/src/pages/Account/AccountConfig.vue
new file mode 100644
index 00000000..47a85c8c
--- /dev/null
+++ b/src/pages/Account/AccountConfig.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, inject, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnForm from 'src/components/common/VnForm.vue';
+import ChangePasswordForm from 'src/components/ui/ChangePasswordForm.vue';
+
+import { userStore as useUserStore } from 'stores/user';
+
+const userStore = useUserStore();
+const { t } = useI18n();
+const jApi = inject('jApi');
+
+const vnFormRef = ref(null);
+const changePasswordFormDialog = ref(null);
+const showChangePasswordForm = ref(false);
+const langOptions = ref([]);
+const pks = computed(() => ({ id: userStore.id }));
+const fetchConfigDataSql = {
+    query: `
+        SELECT u.id, u.name, u.email, u.nickname,
+        u.lang, c.isToBeMailed, c.id clientFk
+        FROM account.myUser u
+        LEFT JOIN myClient c
+        ON u.id = c.id`,
+    params: {}
+};
+
+const fetchLanguagesSql = async () => {
+    try {
+        const data = await jApi.query(
+            'SELECT code, name FROM language WHERE isActive'
+        );
+        langOptions.value = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+onMounted(() => fetchLanguagesSql());
+</script>
+
+<template>
+    <QPage>
+        <QPage class="q-pa-md flex justify-center">
+            <Teleport :to="$actions">
+                <QBtn
+                    :label="t('addresses')"
+                    icon="location_on"
+                    rounded
+                    no-caps
+                    :to="{ name: 'AddressesList' }"
+                />
+                <QBtn
+                    :label="t('changePassword')"
+                    icon="lock_reset"
+                    rounded
+                    no-caps
+                    @click="showChangePasswordForm = true"
+                />
+            </Teleport>
+            <VnForm
+                ref="vnFormRef"
+                :title="t('personalInformation')"
+                :fetchFormDataSql="fetchConfigDataSql"
+                :pks="pks"
+                table="myUser"
+                schema="account"
+                :defaultActions="false"
+            >
+                <template #form="{ data }">
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('name')"
+                        disable
+                        :clearable="false"
+                    />
+                    <VnInput v-model="data.email" :label="t('email')" />
+                    <VnInput v-model="data.nickname" :label="t('nickname')" />
+                    <VnSelect
+                        v-model="data.lang"
+                        :label="t('lang')"
+                        option-label="name"
+                        option-value="code"
+                        :options="langOptions"
+                    />
+                </template>
+            </VnForm>
+        </QPage>
+        <QDialog
+            ref="changePasswordFormDialog"
+            v-model="showChangePasswordForm"
+        >
+            <ChangePasswordForm />
+        </QDialog>
+    </QPage>
+</template>
+
+<style lang="scss" scoped></style>
+
+<i18n lang="yaml">
+en-US:
+    personalInformation: Personal Information
+    name: Name
+    email: Email
+    nickname: Display name
+    lang: Language
+    receiveInvoicesByMail: Receive invoices by mail
+    addresses: Addresses
+    changePassword: Change password
+es-ES:
+    personalInformation: Datos personales
+    name: Nombre
+    email: Correo electrónico
+    nickname: Nombre a mostrar
+    lang: Idioma
+    receiveInvoicesByMail: Recibir facturas por correo
+    addresses: Direcciones
+    changePassword: Cambiar contraseña
+ca-ES:
+    personalInformation: Dades personals
+    name: Nom
+    email: Correu electrònic
+    nickname: Nom a mostrar
+    lang: Idioma
+    receiveInvoicesByMail: Rebre factures per correu
+    addresses: Adreces
+    changePassword: Canviar contrasenya
+fr-FR:
+    personalInformation: Informations personnelles
+    name: Nom
+    email: E-mail
+    nickname: Nom à afficher
+    lang: Langue
+    receiveInvoicesByMail: Recevoir des factures par courrier
+    addresses: Adresses
+    changePassword: Changer le mot de passe
+pt-PT:
+    personalInformation: Dados pessoais
+    name: Nome
+    email: E-mail
+    nickname: Nom à afficher
+    lang: Língua
+    receiveInvoicesByMail: Receber faturas por correio
+    addresses: Endereços
+    changePassword: Alterar palavra-passe
+</i18n>
diff --git a/src/router/routes.js b/src/router/routes.js
index 1ab82dcc..a8952650 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -57,10 +57,10 @@ const routes = [
             {
                 name: 'Account',
                 path: '/account/conf',
-                component: () => import('pages/Account/AccountConf.vue')
+                component: () => import('pages/Account/AccountConfig.vue')
             },
             {
-                name: 'Addresses',
+                name: 'AddressesList',
                 path: '/account/address-list',
                 component: () => import('pages/Account/AddressList.vue')
             },

From aa4ccf65f540b7f81ee36a04eb460f9ece1d3a37 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 24 Jul 2024 14:42:02 -0300
Subject: [PATCH 2/8] Change password form and several changes

---
 src/boot/axios.js                        |  26 ++++-
 src/components/common/VnForm.vue         |  67 ++++++++----
 src/components/ui/ChangePasswordForm.vue | 125 ++++++++++++++++++++++-
 src/css/app.scss                         |  34 +++---
 src/i18n/en-US/index.js                  |   4 +-
 src/i18n/es-ES/index.js                  |   4 +-
 src/js/db/sqlService.js                  |  14 ++-
 src/pages/Account/AccountConfig.vue      |  15 ++-
 src/router/routes.js                     |   2 +-
 9 files changed, 240 insertions(+), 51 deletions(-)

diff --git a/src/boot/axios.js b/src/boot/axios.js
index 1f384ff3..66b2ffe9 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -2,7 +2,9 @@ import { boot } from 'quasar/wrappers';
 import { Connection } from '../js/db/connection';
 import { userStore } from 'stores/user';
 import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
 
+const { notify } = useNotify();
 // Be careful when using SSR for cross-request state pollution
 // due to creating a Singleton instance here;
 // If any client changes this (global) instance, it might be a
@@ -12,9 +14,27 @@ import axios from 'axios';
 const api = axios.create({
     baseURL: `//${location.hostname}:${location.port}/api/`
 });
-
 const jApi = new Connection();
 
+const onRequestError = error => {
+    return Promise.reject(error);
+};
+
+const onResponseError = error => {
+    let message = '';
+
+    const response = error.response;
+    const responseData = response && response.data;
+    const responseError = responseData && response.data.error;
+    if (responseError) {
+        message = responseError.message;
+    }
+
+    notify(message, 'negative');
+
+    return Promise.reject(error);
+};
+
 export default boot(({ app }) => {
     const user = userStore();
     function addToken(config) {
@@ -23,7 +43,9 @@ export default boot(({ app }) => {
         }
         return config;
     }
-    api.interceptors.request.use(addToken);
+    api.interceptors.request.use(addToken, onRequestError);
+    api.interceptors.response.use(response => response, onResponseError);
+
     jApi.use(addToken);
 
     // for use inside Vue files (Options API) through this.$axios and this.$api
diff --git a/src/components/common/VnForm.vue b/src/components/common/VnForm.vue
index ccddcad2..450f7000 100644
--- a/src/components/common/VnForm.vue
+++ b/src/components/common/VnForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted, computed } from 'vue';
+import { ref, inject, onMounted, computed, Teleport } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useNotify from 'src/composables/useNotify.js';
@@ -66,9 +66,13 @@ const props = defineProps({
         type: Boolean,
         default: true
     },
+    showBottomActions: {
+        type: Boolean,
+        default: false
+    },
     saveFn: {
         type: Function,
-        default: () => {}
+        default: null
     }
 });
 
@@ -95,6 +99,8 @@ const updatedColumns = computed(() => {
     );
 });
 
+const hasChanges = computed(() => !!updatedColumns.value.length);
+
 const fetchFormData = async () => {
     if (!props.fetchFormDataSql.query) return;
     loading.value = true;
@@ -117,20 +123,26 @@ const fetchFormData = async () => {
     loading.value = false;
 };
 
+const onSubmitSuccess = () => {
+    emit('onDataSaved');
+    notify(t('dataSaved'), 'positive');
+};
+
 const submit = async () => {
     try {
         if (props.saveFn) {
-            await props.saveFn();
+            await props.saveFn(formData.value);
         } else {
+            if (!hasChanges.value) {
+                return;
+            }
             const sqlQuery = generateSqlQuery();
             await jApi.execQuery(sqlQuery, props.pks);
+            modelInfo.value.data[0] = { ...formData.value };
         }
-
-        emit('onDataSaved');
-        notify(t('dataSaved'), 'positive');
+        onSubmitSuccess();
     } catch (error) {
-        console.error('Error updating address:', error);
-        notify(t('addressNotUpdated'), 'negative');
+        console.error('Error:', error);
     }
 };
 
@@ -167,18 +179,6 @@ defineExpose({
 </script>
 
 <template>
-    <Teleport :to="$actions">
-        <QBtn
-            v-if="defaultActions"
-            :label="t('save')"
-            type="submit"
-            icon="check"
-            rounded
-            no-caps
-            :disabled="!updatedColumns.length"
-            @click="addressFormRef.submit()"
-        />
-    </Teleport>
     <QCard class="form-container" v-bind="$attrs">
         <QForm
             v-if="!loading"
@@ -190,6 +190,33 @@ defineExpose({
                 {{ title }}
             </span>
             <slot name="form" :data="formData" />
+            <component
+                :is="showBottomActions ? 'div' : Teleport"
+                :to="$actions"
+                class="flex row justify-end q-gutter-x-sm"
+                :class="{ 'q-mt-md': showBottomActions }"
+            >
+                <QBtn
+                    v-if="defaultActions"
+                    :label="t('cancel')"
+                    :icon="showBottomActions ? undefined : 'check'"
+                    rounded
+                    no-caps
+                    flat
+                    v-close-popup
+                />
+                <QBtn
+                    v-if="defaultActions"
+                    :label="t('save')"
+                    type="submit"
+                    :icon="showBottomActions ? undefined : 'check'"
+                    rounded
+                    no-caps
+                    flat
+                    :disabled="!showBottomActions && !updatedColumns.length"
+                />
+                <slot name="actions" />
+            </component>
         </QForm>
         <QSpinner v-else color="primary" size="3em" :thickness="2" />
     </QCard>
diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index 591523f2..7f5414ef 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -1,18 +1,24 @@
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, inject, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import VnInput from 'src/components/common/VnInput.vue';
 import VnForm from 'src/components/common/VnForm.vue';
 
 import { userStore as useUserStore } from 'stores/user';
+import useNotify from 'src/composables/useNotify.js';
 
 const { t } = useI18n();
 const api = inject('api');
-const vnFormRef = ref(null);
 const userStore = useUserStore();
+const { notify } = useNotify();
+const router = useRouter();
 
+const passwordRequirementsDialogRef = ref(null);
+const vnFormRef = ref(null);
 const repeatPassword = ref('');
+const passwordRequirements = ref(null);
 
 const formData = ref({
     userId: userStore.id,
@@ -21,21 +27,40 @@ const formData = ref({
 });
 
 const changePassword = async () => {
+    if (formData.value.newPassword !== repeatPassword.value) {
+        notify(t('passwordsDoNotMatch'), 'negative');
+        throw new Error('Passwords do not match');
+    }
+    await api.patch('Accounts/change-password', formData.value);
+};
+
+const getPasswordRequirements = async () => {
     try {
-        // TODO: Add validation
-        await api.patch('Accounts/change-password', formData.value);
+        const { data } = await api.get('UserPasswords/findOne');
+        passwordRequirements.value = data;
     } catch (error) {
         console.error(error);
     }
 };
+
+const logout = async () => {
+    await userStore.logout();
+    router.push({ name: 'Login' });
+};
+
+onMounted(async () => await getPasswordRequirements());
 </script>
+
 <template>
     <VnForm
         ref="vnFormRef"
         :title="t('changePassword')"
         :formInitialData="formData"
+        :saveFn="changePassword"
+        showBottomActions
         :defaultActions="false"
         style="max-width: 300px"
+        @onDataSaved="logout()"
     >
         <template #form>
             <VnInput
@@ -53,9 +78,54 @@ const changePassword = async () => {
                 :label="t('repeatPassword')"
                 type="password"
             />
-            <QBtn @click="changePassword" label="saveeeee" />
+        </template>
+        <template #actions>
+            <QBtn
+                :label="t('requirements')"
+                rounded
+                no-caps
+                flat
+                @click="passwordRequirementsDialogRef.show()"
+            />
+            <QBtn :label="t('modify')" type="submit" rounded no-caps flat />
         </template>
     </VnForm>
+    <QDialog ref="passwordRequirementsDialogRef">
+        <QCard class="q-px-md q-py-lg column items-center">
+            <span class="text-h6 text-bold q-mb-md">
+                {{ t('passwordRequirements') }}
+            </span>
+            <div class="column" style="max-width: max-content">
+                <span>
+                    {{
+                        t('charactersLong', {
+                            length: passwordRequirements.length
+                        })
+                    }}
+                </span>
+                <span>
+                    {{
+                        t('alphabeticCharacters', {
+                            nAlpha: passwordRequirements.nAlpha
+                        })
+                    }}
+                </span>
+                <span>
+                    {{
+                        t('capitalLetters', {
+                            nUpper: passwordRequirements.nUpper
+                        })
+                    }}
+                </span>
+                <span>
+                    {{ t('digits', { nDigits: passwordRequirements.nDigits }) }}
+                </span>
+                <span>
+                    {{ t('symbols', { nPunct: passwordRequirements.nPunct }) }}
+                </span>
+            </div>
+        </QCard>
+    </QDialog>
 </template>
 
 <i18n lang="yaml">
@@ -64,24 +134,69 @@ en-US:
     newPassword: New password
     oldPassword: Old password
     repeatPassword: Repeat password
+    modify: Modify
+    requirements: Requirements
+    passwordRequirements: Password requirements
+    charactersLong: '{length} characters long'
+    alphabeticCharacters: '{nAlpha} alphabetic characters'
+    capitalLetters: '{nUpper} capital letters'
+    digits: '{nDigits} digits'
+    symbols: '{nPunct} symbols. Ej: $%&.'
+    passwordsDoNotMatch: Passwords do not match
 es-ES:
     changePassword: Cambiar contraseña
     newPassword: Nueva contraseña
     oldPassword: Contraseña antigua
     repeatPassword: Repetir contraseña
+    modify: Modificar
+    requirements: Requisitos
+    passwordRequirements: Requisitos de contraseña
+    charactersLong: '{length} caracteres de longitud'
+    alphabeticCharacters: '{nAlpha} caracteres alfabéticos'
+    capitalLetters: '{nUpper} letras mayúsculas'
+    digits: '{nDigits} dígitos'
+    symbols: '{nPunct} símbolos. Ej: $%&.'
+    passwordsDoNotMatch: ¡Las contraseñas no coinciden!
 ca-ES:
     changePassword: Canviar contrasenya
     newPassword: Nova contrasenya
     oldPassword: Contrasenya antiga
     repeatPassword: Repetir contrasenya
+    modify: Modificar
+    requirements: Requisits
+    passwordRequirements: Requisits de contrasenya
+    charactersLong: '{length} caràcters de longitud'
+    alphabeticCharacters: '{nAlpha} caràcters alfabètics'
+    capitalLetters: '{nUpper} lletres majúscules'
+    digits: '{nDigits} dígits'
+    symbols: '{nPunct} símbols. Ej: $%&.'
+    passwordsDoNotMatch: Les contrasenyes no coincideixen!
 fr-FR:
     changePassword: Changer le mot de passe
     newPassword: Nouveau mot de passe
     oldPassword: Ancien mot de passe
     repeatPassword: Répéter le mot de passe
+    modify: Modifier
+    requirements: Exigences
+    passwordRequirements: Mot de passe exigences
+    charactersLong: '{length} caractères de longueur'
+    alphabeticCharacters: '{nAlpha} caractères alphabétiques'
+    capitalLetters: '{nUpper} lettres majuscules'
+    digits: '{nDigits} chiffres'
+    symbols: '{nPunct} symboles. Ej: $%&.'
+    passwordsDoNotMatch: Les mots de passe ne correspondent pas!
 pt-PT:
     changePassword: Alterar palavra-passe
     newPassword: Nova palavra-passe
     oldPassword: Palavra-passe antiga
     repeatPassword: Repetir palavra-passe
+    modify: Modificar
+    requirements: Requisitos
+    passwordRequirements: Requisitos de palavra-passe
+    charactersLong: '{length} caracteres de comprimento'
+    alphabeticCharacters: '{nAlpha} caracteres alfabéticos'
+    capitalLetters: '{nUpper} letras maiúsculas'
+    digits: '{nDigits} dígitos'
+    symbols: '{nPunct} símbolos. Ej: $%&.'
+    passwordsDoNotMatch: As palavras-passe não coincidem!
 </i18n>
diff --git a/src/css/app.scss b/src/css/app.scss
index 3a0a70e0..5ed3280c 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,35 +1,35 @@
 // app global css in SCSS form
 
 @font-face {
-  font-family: Poppins;
-  src: url(./poppins.ttf) format('truetype');
+    font-family: Poppins;
+    src: url(./poppins.ttf) format('truetype');
 }
 @font-face {
-  font-family: 'Open Sans';
-  src: url(./opensans.ttf) format('truetype');
+    font-family: 'Open Sans';
+    src: url(./opensans.ttf) format('truetype');
 }
 @mixin mobile {
-  @media screen and (max-width: 960px) {
-    @content;
-  }
+    @media screen and (max-width: 960px) {
+        @content;
+    }
 }
 
 body {
-  font-family: 'Poppins', 'Verdana', 'Sans';
-  background-color: #fafafa;
+    font-family: 'Poppins', 'Verdana', 'Sans';
+    background-color: #fafafa;
 }
 a.link {
-  text-decoration: none;
-  color: #6a1;
+    text-decoration: none;
+    color: #6a1;
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+        text-decoration: underline;
+    }
 }
 .q-card {
-  border-radius: 7px;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
+    border-radius: 0.6em !important;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
 }
 .q-page-sticky.fixed-bottom-right {
-  margin: 18px;
+    margin: 18px;
 }
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 723cfc3b..29893866 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -74,5 +74,7 @@ export default {
     user: 'User',
     addresses: 'Addresses',
     addressEdit: 'Edit address',
-    dataSaved: 'Data saved'
+    dataSaved: 'Data saved',
+    save: 'Save',
+    cancel: 'Cancel'
 };
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index 0ecd8706..963399ca 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -74,5 +74,7 @@ export default {
     user: 'Usuario',
     addresses: 'Direcciones',
     addressEdit: 'Editar dirección',
-    dataSaved: 'Datos guardados'
+    dataSaved: 'Datos guardados',
+    save: 'Guardar',
+    cancel: 'Cancelar'
 };
diff --git a/src/js/db/sqlService.js b/src/js/db/sqlService.js
index 375e2f74..1a64e682 100644
--- a/src/js/db/sqlService.js
+++ b/src/js/db/sqlService.js
@@ -1,3 +1,13 @@
+const sanitizeValue = value => {
+    if (typeof value === 'string') {
+        return `'${value}'`;
+    } else if (value === null) {
+        return 'NULL';
+    }
+
+    return value;
+};
+
 export const generateUpdateSqlQuery = (
     schema,
     table,
@@ -6,7 +16,7 @@ export const generateUpdateSqlQuery = (
     formData
 ) => {
     const setClauses = columnsUpdated
-        .map(colName => `${colName} = '${formData[colName]}'`)
+        .map(colName => `${colName} = ${sanitizeValue(formData[colName])}`)
         .join(', ');
     const whereClause = Object.keys(pks)
         .map(pk => `${pk} = ${pks[pk]}`)
@@ -30,7 +40,7 @@ export const generateInsertSqlQuery = (
     const columns = [createModelDefault.field, ...columnsUpdated].join(', ');
     const values = [
         createModelDefault.value,
-        ...columnsUpdated.map(colName => `'${formData[colName]}'`)
+        ...columnsUpdated.map(colName => sanitizeValue(formData[colName]))
     ].join(', ');
 
     return `
diff --git a/src/pages/Account/AccountConfig.vue b/src/pages/Account/AccountConfig.vue
index 47a85c8c..b7e3b829 100644
--- a/src/pages/Account/AccountConfig.vue
+++ b/src/pages/Account/AccountConfig.vue
@@ -76,14 +76,25 @@ onMounted(() => fetchLanguagesSql());
                         disable
                         :clearable="false"
                     />
-                    <VnInput v-model="data.email" :label="t('email')" />
-                    <VnInput v-model="data.nickname" :label="t('nickname')" />
+                    <VnInput
+                        v-model="data.email"
+                        :label="t('email')"
+                        @keyup.enter="vnFormRef.submit()"
+                        @blur="vnFormRef.submit()"
+                    />
+                    <VnInput
+                        v-model="data.nickname"
+                        :label="t('nickname')"
+                        @keyup.enter="vnFormRef.submit()"
+                        @blur="vnFormRef.submit()"
+                    />
                     <VnSelect
                         v-model="data.lang"
                         :label="t('lang')"
                         option-label="name"
                         option-value="code"
                         :options="langOptions"
+                        @update:modelValue="vnFormRef.submit()"
                     />
                 </template>
             </VnForm>
diff --git a/src/router/routes.js b/src/router/routes.js
index a8952650..8710f861 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -4,7 +4,7 @@ const routes = [
         component: () => import('layouts/LoginLayout.vue'),
         children: [
             {
-                name: 'login',
+                name: 'Login',
                 path: '/login/:email?',
                 component: () => import('pages/Login/Login.vue')
             },

From 7f831ae3a54a05349212b1b4a4a2806374173dc5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Jul 2024 08:41:19 -0300
Subject: [PATCH 3/8] Remove unused style tag

---
 src/pages/Account/AccountConfig.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Account/AccountConfig.vue b/src/pages/Account/AccountConfig.vue
index b7e3b829..118555e7 100644
--- a/src/pages/Account/AccountConfig.vue
+++ b/src/pages/Account/AccountConfig.vue
@@ -108,8 +108,6 @@ onMounted(() => fetchLanguagesSql());
     </QPage>
 </template>
 
-<style lang="scss" scoped></style>
-
 <i18n lang="yaml">
 en-US:
     personalInformation: Personal Information

From 06cd9b01d363aa0bc1bb1a4f7de0f65479d7c7ed Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Jul 2024 08:54:11 -0300
Subject: [PATCH 4/8] Change password form fields validation

---
 src/components/ui/ChangePasswordForm.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index 7f5414ef..fb2c595d 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -27,6 +27,10 @@ const formData = ref({
 });
 
 const changePassword = async () => {
+    if (!formData.value.newPassword || !repeatPassword.value) {
+        notify(t('passwordEmpty'), 'negative');
+        throw new Error('Password empty');
+    }
     if (formData.value.newPassword !== repeatPassword.value) {
         notify(t('passwordsDoNotMatch'), 'negative');
         throw new Error('Passwords do not match');
@@ -143,6 +147,7 @@ en-US:
     digits: '{nDigits} digits'
     symbols: '{nPunct} symbols. Ej: $%&.'
     passwordsDoNotMatch: Passwords do not match
+    passwordEmpty: Password empty
 es-ES:
     changePassword: Cambiar contraseña
     newPassword: Nueva contraseña
@@ -157,6 +162,7 @@ es-ES:
     digits: '{nDigits} dígitos'
     symbols: '{nPunct} símbolos. Ej: $%&.'
     passwordsDoNotMatch: ¡Las contraseñas no coinciden!
+    passwordEmpty: Contraseña vacía
 ca-ES:
     changePassword: Canviar contrasenya
     newPassword: Nova contrasenya
@@ -171,6 +177,7 @@ ca-ES:
     digits: '{nDigits} dígits'
     symbols: '{nPunct} símbols. Ej: $%&.'
     passwordsDoNotMatch: Les contrasenyes no coincideixen!
+    passwordEmpty: Contrasenya buida
 fr-FR:
     changePassword: Changer le mot de passe
     newPassword: Nouveau mot de passe
@@ -185,6 +192,7 @@ fr-FR:
     digits: '{nDigits} chiffres'
     symbols: '{nPunct} symboles. Ej: $%&.'
     passwordsDoNotMatch: Les mots de passe ne correspondent pas!
+    passwordEmpty: Mots de passe vides
 pt-PT:
     changePassword: Alterar palavra-passe
     newPassword: Nova palavra-passe
@@ -199,4 +207,5 @@ pt-PT:
     digits: '{nDigits} dígitos'
     symbols: '{nPunct} símbolos. Ej: $%&.'
     passwordsDoNotMatch: As palavras-passe não coincidem!
+    passwordEmpty: Palavra-passe vazia
 </i18n>

From ef365664423e16c08813ad353afa2ec4eb819fff Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Jul 2024 09:09:21 -0300
Subject: [PATCH 5/8] Create change password with and without token and add
 related features

---
 src/components/ui/ChangePasswordForm.vue | 32 ++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index fb2c595d..2a6fe392 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from 'vue';
+import { ref, inject, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -15,6 +15,8 @@ const userStore = useUserStore();
 const { notify } = useNotify();
 const router = useRouter();
 
+const oldPasswordRef = ref(null);
+const newPasswordRef = ref(null);
 const passwordRequirementsDialogRef = ref(null);
 const vnFormRef = ref(null);
 const repeatPassword = ref('');
@@ -35,6 +37,21 @@ const changePassword = async () => {
         notify(t('passwordsDoNotMatch'), 'negative');
         throw new Error('Passwords do not match');
     }
+    if (userStore.token) {
+        await changePasswordWithToken(userStore.token);
+    } else {
+        await changePasswordWithoutToken();
+    }
+};
+
+const changePasswordWithToken = async token => {
+    const headers = {
+        Authorization: token
+    };
+    await api.post('VnUsers/reset-password', formData.value, { headers });
+};
+
+const changePasswordWithoutToken = async () => {
     await api.patch('Accounts/change-password', formData.value);
 };
 
@@ -52,7 +69,15 @@ const logout = async () => {
     router.push({ name: 'Login' });
 };
 
-onMounted(async () => await getPasswordRequirements());
+onMounted(async () => {
+    getPasswordRequirements();
+    await nextTick();
+    if (userStore.token) {
+        newPasswordRef.value.focus();
+    } else {
+        oldPasswordRef.value.focus();
+    }
+});
 </script>
 
 <template>
@@ -68,11 +93,14 @@ onMounted(async () => await getPasswordRequirements());
     >
         <template #form>
             <VnInput
+                v-if="!userStore.token"
+                ref="oldPasswordRef"
                 v-model="formData.oldPassword"
                 :label="t('oldPassword')"
                 type="password"
             />
             <VnInput
+                ref="newPasswordRef"
                 v-model="formData.newPassword"
                 :label="t('newPassword')"
                 type="password"

From 93cc0d428640692f82d3d1d5cd5f50d18a33e884 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Jul 2024 09:25:46 -0300
Subject: [PATCH 6/8] Add login when password changed

---
 src/components/ui/ChangePasswordForm.vue | 16 ++++++++++------
 src/pages/Account/AccountConfig.vue      |  4 +++-
 src/stores/user.js                       |  5 +++--
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index 2a6fe392..b22ad579 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref, inject, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import VnInput from 'src/components/common/VnInput.vue';
 import VnForm from 'src/components/common/VnForm.vue';
@@ -9,11 +8,12 @@ import VnForm from 'src/components/common/VnForm.vue';
 import { userStore as useUserStore } from 'stores/user';
 import useNotify from 'src/composables/useNotify.js';
 
+const emit = defineEmits(['onPasswordChanged']);
+
 const { t } = useI18n();
 const api = inject('api');
 const userStore = useUserStore();
 const { notify } = useNotify();
-const router = useRouter();
 
 const oldPasswordRef = ref(null);
 const newPasswordRef = ref(null);
@@ -64,9 +64,13 @@ const getPasswordRequirements = async () => {
     }
 };
 
-const logout = async () => {
-    await userStore.logout();
-    router.push({ name: 'Login' });
+const login = async () => {
+    await userStore.login(userStore.name, formData.value.newPassword);
+};
+
+const onPasswordChanged = async () => {
+    await login();
+    emit('onPasswordChanged');
 };
 
 onMounted(async () => {
@@ -89,7 +93,7 @@ onMounted(async () => {
         showBottomActions
         :defaultActions="false"
         style="max-width: 300px"
-        @onDataSaved="logout()"
+        @onDataSaved="onPasswordChanged()"
     >
         <template #form>
             <VnInput
diff --git a/src/pages/Account/AccountConfig.vue b/src/pages/Account/AccountConfig.vue
index 118555e7..a82e361e 100644
--- a/src/pages/Account/AccountConfig.vue
+++ b/src/pages/Account/AccountConfig.vue
@@ -103,7 +103,9 @@ onMounted(() => fetchLanguagesSql());
             ref="changePasswordFormDialog"
             v-model="showChangePasswordForm"
         >
-            <ChangePasswordForm />
+            <ChangePasswordForm
+                @on-password-changed="showChangePasswordForm = false"
+            />
         </QDialog>
     </QPage>
 </template>
diff --git a/src/stores/user.js b/src/stores/user.js
index 5b3c3c91..e90123bf 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -50,12 +50,13 @@ export const userStore = defineStore('user', {
 
         async loadData() {
             const userData = await jApi.getObject(
-                'SELECT id, nickname FROM account.myUser'
+                'SELECT id, nickname, name FROM account.myUser'
             );
 
             this.$patch({
                 id: userData.id,
-                nickname: userData.nickname
+                nickname: userData.nickname,
+                name: userData.name
             });
         }
     }

From 4256f45373d92961c4da6dd3f7714ba132110f5d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Jul 2024 10:36:48 -0300
Subject: [PATCH 7/8] Add verificationToken as a prop to let the view handle it

---
 src/components/ui/ChangePasswordForm.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index b22ad579..eff04318 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -8,6 +8,13 @@ import VnForm from 'src/components/common/VnForm.vue';
 import { userStore as useUserStore } from 'stores/user';
 import useNotify from 'src/composables/useNotify.js';
 
+const props = defineProps({
+    verificationToken: {
+        type: String,
+        default: ''
+    }
+});
+
 const emit = defineEmits(['onPasswordChanged']);
 
 const { t } = useI18n();
@@ -37,16 +44,16 @@ const changePassword = async () => {
         notify(t('passwordsDoNotMatch'), 'negative');
         throw new Error('Passwords do not match');
     }
-    if (userStore.token) {
-        await changePasswordWithToken(userStore.token);
+    if (props.verificationToken) {
+        await changePasswordWithToken();
     } else {
         await changePasswordWithoutToken();
     }
 };
 
-const changePasswordWithToken = async token => {
+const changePasswordWithToken = async () => {
     const headers = {
-        Authorization: token
+        Authorization: props.verificationToken
     };
     await api.post('VnUsers/reset-password', formData.value, { headers });
 };
@@ -76,7 +83,7 @@ const onPasswordChanged = async () => {
 onMounted(async () => {
     getPasswordRequirements();
     await nextTick();
-    if (userStore.token) {
+    if (props.verificationToken) {
         newPasswordRef.value.focus();
     } else {
         oldPasswordRef.value.focus();
@@ -97,7 +104,7 @@ onMounted(async () => {
     >
         <template #form>
             <VnInput
-                v-if="!userStore.token"
+                v-if="!verificationToken"
                 ref="oldPasswordRef"
                 v-model="formData.oldPassword"
                 :label="t('oldPassword')"

From 6bad41db20c50895a0b6ed7bb2c58d748000b94c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 26 Jul 2024 22:18:17 +0200
Subject: [PATCH 8/8] feat: add password visibility

---
 src/components/ui/ChangePasswordForm.vue | 35 ++++++++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/ChangePasswordForm.vue b/src/components/ui/ChangePasswordForm.vue
index eff04318..9f546ded 100644
--- a/src/components/ui/ChangePasswordForm.vue
+++ b/src/components/ui/ChangePasswordForm.vue
@@ -16,6 +16,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['onPasswordChanged']);
+const showOldPwd = ref(false);
+const showNewPwd = ref(false);
+const showCopyPwd = ref(false);
 
 const { t } = useI18n();
 const api = inject('api');
@@ -107,20 +110,40 @@ onMounted(async () => {
                 v-if="!verificationToken"
                 ref="oldPasswordRef"
                 v-model="formData.oldPassword"
+                :type="!showOldPwd ? 'password' : 'text'"
                 :label="t('oldPassword')"
-                type="password"
-            />
+                 >
+                <template #append>
+                        <QIcon
+                            :name="showOldPwd ? 'visibility_off' : 'visibility'"
+                            class="cursor-pointer"
+                            @click="showOldPwd = !showOldPwd"
+                        />
+                    </template>
+                  </VnInput>
             <VnInput
                 ref="newPasswordRef"
                 v-model="formData.newPassword"
+                :type="!showNewPwd ? 'password' : 'text'"
                 :label="t('newPassword')"
-                type="password"
-            />
+                 ><template #append>
+                        <QIcon
+                            :name="showNewPwd ? 'visibility_off' : 'visibility'"
+                            class="cursor-pointer"
+                            @click="showNewPwd = !showNewPwd"
+                        />
+                    </template></VnInput>
             <VnInput
                 v-model="repeatPassword"
+                :type="!showCopyPwd ? 'password' : 'text'"
                 :label="t('repeatPassword')"
-                type="password"
-            />
+                 ><template #append>
+                        <QIcon
+                            :name="showCopyPwd ? 'visibility_off' : 'visibility'"
+                            class="cursor-pointer"
+                            @click="showCopyPwd = !showCopyPwd"
+                        />
+                    </template></VnInput>
         </template>
         <template #actions>
             <QBtn