Login script

[lurtnowski]

I have a login script,

when I press login, I get a dialog,

When I enter the wrong info, I get

when I close this dialog to retry, nothing happens
Heres my code

if(!empty($errors)) {
echo 'const openRegisterModal = document.querySelector("[openregistermodal]");';
echo 'const openLoginModal = document.querySelector("[openloginmodal]");';
echo 'const errorModal = document.querySelector("[errormodal]");';
echo 'const closeErrorModal = document.querySelector("[closeerrormodal]");';
echo 'errorModal.showModal();';
echo "closeErrorModal.addEventListener('click', () => {";
echo 'errorModal.close();';
echo '});';
} else {
echo 'const openRegisterModal = document.querySelector("[openregistermodal]");';
echo 'const openLoginModal = document.querySelector("[openloginmodal]");';
echo 'const openForgotModal = document.querySelector("[openforgotmodal]");';
echo 'const registerModal = document.querySelector("[registermodal]");';
echo 'const loginModal = document.querySelector("[loginmodal]");';
echo 'const forgotModal = document.querySelector("[forgotmodal]");';
echo 'const closeRegisterModal = document.querySelector("[closeregistermodal]");';
echo 'const closeLoginModal = document.querySelector("[closeloginmodal]");';
echo 'const closeForgotModal = document.querySelector("[closeforgotmodal]");';
echo 'openRegisterModal.addEventListener("click", () => {';
echo '	registerModal.showModal();';
echo '});';
echo 'openLoginModal.addEventListener("click", () => {';
echo '	loginModal.showModal();';
echo '});';
echo 'closeRegisterModal.addEventListener("click", () => {';
echo '	registerModal.close();';
echo '});';
echo 'openForgotModal.addEventListener("click", () => {';
echo '  loginModal.close();';
echo '	forgotModal.showModal();';
echo '});';
echo 'closeLoginModal.addEventListener("click", () => { ';
echo '	loginModal.close();';
echo '});';
echo 'closeForgotModal.addEventListener("click", () => { ';
echo '	forgotModal.close();';
echo '});';


	if(!empty($_SESSION)) {
	echo 'const successModal = document.querySelector("[successmodal]");';
	echo 'const closuccessModal = document.querySelector("[closesuccessmodal]");';
	echo 'successModal.showModal();';
	ays echo 'setTimeout(() => {';
	echo 'successModal.close();';
	echo '}, 5000);';;
	echo "closeSuccessModal.addEventListener('click', () => {";
	echo 'successModal.close();';
	echo '});';
	}
}

those 3 arays are printed once the form is submitted,

echo '<pre>';print_r($data);echo '</pre>';
echo '<pre>';print_r($errors);echo '</pre>';
echo '<pre>';print_r($_SESSION);echo '</pre>';

Why does it not open a 2nd time?

[mabismad]

Without all the code necessary to reproduce the problem, no one can help. We don’t know how you are making http requests or what the order of the code is on the page (which is likely where the problem is.) You have also cut off the start of at least one line of the posted code.

The only recommendation I can make based on what you have posted is: do NOT echo blocks of markup containing no php code. This is a lot of unnecessary, error prone, typing. Instead, simply drop out of ‘php mode’ and put the markup in-line.

[m_hutley]

@lurtnowski

when I close this dialog to retry, nothing happens

@lurtnowski

echo "closeErrorModal.addEventListener('click', () => {";
echo 'errorModal.close();';
echo '});';

Well you didnt tell it to do anything other than to close the modal. What else were you expecting to happen?

[lurtnowski]

Sorry about that,
made some changgges and it appears to work…
so I have

and I get a dialog when I click Login

When th wrong info is entered I get,

when I close that box, I can click the login link again,
If the correct info is entered, I get

I was just wondering if this is the correct way?

if(!empty($errors)) {
//show the error
}
if(!empty($_SESSION)) {
//show the success
}

then have

<?php
if(isset($_SESSION['email'])) {
	echo 'You&nbsp;are&nbsp;logged&nbsp;in&nbsp;as&nbsp;&nbsp;'.$_SESSION['name'].'&nbsp;&nbsp;';
	echo '<form method="POST" style="display:inline">';
    echo '<input type="hidden" name="type" value="logout">';
    echo '<input class="btn btn-danger btn-sm" type="submit" value="Logout">';
    echo '</form>';
	echo '<span class="me-3" openregistermodal style="display:none">Register</span>';
	echo '<span openloginmodal style="display:none">Login</span>';
} else {
	echo '<span class="me-3" openregistermodal>Register</span>';
	echo '<span openloginmodal>Login</span>';
}
?>	

on my page

[m_hutley]

Well,

@lurtnowski

if(!empty($_SESSION)) {

will be true even if they didnt just come from your login page. So the answer somewhat depends on WHERE this code is.
If this code is only on the login resolution page, then yeah, it works.
If this code is buried in a header included on multiple pages, you’re going to show the login success message repeatedly every time the user opens a page.

[lurtnowski]

oh man, i didnt think of that, but your right. Is there a way to test if the login form was used?

$data = array_map('trim',$_POST); i


if((!empty($_SESSION) && ($data['type'] == 'login')) 
{
//show success
}

or is there a better way?
This seems to work

if(!empty($_SESSION) && (!empty($data['type']))) {
echo 'const successModal = document.querySelector("[successmodal]");';
echo 'const closuccessModal = document.querySelector("[closesuccessmodal]");';
echo 'successModal.showModal();';
echo 'setTimeout(() => {';
echo 'successModal.close();';
echo '}, 5000);';;
echo "closeSuccessModal.addEventListener('click', () => {";
echo 'successModal.close();';
echo '});';
}

[m_hutley]

I mean, i’d do more that just trim the post array (hopefully you’re doing some sanitation/validation in there somewhere), but yeah, i’d check for the existance of a post variable and the absence of any errors.