edit password functionality and page

example copy.env

@@ -0,0 +1,8 @@
+API = 'http://0.0.0.0:8000/'
+API_V1 = '/api/v1/'
+BASE_URL= $API$API_V1
+GOOGLE_CLIENT_ID='1076928279923-s6hdbpcpbeaeqnact5t5kmktrkaipndq.apps.googleusercontent.com'
+FACEBOOK_ID='751687992155393'
+
+GOOGLE_MAPS_API_KEY = 'AIzaSyDX_8JveVk4S5cnDcMHijmOO9HGj5OJHmQ'
+GOOGLE_ANALYTICS_ID = 'G-QT1WE1L619'

pages/editar/perfil/contrasena.vue

@@ -9,18 +9,21 @@
             type="text"
             label-text="Contraseña actual"
             required
+            @input="form.old_password = $event"
           />
           <FormInput
             v-model="form.password"
             type="password"
             label-text="Nueva contraseña"
             required
+            @input="form.password = $event"
           />
           <FormInput
             v-model="form.password2"
             type="password"
             label-text="Nueva contraseña"
             required
+            @input="form.password2 = $event"
           />
           <small v-if="error" class="error">{{ error }}</small>
           <small v-if="success" class="success">{{ success }}</small>
@@ -28,12 +31,15 @@
             <SubmitButton text="Actualizar" image-url="" />
           </div>
         </form>
+        {{ form }}
       </BCol>
     </BRow>
   </BContainer>
 </template>
 
 <script>
+import { mapState } from 'pinia'
+import { useAuthStore } from '@/stores/auth'
 export default {
   setup() {
     definePageMeta({
@@ -53,18 +59,29 @@ export default {
       success: null,
     }
   },
+  computed: {
+    ...mapState(useAuthStore, ['id', 'access']),
+  },
   methods: {
     async submitUser() {
       this.error = null
       this.success = null
       if (this.form.password === this.form.password2) {
         try {
-          await this.$api.put(
+          const config = useRuntimeConfig()
-            `/user/change_password/${this.$store.state.auth.id}/`,
+          const userId = this.id
-            this.form
+          const access = this.access
-          )
+          await $fetch(`/user/change_password/${userId}/`, {
+            baseURL: config.public.baseURL,
+            method: 'PUT',
+            body: this.form,
+            headers: {
+              Authorization: `Bearer ${access}`
+            }
+          })
           this.success = 'Contraseña cambiada correctamente'
-        } catch {
+        } catch (error) {
+          console.error('Error cambiando la contraseña:', error)
           this.error = 'La contraseña actual no es correcta'
         }
       } else {

pages/editar/perfil/index.vue

@@ -58,12 +58,12 @@ export default {
   async fetch() {
     const config = useRuntimeConfig()
     try {
-      const response = await $fetch(`/my_user/`, {
+      await $fetch(`/my_user/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
         body: JSON.stringify(this.form),
       })
-      console.log('User data fetched successfully:', response)
+      //console.log('User data fetched successfully:', response)
     } catch (err) {
       console.error('Error fetching user data:', err)
       this.error = true
@@ -79,7 +79,6 @@ export default {
   methods: {
     ...mapActions( useAuthStore, ['setUser']),
     async submitUser() {
-      // TODO: configurar primero el estar logeado (estados, getters) para que peuda coger esa info y actualizarla
       this.error = false
       const config = useRuntimeConfig()
       try {