add: view change password & email

src/components/CardLocation.vue

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

src/components/FormChangeEmail.vue

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

src/components/FormChangePassword.vue

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

src/views/CarriersView.vue

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

src/views/EditProfileView.vue

@@ -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" 
-            <a class="btn-text" type="submit">Cambiar correo</a>
+                :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;

src/views/LoadsPublishedView.vue

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

src/views/LocationsView.vue

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

src/views/ShippersView.vue

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

src/views/TrucksPublishedView.vue

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

src/views/UsersView.vue

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

src/views/VehiclesView.vue

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