Skip to content

Alba María Álvarez / front_recipes

Go to a project
Commit d494c29a by Alba María Álvarez
Options

feat(UserDetail): creada vista para ver la información y poder… 

feat(UserDetail): creada vista para ver la información  y poder editar/desactivar el usuario logueado
parent 635d28d9
Inline Side-by-side
Showing with 209 additions and 0 deletions
src/views/UserDetail.vue 0 → 100644
<template>
<Header></Header>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10">
<div class="position-relative">
<div class="card h-100 card-custom">
<div class="feature-icon bg-primary-custom text-white rounded-3">
<i class="bi bi-user"></i>
</div>
<div class="card-body p-4">
<div class="text-center mb-4">
<h4 v-if="mode === 'view'" class="fw-bolder mb-2 text-primary-custom">Información personal</h4>
<h4 v-else class="fw-bolder mb-2 text-primary-custom">Editar datos</h4>
<p class="text-muted">Gestiona la información de tu cuenta.</p>
<hr>
</div>
<div class="row g-3 mb-4">
<div class="col-12 col-md-6">
<p class="mb-1 text-muted"><strong>Nombre</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.name }}</p>
<input v-else type="text" class="form-control" v-model="editableUser.name">
</div>
<div class="col-12 col-md-6">
<p class="mb-1 text-muted"><strong>Apellidos</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.surname }}</p>
<input v-else type="text" class="form-control" v-model="editableUser.surname">
</div>
<div class="col-12">
<p class="mb-1 text-muted"><strong>Email</strong></p>
<p v-if="mode === 'view'" class="fw-bold">{{ user.email }}</p>
<input v-else type="email" class="form-control" v-model="editableUser.email">
</div>
<div class="col-12">
<p class="mb-1 text-muted"><strong>Rol</strong></p>
<p class="fw-bold">{{ user.role }}</p>
</div>
</div>
<div class="d-flex flex-wrap gap-3 justify-content-center mt-4">
<div v-if="mode === 'view'">
<button class="btn btn-outline-custom" @click="editData">
<i class="bi bi-pencil-square me-1"></i> Editar datos
</button>
</div>
<div v-else>
<button class="btn btn-primary-custom me-2" @click="saveChanges">
<i class="bi bi-save me-1"></i> Guardar
</button>
<button class="btn btn-secondary" @click="cancelEdit">
<i class="bi bi-x-circle me-1"></i> Cancelar
</button>
</div>
<button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#changePasswordModal">
<i class="bi bi-key me-1"></i> Cambiar contraseña
</button>
<button class="btn btn-danger" @click="deactivateAccount">
<i class="bi bi-person-x-fill me-1"></i> Desactivar cuenta
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal cambio de contraseña -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changePasswordModalLabel">Cambiar Contraseña</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="current-password" class="form-label">Contraseña Actual</label>
<input type="password" class="form-control" id="current-password">
</div>
<div class="mb-3">
<label for="new-password" class="form-label">Nueva Contraseña</label>
<input type="password" class="form-control" id="new-password">
</div>
<div class="mb-3">
<label for="confirm-password" class="form-label">Confirmar Nueva Contraseña</label>
<input type="password" class="form-control" id="confirm-password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary-custom">Guardar Cambios</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Header from '@/components/Header.vue';
const mode = ref('view');
// Datos del usuario
const user = ref({
name: "Alba María",
surname: "Álvarez Fernández",
email: "amaf0001@red.ujaen.es",
role: "Usuario"
});
// Usamos una copia para editar los datos
const editableUser = ref({ ...user.value });
// Acciones
const editData = () => {
mode.value = 'edit';
editableUser.value = { ...user.value };
};
const saveChanges = () => {
user.value = { ...editableUser.value };
mode.value = 'view';
};
const cancelEdit = () => {
mode.value = 'view';
};
const changePassword = () => {
alert("Abrir modal para cambiar contraseña");
};
const deactivateAccount = () => {
if (confirm("¿Seguro que quieres desactivar tu cuenta?")) {
alert("Cuenta desactivada");
}
};
</script>
<style scoped>
.container {
margin-top: 8rem;
}
.card-custom {
padding-top: 2.5rem;
border-color: #793E6C;
box-shadow: 0 0 1rem rgba(121, 62, 108, 0.1);
border-radius: 1rem;
}
.text-primary-custom {
color: #2C0C21;
}
.btn-primary-custom {
background-color: #793E6C;
border-color: #793E6C;
color: white;
}
.btn-primary-custom:hover {
background-color: #5e3054;
border-color: #5e3054;
color: white;
}
.btn-outline-custom {
border-color: #793E6C;
color: #793E6C;
}
.btn-outline-custom:hover {
background-color: #793E6C;
color: white;
}
/* Estilos para el icono flotante */
.feature-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 5rem;
height: 5rem;
font-size: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
background: #793E6C;
}
/* Estilos para el icono de usuario */
.bi-user::before {
content: "\f4d7";
font-family: 'bootstrap-icons';
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment