Need help with a pop-up login screen
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.
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.
ASKER
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?
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?
you can do this in javascript: like this :
window.location.reload();
or :
window.location = "index.php"
window.location.reload();
or :
window.location = "index.php"
ASKER
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);
?>
I don't know what does the "redirect_to(LOGIN_REDIREC
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)
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)
ASKER
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.
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();
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 :)
I'm php & javascript developper, just trying to help. If you thing you are loosing your time with me just tell :)
ASKER
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!
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);
?>ASKER
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.
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.
ASKER
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.
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.
Maybe you can try "window.opener" instead of "window.parent"
ASKER
No difference.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
To hide the box without reload you can also do this :
window.parent.GB.hide();
window.parent.GB.hide();
ASKER
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_REDIREC
Then in the <head> tag, just after the script "addLoadEvent(function() ... " I have:
<?php if($login_ok) { echo 'window.parent.parent.loca
Here's what I've done:
In login.php, in the code that checks for a valid login, instead of the "redirect_to(LOGIN_REDIREC
Then in the <head> tag, just after the script "addLoadEvent(function() ... " I have:
<?php if($login_ok) { echo 'window.parent.parent.loca
ASKER
WAIT! IT WORKED!
I did the same thing as in my last post EXCEPT that instead of "window.parent.parent.loca
It works!!!!
I did the same thing as in my last post EXCEPT that instead of "window.parent.parent.loca
It works!!!!
ASKER
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.
ASKER
OK, got it. My post above (ID: 24913782) WAS THE CORRECT SOLUTION.
ASKER
THANK YOU !!!!!
ASKER
For the record: the command to just close the popup is:
parent.parent.GB_hide()
not: window.parent.GB_hide()
parent.parent.GB_hide()
not: window.parent.GB_hide()
I tried with GB.hide, maybe GB_hide is not defined in the first parent.
http://drupal.org/node/106886
You could run this in the onsubmit event in your form, after the basic checks.