265 lines
9.1 KiB
Vue
265 lines
9.1 KiB
Vue
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import CustomInput from '../components/ui/CustomInput.vue';
|
|
import NotificationBadge from '../components/ui/NotificationBadge.vue';
|
|
import {validateEmail} from '../helpers/validations';
|
|
import {regiter, regiterConfirm} from "../services/auth";
|
|
import Spiner from '../components/ui/Spiner.vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useNotificationsStore } from '../stores/notifications';
|
|
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: '',
|
|
pwd: '',
|
|
retryPwd: '',
|
|
code: ''
|
|
});
|
|
|
|
const step = ref(1);
|
|
const loading = ref(false);
|
|
const checksum = ref('');
|
|
const msgError = ref('');
|
|
const msgSuccess = ref('');
|
|
|
|
const handleRegister = async() => {
|
|
msgError.value = '';
|
|
msgSuccess.value = '';
|
|
let resp = validations();
|
|
if(resp !== '') {
|
|
msgError.value = resp;
|
|
clearMessages();
|
|
return;
|
|
} else {
|
|
loading.value = true;
|
|
msgError.value = '';
|
|
const data = {
|
|
email: form.email,
|
|
password: form.pwd
|
|
}
|
|
const result = await regiter(data);
|
|
if(result.msg === 'success' && result.data !== null) {
|
|
msgSuccess.value = t('messages.sendCode');
|
|
checksum.value = result.data.checksum;
|
|
step.value = 2;
|
|
clearMessages();
|
|
} else {
|
|
msgError.value = result.msg;
|
|
clearMessages();
|
|
}
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
|
|
const handleConfirmRegister = async() => {
|
|
msgError.value = '';
|
|
msgSuccess.value = '';
|
|
if(form.code.length < 2) {
|
|
msgError.value = t('errors.code');
|
|
clearMessages();
|
|
return;
|
|
} else {
|
|
loading.value = true;
|
|
msgError.value = '';
|
|
const data = {
|
|
email: form.email,
|
|
password: form.pwd,
|
|
otp: form.code,
|
|
checksum: checksum.value
|
|
}
|
|
const result = await regiterConfirm(data);
|
|
if(result.msg === 'success' && result.data !== null){
|
|
step.value = 3;
|
|
checksum.value = '';
|
|
Object.assign(form, {
|
|
email: '',
|
|
pwd: '',
|
|
retryPwd: '',
|
|
code: ''
|
|
});
|
|
clearMessages();
|
|
notifications.$patch({
|
|
text : t('messages.register'),
|
|
show : true,
|
|
error: false
|
|
});
|
|
auth.$patch({
|
|
sesion: result.data.session_token,
|
|
token: result.data.accessToken,
|
|
user: result.data.user,
|
|
})
|
|
router.push({name: 'register-company'});
|
|
} else {
|
|
msgError.value = result.msg;
|
|
clearMessages()
|
|
}
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
const validations = () => {
|
|
const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
|
|
if(form.email.trim() == '' || form.pwd.trim() == '' || form.retryPwd.trim() == '') {
|
|
return t('errors.requireds');
|
|
} else if (!validateEmail(form.email)) {
|
|
return t('errors.email')
|
|
} else if(!pass.test(form.pwd)) {
|
|
return t('errors.weakPassword');
|
|
} else if (form.pwd != form.retryPwd) {
|
|
return t('errors.matchPassword');
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
const clearMessages = () => {
|
|
setTimeout(() => {
|
|
msgError.value = '';
|
|
msgSuccess.value = '';
|
|
}, 3000);
|
|
}
|
|
|
|
const resendCode = async() => {
|
|
loading.value = true;
|
|
const data = {
|
|
email: form.email,
|
|
password: form.pwd
|
|
}
|
|
const result = await regiter(data);
|
|
if(result.msg === 'success' && result.data !== null) {
|
|
msgSuccess.value = t('messages.sendCode');
|
|
checksum.value = result.data.checksum;
|
|
clearMessages();
|
|
} else {
|
|
msgError.value = result.msg;
|
|
clearMessages();
|
|
}
|
|
loading.value = false;
|
|
}
|
|
|
|
const handleBack = (val) => {
|
|
step.value = val;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="d-flex flex-column my-5 justify-content-center align-items-center">
|
|
<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="t('labels.email')"
|
|
name="email"
|
|
type="email"
|
|
v-model:field="form.email"
|
|
/>
|
|
<CustomInput
|
|
:label="t('labels.password')"
|
|
name="password"
|
|
type="password"
|
|
v-model:field="form.pwd"
|
|
:help-text="t('login.helptext')"
|
|
/>
|
|
<CustomInput
|
|
:label="t('labels.password3')"
|
|
name="retryPassword"
|
|
type="password"
|
|
v-model:field="form.retryPwd"
|
|
/>
|
|
<Spiner v-if="loading" class="mt-5"/>
|
|
<input
|
|
v-else
|
|
type="submit"
|
|
class="btn-primary-lg btn-lg-block radius-1 mt-5" :value="t('buttons.continue')">
|
|
|
|
<p class="mt-5 fs-6 text-center">
|
|
{{ t('login.notice') }}
|
|
<RouterLink
|
|
class="btn-text me-1"
|
|
:to="{name: 'terms-conditions'}"
|
|
target="_blank">{{t('buttons.terms')}}</RouterLink>
|
|
{{ t('global.and') }}
|
|
<RouterLink
|
|
class="btn-text ms-1"
|
|
:to="{name: 'notice-privacy'}"
|
|
target="_blank"> {{ t('buttons.noticePrivacity') }}</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> {{t('buttons.back')}}</a>
|
|
</div>
|
|
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
|
<NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
|
|
<p class="help-info">{{ t('login.helptextCode') }}</p>
|
|
<CustomInput
|
|
:label="t('labels.code')"
|
|
name="code"
|
|
type="text"
|
|
v-model:field="form.code"
|
|
/>
|
|
<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> {{ 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="t('buttons.continue')">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.form-content {
|
|
width: 100%;
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
.icon-success{
|
|
font-size: 5rem;
|
|
color: green;
|
|
}
|
|
|
|
.help-info {
|
|
margin-bottom: 2rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
color: #5a4b4b;
|
|
}
|
|
.msg-success {
|
|
margin-bottom: 2rem;
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
color: #5a4b4b;
|
|
}
|
|
|
|
@media (max-width: 1224px) {
|
|
.form-content {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-content {
|
|
width: 100%;
|
|
padding: 2rem 1rem;
|
|
}
|
|
}
|
|
</style> |