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

add: view change password & email

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-04-08 20:44:58 -06:00
parent e0a4cf4abb
commit 759e6d0987
11 changed files with 302 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/FormChangeEmail.vue Normal file
View 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
View 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>

2
src/views/CarriersView.vue
View File

@@ -17,7 +17,7 @@ import Pagination from '../components/Pagination.vue';
const selectedCities = ref([]);
const filterQuery = ref([]);
const limit = 5;
const limit = 10;
onMounted(() => {
filterQuery.value.company_type = 'carrier';

39
src/views/EditProfileView.vue
View File

@@ -5,6 +5,8 @@
import CustomInput from '../components/ui/CustomInput.vue';
import { storeToRefs } from 'pinia';
import NotificationBadge from '../components/ui/NotificationBadge.vue';
import FormChangePassword from '../components/FormChangePassword.vue';
import FormChangeEmail from '../components/FormChangeEmail.vue';
const auth = useAuthStore();
@@ -13,6 +15,7 @@
const loading = ref(false)
const msgError = ref('');
const msgSuccess = ref('');
const form = ref(0);
const userForm = reactive({
name: '',
@@ -36,6 +39,7 @@
userForm.name = user.value?.first_name
userForm.lastName = user.value?.last_name
userForm.phone1 = user.value?.phone
}
const handleSave = async() => {
@@ -82,18 +86,38 @@
}
}
const setForm = (val) => {
form.value = val
}
</script>
<template>
<div class="form-content">
<div class="box-btns">
<a class="btn-text" type="submit">Cambiar contraseña</a>
<a class="btn-text" type="submit">Cambiar correo</a>
<a class="btn-text"
:class="[(form === 0) ? 'selection' : '']"
@click="setForm(0)"
>Datos usuario</a>
<a class="btn-text"
:class="[(form === 1) ? 'selection' : '']"
@click="setForm(1)"
>Cambiar correo</a>
<a class="btn-text"
:class="[(form === 2) ? 'selection' : '']"
@click="setForm(2)"
>Cambiar contraseña</a>
</div>
<br/>
<div class="divider"></div>
<form
@submit.prevent="handleSave"
autocomplete="off"
method="post"
ref="formRef"
v-if="form === 0"
>
<br/>
<form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
<h3 class="title">Datos de usuario</h3>
<br/>
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
@@ -120,13 +144,15 @@
:filled="false"
v-model:field="userForm.phone1"
/>
<div class="mt-4 text-center">
<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>
<FormChangeEmail v-if="form === 1"/>
<FormChangePassword v-if="form === 2"/>
</div>
</template>
@@ -135,11 +161,16 @@
/* .profile {
margin: 0 auto;
} */
.box-btns {
display: flex;
justify-content: flex-end;
gap: 2rem;
}
.selection {
color: #333;
}
.form-content {
margin-top: 1rem;
max-width: 768px;

2
src/views/LoadsPublishedView.vue
View File

@@ -13,7 +13,7 @@
const loading = ref(false);
const query = ref('');
const filterQuery = ref([]);
const limit = 5;
const limit = 10;
onMounted(() =>{
console.log('init')

2
src/views/LocationsView.vue
View File

@@ -19,7 +19,7 @@
getInitData();
})
const limit = 5;
const limit = 10;
const getInitData = async() => {
loading.value = true;

2
src/views/ShippersView.vue
View File

@@ -17,7 +17,7 @@
const selectedCities = ref([]);
const filterQuery = ref([]);
const limit = 5;
const limit = 10;
onMounted(() => {
filterQuery.value.company_type = 'shipper';

2
src/views/TrucksPublishedView.vue
View File

@@ -12,7 +12,7 @@
const proposalCurrent = ref(null);
const openModal = ref(false);
const openModalProposal = ref(false);
const limit = 5;
const limit = 10;
onMounted(() =>{
getInitData();

2
src/views/UsersView.vue
View File

@@ -16,7 +16,7 @@ import { useAuthStore } from '../stores/auth';
const currentUser = ref(null);
const openModal = ref(false);
const limit = 3;
const limit = 10;
const getInitData = async() => {
console.log('callll')

2
src/views/VehiclesView.vue
View File

@@ -21,7 +21,7 @@
const editStatusVehicle = ref(false);
const editDriverVehicle = ref(false);
const limit = 3;
const limit = 10;
onMounted(() => {
getInitData();