137 lines
6.1 KiB
HTML
Executable File
137 lines
6.1 KiB
HTML
Executable File
<div x-data="modals" @keydown.escape="closeModal"
|
|
class="bg-white rounded-lg shadow">
|
|
<div class="container mx-auto p-6 w-full ">
|
|
<h1 class="text-2xl font-bold mb-4">Perfil</h1>
|
|
<form @submit.prevent="submitForm">
|
|
<div>
|
|
<label class="block mb-2" for="name">Nombre</label>
|
|
<input type="text" id="name" x-model="Name" placeholder="Nombre"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
</div>
|
|
<div>
|
|
<label class="block mt-4 mb-2" for="Email">Email</label>
|
|
<input id="Email" x-model="Email" placeholder="Email" class="border border-gray-300 rounded w-full p-2"
|
|
required>
|
|
</div>
|
|
<div class="bg-[#8eb02f] text-white px-4 py-2 my-4 rounded text-center cursor-pointer"
|
|
x-on:click="showPasswordModal = true;" title="Cambiar contraseña">Cambiar contraseña</div>
|
|
|
|
<div class="mt-4 flex justify-between">
|
|
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded" :disabled="isLoading">
|
|
<span x-show="!isLoading">Guardar Cambios</span>
|
|
<span x-show="isLoading">Cargando...</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Modal cambiar contraseña -->
|
|
<div x-cloak x-show="showPasswordModal" x-transition
|
|
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-40 justify-center items-center text-sm">
|
|
<div class="bg-white p-6 rounded shadow-lg max-w-sm w-full overflow-y-auto max-h-full">
|
|
<form @submit.prevent="changePass">
|
|
<label class="block mb-2" for="password">Nueva contraseña</label>
|
|
<input type="text" id="password" x-model="password" placeholder="Ingrese una contraseña"
|
|
class="border border-gray-300 rounded w-full p-2" required>
|
|
<div class="mt-4 flex justify-between">
|
|
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded">Guardar </button>
|
|
<button type="button" class="bg-gray-600 text-white px-4 py-2 rounded"
|
|
x-on:click="closeModal">Cancelar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- Alpine.js Script -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('modals', () => ({
|
|
showPasswordModal: false,
|
|
Name: '',
|
|
Email: '',
|
|
password: '',
|
|
Usuario: '',
|
|
rolID: '',
|
|
Id: null,
|
|
isLoading: false,
|
|
usuarioID: '{{ .user.ID }}', // Inicializar directamente en el Alpine.js
|
|
|
|
init() {
|
|
this.loadRegister();
|
|
},
|
|
|
|
loadRegister() {
|
|
this.isLoading = true;
|
|
fetch(`/app/user/` + this.usuarioID)
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Error al cargar el usuario');
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
this.Name = data.user.name || '';
|
|
this.Email = data.user.email || '';
|
|
this.Usuario = data.user.nombre_usuario || '';
|
|
this.rolID = data.user.role_id || '';
|
|
})
|
|
.catch(error => alert(`Error: ${error.message}`)) // Manejo de errores
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
|
|
closeModal() {
|
|
this.showPasswordModal = false;
|
|
},
|
|
|
|
submitForm() {
|
|
this.isLoading = true;
|
|
fetch(`/app/users/` + this.usuarioID, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: this.Name,
|
|
email: this.Email,
|
|
nombre_usuario: this.Usuario,
|
|
role_id: this.rolID,
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Error al actualizar el usuario');
|
|
this.loadRegister();
|
|
return response.json();
|
|
})
|
|
.then(() => {
|
|
alert('Usuario actualizado con éxito');
|
|
})
|
|
.catch(error => alert(`Error: ${error.message}`))
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
|
|
changePass() {
|
|
this.isLoading = true;
|
|
fetch(`/app/password/` + this.usuarioID, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
password: this.password,
|
|
})
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Error al cambiar la contraseña');
|
|
return response.json();
|
|
})
|
|
.then(() => {
|
|
this.password = '';
|
|
this.closeModal();
|
|
alert('Contraseña cambiada con éxito');
|
|
})
|
|
.catch(error => alert(`Error: ${error.message}`))
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
}));
|
|
});
|
|
</script>
|
|
</div>
|