Initial commit

2025-02-06 14:22:29 -05:00
commit 6d8f1bcd6f
452 changed files with 250835 additions and 0 deletions
@@ -0,0 +1,136 @@
+<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>