Afficher les messages flash dans une modal box apès envoi email

amdawb
PHP

Bonjour,

Voulant personnaliser ce super tuto: PHP Gestion d'un espace membre en PHP , je me heurte à une difficulté: Comment, APRÈS ( OU PENDANT ?) envoi du mail de réinitialisation ,
afficher les messages flash dans une fenêtre modale.

Mon code ci-dessous déclenche la modal box juste le temps que prend l'envoi du mail (200 ms), puis disparaît.

Je pense que le click sur le button id="myBtn" ne peut pas gérer 2 évenements (l'un en php et l'autre en javascript) en même temps.
En attendant quelques pistes , je me penche sur la possibilité de le faire en Ajax.

Cordialement.

<?php
    if(!empty($_POST) && !empty($_POST['email']) ){ 
        require_once('inc/db.php');
        require_once('inc/functions.php');
        $req=$pdo->prepare('SELECT * FROM users WHERE email = ? AND confirmed_at IS NOT NULL ');
        $req->execute( [$_POST['email']]);
        $user=$req->fetch();
        if($user){
            session_start();
            $reset_token = str_random(60);
            $pdo->prepare('UPDATE users SET reset_token = ?, reset_at = NOW() WHERE id = ? ')->execute([$reset_token,$user->id]);

            $_SESSION['flash']['success'] = "Des instructions pour réinitialiser votre mot de passe vous ont été envoyées dans votre boite email ";
            mail($_POST['email'],'Réinitialisation de votre mot de passe',"Afin de réinitialiser votre mot de passe, merci de cliquer sur ce lien\n\nhttp://localhost/grafikart/reset.php?id={$user->id}&token=$reset_token ");
            //header('Location: '.$_SERVER['HTTP_REFERER']);        
            //exit();
        }else{
            $_SESSION['flash']['danger'] = "Aucun compte ne correspond à cette adresse"; 
        }
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Réinitialiser mon mot de passe oublié</title>
        <link href="css/app.css" rel="stylesheet">
        <link href="css/espace-membre.css" rel="stylesheet">     
        <style>
            .modal {display:none;position:fixed;z-index: 1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4); }
            .modal-content {background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width: 80%;}
            .close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
            .close:hover, .close:focus {color: black;text-decoration: none;cursor: pointer;}
        </style>       
        <script type="text/javascript" src="js/jquery3.1.1-min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                var modal = document.getElementById('myModal');
                var btn = document.getElementById("myBtn");
                var span = document.getElementsByClassName("close")[0];             
                btn.onclick = function() {          
                    modal.style.display = "block";                           
                }      
                span.onclick = function() {                
                    modal.style.display = "none";
                }
                window.onclick = function(event) {
                    if (event.target == modal) {
                        modal.style.display = "none";
                    }
                }

            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="mdp_reset"><a href="index.php">Accueil </a><span>&raquo;</span>Réinitialisation du mot de passe</div>
            <h1>Réinitialisation du mot de passe (1/2)</h1>
            <p>Vous avez oublié votre mot de passe ? Pas de panique ! Indiquez-nous votre nom d'utilisateur ou votre adresse email et nous vous renverrons un nouveau mot de passe par email.<br />
                Pensez à regarder dans votre dossier Spam si vous ne voyez pas arriver notre email. 
            </p>
            <form action="" method="POST">
                <div class="form-group">
                    <label for="">Email</label>
                    <input type="email" name="email" class="form-control" />
                </div>
                <button type="submit" id="myBtn" class="btn btn-primary" >Réinitialiser mon mot de passe</button>
            </form>

            <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close">x</span>

                    <?php if(isset($_SESSION['flash'])): ?>
                        <?php foreach($_SESSION['flash'] as $type => $message): ?>
                            <div class="alert alert-<?php echo $type; ?>"> 
                                <?php echo $message; ?>
                            </div>
                        <?php endforeach; ?>
                        <?php unset($_SESSION['flash']); ?>
                    <?php endif; ?>

                </div>
            </div>

        </div>      
    </body>
</html>

Aucune réponse