Problem on my connection for a client

[ma2t1234]

Body

I saw a video to manage a customer's registration and login. The login button is on the top right of the screen and when I click it shows me login or registration with a pop up button in java script. I wanted to modify this code to make it work in php with a login processing file that I have already coded and that is correct, but when the login page comes I am entering data from a client that is in my database email address and password I click on connection, but there is still the connection button which is at the top right when it should be replaced by My personal space. I put you a piece of my code and you also have the link of the video on which I was inspired. I put you the link of the video, I hope to be precise enough and if not I don't know how to do it, thank you for your patience.Here is my home page and when I click on it I put an image in bah of what it displays.https://www.youtube.com/watch?v=p1GmFCGuVjw

`

<div class="wrapper">
    <span class="icon-close"><ion-icon name="close-sharp"></ion-icon></span>
    <?php
    if (isset($_SESSION["idClient"])) {
        require_once("includes/functions.php");
        $db = dbConnect();

        $req = $db->prepare('SELECT * FROM CLIENT where CLIENT_ID = :id');
        $req->execute([
            'id' => $_SESSION["idClient"]
        ]);
        $req->execute();
        $client = $req->fetch();
        if (!empty($client)) {
    ?>
            <div class="form-box espacepersonnel">
                <h2>Espace personnel</h2>
                <form action="#">
                    <div class="input-box">
                        <span class="icon"><ion-icon name="person-sharp"></ion-icon></ion-icon></span>
                        <label> <?php echo 'Nom ' . $client["NOM_CLIENT"] ?></label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><ion-icon name="person-sharp"></ion-icon></ion-icon></span>
                        <label><?php echo 'Prenom ' . $client["PRENOM_CLIENT"] ?></label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><ion-icon name="home"></ion-icon></ion-icon></span>
                        <label><?php echo 'Adresse ' . $client["ADRESSE_CLIENT"] ?></label>
                    </div>
                    <div class="input-box">
                        <span class="icon"><ion-icon name="call-sharp"></ion-icon></ion-icon></span>
                        <label><?php echo 'Téléphone ' . $client["NUMERO_TEL_CLIENT"] ?></label>
                    </div>
                    <button type="submit" href="deconnexion.php" class="btn">Deconnexion</button>
                </form>
            </div>

        <?php
        }
    } else {
        ?>
        <div action="traitementConnexion.php" method="POST" class="form-box login">
            <h2>Connexion</h2>
            <form action="#">
                <div class="input-box">
                    <span class="icon"><ion-icon name="mail"></ion-icon></ion-icon></span>
                    <input type="email" required>
                    <label>Email</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
                    <input type="password" required>
                    <label>Mot de passe</label>
                </div>
                <div class="remember-forgot">
                    <label><input type="checkbox">Se souvenir de moi</label>
                </div>
                <button type="submit" class="btn">Connexion</button>
                <div class="login-register">
                    <p>Nouveau client ?<a href="#" class="register-link">S'inscrire</a></p>
                </div>
            </form>
        </div>
        <div class="form-box register">
            <h2>Inscription</h2>
            <form action="#">
                <div class="input-box">
                    <span class="icon"><ion-icon name="person-sharp"></ion-icon></ion-icon></span>
                    <input type="text" required>
                    <label>Nom</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="person-sharp"></ion-icon></ion-icon></span>
                    <input type="text" required>
                    <label>Prenom</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="home"></ion-icon></ion-icon></span>
                    <input type="text" required>
                    <label>Adresse</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="call-sharp"></ion-icon></ion-icon></span>
                    <input type="text" required>
                    <label>Téléphone</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="mail"></ion-icon></ion-icon></span>
                    <input type="email" required>
                    <label>Email</label>
                </div>
                <div class="input-box">
                    <span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
                    <input type="password" required>
                    <label>Mot de passe</label>
                </div>
                <div class="remember-forgot">
                    <label><input type="checkbox">J'accepte les conditions générales </label>
                </div>
                <button type="submit" class="btn">S'inscrire</button>
                <div class="login-register">
                    <p>Vous avez déjà un compte ?<a href="#" class="login-link">Connexion</a></p>
                </div>
            </form>
        </div>


    <?php
    }
    ?>

</div>`

and here is a piece of my script.js

`const wrapper = document.querySelector('.wrapper');
const loginLink = document.querySelector('.login-link');
const registerLink = document.querySelector('.register-link');
const btnPopup = document.querySelector('.btnLogin-popup');
const btnEspaceclient = document.querySelector('.btnEspaceclient-popup');
const iconClose = document.querySelector('.icon-close');

registerLink.addEventListener('click', () => {
wrapper.classList.add('active');
});

loginLink.addEventListener('click', () => {
wrapper.classList.remove('active');
});

btnEspaceclient.addEventListener('click', () => {
wrapper.classList.add('active-popup');
});

btnPopup.addEventListener('click', () => {
wrapper.classList.add('active-popup');
});

iconClose.addEventListener('click', () => {
wrapper.classList.remove('active-popup');
});
`

Guidelines

• I have read and understood this category's guidelines before making this post.