add: view change password & email
This commit is contained in:
Alexandro Uc Santos
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import Swal from 'sweetalert2';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
|
||||
const props = defineProps({
|
||||
location: {
|
||||
|
||||
114
src/components/FormChangeEmail.vue
Normal file
114
src/components/FormChangeEmail.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue';
|
||||
import CustomInput from './ui/CustomInput.vue';
|
||||
import Spiner from './ui/Spiner.vue';
|
||||
import NotificationBadge from './ui/NotificationBadge.vue';
|
||||
const emailForm = reactive({
|
||||
email: '',
|
||||
email2: '',
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const msgError = ref('');
|
||||
const msgSuccess = ref('');
|
||||
|
||||
const hangleSave = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
@submit.prevent="hangleSave"
|
||||
autocomplete="off"
|
||||
method="post"
|
||||
ref="formRef1"
|
||||
>
|
||||
<br/>
|
||||
<h3 class="title">Cambiar correo electrónico</h3>
|
||||
<br/>
|
||||
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
||||
<NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
|
||||
<CustomInput
|
||||
label=" Nuevo Correo electrónico*:"
|
||||
type="email"
|
||||
name="email"
|
||||
:filled="false"
|
||||
v-model:field="emailForm.email"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Confirmar Correo electrónico*:"
|
||||
type="email"
|
||||
name="email2"
|
||||
:step="1"
|
||||
:filled="false"
|
||||
v-model:field="emailForm.email2"
|
||||
/>
|
||||
<div class="warning-info">
|
||||
<div><i class="fa-solid fa-triangle-exclamation warning"></i></div> Esta acción cambiara su correo electrónico, se le enviara un código al correo proporcionado lo cual deberas colocarlo para confirmar la acción, una vez confirmada la accion, se cerrara su sesión y debera volver a iniciar sesión con su nuevo correo.
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<Spiner v-if="loading"/>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-dark btn-block" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .box-back-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0px;
|
||||
} */
|
||||
|
||||
.warning-info {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
background: rgb(223, 223, 161);
|
||||
font-size: 0.9rem;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
color: rgb(86, 57, 57);
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
font-size: 33px;
|
||||
margin-right: 12px;
|
||||
/* color: white; */
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.form-content {
|
||||
margin: 24px 16px;
|
||||
background-color: #FFF;
|
||||
padding: 32px 32px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
.form-content {
|
||||
margin: 24px 8px;
|
||||
background-color: #FFF;
|
||||
padding: 20px 20px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-phone{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
src/components/FormChangePassword.vue
Normal file
144
src/components/FormChangePassword.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<script setup>
|
||||
import {reactive, ref} from 'vue';
|
||||
import CustomInput from './ui/CustomInput.vue';
|
||||
import Spiner from './ui/Spiner.vue';
|
||||
import NotificationBadge from './ui/NotificationBadge.vue';
|
||||
const pwdForm = reactive({
|
||||
pwd: '',
|
||||
pwd2: '',
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const msgError = ref('');
|
||||
const msgSuccess = ref('');
|
||||
|
||||
const hangleSave = () => {
|
||||
msgError.value = '';
|
||||
msgSuccess.value = '';
|
||||
let resp = validations();
|
||||
if(resp !== '') {
|
||||
msgError.value = resp;
|
||||
clearMessages();
|
||||
return;
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const validations = () => {
|
||||
const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
|
||||
|
||||
if(!pass.test(pwdForm.pwd)) {
|
||||
return 'Contraseña poco segura';
|
||||
} else if (pwdForm.pwd !== pwdForm.pwd2) {
|
||||
return 'Las contraseñas no coinciden';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
const clearMessages = () => {
|
||||
setTimeout(() => {
|
||||
msgError.value = '';
|
||||
msgSuccess.value = '';
|
||||
}, 3000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
@submit.prevent="hangleSave"
|
||||
autocomplete="off"
|
||||
method="post"
|
||||
ref="formRef1"
|
||||
>
|
||||
<br/>
|
||||
<h3 class="title">Cambiar contraseña</h3>
|
||||
<br/>
|
||||
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
||||
<NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
|
||||
<CustomInput
|
||||
label=" Nueva contraseña*:"
|
||||
type="password"
|
||||
name="pwd"
|
||||
:filled="false"
|
||||
v-model:field="pwdForm.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."
|
||||
/>
|
||||
<CustomInput
|
||||
label="Confirme contraseña*:"
|
||||
type="password"
|
||||
name="pwd2"
|
||||
:step="1"
|
||||
:filled="false"
|
||||
v-model:field="pwdForm.pwd2"
|
||||
/>
|
||||
<div class="warning-info">
|
||||
<div><i class="fa-solid fa-triangle-exclamation warning"></i></div>
|
||||
Esta acción cerrara su sesión actual y debera volver a iniciar sesión con su nueva contraseña
|
||||
</div>
|
||||
<div class="mt-5 text-center">
|
||||
<Spiner v-if="loading"/>
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-dark btn-block" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .box-back-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16px 0px;
|
||||
} */
|
||||
|
||||
.warning-info {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
background: rgb(223, 223, 161);
|
||||
font-size: 0.9rem;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
color: rgb(86, 57, 57);
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.warning {
|
||||
font-size: 33px;
|
||||
margin-right: 12px;
|
||||
/* color: white; */
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.form-content {
|
||||
margin: 24px 16px;
|
||||
background-color: #FFF;
|
||||
padding: 32px 32px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
.form-content {
|
||||
margin: 24px 8px;
|
||||
background-color: #FFF;
|
||||
padding: 20px 20px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-phone{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user