Recover password view and test

src/components/ui/ImageEditor.vue

@@ -100,26 +100,21 @@ const onSubmit = async () => {
 en-US:
     name: Name
     file: File
-    send: Send
     imageAdded: Image added successfully
 es-ES:
     name: Nombre
     file: Archivo
-    send: Enviar
     imageAdded: Imagen añadida correctamente
 ca-ES:
     name: Nom
     file: Arxiu
-    send: Enviar
     imageAdded: Imatge afegida correctament
 fr-FR:
     name: Nom
     file: Fichier
-    send: Envoyer
     imageAdded: Image ajoutée correctement
 pt-PT:
     name: Nome
     file: Arquivo
-    send: Enviar
     imageAdded: Imagen adicionada corretamente
 </i18n>

src/i18n/ca-ES/index.js

@@ -134,6 +134,7 @@ export default {
     minQuantity: 'Quantitat mínima',
     introduceSearchTerm: 'Introdueix un terme de cerca',
     noOrdersFound: `No s'han trobat comandes`,
+    send: 'Enviar',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',

src/i18n/en-US/index.js

@@ -168,6 +168,7 @@ export default {
     minQuantity: 'Minimum quantity',
     introduceSearchTerm: 'Enter a search term',
     noOrdersFound: 'No orders found',
+    send: 'Send',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',

src/i18n/es-ES/index.js

@@ -167,6 +167,7 @@ export default {
     minQuantity: 'Cantidad mínima',
     introduceSearchTerm: 'Introduce un término de búsqueda',
     noOrdersFound: 'No se encontrado pedidos',
+    send: 'Enviar',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',

src/i18n/fr-FR/index.js

@@ -135,6 +135,7 @@ export default {
     minQuantity: 'Quantité minimum',
     introduceSearchTerm: 'Entrez un terme de recherche',
     noOrdersFound: 'Aucune commande trouvée',
+    send: 'Envoyer',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',

src/i18n/pt-PT/index.js

@@ -133,6 +133,7 @@ export default {
     minQuantity: 'Quantidade mínima',
     introduceSearchTerm: 'Digite um termo de pesquisa',
     noOrdersFound: 'Nenhum pedido encontrado',
+    send: 'Enviar',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',

src/layouts/LoginLayout.vue

@@ -3,13 +3,11 @@
         id="bg"
         class="fullscreen row justify-center items-center layout-view scroll"
     >
-        <div class="column q-pa-md row items-center justify-center">
+        <QPageContainer class="column q-pa-md row items-center justify-center">
-            <router-view v-slot="{ Component }">
+            <transition>
-                <transition>
+                <router-view />
-                    <component :is="Component" />
+            </transition>
-                </transition>
+        </QPageContainer>
-            </router-view>
-        </div>
     </QLayout>
 </template>
 

src/pages/Login/LoginView.vue

@@ -136,8 +136,11 @@ const loginAsGuest = async () => {
                     outline
                 />
             </div>
-            <p class="password-forgotten text-center q-mt-lg">
+            <p
-                <router-link to="/remember-password" class="link">
+                class="password-forgotten text-center q-mt-lg"
+                data-testid="recoverPasswordViewLink"
+            >
+                <router-link :to="{ name: 'recoverPassword' }" class="link">
                     {{ $t('haveForgottenPassword') }}
                 </router-link>
             </p>

src/pages/Login/RecoverPassword.vue

@@ -0,0 +1,99 @@
+<template>
+    <QPage class="text-center">
+        <div>
+            <QIcon
+                name="contact_support"
+                class="block q-mx-auto text-accent"
+                style="font-size: 120px"
+            />
+        </div>
+        <div>
+            <QForm @submit="onSend" class="q-gutter-y-md text-grey-8">
+                <VnInput
+                    v-model="user"
+                    :label="t('user')"
+                    autofocus
+                    data-testid="recoverPasswordUserInput"
+                />
+                <div class="q-mt-lg">
+                    {{ t('weSendEmail') }}
+                </div>
+                <div>
+                    <QBtn
+                        type="submit"
+                        :label="t('send')"
+                        class="full-width q-mt-md"
+                        color="primary"
+                        rounded
+                        no-caps
+                        unelevated
+                        data-testid="recoverPasswordSubmitButton"
+                    />
+                    <div class="text-center q-mt-md">
+                        <router-link to="/login" class="link">
+                            {{ t('back') }}
+                        </router-link>
+                    </div>
+                </div>
+            </QForm>
+        </div>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-btn {
+    height: 50px;
+}
+</style>
+
+<script setup>
+import { ref } from 'vue';
+import { api } from 'boot/axios';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import useNotify from 'src/composables/useNotify.js';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const user = ref('');
+const router = useRouter();
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const onSend = async () => {
+    const params = {
+        user: user.value,
+        app: 'hedera'
+    };
+    await api.post('VnUsers/recoverPassword', params);
+    notify(t('weHaveSentEmailToRecover'), 'positive');
+    router.push('/login');
+};
+</script>
+
+<i18n lang="yaml">
+en-US:
+    inputEmail: Input email
+    rememberPassword: Rememeber password
+    weSendEmail: We will sent you an email to recover your password
+    weHaveSentEmailToRecover: We've sent you an email where you can recover your password
+es-ES:
+    inputEmail: Introduce el correo electrónico
+    rememberPassword: Recordar contraseña
+    weSendEmail: Te enviaremos un correo para restablecer tu contraseña
+    weHaveSentEmailToRecover: Te hemos enviado un correo donde podrás recuperar tu contraseña
+ca-ES:
+    inputEmail: Introdueix el correu electrònic
+    rememberPassword: Recordar contrasenya
+    weSendEmail: T'enviarem un correu per restablir la teva contrasenya
+    weHaveSentEmailToRecover: T'hem enviat un correu on podràs recuperar la teva contrasenya
+fr-FR:
+    inputEmail: Entrez l'email
+    rememberPassword: Se souvenir du mot de passe
+    weSendEmail: Nous vous enverrons un e-mail pour récupérer votre mot de passe
+    weHaveSentEmailToRecover: Nous vous avons envoyé un e-mail où vous pouvez récupérer votre mot de passe
+pr-BR:
+    inputEmail: Digite o e-mail
+    rememberPassword: Lembrar senha
+    weSendEmail: Enviaremos um e-mail para recuperar sua senha
+    weHaveSentEmailToRecover: Enviamos um e-mail onde você pode recuperar sua senha
+</i18n>

src/pages/Login/RememberPassword.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="text-center">
-        <div>
-            <QIcon
-                name="contact_support"
-                class="block q-mx-auto text-accent"
-                style="font-size: 120px"
-            />
-        </div>
-        <div>
-            <QForm
-                @submit="onSend"
-                class="q-gutter-y-md text-grey-8"
-            >
-                <div class="text-h5">
-                    <div>
-                        {{ $t('dontWorry') }}
-                    </div>
-                    <div>
-                        {{ $t('fillData') }}
-                    </div>
-                </div>
-                <QInput
-                    v-model="email"
-                    :label="$t('user')"
-                    :rules="[val => !!val || $t('inputEmail')]"
-                    autofocus
-                />
-                <div class="q-mt-lg">
-                    {{ $t('weSendEmail') }}
-                </div>
-                <div>
-                    <QBtn
-                        type="submit"
-                        :label="$t('send')"
-                        class="full-width q-mt-md"
-                        color="primary"
-                        rounded
-                        no-caps
-                        unelevated
-                    />
-                    <div class="text-center q-mt-md">
-                        <router-link
-                            to="/login"
-                            class="link"
-                        >
-                            {{ $t('return') }}
-                        </router-link>
-                    </div>
-                </div>
-            </QForm>
-        </div>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-#image {
-    height: 190px;
-}
-.q-btn {
-    height: 50px;
-}
-a {
-    color: inherit;
-    font-size: 0.8rem;
-}
-</style>
-
-<script>
-export default {
-    name: 'VnRememberPasword',
-    data() {
-        return {
-            email: ''
-        };
-    },
-    methods: {
-        async onSend() {
-            const params = {
-                email: this.email
-            };
-            await this.$axios.post('Users/reset', params);
-            this.$q.notify({
-                message: this.$t('weHaveSentEmailToRecover'),
-                type: 'positive'
-            });
-            this.$router.push('/login');
-        }
-    }
-};
-</script>
-
-<i18n lang="yaml">
-en-US:
-    user: User
-    inputEmail: Input email
-    rememberPassword: Rememeber password
-    dontWorry: Don't worry!
-    fillData: Fill the data
-    weSendEmail: We will sent you an email to recover your password
-    weHaveSentEmailToRecover: We've sent you an email where you can recover your password
-    send: Send
-    return: Return
-es-ES:
-    user: Usuario
-    inputEmail: Introduce el correo electrónico
-    rememberPassword: Recordar contraseña
-    dontWorry: ¡No te preocupes!
-    fillData: Rellena los datos
-    weSendEmail: Te enviaremos un correo para restablecer tu contraseña
-    weHaveSentEmailToRecover: Te hemos enviado un correo donde podrás recuperar tu contraseña
-    send: Enviar
-    return: Volver
-</i18n>

src/router/index.js

@@ -39,10 +39,11 @@ export default route(function (/* { store, ssrContext } */) {
 
     Router.beforeEach((to, from, next) => {
         const userStore = useUserStore();
+        const allowedRoutes = ['login', 'recoverPassword'];
 
         if (
             !userStore.storage.getItem('token') &&
-            to.name !== 'login' &&
+            !allowedRoutes.includes(to.name) &&
             !userStore.isGuest
         ) {
             return next({ name: 'login' });

src/router/routes.js

@@ -5,17 +5,17 @@ const routes = [
         children: [
             {
                 name: 'login',
-                path: '/login/:email?',
+                path: '',
                 component: () => import('pages/Login/LoginView.vue')
             },
             {
-                name: 'rememberPassword',
+                name: 'recoverPassword',
-                path: '/remember-password',
+                path: 'recover',
-                component: () => import('pages/Login/RememberPassword.vue')
+                component: () => import('pages/Login/RecoverPassword.vue')
             },
             {
                 name: 'resetPassword',
-                path: '/reset-password',
+                path: 'reset',
                 component: () => import('pages/Login/ResetPassword.vue')
             }
         ]

src/test/cypress/integration/login/RecoverPassword.spec.js

@@ -0,0 +1,18 @@
+describe('Login Tests', () => {
+    beforeEach(() => {
+        cy.visit('/#/login');
+    });
+
+    it('should ssend recover email', () => {
+        cy.dataCy('recoverPasswordViewLink').should('exist');
+        cy.dataCy('recoverPasswordViewLink').click();
+        cy.dataCy('recoverPasswordUserInput').find('input').should('exist');
+        cy.dataCy('recoverPasswordUserInput').find('input').type('developer');
+        cy.dataCy('recoverPasswordSubmitButton').should('exist');
+        cy.dataCy('recoverPasswordSubmitButton').click();
+        cy.checkNotify(
+            'positive',
+            'Te hemos enviado un correo donde podrás recuperar tu contraseña'
+        );
+    });
+});