Edit History

Theme: Classic

Hello everyone, I'm looking to create a module (my first module...) that allows me to have a 2FA login for the front end. I'm at the stage where I would just like to make the connection between a service and the front .tpl located in another module.

After several days, I'm still at the same point and don't know where I went wrong. Probably a silly mistake. The module installs fine and the new columns are added to the database.

I have created the routes.yml, the controller, and the services, but when I call the URL by clicking the button, I just get a 404 error in the console. Note that I made the files by hand, I'm not sure if I needed to run composer commands? Here is the .tpl code. The problematic URL is "modules/lebruntwofa/sendcode".

<div style="display:none;">
    <div id="new_login_form">
        <div id="img-cust-pop">
        </div>
        <div id="already-customer" class="bgcolor_second text-center">
            <form id="login-form-new" action="#" method="post">

                <h3 class="color_first">Déjà client ?</h3>
                <p>Connectez-vous pour accéder à votre compte.</p>

                <div class="help-block" id="login-form-new-error">
                </div>
                
                <div>
                    {foreach from=$new_login_form["formFields"] item="field"}
                    {block name='form_field'}
                        {form_field field=$field}
                    {/block}
                    {/foreach}
                    <div class="forgot-password text-right">
                        <a href="{$urls.pages.password}" rel="nofollow">
                        {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
                     </a>
                    </div>
                    <input type="button" name="generate_code" id="generate_code" value="Recevoir mon code" >
                    <input type="text" name="twofa_code" placeholder="Entrez votre code" required>
                    <button type="submit" name="submit_code">Vérifier</button>
                </div>

                <footer class="form-footer text-sm-center clearfix">
                    <input type="hidden" name="submitLogin" value="1">
                    {block name='form_buttons'}
                    <button id="submit-login-new" class="btn btn-primary" data-link-action="sign-in" type="submit" class="form-control-submit">
                        {l s='Sign in' d='Shop.Theme.Actions'}
                    </button>
                    {/block}
                </footer>

            </form>
        </div>
        <div id="new-customer" class="bgcolor_third text-center">
            <h3 class="color_first">Nouveau client?</h3>
            <p>Suivez vos commandes, consultez votre historique d'achat, bénéficiez d'un suivi personnalisé et bien d'autres avantages.</p>
            <p><a href="{$urls.pages.registration}" class="button-register" rel="nofollow">Créer mon compte</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">

    jQuery(document).ready(function() {

        jQuery("#generate_code").click(function () {
            let email = jQuery("#field-email").val();
            /*console.log(email); OK, l'email de l'input est bien récupéré*/

           $.ajax({
                type: "POST",
                url: "/modules/lebruntwofa/sendcode",
                data: {
                    ajax: true,
                    action: 'sendCode',
                    email: email
                },
                dataType: "json",
                encode: true,
            }).done(function (data) {
                if (data.success) {
                    alert('Code sent successfully.');
                } else {
                    alert('Error: ' + data.error);
                }
            });
        });

        jQuery("#login-form-new").submit(function (event) {
            event.preventDefault();
            var formData = {
                email: jQuery("#field-email").val(),
                password: jQuery("#field-password").val(),
                submitLogin: jQuery("input[name='submitLogin']").val(),
                ajax: true
            };

            $.ajax({
                type: "POST",
                url: "/module/lebruncustpop/login",
                data: formData,
                dataType: "json",
                encode: true,
            }).done(function (data) {
                if(data.error.length === 0){
                    location.reload();
                }else{
                    jQuery("#login-form-new-error").html("<ul><li class='alert alert-danger'>" + data.error + "</li></ul>");
                }
            });
        });

        jQuery("a.fancybox_login").fancybox({
            "type" : "inline",
            "width":400,
            "height":600
        });
    });

</script>

I am sharing in a zip file the module I made as well as the tpl where I call the file. I only included the tpl from the second module to be as clear as possible.

I hope one of you has the time to help me.
Thanks

bug_url.zip

Theme: Classic

Hello everyone, I'm looking to create a module (my first module...) that allows me to have a 2FA login for the front end. I'm at the stage where I would just like to make the connection between a service and the front .tpl located in another module.

After several days, I'm still at the same point and don't know where I went wrong. Probably a silly mistake. The module installs fine and the new columns are added to the database.

I have created the routes.yml, the controller, and the services, but when I call the URL by clicking the button, I just get a 404 error in the console. Note that I made the files by hand, I'm not sure if I needed to run composer commands? Here is the .tpl code. The problematic URL is "modules/lebruntwofa/sendcode".

<div style="display:none;">
    <div id="new_login_form">
        <div id="img-cust-pop">
        </div>
        <div id="already-customer" class="bgcolor_second text-center">
            <form id="login-form-new" action="#" method="post">

                <h3 class="color_first">Déjà client ?</h3>
                <p>Connectez-vous pour accéder à votre compte.</p>

                <div class="help-block" id="login-form-new-error">
                </div>
                
                <div>
                    {foreach from=$new_login_form["formFields"] item="field"}
                    {block name='form_field'}
                        {form_field field=$field}
                    {/block}
                    {/foreach}
                    <div class="forgot-password text-right">
                        <a href="{$urls.pages.password}" rel="nofollow">
                        {l s='Forgot your password?' d='Shop.Theme.Customeraccount'}
                     </a>
                    </div>
                    <input type="button" name="generate_code" id="generate_code" value="Recevoir mon code" >
                    <input type="text" name="twofa_code" placeholder="Entrez votre code" required>
                    <button type="submit" name="submit_code">Vérifier</button>
                </div>

                <footer class="form-footer text-sm-center clearfix">
                    <input type="hidden" name="submitLogin" value="1">
                    {block name='form_buttons'}
                    <button id="submit-login-new" class="btn btn-primary" data-link-action="sign-in" type="submit" class="form-control-submit">
                        {l s='Sign in' d='Shop.Theme.Actions'}
                    </button>
                    {/block}
                </footer>

            </form>
        </div>
        <div id="new-customer" class="bgcolor_third text-center">
            <h3 class="color_first">Nouveau client?</h3>
            <p>Suivez vos commandes, consultez votre historique d'achat, bénéficiez d'un suivi personnalisé et bien d'autres avantages.</p>
            <p><a href="{$urls.pages.registration}" class="button-register" rel="nofollow">Créer mon compte</a></p>
        </div>
    </div>
</div>

<script type="text/javascript">

    jQuery(document).ready(function() {

        jQuery("#generate_code").click(function () {
            let email = jQuery("#field-email").val();
            /*console.log(email); OK, l'email de l'input est bien récupéré*/

           $.ajax({
                type: "POST",
                url: "/modules/lebruntwofa/sendcode",
                data: {
                    ajax: true,
                    action: 'sendCode',
                    email: email
                },
                dataType: "json",
                encode: true,
            }).done(function (data) {
                if (data.success) {
                    alert('Code sent successfully.');
                } else {
                    alert('Error: ' + data.error);
                }
            });
        });

        jQuery("#login-form-new").submit(function (event) {
            event.preventDefault();
            var formData = {
                email: jQuery("#field-email").val(),
                password: jQuery("#field-password").val(),
                submitLogin: jQuery("input[name='submitLogin']").val(),
                ajax: true
            };

            $.ajax({
                type: "POST",
                url: "/module/lebruncustpop/login",
                data: formData,
                dataType: "json",
                encode: true,
            }).done(function (data) {
                if(data.error.length === 0){
                    location.reload();
                }else{
                    jQuery("#login-form-new-error").html("<ul><li class='alert alert-danger'>" + data.error + "</li></ul>");
                }
            });
        });

        jQuery("a.fancybox_login").fancybox({
            "type" : "inline",
            "width":400,
            "height":600
        });
    });

</script>

I am sharing in a zip file the module I made as well as the tpl where I call the file. I only included the tpl from the second module to be as clear as possible.

I hope one of you has the time to help me.
Thanks

bug_url.zip