add: update user profile done

src/views/EditProfileView.vue

@@ -4,21 +4,20 @@
     import Spiner from '../components/ui/Spiner.vue';
     import CustomInput from '../components/ui/CustomInput.vue';
     import { storeToRefs } from 'pinia';
+    import NotificationBadge from '../components/ui/NotificationBadge.vue';
 
     const auth = useAuthStore();
 
     const { user } = storeToRefs(auth);
 
     const loading = ref(false)
+    const msgError = ref('');
+    const msgSuccess = ref('');
+
     const userForm = reactive({
         name: '',
         lastName: '',
         phone1: '',
-        phone2: '',
-        // name: auth.user?.first_name,  
-        // lastName: auth.user?.last_name,  
-        // phone1: auth.user?.phone,
-        // phone2: auth.user?.phone2,  
     })
 
     onMounted(() => {
@@ -37,53 +36,90 @@
         userForm.name = user.value?.first_name  
         userForm.lastName = user.value?.last_name  
         userForm.phone1 = user.value?.phone
-        userForm.phone2 = user.value?.phone2 
     }
 
-    const handleSave = () => {
-
+    const handleSave = async() => {
+        const error = validatiosUser();
+        if(error != '') {
+            msgError.value = error;
+            clearMessages();
+            return;
+        }
+        const userData = {
+            "first_name" : userForm.name,
+            "last_name" : userForm.lastName,
+            "phone" : userForm.phone1,
+        };
+        loading.value = true;
+        const result = await auth.updateProfile(userData)
+        loading.value = false;
+        if(result === null) {
+            msgError.value = 'Algo salio mal, intente más tarde';
+            clearMessages();
+        } else {
+            msgSuccess.value = 'Usuario actualizado';
+            clearMessages();
+        }
     }
+
+    const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+
+
+   const validatiosUser = () => {
+        if(userForm.name.trim().length < 3) {
+            return 'Ingresa nombre(s) valido';
+        } else if(userForm.lastName.trim().length < 2) {
+            return 'Ingresa apellido(s) valido';
+        } else if(userForm.phone1.trim().length < 10) {
+            return 'Ingresa teléfono valido';
+        } else {
+            return '';
+        }
+   }
+
 </script>
 
 <template>
-    <!-- <div class="profile"> -->
-        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
+    <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>
+        </div>
+        <br/>
+        <div class="divider"></div>
+        <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 != ''"/>
+            <NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
             <CustomInput
-                label="Nombres(s):"
+                label="Nombres(s)*:"
                 type="text"
                 name="name"
                 :filled="false"
                 v-model:field="userForm.name"
             />
             <CustomInput
-                label="Apellidos(s):"
+                label="Apellidos(s)*:"
                 type="text"
                 name="lastname"
                 :filled="false"
                 v-model:field="userForm.lastName"
             />
-            <div class="content-phone">
-                <div class="phone">
-                    <CustomInput
-                        label="Teléfono 1: *"
-                        type="number"
-                        name="phone1"
-                        :step="1"
-                        :filled="false"
-                        v-model:field="userForm.phone1"
-                    />
-                </div>
-                <div class="phone">
-                    <CustomInput
-                        label="Teléfono 2:"
-                        type="number"
-                        name="phone2"
-                        :step="1"
-                        :filled="false"
-                        v-model:field="userForm.phone2"
-                    />
-                </div>
-            </div>
+            <CustomInput
+                label="Teléfono*:"
+                type="number"
+                name="phone1"
+                :step="1"
+                :filled="false"
+                v-model:field="userForm.phone1"
+            />
             <div class="mt-4 text-center">
                 <Spiner v-if="loading"/>
                 <button 
@@ -91,7 +127,7 @@
                     class="btn btn-dark btn-block" type="submit">Guardar</button>
             </div> 
         </form>
-    <!-- </div> -->
+    </div>
            
 </template>
 
@@ -99,7 +135,13 @@
     /* .profile {
         margin: 0 auto;
     } */
+    .box-btns {
+        display: flex;
+        justify-content: flex-end;
+        gap: 2rem;
+    }
     .form-content {
+        margin-top: 1rem;
         max-width: 768px;
         /* width: 768px; */
         margin: 0 auto;