Hola gente de StackOverflow. Espero que se encuentren muy bien. Actualmente, estoy desarrollando una pequeña aplicación web, pero tengo un problema con el captcha, ya que se muestra en la misma página varias veces en diferentes modales. Por ejemplo:
- Login
- Register
- IG-Register
En este caso, son tres modales que se muestran en la misma página al mismo tiempo. Sin embargo, cuando tengo un error en el login, se recarga el modal y en ese caso vuelve a mostrarse un captcha nuevo. No me da errores cuando el usuario intenta acceder nuevamente si vuelve a llenar el captcha. Lo que sucede básicamente es que en los captchas de Register y IG Register, cuando hay errores, el captcha se mantiene igual, pero se actualiza el captcha del Login.
Si alguien puede darme una mano, aquí dejo los códigos.
document.addEventListener('DOMContentLoaded', function() {
// Función para ocultar mensajes
function hideMessage(messageDiv) {
messageDiv.style.display = 'none';
}
// Función para validar la contraseña
function validatePassword(password) {
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z\d])[\w\d.,!*-]{8,}$/;
return regex.test(password);
}
// Función para procesar formularios
function processForm(form, messageDiv, successCallback) {
form.addEventListener('submit', function(event) {
event.preventDefault(); // Evitar la sumisión del formulario por defecto
var formData = new FormData(form);
var ajaxUrl = form.getAttribute('data-ajax-url');
var captchaId = form.getAttribute('data-captcha-id');
fetch(ajaxUrl, {
method: 'POST',
body: formData
})
.then(function(response) {
return response.json();
})
.then(function(data) {
if (data.error) {
messageDiv.textContent = data.error;
messageDiv.style.color = '#fff';
messageDiv.style.backgroundColor = '#ff0000';
messageDiv.style.display = 'block';
// Recarga el reCAPTCHA específico si hay un error
grecaptcha.reset(window[captchaId]);
setTimeout(function() {
hideMessage(messageDiv);
}, 2000);
} else if (data.success) {
successCallback(data);
}
})
.catch(function(error) {
messageDiv.textContent = 'An error occurred while processing your request: ' + error.message;
messageDiv.style.color = '#fff';
messageDiv.style.backgroundColor = '#ff0000';
messageDiv.style.display = 'block';
// Recarga el reCAPTCHA específico si hay un error
grecaptcha.reset(window[captchaId]);
setTimeout(function() {
hideMessage(messageDiv);
}, 2000);
});
});
}
// Procesar formulario de login
var loginForm = document.getElementById('login-form');
if (loginForm) {
var loginMessageDiv = document.getElementById('modal-message');
processForm(loginForm, loginMessageDiv, function(data) {
loginMessageDiv.style.display = 'block';
loginMessageDiv.textContent = data.success;
loginMessageDiv.style.color = '#fff';
loginMessageDiv.style.backgroundColor = '#00ff00';
// Redirigir o recargar la página después de iniciar sesión
setTimeout(function() {
location.reload();
}, 1000);
});
}
// Procesar formulario de registro
var registrationForm = document.getElementById('registration-form');
if (registrationForm) {
var registerMessageDiv = document.getElementById('register-message');
var welcomeMessage = document.getElementById('welcome-message');
var captchaIdReg = 'recaptcha-register'; // ID único para este formulario
processForm(registrationForm, registerMessageDiv, function(data) {
registrationForm.style.display = 'none';
welcomeMessage.style.display = 'block';
welcomeMessage.textContent = 'Welcome to L2 Nex, ' + formData.get('alias') + '! You have successfully registered on Lineage 2 Classic Private Server.';
welcomeMessage.style.color = '#fff';
welcomeMessage.style.backgroundColor = 'transparent';
});
// Inicializar reCAPTCHA para este formulario
window[captchaIdReg] = grecaptcha.render('recaptcha-register', {
'sitekey': registrationForm.getAttribute('data-sitekey'),
'theme': 'light'
});
}
// Procesar formulario de registro en el juego
var igRegistrationForm = document.getElementById('IGReg-form');
if (igRegistrationForm) {
var igRegMessageDiv = document.getElementById('igreg-message');
var welcomeIgMessage = document.getElementById('welcomeig-message');
var countdownDiv = document.getElementById('countdown');
var igCaptchaId = 'recaptcha-ig-register'; // ID único para este formulario
processForm(igRegistrationForm, igRegMessageDiv, function(data) {
igRegistrationForm.style.display = 'none';
welcomeIgMessage.style.display = 'block';
welcomeIgMessage.textContent = 'Your in-game account has been created, you can now log in with ' + formData.get('login') + '!';
welcomeIgMessage.style.color = '#fff';
welcomeIgMessage.style.backgroundColor = 'transparent';
// Conteo regresivo y recarga de la página
var countdown = 5;
countdownDiv.textContent = 'Page will refresh in ' + countdown + ' seconds.';
countdownDiv.style.color = '#fff';
countdownDiv.style.backgroundColor = 'transparent';
countdownDiv.style.display = 'block';
var countdownInterval = setInterval(function() {
countdown--;
countdownDiv.textContent = 'Page will refresh in ' + countdown + ' seconds.';
if (countdown <= 0) {
clearInterval(countdownInterval);
location.reload();
}
}, 1000);
});
// Inicializar reCAPTCHA para este formulario
window[igCaptchaId] = grecaptcha.render('recaptcha-ig-register', {
'sitekey': igRegistrationForm.getAttribute('data-sitekey'),
'theme': 'light'
});
}
});
<script src="https://www.google.com/recaptcha/api.js"></script>
<!-- HTML form for login -->
<div id="modal-login" class="modal_div t-center">
<div class="modal_close">
<span></span>
<span></span>
</div><!--modal_close-->
<h1>Login</h1>
<form id="login-form" class="form-width" method="post" data-ajax-url="lib/login.php">
<p><input type="email" name="email" id="login" placeholder="Email address" required></p>
<p>
<div style="position: relative;">
<input type="password" name="password" id="passwordLog" placeholder="Enter your password" required>
<span class="toggle-password" data-toggle="#passwordLog">
<i class="fas fa-eye"></i>
</span>
</div>
</p>
<p>
<div class="g-recaptcha" id="recaptcha-login" data-sitekey="6LfFEukSAAAAAG2nL4FsSyuMxrh0Etwrm0Ryxf2G"></div>
</p>
<input type="hidden" name="csrf_token" value="<?php echo getCSRFToken(); ?>">
<p><button type="submit">ok</button></p>
</form>
<div id="modal-message" style="display: none;"></div>
<div class="formlinks">
<p>Don't have an account? <a href="#modal-register" class="reg bright open_modal">Register</a></p>
</div>
</div>
<!-- HTML form for registration -->
<div id="modal-register" class="modal_div t-center">
<div class="modal_close">
<span></span>
<span></span>
</div><!--modal_close-->
<h1>Register</h1>
<form id="registration-form" class="form-width" data-ajax-url="lib/register.php" autocomplete="off">
<label for="alias">Master Account Alias</label>
<p><input type="text" id="alias" name="alias" placeholder="Enter your alias" required></p>
<label for="email">Your Master Email</label>
<p><input type="email" id="email" name="email" placeholder="Enter your email address" required></p>
<label for="password">Create a Password</label>
<p>
<div style="position: relative;">
<input type="password" name="password" id="passwordReg" placeholder="Enter your password" required>
<span class="toggle-password" data-toggle="#passwordReg">
<i class="fas fa-eye"></i>
</span>
</div>
</p>
<label for="birthdate">Birthdate</label>
<p><input type="date" id="birthdate" name="birthdate" required></p>
<!-- Google reCAPTCHA -->
<div class="g-recaptcha" id="recaptcha-register" data-sitekey="6LfFEukSAAAAAG2nL4FsSyuMxrh0Etwrm0Ryxf2G"></div>
<input type="hidden" name="csrf_token" value="<?php echo getCSRFToken(); ?>">
<button class="ok" type="submit" name="register">OK</button>
<div id="register-message" class="modal-message" style="display:none;"></div>
</form>
<div id="welcome-message" class="modal-message" style="display:none;"></div>
</div>
<!-- HTML form for IG-registration -->
<div id="modal-registerIG" class="modal_div t-center">
<div class="modal_close">
<span></span>
<span></span>
</div><!--modal_close-->
<h1>Register</h1>
<form id="IGReg-form" class="form-width" data-ajax-url="lib/ig_register.php" autocomplete="off">
<p><input type="text" name="login" placeholder="Login" autocomplete="new-login" required></p>
<p><input type="password" name="password" placeholder="Password" autocomplete="new-password" required></p>
<input type="hidden" name="l2email" value="<?php echo $user['email']; ?>">
<input type="hidden" name="csrf_token" value="<?php echo getCSRFToken(); ?>">
<!-- Google reCAPTCHA -->
<div class="g-recaptcha" id="recaptcha-ig-register" data-sitekey="6LfFEukSAAAAAG2nL4FsSyuMxrh0Etwrm0Ryxf2G"></div>
<button class="ok" type="submit" name="register">OK</button>
</form>
<div id="igreg-message" class="modal-message" style="display:none;"></div>
<div id="welcomeig-message" class="modal-message" style="display:none;"></div>
<div id="countdown"></div>
</div>