AJAX values undefined with Symfony

Good evening everyone, I have a weird problem in a web project. I actually try to make an custom authentication using AJAX and Symfony but I have a problem that I can’t even identify. It seems that the AJAX part doesn’t find the route because my browser console can’t "recognize" my route script. I tried to identify AJAX data compared to input fields data and the problem is that AJAX returns undefined values. If someone could help me to find where the problem is, it would be very nice. I’ll put the different parts of my code below :

Twig modal with AJAX script :

<div class="modal fade" tabindex="-1" role="dialog" id="loginModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Connexion</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" align="center">
                <form action="#" method="POST">
                    <label for="pseudoMail">Pseudo ou e-mail : </label>
                    <input type="text" id="pseudoMail" placeholder="Pseudo ou e-mail" name="pseudoMail" required><br>
                    <label for="mdp">Mot de passe : </label>
                    <input type="password" id="mdp" placeholder="Mot de passe" name="mdp" required><br>
                    <input type="submit" class="btn btn-primary" id="login" value="Se connecter" />
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<script>

    $(document).ready(function () {
        $("#login").click(function()
        {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: '{{ path('checkLogin') }}',
                data: {
                    pseudo: $("input#pseudoMail").val(),//TODO Remplir l'Ajax de façon à ce que les données soient reconnues
                    motdepasse: $("input#mdp").val()
                },
                dataType: 'json',

                success: function(data)
                {
                    if(data.pseudo !== "" && data.motdepasse !== "")//TODO Modifier la condition et jouer les sons correspondants (dossier sfx)
                    {
                        setTimeout(alert("Vous êtes connecté !"), 5000);
                        var sound = document.createElement('audio');
                        sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_1-up.wav');
                        sound.play();
                    }
                    else
                    {
                        alert("Les identifiants ne correspondent pas. Veuillez réessayer.");
                        var sound = document.createElement('audio');
                        sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_fireworks.wav');
                        sound.play();
                    }
                },
                error: function(data)
                {
                    console.log("Pseudo : " + data.pseudo);
                    console.log("Mot de passe : " + data.motdepasse);
                    console.log("Pseudo sans data : " + $('input#pseudoMail').val());
                    console.log("Mot de passe sans data : " + $('input#mdp').val());
                    console.log(data);
                    alert("Erreur détectée ! " + data);
                }
            });
        });
    });
</script>

The PHP script :

    /**
     * @Route("/checkLogin", name="checkLogin")
     */
    public function checkLogin(Request $request, SessionInterface $session)//TODO vérifier les connexions pour mesures de sécurité ?
    {
        $pseudoMail = $request->request->get('pseudoMail');
        $motdepasse = $request->request->get('mdp');
        $repo = $this->getDoctrine()->getRepository(Utilisateur::class);
        $pseudoDB = $repo->findOneBy(["pseudo" => $pseudoMail]);
        $mailDB = $repo->findOneBy(["email" => $pseudoMail]);
        $motdepasseDB = $repo->findOneBy(["motDePasse" => $motdepasse]);
        if (($pseudoDB && $motdepasseDB) || ($mailDB && $motdepasseDB))
        {
            $session->set('login', true);
            /*return $this->render('boutique/index.html.twig', [
                'controller_name' => 'BoutiqueController',
            ]);*/
            var_dump($pseudoMail . "-" . $motdepasse);
            return new JsonResponse(array('pseudo' => $pseudoMail, 'motDePasse' => $motdepasse));
        }
        else
        {
            $session->set('login', false);
            //$this->addFlash('flash', "Login incorrect. Veuillez réessayer.");
            /*return $this->render('accueil/index.html.twig', [
                'controller_name' => 'AccueilController',
            ]);*/
            return new Response("Problème !");
        }
    } 

If you need further informations, don’t hesitate to ask me. I’ll do my best to answer to your questions. Thank you in advance for your answers.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *