Bonjour,

Je rencontre un soucis. J'ai mis en place un modal JS sur un formulaire de création de compte. Ce formulaire vérifie si un compte existe déjà, mais lorsque l'erreur apparaît le modal se ferme. Je ne connais absolument pas JS, j'ai juste intégré le code d'un dev de codepen.
Merci par avance de votre aide.
PS: il y a sans doute un peu de code mort que je dois nettoyer.

Le code du modal

const modalBtn = document.querySelectorAll('.modalBtn');
const modalContent = document.querySelectorAll('[data-modal]');
const closeBtn = document.querySelectorAll('.closeBtn');

modalBtn.forEach(element =>{
  element.addEventListener('click', (e)=>{
    showModal(e);
  })
});

closeBtn.forEach(element => {
  element.addEventListener('click', (e)=>{
    closeModal(e);
  });
});

window.addEventListener('click', closeOpenedModal);

function showModal(modalToShow){
  modalContent.forEach(e => {
    if (e.dataset.modal == `#${modalToShow.target.id}`) {
        e.style.display = 'block';
    }
  })
}

function closeModal(modalToHide){
  modalToHide.target.closest('.modal').style.display = 'none';
}

function closeOpenedModal(e){
  modalContent.forEach(element => {
    if (element.closest('.modal').style.display === 'block' && element.dataset.modal ==   e.target.dataset.modal) {
      element.style.display = 'none';
    }
  });
}

Le code qui appel le modal

<?php 
$uri = $_SERVER['REQUEST_URI'];
?>

<h1>Backoffice</h1>

<div class="bck-container">
    <div class="bck-menu">
        <div class="home bck-menu-title">
            <a href="<?= $router->generate('home'); ?>">Accueil</a>
        </div>
        <button id="modal" class="modalBtn">Créer un utilisateur</button>
        <div data-modal="#modal" class="modal">
            <div class="modal-content">
                <span class="closeBtn">&times;</span>
                <?php require_once '../templates/createuser.php'?>
            </div>
        </div>
        <div class="deconnexion bck-menu-title">
            <a href="<?= $router->generate('deconnexion'); ?>">Se deconnecter</a>
        </div>    
    </div>
</div>

Le code du formulaire

<?php

use App\user\Create;
use App\user\Search;

if(!isset ($_POST['log_in']) && !isset ($_POST['password'])){
        require_once '../utils/user/creation.php';        
}else{

    $u_fname = htmlentities($_POST['first_name']);
    $u_lname = htmlentities($_POST['last_name']);
    $u_log = htmlentities($_POST['log_in']);
    $u_pass = htmlentities(hash('sha256', $_POST['password']));
    $u_mail = htmlentities($_POST['e_mail']);

    $datauser= [
        $u_fname,
        $u_lname, 
        $u_log,
        $u_pass,
        $u_mail];
    $finduser = new Search;
    $search = $finduser->searchUser($datauser);

    if($search !==true):
        $newuser = new Create();
        $user_created = $newuser->createUser($datauser);

        if($user_created === true){
            echo "L'utilisateur a bien été créé!";
            $u_create = null;
        }else{
            require_once '../utils/user/creation.php';
        };
    else:
        require_once '../utils/user/creation.php';
    endif;
};

Le code de la vue du formulaire

<?php

use App\user\Create;
use App\user\Search;

if(!isset ($_POST['log_in']) && !isset ($_POST['password'])){
        require_once '../utils/user/creation.php';        
}else{

    $u_fname = htmlentities($_POST['first_name']);
    $u_lname = htmlentities($_POST['last_name']);
    $u_log = htmlentities($_POST['log_in']);
    $u_pass = htmlentities(hash('sha256', $_POST['password']));
    $u_mail = htmlentities($_POST['e_mail']);

    $datauser= [
        $u_fname,
        $u_lname, 
        $u_log,
        $u_pass,
        $u_mail];
    $finduser = new Search;
    $search = $finduser->searchUser($datauser);

    if($search !==true):
        $newuser = new Create();
        $user_created = $newuser->createUser($datauser);

        if($user_created === true){
            echo "L'utilisateur a bien été créé!";
            $u_create = null;
        }else{
            require_once '../utils/user/creation.php';
        };
    else:
        require_once '../utils/user/creation.php';
    endif;
};

Le code de la classe appeler à faire la vérification

<?php

namespace App\user;

use App\Database;
use \PDO;

class Search extends Database{

    private $bdd;

    public function __construct()
    {  
        $this->bdd = new Database();
        $this->bdd = $this->bdd->getPDO(); 
    }

    public function searchUser(array $searchuser) :bool
    {
        if(session_status()===PHP_SESSION_NONE):
            session_start();
        endif;

        $u_fname = $searchuser[0];
        $u_lname = $searchuser[1];
        $u_log = $searchuser[2];
        $data = [
            'fname' => $u_fname,
            'lname' => $u_lname,
            'ulog' => $u_log
        ];    

        $req = $this->bdd->prepare('SELECT forname, lastname, user_login, email FROM users WHERE forname = :fname OR lastname = :lname OR user_login = :ulog');
        $req->execute($data);
        $finduser = $req->fetch();

        if(!empty($finduser)){
            if($finduser['lastname'] === $data['lname']):
                $_SESSION['username']= $finduser['lastname'];
            else:
                $_SESSION['userlogin']= $finduser['user_login'];
            endif;
            return true;
        }else{
            return false;
        };
    }

    public function search(string $table) :array
    {

        $req = $this->bdd->prepare("SELECT name FROM $table ORDER BY name ASC");
        $req->execute();
        $find = $req->fetchAll(PDO::FETCH_COLUMN);

        return $find;
    }
}

Aucune réponse