add: view change password & email

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" 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>
-        <br/>
-        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
+        <form 
+            @submit.prevent="handleSave" 
+            autocomplete="off" 
+            method="post" 
+            ref="formRef"
+            v-if="form === 0"
+        >
+            <br/>
             <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;