login.php

📌 Propósito

login.php es la página de inicio de sesión de la aplicación web. Su propósito es permitir que los usuarios registrados accedan a sus cuentas de forma segura. Incluye un formulario de login con validación en tiempo real y está preparado para implementar autenticación con backend y Google reCAPTCHA para mayor seguridad.

⚙️ Funcionalidades clave

Formulario de inicio de sesión:
El usuario introduce su correo electrónico y contraseña para acceder a la plataforma.

Validación en tiempo real:
Gracias al script validation.js, se realiza una validación del correo y la contraseña antes de permitir el envío del formulario.

Mensajes emergentes:
Se utiliza la librería Notyf para mostrar alertas visuales si algún campo no es válido o si el login tiene éxito (aún sin backend funcional).

Preparado para seguridad adicional:
Incluye la carga del script de Google reCAPTCHA v2 mediante api.js, listo para implementar en futuras versiones.

🌄 Imágenes

Estructura común

Como en el resto de la aplicación, login.php incluye header.php, footer.php y mobileMenu.php para mantener una estructura consistente.

• header.php: Contiene el menú de navegación principal.
• footer.php: Muestra los enlaces legales y la información del copyright.
• mobileMenu.php: Menú que se muestra en la versión móvil.

🧩 Archivos relacionados

• validation.js: Controla la validación del formulario, marcando errores en campos vacíos o con formato inválido y mostrando mensajes con Notyf.
• api.js: Carga el script de Google reCAPTCHA desde el servidor oficial. Aunque no está integrado visualmente en esta versión, el script ya está preparado para su uso.
• notyf.min.js y notyf.min.css: Librería para mostrar notificaciones flotantes de error o éxito.

💡 Detalles técnicos

1. Validación de Email y Contraseña (validation.js):

   • El email debe tener un formato válido y no estar vacío.
   • La contraseña debe tener al menos 8 caracteres, una letra mayúscula y un número.
   • Si hay errores, se añade una clase .error-input y se muestra una notificación de error.
   • El envío del formulario (form.submit()) está comentado para evitar que se procese sin backend.

   if (!email.value.trim() || !regexEmail.test(email.value.trim())) {
       // muestra notificación de error con Notyf
   }
   
   if (!password.value.trim() || !regexPassword.test(password.value.trim())) {
       // muestra notificación de error con Notyf
   }

2. Carga de reCAPTCHA (api.js):

   • Se utiliza para cargar el script oficial de Google reCAPTCHA v2:

   const script = document.createElement('script');
   script.src = 'https://www.google.com/recaptcha/api.js';
   document.head.appendChild(script);

🛠️ Dependencias

• Notyf: Para notificaciones de éxito o error.
• Google reCAPTCHA (cargado, no visible): Seguridad adicional lista para usarse.
• JavaScript: Para validación del formulario y manipulación del DOM.