ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set translations en and es

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-05-18 17:30:39 -06:00
parent 1027f38eb0
commit c08567beda
11 changed files with 737 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Header.vue
View File

@@ -1,8 +1,73 @@
<script setup>
import { useI18n } from 'vue-i18n';
import CustomPopup from './CustomPopup.vue';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { watch } from 'vue';
const { t, locale } = useI18n();
const openPopup = ref(false);
const options = ref([]);
const lang = ref(null);
onMounted(() => {
const langInit = localStorage.getItem('lang') ?? locale.value;
locale.value = langInit
lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')}
options.value = [
{value: 'es',label: t('global.es')},
{value: 'en',label: t('global.en')},
]
});
const changeLang = () => {
if(locale.value == 'es') {
locale.value = 'en'
lang.value = {
value: 'en',
label: ''
}
} else {
locale.value = 'es'
lang.value = {
value: 'es',
label: ''
}
}
localStorage.setItem('lang', locale.value);
openPopup.value = false
}
watch(lang, () => {
options.value = [
{value: 'es',label: t('global.es')},
{value: 'en',label: t('global.en')},
]
})
const closePopup = () => {
openPopup.value = false
}
</script>
<template>
<div
v-if="openPopup"
>
<CustomPopup
:options="options"
:value="lang"
@change-value="changeLang"
@close-popup="closePopup"
selected-color="#e3a11e"
:style="{
right: '30px',
top: '70px',
}"
/>
</div>
<div class="header-content">
<div class="box-content">
<RouterLink
@@ -13,8 +78,11 @@
<div class="box-register">
<p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
</div>
</div>
</div>
<a
@click="openPopup = true"
class="lang"><i class="fa-solid fa-globe"></i> {{ locale }}</a>
</div>
</template>
<style scoped>
@@ -47,6 +115,15 @@
font-weight: 900;
color: #FFF;
}
.lang {
color: #FFF;
text-decoration: none;
align-items: center;
align-self: center;
align-content: center;
cursor: pointer;
}
.app-btn{
background-color: #FBBA33;

28
src/helpers/messages.js Normal file
View File

@@ -0,0 +1,28 @@
export const messages = {
en: {
labels: {
email: 'Email',
password: 'Password',
},
global: {
signIn: "Sign In"
},
login: {
title: 'Sign in',
greeting: 'Welcome! Enter your email and password'
}
},
es: {
labels: {
email: 'Correo electrónico',
password: 'Contraseña',
},
global: {
signIn: "Ingresar"
},
login: {
title: 'Iniciar sesión',
greeting: 'Bienvenido! Ingresa tu email y contraseña'
}
}
}

147
src/i18n/i18n.js Normal file
View File

@@ -0,0 +1,147 @@
import { createI18n } from 'vue-i18n';
const messages = {
en: {
labels: {
email: 'Email',
password: 'Password',
password2: 'New password',
password3: 'Confirm Password',
code: 'Enter the code',
},
buttons: {
enter: "Enter here",
signup: "Sign up here",
continue: "Continue",
back: "Go back",
resendCode: "Resend code",
terms: 'Terms and Conditions',
noticePrivacity: 'Privacy notice',
},
errors: {
requireds: "All fields required",
email: "Email is not valid",
weakPassword: "Weak password",
matchPassword: "Passwords do not match",
code: 'Enter valid code',
company: 'Enter valid company name',
rfc: 'Enter valid RFC',
segments: 'Select at least one segment',
states: 'Select at least one state',
cities: 'Select at least one city',
trucks: 'Select at least one type of transport',
name: 'Enter valid name(s)',
lastname: 'Enter valid last name(s)',
phone: 'Enter valid phone number'
},
messages: {
sendCode: 'We send you a code to the email, entered!',
changePassword: 'Password has been changed successfully!',
register: "Successful registration, Complete your registration!"
},
global: {
signIn: "Sign In",
and: "and",
es: "Spanish",
en: "English",
shipper: 'Shipper',
carrier: 'Carrier',
brokerShipper: 'Broker (Shipper)',
brokerCarrier: 'Broker (Carrier)',
fisica: 'Persona fisica',
moral: 'Persona moral',
},
login: {
title: 'Sign in',
recovery: 'Recover password',
register: 'Registration of new users',
completeRegister: 'Complete your registration',
questionTypeCompany: 'How do you want to register?',
questionFiscal: 'How do you work?',
companyData: 'Company data',
helptext: "The Password must be at least 8 characters, at least one uppercase letter, at least one lowercase letter, and one digit.",
helptextCode: "We send you a verification code to the email, enter it to confirm the password recovery. Don't forget to check the spam folder.",
greeting: 'Welcome! Enter your email and password',
notHaveAccount: "You do not have an account?",
forgotPassword: "Forgot your password?",
notice: 'By registering you accept our',
questionAccount: 'Do you already have an account?',
}
},
es: {
labels: {
email: 'Correo electrónico',
password: 'Contraseña',
password2: 'Nueva contraseña',
password3: 'Confirmar contraseña',
code: 'Ingresa el código',
},
buttons: {
enter: "Ingresa aqui",
signup: "Registrate aqui",
continue: "Continuar",
back: "Volver",
resendCode: "Reenviar código",
terms: 'Términos y condiciones',
noticePrivacity: 'Aviso de privaciadad',
},
errors: {
requireds: 'Todos los campos con obligatorios',
email: 'Correo electrónico no es valido',
weakPassword: 'Contraseña poco segura',
matchPassword: 'Las contraseñas no coinciden',
code: 'Ingresa código valido',
company: 'Ingresa nombre de empresa valido',
rfc: 'Ingresa RFC valido',
segments: 'Selecciona al menos un segmento',
states: 'Selecciona al menos un estado',
cities: 'Selecciona al menos un municipio',
trucks: 'Selecciona al menos un tipo de transporte',
name: 'Ingresa nombre(s) valido',
lastname: 'Ingresa apellido(s) valido',
phone: 'Ingresa teléfono valido'
},
messages: {
sendCode: 'Te enviamos un código al correo, ingresado!',
changePassword: 'Contraseña se ha cambiando exitosamente!',
register: "Registro exitoso, Complete su registro!"
},
global: {
signIn: 'Ingresar',
and: "y",
es: 'Español',
en: 'Ingles',
shipper: 'Embarcador',
carrier: 'Transportista',
brokerShipper: 'Broker (Embarcador)',
brokerCarrier: 'Broker (Transportista)',
fisica: 'Persona fisica',
moral: 'Persona moral',
},
login: {
title: 'Iniciar sesión',
recovery: 'Recuperar contraseña',
register: 'Registro de nuevos usuarios',
completeRegister: 'Complete su registro',
questionTypeCompany: '¿Como te quieres registrar?',
questionFiscal: '¿Como trabajas?',
companyData: 'Datos de la empresa',
helptext: 'La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito.',
helptextCode: "Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam.",
greeting: 'Bienvenido! Ingresa tu email y contraseña',
forgotPassword: '¿Olvidaste tu contreseña?',
notHaveAccount: '¿No tienes una cuenta?',
notice: 'Al registrarte aceptas nuestros',
questionAccount: '¿Ya tienes una cuenta?',
}
}
}
const i18n = createI18n({
legacy: false,
locale: 'es', // default locale
fallbackLocale: 'es',
messages,
});
export default i18n;

2
src/main.js
View File

@@ -4,10 +4,12 @@ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import i18n from './i18n/i18n'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(i18n)
app.mount('#app')

45
src/views/CompleteRegisterView.vue
View File

@@ -14,6 +14,7 @@
import { complete_registry } from "../services/auth";
import { updateMyUserProfile } from "../services/company"
import Spiner from '../components/ui/Spiner.vue';
import { useI18n } from 'vue-i18n';
const notifications = useNotificationsStore();
const auth = useAuthStore();
@@ -23,6 +24,8 @@
const msgError = ref('');
const msgSuccess = ref('');
const { t } = useI18n()
const typeCompany = reactive({
typeCompany: 'shipper',
typeRFC: 'fisica'
@@ -47,7 +50,7 @@
const handleSelectedTypeCompany = () => {
if(typeCompany.typeCompany === null || typeCompany.typeRFC === null) {
msgError.value = 'Todos los campos con obligatorios';
msgError.value = t('errors.requireds');
clearMessages();
return;
}
@@ -63,7 +66,7 @@
return;
}
step.value = 3;
console.log(company);
// console.log(company);
}
const handleSendRegister = async () => {
@@ -95,7 +98,7 @@
return;
}
console.log(result);
// console.log(result);
localStorage.setItem('id', result.data._id);
localStorage.setItem('session', auth.sesion);
// localStorage.setItem('access', auth.token);
@@ -137,17 +140,17 @@
const validatiosCompany = () => {
if(company.name.trim().length <= 2) {
return 'Ingresa nombre de empresa valido';
return t('errors.company');
} else if(!validRFC(company.rfc, typeCompany.typeRFC)) {
return 'Ingresa RFC valido';
return t('errors.rfc')
} else if(company.segments.length === 0) {
return 'Selecciona al menos un segmento';
return t('errors.segments')
} else if(company.states.length === 0) {
return 'Selecciona al menos un estado';
return t('errors.states');
} else if(company.cities.length === 0) {
return 'Selecciona al menos un municipio';
return t('errors.cities');
} else if(company.truckTypes.length === 0) {
return 'Selecciona al menos un tipo de transporte';
return t('errors.trucks');
}
else {
return '';
@@ -169,38 +172,38 @@
</script>
<template>
<h2 class="title my-5">Complete su registro</h2>
<h2 class="title my-5">{{ t('login.completeRegister') }}</h2>
<div class="card-info flex-column justify-content-center align-items-center mb-5">
<form @submit.prevent="handleSelectedTypeCompany" v-if="step === 1" class="form-view">
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<h2 class="mt-4">¿Como te quieres registrar?*</h2>
<h2 class="mt-4">{{ t('login.questionTypeCompany') }}*</h2>
<CustomRadioInput
value="shipper"
label="Embarcador"
:label="t('global.shipper')"
name="type-company"
v-model:typeselected="typeCompany.typeCompany"
/>
<CustomRadioInput
value="carrier"
label="Transportista"
:label="t('global.carrier')"
name="type-company"
v-model:typeselected="typeCompany.typeCompany"
/>
<CustomRadioInput
value="b-shipper"
label="Broker (Embarcador)"
:label="t('global.brokerShipper')"
name="type-company"
v-model:typeselected="typeCompany.typeCompany"
/>
<CustomRadioInput
value="b-carrier"
label="Broker (Transportista)"
:label="t('global.brokerCarrier')"
name="type-company"
v-model:typeselected="typeCompany.typeCompany"
/>
<h2 class="mt-5">¿Como trabajas?*</h2>
<h2 class="mt-5">{{ t('login.questionFiscal') }}*</h2>
<CustomRadioInput
value="fisica"
label="Persona fisica"
@@ -214,16 +217,16 @@
v-model:typeselected="typeCompany.typeRFC"
/>
<input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
<input type="submit" :value="t('buttons.continue')" class="btn-primary-lg btn-lg-block my-4">
</form>
<form @submit.prevent="handleDataCompany" v-if="step === 2">
<div class="d-flex justify-content-center align-items-center my-4">
<a
@click="handleBack(1)"
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> {{ t('buttons.back') }}</a>
</div>
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<h2>Datos de la empresa</h2>
<h2>{{ t('login.companyData') }}</h2>
<div class="divider mt-2 mb-4"></div>
<Custominput
label="¿Cuál es el nombre de la empresa? *"
@@ -275,13 +278,13 @@
v-model:field="company.description"
/>
<input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
<input type="submit" :value="t('buttons.continue')" class="btn-primary-lg btn-lg-block my-4">
</form>
<form @submit.prevent="handleSendRegister" v-if="step === 3" class="form-view">
<div class="d-flex justify-content-center align-items-center mb-4">
<a
@click="handleBack(2)"
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> {{ t('buttons.back') }}</a>
</div>
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<h2>Información personal</h2>

2
src/views/LocationsView.vue
View File

@@ -6,7 +6,7 @@
import CreateLocationModal from '../components/CreateLocationModal.vue';
import CardLocation from '../components/CardLocation.vue';
import Pagination from '../components/Pagination.vue';
import CustomPopup from '../components/CustomPopup.vue';
import CustomPopup from '../components/CustomPopup.vue';
const companyStore = useCompanyStore();

20
src/views/LoginView.vue
View File

@@ -7,6 +7,7 @@
import { login } from '../services/auth';
import { RouterLink, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
const form = reactive({
email: '',
@@ -19,6 +20,7 @@
const loading = ref(false);
const msgError = ref('');
const msgSuccess = ref('');
const {t} = useI18n();
const handleLogin = async() => {
msgError.value = '';
@@ -67,9 +69,9 @@
const validations = () => {
if(form.email.trim() == '' || form.password.trim() == '') {
return 'Todos los campos con obligatorios';
return t('errors.requireds')
} else if (!validateEmail(form.email)) {
return 'Correo electrónico no es valido'
return t('errors.email')
} else {
return '';
}
@@ -86,19 +88,19 @@
<template>
<div class="d-flex flex-column my-5 justify-content-center align-items-center">
<h2 class="title">Iniciar sesión</h2>
<p class="subtitle mt-4 mb-5 text-center">Bienvenido de vuelta! Ingresa tu email y contraseña</p>
<h2 class="title">{{ $t("login.title") }}</h2>
<p class="subtitle mt-4 mb-5 text-center">{{ $t("login.greeting") }}</p>
<form @submit.prevent="handleLogin" class="form-content">
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
<CustomInput
label="Ingresa tu correo electrónico"
:label="$t('labels.email')"
name="email"
type="email"
v-model:field="form.email"
/>
<CustomInput
label="Contraseña"
:label="$t('labels.password')"
name="password"
type="password"
v-model:field="form.password"
@@ -107,10 +109,10 @@
<input
v-else
type="submit"
class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Ingresar">
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="$t('global.signIn')">
</form>
<p class="mt-3 fs-6">¿Olvidaste tu contreseña? <RouterLink class="btn-text" :to="{name: 'recovery'}">Ingresa aqui</RouterLink></p>
<p class="mt-5 fs-6">¿No tienes una cuenta? <RouterLink class="btn-text" :to="{name: 'register'}">Registrate aqui</RouterLink></p>
<p class="mt-3 fs-6">{{ $t("login.forgotPassword") }} <RouterLink class="btn-text" :to="{name: 'recovery'}">{{ $t("buttons.enter") }}</RouterLink></p>
<p class="mt-5 fs-6">{{ $t("login.notHaveAccount") }} <RouterLink class="btn-text" :to="{name: 'register'}">{{ $t("buttons.signup") }}</RouterLink></p>
</div>
</template>

40
src/views/RecoveryPasswordView.vue
View File

@@ -7,6 +7,7 @@
import Spiner from '../components/ui/Spiner.vue';
import { useRouter } from 'vue-router';
import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const notifications = useNotificationsStore()
@@ -23,6 +24,7 @@
const checksum = ref('');
const msgError = ref('');
const msgSuccess = ref('');
const { t } = useI18n()
const handleRegister = async() => {
msgError.value = '';
@@ -41,7 +43,7 @@
}
const result = await recoveryPassword(data);
if(result.msg === 'success' && result.data !== null) {
msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
msgSuccess.value = t('messages.sendCode');
checksum.value = result.data.checksum;
step.value = 2;
clearMessages();
@@ -58,7 +60,7 @@
msgError.value = '';
msgSuccess.value = '';
if(form.code.length < 6) {
msgError.value = 'Ingresa código valido';
msgError.value = t('errors.code');
clearMessages();
return;
} else {
@@ -73,7 +75,7 @@
const result = await recoveryPasswordConfirm(data);
// console.log(result);
if(result.msg === 'success' && result.data !== null){
msgSuccess.value = 'Contraseña se ha cambiando exitosamente!';
msgSuccess.value = t('messages.changePassword');
step.value = 3;
checksum.value = '';
Object.assign(form, {
@@ -84,7 +86,7 @@
});
clearMessages();
notifications.$patch({
text : 'Contraseña se ha cambiando exitosamente!',
text : t('messages.changePassword'),
show : true,
error: false
});
@@ -100,13 +102,13 @@
const validations = () => {
const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
if(form.email.trim() == '' || form.pwd.trim() == '' || form.retryPwd.trim() == '') {
return 'Todos los campos con obligatorios';
return t('errors.requireds');
} else if (!validateEmail(form.email)) {
return 'Correo electrónico no es valido'
return t('errors.email')
} else if(!pass.test(form.pwd)) {
return 'Contraseña poco segura';
return t('errors.weakPassword');
} else if (form.pwd != form.retryPwd) {
return 'Las contraseñas no coinciden';
return t('errors.matchPassword');
} else {
return '';
}
@@ -144,26 +146,26 @@
<template>
<div class="d-flex flex-column my-5 justify-content-center align-items-center">
<h2 class="title">Recuperar contraseña</h2>
<h2 class="title">{{ t('login.recovery') }}</h2>
<div class="form-content">
<form v-if="step === 1" @submit.prevent="handleRegister">
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
<CustomInput
label="Ingresa tu correo electrónico"
:label="t('labels.email')"
name="email"
type="email"
v-model:field="form.email"
/>
<CustomInput
label="Nueva contraseña"
:label="t('labels.password2')"
name="password"
type="password"
v-model:field="form.pwd"
help-text="La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito."
:help-text="t('login.helptext')"
/>
<CustomInput
label="Confirmar Contraseña"
:label="t('labels.password3')"
name="retryPassword"
type="password"
v-model:field="form.retryPwd"
@@ -172,22 +174,22 @@
<input
v-else
type="submit"
class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Continuar">
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="t('buttons.continue')">
<p class="mt-5 fs-6 text-center"><RouterLink class="btn-text" :to="{name: 'login'}">Iniciar sesión</RouterLink></p>
<p class="mt-5 fs-6 text-center"><RouterLink class="btn-text" :to="{name: 'login'}">{{ t('login.title') }}</RouterLink></p>
</form>
<form v-if="step === 2" @submit.prevent="handleConfirmRegister" class="mx-5">
<div class="d-flex justify-content-center align-items-center mb-4">
<a
@click="handleBack(1)"
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> {{ t('buttons.back') }}</a>
</div>
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
<p class="help-info">Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam</p>
<p class="help-info">{{ t('login.helptextCode') }}</p>
<CustomInput
label="Ingresa el código"
:label="t('labels.code')"
name="code"
type="text"
v-model:field="form.code"
@@ -201,7 +203,7 @@
<input
v-else
type="submit"
class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Continuar">
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="t('buttons.continue')">
</form>
</div>
</div>

54
src/views/RegisterView.vue
View File

@@ -7,11 +7,13 @@
import Spiner from '../components/ui/Spiner.vue';
import { useRouter } from 'vue-router';
import { useNotificationsStore } from '../stores/notifications';
import { useAuthStore } from '../stores/auth';
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const notifications = useNotificationsStore()
const auth = useAuthStore();
const { t } = useI18n()
const form = reactive({
email: '',
@@ -43,7 +45,7 @@ import { useAuthStore } from '../stores/auth';
}
const result = await regiter(data);
if(result.msg === 'success' && result.data !== null) {
msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
msgSuccess.value = t('messages.sendCode');
checksum.value = result.data.checksum;
step.value = 2;
clearMessages();
@@ -60,7 +62,7 @@ import { useAuthStore } from '../stores/auth';
msgError.value = '';
msgSuccess.value = '';
if(form.code.length < 6) {
msgError.value = 'Ingresa código valido';
msgError.value = t('errors.code');
clearMessages();
return;
} else {
@@ -75,7 +77,7 @@ import { useAuthStore } from '../stores/auth';
const result = await regiterConfirm(data);
// console.log(result);
if(result.msg === 'success' && result.data !== null){
msgSuccess.value = 'Registro exitoso!';
// msgSuccess.value = 'Registro exitoso!';
step.value = 3;
checksum.value = '';
Object.assign(form, {
@@ -86,7 +88,7 @@ import { useAuthStore } from '../stores/auth';
});
clearMessages();
notifications.$patch({
text : 'Registro exitoso, Complete su registro!',
text : t('messages.register'),
show : true,
error: false
});
@@ -107,13 +109,13 @@ import { useAuthStore } from '../stores/auth';
const validations = () => {
const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
if(form.email.trim() == '' || form.pwd.trim() == '' || form.retryPwd.trim() == '') {
return 'Todos los campos con obligatorios';
return t('errors.requireds');
} else if (!validateEmail(form.email)) {
return 'Correo electrónico no es valido'
return t('errors.email')
} else if(!pass.test(form.pwd)) {
return 'Contraseña poco segura';
return t('errors.weakPassword');
} else if (form.pwd != form.retryPwd) {
return 'Las contraseñas no coinciden';
return t('errors.matchPassword');
} else {
return '';
}
@@ -134,7 +136,7 @@ import { useAuthStore } from '../stores/auth';
}
const result = await regiter(data);
if(result.msg === 'success' && result.data !== null) {
msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
msgSuccess.value = t('messages.sendCode');
checksum.value = result.data.checksum;
clearMessages();
} else {
@@ -151,26 +153,26 @@ import { useAuthStore } from '../stores/auth';
<template>
<div class="d-flex flex-column my-5 justify-content-center align-items-center">
<h2 class="title">Registro de nuevos usuarios</h2>
<h2 class="title">{{ t('login.register') }}</h2>
<div class="form-content">
<form v-if="step === 1" @submit.prevent="handleRegister">
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
<CustomInput
label="Ingresa tu correo electrónico"
:label="t('labels.email')"
name="email"
type="email"
v-model:field="form.email"
/>
<CustomInput
label="Contraseña"
:label="t('labels.password')"
name="password"
type="password"
v-model:field="form.pwd"
help-text="La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito."
:help-text="t('login.helptext')"
/>
<CustomInput
label="Confirma Contraseña"
:label="t('labels.password3')"
name="retryPassword"
type="password"
v-model:field="form.retryPwd"
@@ -179,34 +181,34 @@ import { useAuthStore } from '../stores/auth';
<input
v-else
type="submit"
class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Continuar">
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="t('buttons.continue')">
<p class="mt-5 fs-6 text-center">
Al registrarte aceptas nuestros
{{ t('login.notice') }}
<RouterLink
class="btn-text me-1"
:to="{name: 'terms-conditions'}"
target="_blank">términos y condiciones</RouterLink>
y
target="_blank">{{t('buttons.terms')}}</RouterLink>
{{ t('global.and') }}
<RouterLink
class="btn-text ms-1"
:to="{name: 'notice-privacy'}"
target="_blank"> Aviso de privaciadad</RouterLink>
target="_blank"> {{ t('buttons.noticePrivacity') }}</RouterLink>
</p>
<p class="mt-5 fs-6 text-center">¿Ya tienes una cuenta? <RouterLink class="btn-text" :to="{name: 'login'}">Ingresa aqui</RouterLink></p>
<p class="mt-5 fs-6 text-center"> {{t('login.questionAccount')}} <RouterLink class="btn-text" :to="{name: 'login'}">{{ t('buttons.enter') }}</RouterLink></p>
</form>
<form v-if="step === 2" @submit.prevent="handleConfirmRegister" class="mx-5">
<div class="d-flex justify-content-center align-items-center mb-4">
<a
@click="handleBack(1)"
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> {{t('buttons.back')}}</a>
</div>
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
<p class="help-info">Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar registro. No olvides revisar en la carpeta spam</p>
<p class="help-info">{{ t('login.helptextCode') }}</p>
<CustomInput
label="Ingresa el código"
:label="t('labels.code')"
name="code"
type="text"
v-model:field="form.code"
@@ -214,13 +216,13 @@ import { useAuthStore } from '../stores/auth';
<div v-if="!loading" class="d-flex justify-content-center align-items-center mt-4">
<a
@click="resendCode()"
class="btn-text ms-2"><i class="fa-solid fa-rotate-right"></i> Reenviar código</a>
class="btn-text ms-2"><i class="fa-solid fa-rotate-right"></i> {{ t('buttons.resendCode') }}</a>
</div>
<Spiner v-if="loading" class="mt-5"/>
<input
v-else
type="submit"
class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Continuar">
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="t('buttons.continue')">
</form>
</div>
</div>