add: form edit profile

src/views/EditProfileView.vue

@@ -0,0 +1,117 @@
+<script setup>
+    import { onMounted, reactive, ref } from 'vue';
+    import { useAuthStore } from '../stores/auth';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CustomInput from '../components/ui/CustomInput.vue';
+
+    const auth = useAuthStore();
+
+    const loading = ref(false)
+    const user = reactive({
+        name: '',
+        lastName: '',
+        phone1: '',
+        phone2: '',
+        // name: auth.user?.first_name,  
+        // lastName: auth.user?.last_name,  
+        // phone1: auth.user?.phone,
+        // phone2: auth.user?.phone2,  
+    })
+
+    onMounted(() => {
+      user.name = auth.user?.first_name  
+      user.lastName = auth.user?.last_name  
+      user.phone1 = auth.user?.phone
+      user.phone2 = auth.user?.phone2  
+    })
+
+    const handleSave = () => {
+
+    }
+</script>
+
+<template>
+  
+    <div class="form-content">
+        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
+            <CustomInput
+                label="Nombres(s):"
+                type="text"
+                name="name"
+                :filled="false"
+                v-model:field="user.name"
+            />
+            <CustomInput
+                label="Apellidos(s):"
+                type="text"
+                name="lastname"
+                :filled="false"
+                v-model:field="user.lastName"
+            />
+            <div class="content-phone">
+                <CustomInput
+                    label="Teléfono 1: *"
+                    type="number"
+                    name="phone1"
+                    :step="1"
+                    :filled="false"
+                    v-model:field="user.phone1"
+                />
+                <CustomInput
+                    label="Teléfono 2:"
+                    type="number"
+                    name="phone2"
+                    :step="1"
+                    :filled="false"
+                    v-model:field="user.phone2"
+                />
+            </div>
+            <div class="mt-4 text-center">
+                <Spiner v-if="loading"/>
+                <button 
+                    v-else
+                    class="btn btn-dark" type="submit">Guardar</button>
+            </div> 
+        </form>
+    </div>
+           
+</template>
+
+<style scoped>
+    .form-content {
+        margin: 24px 100px;
+        background-color: #FFF;
+        padding: 32px 32px;
+        border-radius: 13px;
+    }
+
+    .content-phone{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        /* gap: 5rem; */
+    }
+
+    @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;
+        }
+
+        .content-phone{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>