0

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:

  1. Login
  2. Register
  3. 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>

2
  • Por favor, pulsa en editar y elimina los datos sensibles (como el sitekey) y luego reporta tu pregunta a los moderadores para que redacten tu pregunta, es decir, eliminen del historial lo que has editado. ¡Nunca compartas datos sensibles en un sitio público!
    – padaleiana
    Commented el 17 jul. a las 20:33
  • Gracias por tu comentario, no fijate que ese api key es de prueba no te preocupes, no pasa nada de hecho yo elimine esa api cuando note que lo habia compartido, igualmente muchas gracias.
    – Nard
    Commented el 18 jul. a las 2:40

1 respuesta 1

0

Debido a que tengo poca reputación no puedo comentar pero la pregunta simple que tengo es:

¿De dónde obtienes este atributo? (El código que pasaste solo se nombra en el js)

Y ¿Qué valor te da el mismo?

var captchaId = form.getAttribute('data-captcha-id');

Puedes intentar hacer un console.log(captchaId); para ver que valor te devuelve y si no te devuelve null. Tengo la sospecha que el error está ubicado en esa variable.

También, ¿Por qué inicializas el captcha de los ids recaptcha-ig-register y recaptcha-register?

// Inicializar reCAPTCHA para este formulario
    window[igCaptchaId] = grecaptcha.render('recaptcha-ig-register', {
        'sitekey': igRegistrationForm.getAttribute('data-sitekey'),
        'theme': 'light'
    });

¿Pero no haces lo mismo en recaptcha-login? Desde la prueba que hice el comentarlos estos códigos no cambiaba nada, seguían mostrando los captcha.

2
  • Siento honesto este código ha sido generado en parte por IA, entonces por ende no estoy seguro de la forma correcta de hacerlo puesto que nunca había trabajado con captcha multiple en una misma pagina al principio, pensé que estaba bien, pero el problema básicamente es que debería de refrescarse si se cometió algún error en el formulario, para evitar que tengan que recargar la pagina, pero como son 3 modals diferentes entonces ese es el problema.
    – Nard
    Commented el 18 jul. a las 2:52
  • ¿Intentaste hacer el console.log, que resultados te dió? Creo que la razón por la que no te funciona es que la variable captchaId, por alguna razón solo obtiene el id del primer captcha tuyo, puedes intentar colocar en el form el atributo data-captcha-id que pide el javascript, aunque la solución sería "fea" porque este sería el mismo id del formulario
    – J-L-H-J
    Commented el 18 jul. a las 11:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.