cambiar avatar y nombre en perfil.php

js/cabecera.js

@@ -0,0 +1,133 @@
+// Registro
+$("#botonAceptarRegistro").click(function (event) {
+  event.preventDefault();
+  console.log("hola");
+  let nombreUsuario = $("#regNombre").val().trim();
+  let email = $("#regEmail").val().trim();
+  let contrasena = $("#regPassword").val();
+  let contrasenaConfirmacion = $("#regPasswordConfirm").val();
+
+  // Limpiamos errores anteriores
+  $("#regNombre").removeClass("is-invalid");
+  $("#regEmail").removeClass("is-invalid");
+  $("#regPassword").removeClass("is-invalid");
+  $("#regPasswordConfirm").removeClass("is-invalid");
+  $("#errorRegistro").text("");
+
+  // Comprobamos que las contraseñas coincidan
+  if (contrasena !== contrasenaConfirmacion) {
+    $("#regPassword").addClass("is-invalid");
+    $("#regPasswordConfirm").addClass("is-invalid");
+
+    $("#errorRegistro").text("Las contraseñas no coinciden.");
+
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nombreUsuario,
+      email: email,
+      contrasena: contrasena,
+      orden: "registrarUsuario",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      $("#errorRegistro").text(respuesta.error);
+
+      // Marcamos los campos si hay error
+      $("#regNombre").addClass("is-invalid");
+      $("#regEmail").addClass("is-invalid");
+    } else {
+      // Registro correcto
+      $("#errorRegistro")
+        .removeClass("text-danger")
+        .addClass("text-success")
+        .text(respuesta.exito);
+
+      // Limpiamos formulario
+      $("#formRegistro")[0].reset();
+
+      // Cerramos modal después de un segundo
+      setTimeout(function () {
+        location.reload();
+      }, 1000);
+    }
+  }); // Fin función ajax
+});
+
+// Login
+$("#botonAceptarLogin").click(function (event) {
+  event.preventDefault();
+
+  let email = $("#loginEmail").val().trim();
+  let contrasena = $("#loginPassword").val();
+
+  // Limpiamos errores anteriores
+  $("#loginEmail").removeClass("is-invalid");
+  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").text("");
+
+  // Comprobación básica
+  if (email === "" || contrasena === "") {
+    $("#errorLogin").text("Todos los campos son obligatorios.");
+
+    if (email === "") {
+      $("#loginEmail").addClass("is-invalid");
+    }
+
+    if (contrasena === "") {
+      $("#loginPassword").addClass("is-invalid");
+    }
+
+    return;
+  }
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      email: email,
+      contrasena: contrasena,
+      orden: "comprobarUsuario",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      $("#loginEmail").addClass("is-invalid");
+      $("#loginPassword").addClass("is-invalid");
+
+      $("#errorLogin").text(respuesta.error);
+    } else {
+      location.reload();
+    }
+  }); // Fin función ajax
+});
+
+// Cerrar sesión
+$("#botonCerrarSesion").click(function (event) {
+  event.preventDefault();
+
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      orden: "cerrarSesion",
+    },
+  }).done(function (respuesta) {
+    //console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      // Sesión cerrada correctamente
+      window.location.href = 'index.php';
+
+    }
+  }); // Fin función ajax
+}); // Fin función click

js/perfil.js

@@ -1,42 +1,59 @@
+// =========================
+// MOSTRAR ESTADISTICAS
+// =========================
+
+$.ajax({
+  method: "POST",
+  url: "controladores/controladorUsuario.php",
+  data: {
+    orden: "mostrarEstadisticas",
+  },
+}).done(function (respuesta) {
+  console.log(respuesta);
+  respuesta = JSON.parse(respuesta);
+  if (respuesta.error) {
+    console.log(respuesta.error);
+  } else {
+    $("#victorias").text(respuesta.victorias);
+    $("#derrotas").text(respuesta.derrotas);
+    $("#aciertos").text(respuesta.aciertos);
+  }
+});
+
 // =========================
 // CAMBIAR NOMBRE
 // =========================
-
 function cambiarNombre() {
+  let nuevoNombre = $("#nuevoNombre").val().trim();
 
-    const input = document.getElementById("nuevoNombre");
-    const nombre = document.getElementById("nombre");
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: {
+      nombreUsuario: nuevoNombre,
+      orden: "cambiarNombre",
+    },
+  }).done(function (respuesta) {
+    console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      console.log(respuesta.error);
+    } else {
+      // Actualizamos el nombre mostrado en la página
+      $("#nombre").text(respuesta.nombreUsuario);
 
-    const nuevoNombre = input.value.trim();
-
-    if (nuevoNombre !== "") {
-
-        nombre.textContent = nuevoNombre;
-
-        input.value = "";
+      // Limpiamos el input
+      $("#nuevoNombre").val("");
     }
+  });
 }
 
-
 // =========================
 // BORRAR NOMBRE
 // =========================
 
 function borrarNombre() {
-
-    document.getElementById("nuevoNombre").value = "";
-
-}
-
-
-// =========================
-// ABRIR SELECTOR DE IMAGEN
-// =========================
-
-function seleccionarFoto() {
-
-    document.getElementById("inputFoto").click();
-
+  document.getElementById("nuevoNombre").value = "";
 }
 
 
@@ -44,31 +61,48 @@ function seleccionarFoto() {
 // CAMBIAR FOTO
 // =========================
 
-document.getElementById("inputFoto").addEventListener(
-    "change",
-    function(event) {
+function seleccionarFoto() {
+  $("#inputFoto").click();
+}
 
-        const archivo = event.target.files[0];
+$("#inputFoto").change(function () {
+  let archivo = this.files[0];
 
-        if (archivo) {
+  if (!archivo) {
+    return;
+  }
 
-            // Comprobamos que sea una imagen
-            if (!archivo.type.startsWith("image/")) {
+  // Comprobamos que sea una imagen
+  if (!archivo.type.startsWith("image/")) {
+    alert("El archivo seleccionado no es una imagen.");
 
-                alert("Por favor, selecciona una imagen.");
+    $("#inputFoto").val("");
 
-                return;
-            }
+    return;
+  }
 
+  let datos = new FormData();
 
-            // Creamos una URL temporal
-            const imagenURL = URL.createObjectURL(archivo);
-
-
-            // Cambiamos la foto
-            document.getElementById("fotoPerfil").src = imagenURL;
-
-        }
+  datos.append("avatar", archivo);
+  datos.append("orden", "cambiarAvatar");
 
+  $.ajax({
+    method: "POST",
+    url: "controladores/controladorUsuario.php",
+    data: datos,
+    processData: false,
+    contentType: false,
+  }).done(function (respuesta) {
+    console.log(respuesta);
+    respuesta = JSON.parse(respuesta);
+    if (respuesta.error) {
+      alert(respuesta.error);
+    } else {
+      // Actualizamos la imagen sin recargar la página
+      $("#fotoPerfil").attr(
+        "src",
+        respuesta.avatar + "?t=" + new Date().getTime(),
+      );
     }
-);
+  });
+});