wbuezas
/
hedera-web-mindshore
forked from verdnatura/hedera-web
0
1
Fork 0
Code Pull Requests Activity

Recover password view and test

This commit is contained in:
William Buezas 2024-12-03 10:52:59 -03:00
parent 0aeacc88bc
commit be0636a832
13 changed files with 139 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ui/ImageEditor.vue
View File

@ -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>

1
src/i18n/ca-ES/index.js
View File

@ -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',

1
src/i18n/en-US/index.js
View File

@ -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',

1
src/i18n/es-ES/index.js
View File

@ -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',

1
src/i18n/fr-FR/index.js
View File

@ -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',

1
src/i18n/pt-PT/index.js
View File

@ -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',

12
src/layouts/LoginLayout.vue
View File

@ -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">
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
</div>
<QPageContainer class="column q-pa-md row items-center justify-center">
<transition>
<router-view />
</transition>
</QPageContainer>
</QLayout>
</template>

7
src/pages/Login/LoginView.vue
View File

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

99
src/pages/Login/RecoverPassword.vue Normal file
View File

@ -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>

114
src/pages/Login/RememberPassword.vue
View File

@ -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>

3
src/router/index.js
View File

@ -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' });

10
src/router/routes.js
View File

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

18
src/test/cypress/integration/login/RecoverPassword.spec.js Normal file
View File

@ -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'
);
});
});