Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 7663-setWeight

src/components/UserPanel.vue

@@ -164,7 +164,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     class="q-mt-sm q-px-md"
                     :to="`/worker/${user.id}`"
                     color="primary"
-                    :label="t('My account')"
+                    :label="t('globals.myAccount')"
                     dense
                 />
                 <div class="text-subtitle1 q-mt-md">
@@ -270,7 +270,3 @@ const isEmployee = computed(() => useRole().isEmployee());
     }
 }
 </style>
-<i18n>
-es:
-    My account: Mi cuenta
-</i18n>

src/components/ui/VnFilterPanel.vue

@@ -37,7 +37,7 @@ const $props = defineProps({
     },
     hiddenTags: {
         type: Array,
-        default: () => ['filter'],
+        default: () => ['filter', 'search', 'or', 'and'],
     },
     customTags: {
         type: Array,
@@ -198,8 +198,10 @@ function formatValue(value) {
 
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
-        if (typeof value == 'object')
+        if (typeof value == 'object') {
-            params[key] = Object.values(value)[0].replaceAll('%', '');
+            const param = Object.values(value)[0];
+            if (typeof param == 'string') params[key] = param.replaceAll('%', '');
+        }
     }
     return params;
 }

src/components/ui/VnOutForm.vue

@@ -0,0 +1,32 @@
+<script setup>
+const emit = defineEmits(['submit']);
+defineProps({
+    icon: { type: String, required: false, default: 'phonelink_lock' },
+    title: { type: String, required: true },
+});
+</script>
+<template>
+    <QForm @submit="emit('submit')" class="q-gutter-y-md q-pa-lg formCard">
+        <div class="column items-center">
+            <QIcon v-if="icon != false" :name="icon" size="xl" color="primary" />
+            <h5 class="text-center q-my-md">
+                {{ title }}
+            </h5>
+        </div>
+        <slot></slot>
+        <div class="q-mt-lg">
+            <slot name="buttons"></slot>
+        </div>
+    </QForm>
+</template>
+<style lang="scss" scoped>
+.formCard {
+    max-width: 350px;
+    min-width: 300px;
+}
+@media (max-width: $breakpoint-xs-max) {
+    .formCard {
+        min-width: 100%;
+    }
+}
+</style>

src/components/ui/VnRow.vue

@@ -9,6 +9,9 @@
     > :deep(*) {
         flex: 1;
     }
+    &[wrap] {
+        flex-wrap: wrap;
+    }
 }
 @media screen and (max-width: 800px) {
     .vn-row {

src/components/ui/VnSubToolbar.vue

@@ -43,20 +43,9 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss">
-.q-toolbar {
-    background: var(--vn-section-color);
-}
-</style>
 <style lang="scss" scoped>
 .sticky {
     position: sticky;
-    top: 61px;
     z-index: 1;
 }
-@media (max-width: $breakpoint-sm) {
-    .sticky {
-        top: 90px;
-    }
-}
 </style>

src/css/app.scss

@@ -190,6 +190,10 @@ select:-webkit-autofill {
     font-size: medium;
 }
 
+.q-toolbar {
+    background: var(--vn-section-color);
+}
+
 .q-card__actions {
     justify-content: center;
 }

src/i18n/locale/en.yml

@@ -251,6 +251,9 @@ globals:
         privileges: Privileges
         ldap: LDAP
         samba: Samba
+        twoFactor: Two factor
+        recoverPassword: Recover password
+        resetPassword: Reset password
     created: Created
     worker: Worker
     now: Now
@@ -263,6 +266,7 @@ globals:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?
     createInvoiceIn: Create invoice in
+    myAccount: My account
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -288,14 +292,17 @@ twoFactor:
     explanation: >-
         Please, enter the verification code that we have sent to your email in the
         next 5 minutes
-    pageTitles:
-        twoFactor: Two-Factor
 verifyEmail:
     pageTitles:
         verifyEmail: Email verification
-dashboard:
+recoverPassword:
-    pageTitles:
+    userOrEmail: User or recovery email
-
+    explanation: >-
+        We will sent you an email to recover your password
+resetPassword:
+    repeatPassword: Repeat password
+    passwordNotMatch: Passwords don't match
+    passwordChanged: Password changed
 customer:
     list:
         phone: Phone

src/i18n/locale/es.yml

@@ -253,6 +253,9 @@ globals:
         packages: Bultos
         ldap: LDAP
         samba: Samba
+        twoFactor: Doble factor
+        recoverPassword: Recuperar contraseña
+        resetPassword: Restablecer contraseña
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -265,7 +268,7 @@ globals:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?
     createInvoiceIn: Crear factura recibida
-
+    myAccount: Mi cuenta
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -289,14 +292,17 @@ twoFactor:
     validate: Validar
     insert: Introduce el código de verificación
     explanation: Por favor introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos
-    pageTitles:
-        twoFactor: Doble factor
 verifyEmail:
     pageTitles:
         verifyEmail: Verificación de correo
-dashboard:
+recoverPassword:
-    pageTitles:
+    userOrEmail: Usuario o correo de recuperación
-
+    explanation: >-
+        Te enviaremos un correo para restablecer tu contraseña
+resetPassword:
+    repeatPassword: Repetir contraseña
+    passwordNotMatch: Las contraseñas no coinciden
+    passwordChanged: Contraseña cambiada
 customer:
     list:
         phone: Teléfono
@@ -876,7 +882,7 @@ worker:
     card:
         workerId: ID Trabajador
         name: Nombre
-        email: Email
+        email: Correo personal
         phone: Teléfono
         mobile: Móvil
         active: Activo

src/pages/Account/AccountAcls.vue

@@ -41,14 +41,12 @@ const columns = computed(() => [
         name: 'id',
         label: t('id'),
         isId: true,
-        field: 'id',
         cardVisible: true,
     },
     {
         align: 'left',
         name: 'model',
         label: t('model'),
-        field: 'model',
         cardVisible: true,
         create: true,
     },
@@ -56,15 +54,19 @@ const columns = computed(() => [
         align: 'left',
         name: 'principalId',
         label: t('principalId'),
-        field: 'principalId',
         cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'VnRoles',
+            optionLabel: 'name',
+            optionValue: 'name',
+        },
         create: true,
     },
     {
         align: 'left',
         name: 'property',
         label: t('property'),
-        field: 'property',
         cardVisible: true,
         create: true,
     },
@@ -72,7 +74,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'accessType',
         label: t('accessType'),
-        field: 'accessType',
+        component: 'select',
+        attrs: {
+            options: ['READ', 'WRITE', '*'],
+        },
         cardVisible: true,
         create: true,
     },
@@ -118,13 +123,6 @@ const deleteAcl = async ({ id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
-
     <VnSearchbar
         data-key="AccountAcls"
         url="ACLs"
@@ -147,7 +145,6 @@ const deleteAcl = async ({ id }) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         :right-search="true"
         :is-editable="true"
         :use-model="true"
@@ -162,4 +159,15 @@ es:
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     Remove ACL: Eliminar Acl
     Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
+    principalId: Rol
+    model: Modelo
+en:
+    New ACL: New ACL
+    ACL removed: ACL removed
+    ACL will be removed: ACL will be removed
+    Are you sure you want to continue?: Are you sure you want to continue?
+    Remove ACL: Remove ACL
+    Do you want to remove this ACL?: Do you want to remove this ACL?
+    principalId: Rol
+    model: Models
 </i18n>

src/pages/Account/AccountAliasList.vue

@@ -60,7 +60,7 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="AccountAliasList"
-        :url="`MailAliases`"
+        url="MailAliases"
         :create="{
             urlCreate: 'MailAliases',
             title: 'Create MailAlias',
@@ -70,7 +70,6 @@ const columns = computed(() => [
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/alias"
         :is-editable="true"
         :use-model="true"

src/pages/Account/AccountList.vue

@@ -48,6 +48,14 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'left',
+        name: 'email',
+        label: t('email'),
+        component: 'input',
+        create: true,
+        visible: false,
+    },
     {
         align: 'right',
         label: '',
@@ -83,9 +91,9 @@ const exprBuilder = (param, value) => {
 
 <template>
     <VnSearchbar
-        :label="t('account.search')"
         data-key="AccountUsers"
         :expr-builder="exprBuilder"
+        :label="t('account.search')"
         :info="t('account.searchInfo')"
     />
 
@@ -96,7 +104,6 @@ const exprBuilder = (param, value) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account"
         :use-model="true"
     />

src/pages/Account/Alias/Card/AliasCard.vue

@@ -1,22 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-
 import VnCard from 'components/common/VnCard.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
-
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    return routeName.value;
-});
-const searchBarDataKeys = {
-    AliasBasicData: 'AliasBasicData',
-    AliasUsers: 'AliasUsers',
-};
 </script>
 
 <template>
@@ -24,12 +10,12 @@ const searchBarDataKeys = {
         data-key="Alias"
         base-url="MailAliases"
         :descriptor="AliasDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountAliasList"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
+            url: 'MailAliases',
-            customRouteRedirectName,
             info: t('mailAlias.searchInfo'),
             label: t('mailAlias.search'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountBasicData.vue

@@ -37,9 +37,11 @@ watch(
                 <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
                 <VnInput v-model="data.email" :label="t('account.card.email')" />
                 <VnSelect
+                    url="Languages"
                     v-model="data.lang"
-                    :options="['es', 'en']"
                     :label="t('account.card.lang')"
+                    option-value="code"
+                    option-label="code"
                 />
             </div>
         </template>

src/pages/Account/Card/AccountCard.vue

@@ -1,36 +1,21 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
 import VnCard from 'components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    AccountSummary: 'AccountSummary',
-    AccountInheritedRoles: 'AccountInheritedRoles',
-    AccountMailForwarding: 'AccountMailForwarding',
-    AccountMailAlias: 'AccountMailAlias',
-    AccountPrivileges: 'AccountPrivileges',
-    AccountLog: 'AccountLog',
-};
 </script>
 
 <template>
     <VnCard
         data-key="Account"
         :descriptor="AccountDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountUsers"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
+            url: 'VnUsers/preview',
-            customRouteRedirectName,
             label: t('account.search'),
             info: t('account.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -82,6 +82,54 @@ const removeAccount = async () => {
 };
 </script>
 <template>
+    <VnConfirm
+        v-model="showSyncDialog"
+        :message="t('account.card.actions.sync.message')"
+        :title="t('account.card.actions.sync.title')"
+        :promise="sync"
+    >
+        <template #customHTML>
+            {{ shouldSyncPassword }}
+            <QCheckbox
+                :label="t('account.card.actions.sync.checkbox')"
+                v-model="shouldSyncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+            >
+                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
+                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
+                </QIcon></QCheckbox
+            >
+            <QInput
+                v-if="shouldSyncPassword"
+                :label="t('login.password')"
+                v-model="syncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+                type="password"
+            />
+        </template>
+    </VnConfirm>
+    <!-- <QItem v-ripple clickable @click="setPassword">
+        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
+    </QItem>
+    <QItem
+        v-if="!account.hasAccount"
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.enableAccount.title'),
+                t('account.card.actions.enableAccount.subtitle'),
+                () => updateStatusAccount(true)
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
+    </QItem> -->
+
     <QItem
         v-if="account.hasAccount"
         v-ripple

src/pages/Account/Card/AccountPrivileges.vue

@@ -14,16 +14,11 @@ const rolesOptions = ref([]);
 const formModelRef = ref();
 </script>
 <template>
-    <FetchData
+    <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
-        url="VnRoles"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (rolesOptions = data)"
-    />
     <FormModel
         ref="formModelRef"
         model="AccountPrivileges"
-        :url="`VnUsers/${route.params.id}`"
+        :url="`VnUsers/${route.params.id}/privileges`"
         :url-create="`VnUsers/${route.params.id}/privileges`"
         auto-load
         @on-data-saved="formModelRef.fetch()"

src/pages/Account/Role/AccountRoles.vue

@@ -5,6 +5,8 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RoleSummary from './Card/RoleSummary.vue';
 const route = useRoute();
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -16,7 +18,7 @@ const $props = defineProps({
 });
 const tableRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
-
+const { viewSummary } = useSummaryDialog();
 const columns = computed(() => [
     {
         align: 'left',
@@ -42,6 +44,18 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, RoleSummary),
+            },
+        ],
+    },
 ]);
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -62,16 +76,12 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <VnSearchbar
-        <Teleport to="#searchbar">
+        data-key="Roles"
-            <VnSearchbar
+        :expr-builder="exprBuilder"
-                data-key="Roles"
+        :label="t('role.searchRoles')"
-                :expr-builder="exprBuilder"
+        :info="t('role.searchInfo')"
-                :label="t('role.searchRoles')"
+    />
-                :info="t('role.searchInfo')"
-            />
-        </Teleport>
-    </template>
     <VnTable
         ref="tableRef"
         data-key="Roles"
@@ -87,8 +97,6 @@ const exprBuilder = (param, value) => {
         order="id ASC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/role"
-        :is-editable="true"
     />
 </template>

src/pages/Account/Role/Card/RoleBasicData.vue

@@ -23,11 +23,6 @@ const { t } = useI18n();
                     />
                 </div>
             </VnRow>
-            <VnRow>
-                <div class="col">
-                    <QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
-                </div>
-            </VnRow>
         </template>
     </FormModel>
 </template>

src/pages/Account/Role/Card/RoleCard.vue

@@ -1,33 +1,20 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    RoleSummary: 'RoleSummary',
-    RoleBasicData: 'RoleBasicData',
-    SubRoles: 'SubRoles',
-    InheritedRoles: 'InheritedRoles',
-    RoleLog: 'RoleLog',
-};
 </script>
 <template>
     <VnCard
         data-key="Role"
         :descriptor="RoleDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountRoles"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
+            url: 'VnRoles',
-            customRouteRedirectName,
             label: t('role.searchRoles'),
             info: t('role.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -12,7 +12,6 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
 import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
-import { watchEffect } from 'vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -222,14 +221,17 @@ watchEffect(selectedRows);
             </span>
         </template>
         <template #more-create-dialog="{ data }">
-            <VnSelect
+            <div class="flex no-wrap flex-center">
-                url="Tickets"
+                <VnSelect
-                v-model="data.ticketFk"
+                    url="Tickets"
-                :label="t('invoiceOutList.tableVisibleColumns.ticket')"
+                    v-model="data.ticketFk"
-                :options="ticketsOptions"
+                    :label="t('invoiceOutList.tableVisibleColumns.ticket')"
-                option-label="nickname"
+                    :options="ticketsOptions"
-                option-value="id"
+                    option-label="nickname"
-            />
+                    option-value="id"
+                />
+                <span class="q-ml-md">O</span>
+            </div>
             <VnSelect
                 url="Clients"
                 v-model="data.clientFk"
@@ -238,10 +240,6 @@ watchEffect(selectedRows);
                 option-label="name"
                 option-value="id"
             />
-            <VnInputDate
-                :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
-                v-model="data.maxShipped"
-            />
             <VnSelect
                 url="InvoiceOutSerials"
                 v-model="data.invoiceOutSerial"
@@ -250,6 +248,10 @@ watchEffect(selectedRows);
                 option-label="description"
                 option-value="code"
             />
+            <VnInputDate
+                :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
+                v-model="data.maxShipped"
+            />
             <VnSelect
                 url="TaxAreas"
                 v-model="data.area"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -74,6 +74,9 @@ const columns = computed(() => [
         align: 'left',
         name: 'amount',
         label: t('invoiceOutModule.amount'),
+        columnFilter: {
+            type: 'number',
+        },
         format: (row) => toCurrency(row.amount),
         cardVisible: true,
     },

src/pages/Login/LoginMain.vue

@@ -72,7 +72,8 @@ async function onSubmit() {
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
             class="red"
         />
-        <div>
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
+        <div class="column flex-center q-mt-lg">
             <QBtn
                 :label="t('login.submit')"
                 type="submit"
@@ -81,11 +82,15 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
+            <RouterLink
+                class="q-mt-md text-primary"
+                :to="`/recoverPassword?user=${username}`"
+            >
+                {{ t('I do not remember my password') }}
+            </RouterLink>
         </div>
-        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
     </QForm>
 </template>
-
 <style lang="scss" scoped>
 .formCard {
     max-width: 350px;
@@ -101,3 +106,7 @@ async function onSubmit() {
     }
 }
 </style>
+<i18n>
+es:
+    I do not remember my password: No recuerdo mi contraseña
+</i18n>

src/pages/Login/RecoverPassword.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const user = ref(route.query.user);
+
+async function onSubmit() {
+    try {
+        await axios.post('VnUsers/recoverPassword', { user: user.value, app: 'lilium' });
+        router.push('Login');
+        quasar.notify({
+            message: t('globals.notificationSent'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.recoverPassword')">
+        <template #default>
+            <VnInput
+                v-model="user"
+                :label="t('recoverPassword.userOrEmail')"
+                :hint="t('recoverPassword.explanation')"
+                autofocus
+                required
+            >
+                <template #prepend>
+                    <QIcon name="contact_mail" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.recoverPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/ResetPassword.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+
+import VnInput from 'components/common/VnInput.vue';
+import VnOutForm from 'components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const newPassword = ref();
+const repeatPassword = ref();
+const passRequirements = ref({});
+
+onMounted(async () => {
+    passRequirements.value = (await axios('UserPasswords/findOne')).data;
+});
+
+async function onSubmit() {
+    if (newPassword.value != repeatPassword.value)
+        return quasar.notify({
+            message: t('resetPassword.passwordNotMatch'),
+            type: 'negative',
+        });
+
+    const headers = {
+        Authorization: route.query.access_token,
+    };
+
+    try {
+        console.log('newPassword: ', newPassword);
+        await axios.post(
+            'VnUsers/reset-password',
+            { newPassword: newPassword.value },
+            { headers }
+        );
+        router.push('Login');
+        quasar.notify({
+            message: t('resetPassword.passwordChanged'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.resetPassword')">
+        <template #default>
+            <VnInput
+                type="password"
+                :label="t('login.password')"
+                v-model="newPassword"
+                :info="
+                    t('passwordRequirements', {
+                        length: passRequirements.length,
+                        nAlpha: passRequirements.nAlpha,
+                        nUpper: passRequirements.nUpper,
+                        nDigits: passRequirements.nDigits,
+                        nPunct: passRequirements.nPunct,
+                    })
+                "
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+            <VnInput
+                type="password"
+                :label="t('resetPassword.repeatPassword')"
+                v-model="repeatPassword"
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.resetPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/TwoFactor.vue

@@ -8,6 +8,7 @@ import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -38,24 +39,22 @@ async function onSubmit() {
 }
 </script>
 <template>
-    <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
+    <VnOutForm @submit="onSubmit" :title="t('twoFactor.insert')">
-        <div class="column items-center">
+        <template #default>
-            <QIcon name="phonelink_lock" size="xl" color="primary" />
+            <VnInput
-            <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
+                v-model="code"
-        </div>
+                :hint="t('twoFactor.explanation')"
-        <VnInput
+                mask="# # # # # #"
-            v-model="code"
+                fill-mask
-            :hint="t('twoFactor.explanation')"
+                unmasked-value
-            mask="# # # # # #"
+                autofocus
-            fill-mask
+            >
-            unmasked-value
+                <template #prepend>
-            autofocus
+                    <QIcon name="lock" />
-        >
+                </template>
-            <template #prepend>
+            </VnInput>
-                <QIcon name="lock" />
+        </template>
-            </template>
+        <template #buttons>
-        </VnInput>
-        <div class="q-mt-xl">
             <QBtn
                 :label="t('twoFactor.validate')"
                 type="submit"
@@ -64,18 +63,6 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
-        </div>
+        </template>
-    </QForm>
+    </VnOutForm>
 </template>
-<style lang="scss" scoped>
-.formCard {
-    max-width: 350px;
-    min-width: 300px;
-}
-
-@media (max-width: $breakpoint-xs-max) {
-    .formCard {
-        min-width: 100%;
-    }
-}
-</style>

src/pages/Worker/Card/WorkerBasicData.vue

@@ -12,9 +12,12 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const workersOptions = ref([]);
+const educationLevels = ref([]);
-const countriesOptions = ref([]);
+const countries = ref([]);
-const educationLevelsOptions = ref([]);
+const maritalStatus = [
+    { code: 'M', name: t('Married') },
+    { code: 'S', name: t('Single') },
+];
 
 const workerFilter = {
     include: [
@@ -29,44 +32,21 @@ const workerFilter = {
         { relation: 'department', scope: { include: { relation: 'department' } } },
     ],
 };
-const workersFilter = {
-    fields: ['id', 'nickname'],
-    order: 'nickname ASC',
-    limit: 30,
-};
-const countriesFilter = {
-    fields: ['id', 'name', 'code'],
-    order: 'name ASC',
-    limit: 30,
-};
-const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };
-
-const maritalStatus = [
-    { code: 'M', name: t('Married') },
-    { code: 'S', name: t('Single') },
-];
 </script>
 
 <template>
     <FetchData
-        :filter="workersFilter"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        @on-fetch="(data) => (workersOptions = data)"
+        @on-fetch="(data) => (educationLevels = data)"
-        auto-load
-        url="Workers/search"
-    />
-    <FetchData
-        :filter="countriesFilter"
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
-    <FetchData
-        :filter="educationLevelsFilter"
-        @on-fetch="(data) => (educationLevelsOptions = data)"
         auto-load
         url="EducationLevels"
     />
-
+    <FetchData
+        url="Countries"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (countries = data)"
+        auto-load
+    />
     <FormModel
         :filter="workerFilter"
         :url="`Workers/${route.params.id}`"
@@ -90,7 +70,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Boss')"
-                    :options="workersOptions"
+                    url="Workers/search"
                     hide-selected
                     option-label="nickname"
                     option-value="id"
@@ -121,7 +101,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Origin country')"
-                    :options="countriesOptions"
+                    :options="countries"
                     hide-selected
                     option-label="name"
                     option-value="id"
@@ -129,7 +109,7 @@ const maritalStatus = [
                 />
                 <VnSelect
                     :label="t('Education level')"
-                    :options="educationLevelsOptions"
+                    :options="educationLevels"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/pages/Worker/Card/WorkerFormation.vue

@@ -108,7 +108,7 @@ const columns = computed(() => [
         :filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
-            title: 'Create trainingCourse',
+            title: t('Create training course'),
             onDataSaved: () => tableRef.reload(),
             formInitialData: {
                 workerFk: entityId,
@@ -122,3 +122,7 @@ const columns = computed(() => [
         :use-model="true"
     />
 </template>
+<i18n>
+es:
+    Create training course: Crear curso de formación
+</i18n>

src/pages/Worker/WorkerFilter.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -26,7 +27,7 @@ const departments = ref();
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem>
                 <QItemSection>
                     <VnInput :label="t('FI')" v-model="params.fi" is-outlined
@@ -67,20 +68,17 @@ const departments = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="departments">
-                    <QSelect
+                    <VnSelect
                         :label="t('Department')"
                         v-model="params.departmentFk"
-                        @update:model-value="searchFn()"
                         :options="departments"
                         option-value="id"
                         option-label="name"
                         emit-value
                         map-options
-                        use-input
                         dense
                         outlined
                         rounded
-                        :input-debounce="0"
                     />
                 </QItemSection>
             </QItem>
@@ -107,6 +105,7 @@ en:
         userName: User
         extension: Extension
         departmentFk: Department
+        id: ID
 es:
     params:
         search: Contiene
@@ -116,6 +115,7 @@ es:
         userName: Usuario
         extension: Extensión
         departmentFk: Departamento
+        id: ID
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

src/pages/Worker/WorkerList.vue

@@ -14,6 +14,8 @@ import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import WorkerFilter from './WorkerFilter.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -28,14 +30,8 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('tableColumns.id'),
+        label: t('id'),
-        columnFilter: {
+        field: 'id',
-            alias: 'w',
-            inWhere: true,
-        },
-        chip: {
-            condition: () => true,
-        },
         isId: true,
     },
     {
@@ -44,7 +40,7 @@ const columns = computed(() => [
         label: t('tableColumns.name'),
         isTitle: true,
         columnFilter: {
-            name: 'search',
+            name: 'firstName',
         },
     },
     {
@@ -54,8 +50,7 @@ const columns = computed(() => [
         cardVisible: true,
         columnFilter: {
             component: 'select',
-            inWhere: true,
+            name: 'departmentFk',
-            alias: 'wd',
             attrs: {
                 url: 'Departments',
             },
@@ -130,6 +125,11 @@ function uppercaseStreetModel(data) {
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
+    <RightMenu>
+        <template #right-panel>
+            <WorkerFilter data-key="Worker" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="Worker"
@@ -145,6 +145,7 @@ function uppercaseStreetModel(data) {
         :columns="columns"
         default-mode="table"
         redirect="worker"
+        :right-search="false"
         auto-load
     >
         <template #more-create-dialog="{ data }">

src/router/index.js

@@ -46,7 +46,7 @@ export { Router };
 export default route(function (/* { store, ssrContext } */) {
     Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
-        const outLayout = ['Login', 'TwoFactor', 'VerifyEmail'];
+        const outLayout = Router.options.routes[0].children.map((r) => r.name);
         if (!isLoggedIn() && !outLayout.includes(to.name)) {
             return next({ name: 'Login', query: { redirect: to.fullPath } });
         }

src/router/modules/account.js

@@ -65,13 +65,13 @@ export default {
                     component: () => import('src/pages/Account/AccountAliasList.vue'),
                 },
                 {
-                    path: 'connections',
+                    path: 'acls',
-                    name: 'AccountConnections',
+                    name: 'AccountAcls',
                     meta: {
-                        title: 'connections',
+                        title: 'acls',
                         icon: 'check',
                     },
-                    component: () => import('src/pages/Account/AccountConnections.vue'),
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
                 },
                 {
                     path: 'accounts',
@@ -104,13 +104,13 @@ export default {
                     component: () => import('src/pages/Account/AccountSamba.vue'),
                 },
                 {
-                    path: 'acls',
+                    path: 'connections',
-                    name: 'AccountAcls',
+                    name: 'AccountConnections',
                     meta: {
-                        title: 'acls',
+                        title: 'connections',
-                        icon: 'check',
+                        icon: 'share',
                     },
-                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                    component: () => import('src/pages/Account/AccountConnections.vue'),
                 },
                 {
                     path: 'acl-form',

src/router/routes.js

@@ -46,6 +46,18 @@ const routes = [
                 meta: { title: 'verifyEmail' },
                 component: () => import('../pages/Login/VerifyEmail.vue'),
             },
+            {
+                path: '/recoverPassword',
+                name: 'RecoverPassword',
+                meta: { title: 'recoverPassword' },
+                component: () => import('../pages/Login/RecoverPassword.vue'),
+            },
+            {
+                path: '/resetPassword',
+                name: 'ResetPassword',
+                meta: { title: 'resetPassword' },
+                component: () => import('../pages/Login/ResetPassword.vue'),
+            },
         ],
     },
     {

test/cypress/integration/outLogin/recoverPassword.spec.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+describe('Recover Password', () => {
+    const username = 'trainee';
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should go to recover password section and send notification', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get(`a[href="#/recoverPassword?user=${username}"]`).click();
+
+        cy.waitForElement('input[aria-label="User or recovery email"]');
+        cy.get('input[aria-label="User or recovery email"]').should(
+            'have.value',
+            username
+        );
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Notification sent');
+    });
+
+    it('should change password to user', () => {
+        // Get token from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const regex = /access_token=([a-zA-Z0-9]+)/;
+            const [match] = response.body[0].body.match(regex);
+
+            const resetUrl = '/#/resetPassword?' + match;
+            cy.visit(resetUrl);
+        });
+
+        // Change password
+        const newPassword = 'test.1234';
+        cy.waitForElement('input[aria-label="Password"]');
+        cy.waitForElement('input[aria-label="Repeat password"]');
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('input[aria-label="Repeat password"]').type(newPassword);
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Password changed');
+
+        // Try to login successfully
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/dashboard');
+
+        // ❗The password cannot be returned because "nightmare" does not meet the requirements
+    });
+});

test/cypress/integration/outLogin/twoFactor.spec.js

@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+describe('Two Factor', () => {
+    const username = 'sysadmin';
+    const userId = 66;
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should enable two factor to sysadmin', () => {
+        cy.request(
+            'PATCH',
+            `http://localhost:3000/api/VnUsers/${userId}/update-user?access_token=DEFAULT_TOKEN`,
+            { twoFactor: 'email' }
+        );
+    });
+
+    it('should fail when login with incorrect two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        cy.get('input[type="text"]').type('123456');
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/twoFactor');
+    });
+
+    it('should login with correct two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        // Get code from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = response.body[0].body;
+            const codeElement = tempDiv.querySelector('.code');
+            const code = codeElement ? codeElement.textContent.trim() : null;
+
+            cy.get('input[type="text"]').type(code);
+            cy.get('button[type="submit"]').click();
+            cy.url().should('contain', '/dashboard');
+        });
+    });
+});

test/cypress/integration/worker/workerList.spec.js

@@ -1,4 +1,7 @@
 describe('WorkerList', () => {
+    const inputName = '.q-drawer .q-form input[aria-label="First Name"]';
+    const searchBtn = '.q-drawer button:nth-child(3)';
+    const descriptorTitle = '.descriptor .title span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,6 +9,11 @@ describe('WorkerList', () => {
     });
 
     it('should open the worker summary', () => {
-        cy.get('.q-drawer .q-form input[aria-label="Name"]').type('jessica jones{enter}');
+        cy.get(inputName).type('jessica{enter}');
+        cy.get(searchBtn).click();
+        cy.intercept('GET', /\/api\/Workers\/\d+/).as('worker');
+        cy.wait('@worker').then(() =>
+            cy.get(descriptorTitle).should('include.text', 'Jessica')
+        );
     });
 });