Need help with a pop-up login screen

alicia1234
alicia1234 used Ask the Experts™
on
I'm using GreyBox to pop up a login page when a user clicks on a link on the home page to "login". What happens then is the home page greys out, and a smaller window comes up with my login.php page. All's fine and good.

When the user clicks on the "login" button to submit the form on the login page, how do I make that popup window close and then have the "parent" window (the home page) refresh itself?

I can't post an example because this is still only on my local machine in a testing environment. Let me know what other info you need.

Thanks.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Check this :

http://drupal.org/node/106886

You could run this in the onsubmit event in your form, after the basic checks.

Author

Commented:
OK ... so I'm not sure I totally understand.

What I had was this: on index.php, there is a link to the login.php. When the link is clicked, login.php opens in the same browser window. The user enters a username and password and clicks the "Login" button.

The form submits to the same login.php page, which then checks for errors. If there are errors, they are displayed on the page and the user tries again. With GreyBox, this all works the same and is as it should be.

If the login was successful the page redirects to index.php. The redirect is done with a php function "redirect_to($page)". The function Of course, when this was all in the same browser window, it worked fine, and index.php got "refreshed" so that my "login" link now became a "logout" link.

So what I'm I trying to do now is to make it look a little slicker by having it pop up a login window and grey out the current window. So I need to not only close the "little login window", I also need to refresh the index.php page (the page that popped open the window in the first place).

Is this possible?


Commented:
you can do this in javascript: like this :

window.location.reload();

or :

window.location = "index.php"
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Thanks. I did mention that I don't know Javascript, right? ;-) So where would this go? Here's the code of my login.php page.

<?php
// login.php
session_start();
require('../includes/constants.php');
require('../functions/form_functions.php');
require('../functions/functions.php');
?>
 
<?php
// Connect to the database
$dbconn = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (!$dbconn) { die(DB_CONN_FAILED . mysqli_connect_error()); }
?>
 
<?php
if (isset($_POST['submitted'])) {
// Process data if form has been submitted
	$errors = array();
	//check for required fields - these names match form fieldnames
	$required_fields = 
		array('username','password');
	$errors = array_merge ($errors, check_required_fields($required_fields));
	//we don't do a check on field lengths because that is controlled by width param in input tags in form
 
	if ( empty($errors)) {
	// if no missing fields, validate field content 
		$message = '';
		// get the user's record
		$username = trim(mysqli_real_escape_string($dbconn,$_POST['username']));
		$q = "SELECT userID, activation, usertype, username, password, firstname FROM tblusers WHERE username = '$username' LIMIT 1";
		$result = @mysqli_query ($dbconn, $q);
		confirm_query($dbconn, $result, $q);
		// is username valid (was a record found?)
		if (mysqli_num_rows($result) == 0 ) {
			$message .= ERR_INVALID_LOGIN; 
			mysqli_free_result ($result);
		} else {
			$row = mysqli_fetch_array($result, MYSQLI_ASSOC); // only one row
			mysqli_free_result ($result);
			// username ok: is account activated?
				if (is_null($row['activation'])) {
					// account activated - check password
					$password = trim(mysqli_real_escape_string($dbconn,$_POST['password']));
					if  ( SHA1($password) !=  $row['password'] ) {
						$message .= ERR_INVALID_LOGIN;
					}
				} else { //account not activated
					$message .= ERR_NOT_ACTIVATED;
				}
		}
		
		if ($message == '') {
			// login successful
			$userID = $row['userID'];
			$firstname = $row['firstname'];
			$usertype = $row['usertype'];
			// set cookies		
			//setcookie (COOKIE_PREFIX . 'user_ID',  $userID);
			//setcookie (COOKIE_PREFIX . 'user_name', $username);
			//setcookie (COOKIE_PREFIX . 'first_name', $firstname);
			
			// use sessions instead of cookies
			$_SESSION['user_id'] = $userID;
			$_SESSION['first_name'] = $firstname;
			$_SESSION['user_level'] = $usertype;
			
			// update last login date
			$q = "UPDATE tblusers SET lastlogin=NOW() WHERE userID=$userID";
			$result = @mysqli_query ($dbconn, $q);
			confirm_query($dbconn, $result, $q);
			// redirect to appropriate page
			redirect_to(LOGIN_REDIRECT); 
		} //else $message will be displayed on page...
	} else {
	//$errors not empty - missing data
		$message = ERR_ALL_FIELDS_REQUIRED; //will be displayed below in the HTML
	}
	
	
} else {
// form not submitted ... prepare to display for first time
 
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo SITE_NAME?> - Login</title>
<link rel="stylesheet" type="text/css" href="../lookfeel/global.css"  />
<?php //include file instead of linked stylesheet because it contains some html to fix IE6 & 7 bugs
	 include('../lookfeel/form_css.html') ?>
<style type="text/css">
div#bodywrapper { width: 490px; } /* smaller width for displaying in popup */
</style>
<script type="text/javascript" src="../functions/form_functions.js"></script>
<script type="text/javascript">
	addLoadEvent(function() {
	  setTimeout( 'focusOn("username")', 10 ); // for setting focus in field 
	});
</script>
 
</head>
 
<body> 
 
<?php //for debugging
//if (DEBUG_MODE && isset($_POST['submitted'])) {
//	if (empty($errors)) {echo "Errors is empty" . "<br />";} else {echo "Errors is NOT empty!" . "<br />" . print_r($errors) . "<br />"; }
//	if ( $message == '') {echo "Message is blank" . "<br />";} else { echo "Message is NOT blank!" . "<br />"; }
//	echo "userID: " . $userID . "<br />";
//	echo "usertype: " . $usertype . "<br />";
//	echo "Username: " . $_POST['username'] . "<br />";
//	echo "Password: " . $_POST['password'] . "<br />";
//}
?>
 
<div id="bodywrapper">
 
<div id="loginform">
<form id="form" method="post" action="login.php">
			
		<div id="errcheck">
			<?php
			// Check for errors
			if (isset($_POST['submitted']) && $message!=='') {
				echo "<p class='errmsg'>" . $message . "</p>";
			}
			?>
 
		</div>
				
		<fieldset id="logininfo" class="secondary">
			<legend class="secondary">Please log in</legend>
			<p>Not registered? <a href="register.php">Register now!</a> It's free!</p>
			<p><label for="username"><?php echo USERNAME_MODE ?  'Username' : 'eMail Address'; ?></label>
			<input type="text" name="username" id="username" size="30" maxlength="60" 
				value="<?php if (isset($_POST['username'])) echo $_POST['username']; ?>" /></p>
			<p><label for="password">Password</label>
			<input type="password" name="password" id="password" size="30" maxlength="40" 
				value="<?php if (isset($_POST['password'])) echo $_POST['password']; ?>" /></p>
			<p>Did you forget your password? <a href="forgot_password.php">Click here</a> and we'll send you a new one.</p>	
			
			<p>If you are having any difficulty, please email us at <a href="mailto: <?php echo SUPPORT_EMAIL ?>"><?php echo SUPPORT_EMAIL ?></a></p>	
			
			<p>	<a href="" onclick="return GB_hide()">Close</a></p>
				
		</fieldset>
		<div id="submitbutton">
			<p><input type="submit" name="submit" id="submit" value="Log In" /></p>
			<input type="hidden" name="submitted" id="submitted" value="TRUE" />
		</div>
</form>
</div> <!-- loginform -->
 
 
</div> <!-- bodywrapper -->
 
</body>
</html>
<?php
// Close connection
mysqli_close($dbconn);
?>

Open in new window

Commented:
I don't know what does the "redirect_to(LOGIN_REDIRECT);" do, since greybox seems to be ajax based.

Is the login box loaded in a iframe ?

In this case, you could add something after "addLoadEvent(function() {" like :

window.parent.reload();

(If login was successfull)

Author

Commented:
I don't know anything about iframes. I'm just using this app called GreyBox. :-(

redirect_to code is below.

I  may be getting in over my head on this one. Was just looking for someone who might be familiar with GreyBox and also a PHP developer.

function redirect_to( $page ) {
		$url = SITE_ROOT_URL;
		$url = rtrim($url, '/\\');  //trim trailing / if there is one
		$url .= '/' . $page;
		header("Location: {$url}");
		exit();
	}

Open in new window

Commented:
Your iframe redirect to  LOGIN_REDIRECT page when login is successfull. You can either do :

1) in the LOGIN_REDIRECT page, call the javascript code  "window.parent.reload()"
2) remove the redirect_to, add a flag like "$login_ok = true;" then, before line 100, add :
 
<?php
  if($login_ok) {
    echo 'window.parent.reload();return;';
  }
?>

Commented:
Sorry if I don't get the response quickly, but there is dozen of javascript tools like greybox, and you will have to wait more than some hours to get a developper familiar to this specific technology showing up, or perhaps never.

I'm php & javascript developper, just trying to help. If you thing you are loosing your time with me just tell :)

Author

Commented:
I am happy to have you help me! ;-)
I understand some of what you've said but don't understand where the "popup" window actually gets closed?

And I think you're saying to do (1) OR (2) right? I understand how to do (2) but when you say "in the LOGIN_REDIRECT page, call the javascript code "window.parent.reload()" - I don't know where to put that.

Here's my LOGIN_REDIRECT page (which is actually index.php):

Thanks!


<?php
// login.php
session_start();
require('../includes/constants.php');
require('../functions/form_functions.php');
require('../functions/functions.php');
?>
 
<?php
// Connect to the database
$dbconn = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
if (!$dbconn) { die(DB_CONN_FAILED . mysqli_connect_error()); }
?>
 
<?php
if (isset($_POST['submitted'])) {
// Process data if form has been submitted
	$errors = array();
	//check for required fields - these names match form fieldnames
	$required_fields = 
		array('username','password');
	$errors = array_merge ($errors, check_required_fields($required_fields));
	//we don't do a check on field lengths because that is controlled by width param in input tags in form
 
	if ( empty($errors)) {
	// if no missing fields, validate field content 
		$message = '';
		// get the user's record
		$username = trim(mysqli_real_escape_string($dbconn,$_POST['username']));
		$q = "SELECT userID, activation, usertype, username, password, firstname FROM tblusers WHERE username = '$username' LIMIT 1";
		$result = @mysqli_query ($dbconn, $q);
		confirm_query($dbconn, $result, $q);
		// is username valid (was a record found?)
		if (mysqli_num_rows($result) == 0 ) {
			$message .= ERR_INVALID_LOGIN; 
			mysqli_free_result ($result);
		} else {
			$row = mysqli_fetch_array($result, MYSQLI_ASSOC); // only one row
			mysqli_free_result ($result);
			// username ok: is account activated?
				if (is_null($row['activation'])) {
					// account activated - check password
					$password = trim(mysqli_real_escape_string($dbconn,$_POST['password']));
					if  ( SHA1($password) !=  $row['password'] ) {
						$message .= ERR_INVALID_LOGIN;
					}
				} else { //account not activated
					$message .= ERR_NOT_ACTIVATED;
				}
		}
		
		if ($message == '') {
			// login successful
			$userID = $row['userID'];
			$firstname = $row['firstname'];
			$usertype = $row['usertype'];
			// set cookies		
			//setcookie (COOKIE_PREFIX . 'user_ID',  $userID);
			//setcookie (COOKIE_PREFIX . 'user_name', $username);
			//setcookie (COOKIE_PREFIX . 'first_name', $firstname);
			
			// use sessions instead of cookies
			$_SESSION['user_id'] = $userID;
			$_SESSION['first_name'] = $firstname;
			$_SESSION['user_level'] = $usertype;
			
			// update last login date
			$q = "UPDATE tblusers SET lastlogin=NOW() WHERE userID=$userID";
			$result = @mysqli_query ($dbconn, $q);
			confirm_query($dbconn, $result, $q);
			// redirect to appropriate page
			//redirect_to(LOGIN_REDIRECT); 
			$login_ok = TRUE;
		} //else $message will be displayed on page...
	} else {
	//$errors not empty - missing data
		$login_ok = FALSE;
		$message = ERR_ALL_FIELDS_REQUIRED; //will be displayed below in the HTML
	}
	
	
} else {
// form not submitted ... prepare to display for first time
 
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo SITE_NAME?> - Login</title>
<link rel="stylesheet" type="text/css" href="../lookfeel/global.css"  />
<?php //include file instead of linked stylesheet because it contains some html to fix IE6 & 7 bugs
	 include('../lookfeel/form_css.html') ?>
<style type="text/css">
div#bodywrapper { width: 490px; } /* smaller width for displaying in popup */
</style>
<script type="text/javascript" src="../functions/form_functions.js"></script>
<script type="text/javascript">
	addLoadEvent(function() {
	  <?php
if($login_ok) { echo 'window.parent.reload();return;';}
?>
	  setTimeout( 'focusOn("username")', 10 ); // for setting focus in field 
	});
</script>
 
</head>
 
<body> 
 
<?php //for debugging
//if (DEBUG_MODE && isset($_POST['submitted'])) {
//	if (empty($errors)) {echo "Errors is empty" . "<br />";} else {echo "Errors is NOT empty!" . "<br />" . print_r($errors) . "<br />"; }
//	if ( $message == '') {echo "Message is blank" . "<br />";} else { echo "Message is NOT blank!" . "<br />"; }
//	echo "userID: " . $userID . "<br />";
//	echo "usertype: " . $usertype . "<br />";
//	echo "Username: " . $_POST['username'] . "<br />";
//	echo "Password: " . $_POST['password'] . "<br />";
//}
?>
 
<div id="bodywrapper">
 
<div id="loginform">
<form id="form" method="post" action="login.php">
			
		<div id="errcheck">
			<?php
			// Check for errors
			if (isset($_POST['submitted']) && $message!=='') {
				echo "<p class='errmsg'>" . $message . "</p>";
			}
			?>
 
		</div>
				
		<fieldset id="logininfo" class="secondary">
			<legend class="secondary">Please log in</legend>
			<p>Not registered? <a href="register.php">Register now!</a> It's free!</p>
			<p><label for="username"><?php echo USERNAME_MODE ?  'Username' : 'eMail Address'; ?></label>
			<input type="text" name="username" id="username" size="30" maxlength="60" 
				value="<?php if (isset($_POST['username'])) echo $_POST['username']; ?>" /></p>
			<p><label for="password">Password</label>
			<input type="password" name="password" id="password" size="30" maxlength="40" 
				value="<?php if (isset($_POST['password'])) echo $_POST['password']; ?>" /></p>
			<p>Did you forget your password? <a href="forgot_password.php">Click here</a> and we'll send you a new one.</p>	
			
			<p>If you are having any difficulty, please email us at <a href="mailto: <?php echo SUPPORT_EMAIL ?>"><?php echo SUPPORT_EMAIL ?></a></p>	
			
			<p>	<a href="" onclick="return GB_hide()">Close</a></p>
				
		</fieldset>
		<div id="submitbutton">
			<p><input type="submit" name="submit" id="submit" value="Log In" /></p>
			<input type="hidden" name="submitted" id="submitted" value="TRUE" />
		</div>
</form>
</div> <!-- loginform -->
 
 
</div> <!-- bodywrapper -->
 
</body>
</html>
<?php
// Close connection
mysqli_close($dbconn);
?>

Open in new window

Author

Commented:
You can see/learn about GreyBox here:

http://orangoo.com/labs/GreyBox/

Commented:
So, when you click on the "login" button in the bow, the bow reload itself, and thats all ?

In this case you can only access the parent window with javascript. PHP has no control over the parent container of the box (iframe).

Then, if you call "window.parent.reload()" in javascript, the whole page will be reloaded, and btw the box closed,as if you hit the F5 key in your browser.

If the redirect page is the same, you should try the 2nd solution i suggested.

Author

Commented:
When you click "login" button, the login.php reloads and does verification on the data entered. If it's ok. then it redirects to LOGIN_PAGE (index.php).

I don't know what the "bow" is that you are referring to.

I did try the 2nd solution and it didn't work. (See the code I posted above) The login window stays open, and the index.php page does not refresh.

Thanks.

Commented:
Maybe you can try "window.opener" instead of "window.parent"

Author

Commented:
No difference.

Commented:
ok I just tried greybox; here is the code to reload page from the frame :

      window.parent.parent.location.reload();

Commented:
To hide the box without reload you can also do this :

window.parent.GB.hide();

Author

Commented:
Thanks. I must be doing something wrong because all that does is bring up the "login redirect" page in the same small window.

Here's what I've done:


In login.php, in the code that checks for a valid login, instead of the "redirect_to(LOGIN_REDIRECT)", I have "$login_ok = TRUE;"

Then in the <head> tag, just after the script "addLoadEvent(function() ... " I have:

<?php if($login_ok) { echo 'window.parent.parent.location.reload();return;'} ?>



Author

Commented:
WAIT! IT WORKED!

I did the same thing as in my last post EXCEPT that instead of "window.parent.parent.location.reload()" I used "window.parent.GB_hide()" instead.

It works!!!!

Author

Commented:
oops - not so fast. I just tried it again and now it doesn't work. I'm trying to figure out why. Will post back.

Author

Commented:
OK, got it. My post above (ID: 24913782) WAS THE CORRECT SOLUTION.

Author

Commented:
THANK YOU !!!!!

Author

Commented:
For the record: the command to just close the popup is:

parent.parent.GB_hide()

not: window.parent.GB_hide()

Commented:
I tried with GB.hide, maybe GB_hide is not defined in the first parent.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial