wip migration
This commit is contained in:
María
123
pages/editar/perfil/contrasena.vue
Normal file
123
pages/editar/perfil/contrasena.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<BContainer class="container">
|
||||
<BRow align-h="center">
|
||||
<BCol class="change-password">
|
||||
<form class="form" autocomplete="off" @submit.prevent="submitUser">
|
||||
<h1 class="title">Cambiar contraseña</h1>
|
||||
<FormInput
|
||||
v-model="form.old_password"
|
||||
type="text"
|
||||
label-text="Contraseña actual"
|
||||
required
|
||||
/>
|
||||
<FormInput
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
label-text="Nueva contraseña"
|
||||
required
|
||||
/>
|
||||
<FormInput
|
||||
v-model="form.password2"
|
||||
type="password"
|
||||
label-text="Nueva contraseña"
|
||||
required
|
||||
/>
|
||||
<small v-if="error" class="error">{{ error }}</small>
|
||||
<small v-if="success" class="success">{{ success }}</small>
|
||||
<div class="submit-btn">
|
||||
<SubmitButton text="Actualizar" image-url="" />
|
||||
</div>
|
||||
</form>
|
||||
</BCol>
|
||||
</BRow>
|
||||
</BContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: 'editar',
|
||||
middleware: 'auth',
|
||||
auth: { authority: 'SHOP_USER' },
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
old_password: null,
|
||||
password: null,
|
||||
password2: null,
|
||||
},
|
||||
error: null,
|
||||
success: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submitUser() {
|
||||
this.error = null
|
||||
this.success = null
|
||||
if (this.form.password === this.form.password2) {
|
||||
try {
|
||||
await this.$api.put(
|
||||
`/user/change_password/${this.$store.state.auth.id}/`,
|
||||
this.form
|
||||
)
|
||||
this.success = 'Contraseña cambiada correctamente'
|
||||
} catch {
|
||||
this.error = 'La contraseña actual no es correcta'
|
||||
}
|
||||
} else {
|
||||
this.error = 'La nueva contraseña no coincide'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.change-password {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $color-navy;
|
||||
font-size: $xxl;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
width: 45%;
|
||||
@include mobile {
|
||||
width: 80%;
|
||||
margin-top: 70px;
|
||||
}
|
||||
@include desktop {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
label {
|
||||
text-align: left;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
font-size: $xs;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
color: crimson;
|
||||
}
|
||||
.success {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
163
pages/editar/perfil/index.vue
Normal file
163
pages/editar/perfil/index.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<BContainer class="container">
|
||||
<BRow align-h="start">
|
||||
<BCol class="edit-profile">
|
||||
<form class="form" @submit.prevent="submitUser">
|
||||
<h1 class="title">Editar perfil</h1>
|
||||
<FormInput
|
||||
v-model="form.full_name"
|
||||
type="text"
|
||||
label-text="Nombre de usuario"
|
||||
@input="form.full_name = $event"
|
||||
/>
|
||||
<FormInput
|
||||
v-model="form.email"
|
||||
type="text"
|
||||
label-text="Email"
|
||||
@input="form.email = $event"
|
||||
/>
|
||||
<v-checkbox
|
||||
v-model="form.notify"
|
||||
label="Recibir notificaciones"
|
||||
/>
|
||||
<small v-if="error" class="error">Ha habido un error</small>
|
||||
<small v-if="success" class="success">Perfil actualizado con éxito</small>
|
||||
<div class="submit-btn">
|
||||
<SubmitButton text="guardar" image-url="" />
|
||||
</div>
|
||||
</form>
|
||||
<NuxtLink to="/editar/perfil/contrasena">Cambiar contraseña</NuxtLink>
|
||||
</BCol>
|
||||
</BRow>
|
||||
</BContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'pinia'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
definePageMeta({
|
||||
layout: 'editar',
|
||||
middleware: 'auth',
|
||||
auth: { authority: 'SHOP_USER' },
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
full_name: null,
|
||||
email: null,
|
||||
notify: false,
|
||||
},
|
||||
error: false,
|
||||
success: false,
|
||||
}
|
||||
},
|
||||
async fetch() {
|
||||
const config = useRuntimeConfig()
|
||||
try {
|
||||
const response = await $fetch(`/my_user/`, {
|
||||
baseURL: config.public.baseURL,
|
||||
method: 'GET',
|
||||
body: JSON.stringify(this.form),
|
||||
})
|
||||
console.log('User data fetched successfully:', response)
|
||||
} catch (err) {
|
||||
console.error('Error fetching user data:', err)
|
||||
this.error = true
|
||||
return
|
||||
}
|
||||
this.form.full_name = response.full_name
|
||||
this.form.email = response.email
|
||||
this.form.notify = response.notify
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAuthStore, ['id', 'access']),
|
||||
},
|
||||
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 {
|
||||
const userId = this.id
|
||||
const access = this.access
|
||||
await $fetch(`/users/${userId}/`, {
|
||||
baseURL: config.public.baseURL,
|
||||
method: 'PUT',
|
||||
body: this.form,
|
||||
headers: {
|
||||
Authorization: `Bearer ${access}`
|
||||
}
|
||||
})
|
||||
await this.setUser()
|
||||
this.success = true
|
||||
} catch (err) {
|
||||
console.error('Error updating user:', err)
|
||||
this.error = true
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.edit-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $color-navy;
|
||||
font-size: $xxl;
|
||||
margin-bottom: 40px;
|
||||
text-align: left;
|
||||
width: 45%;
|
||||
|
||||
@include mobile {
|
||||
width: 80%;
|
||||
margin-top: 70px;
|
||||
}
|
||||
@include desktop {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
label {
|
||||
text-align: left;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
font-size: $xs;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid $color-navy;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user