I am trying to redesign a login page to incorporate both login/register forms within the one page and not having 2 separate pages. Previously I had my login and register pages both correctly accessing my database via php.
I have tried to simply copy the elements that I needed from what I previously had working for each individual but page for the tutorial below, however my database connection/php does not seem to be doing anything.
I'm following this method outlined at http://codyhouse.co/gem/loginsignup-modal-window/
New index.php
<?php
session_start();
?>
<?php
//Log out and delete cookie
/* if(isset($_GET['logout'])){
session_destroy();
}*/
//After validation, then check the entered data
if( isset($_POST['log_username']) && isset($_POST['log_password'])) {
$log_username = $_POST['log_username'];
$log_password = $_POST['log_password'];
$con =mysql_connect("localhost", "user4321", "4321");
mysql_select_db('supernatural',$con);
$sql = "SELECT * FROM user WHERE user_username='$log_username' AND user_password2='$log_password'";
$sql_E = "SELECT * FROM user WHERE user_username='$log_username'";
$loginShow = mysql_query($sql);
$loginShow_E = mysql_query($sql_E);
$lookOver=mysql_num_rows($loginShow);
$lookOver_E=mysql_num_rows($loginShow_E);
$row = mysql_fetch_array($loginShow);
$row_E = mysql_fetch_array($loginShow_E);
$myuser = $row['user_fn'];
//$cookie_name = "cook_name";
if($lookOver == 1){
//Set Cookie for 1 day
//setcookie($cookie_name,"$myuser", time() + 86400,"/");
$_SESSION['loggedin'] = true;
$_SESSION['user'] = $myuser;
$_SESSION['userid'] = $row['user_id'];
$_SESSION['userlevel'] = $row['level'];
header("location: map.php");
/*
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie name does not exist!";
} else {
echo "Cookie is named: <br>" . $_COOKIE[$cookie_name]."<a href='?logout'>Log Out</a>";
}
*/
} else {
//If only password is wrong, then it will send an email with password.
if($lookOver_E == 1){
echo "Don't remember your password? </br> <a class='refound_P' href='register.php'>Register a new account with a new email</a>";
/*href='found.php '>Send me a email with my password.</a>"; */
//If there is not one data relevant to, then it requires users reset.
}else{
echo "</br>Don't remember your Username? </br> <a class='refound_E' href='register.php'>Register a new account with a new email</a>";
}
}
mysql_close($con);
}
//echo json_encode($_SESSION['loggedin'] ? 'true' : 'false');
?>
<!--doctype html-->
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/styleA.css"> <!-- Gem style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>Log In & Sign Up Form</title>
</head>
<body>
<header role="banner">
<div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="main-nav">
<ul>
<!-- inser more links here -->
<li><a class="cd-signin" href="#0">Sign in</a></li>
<li><a class="cd-signup" href="#0">Sign up</a></li>
</ul>
</nav>
</header>
<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
<ul class="cd-switcher">
<li><a href="#0">Sign in</a></li>
<li><a href="#0">New account</a></li>
</ul>
<div id="cd-login"> <!-- log in form -->
<form class="cd-form" action="index.php" method="post">
<p class="fieldset">
<label class="image-replace cd-username" for="log_username">Login</label>
<input class="full-width has-padding has-border" id="log_username" type="text" placeholder="Username">
<span class="cd-error-message">Please enter a username!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="log_password">Password</label>
<input class="full-width has-padding has-border" id="log_password" type="password" placeholder="Password">
<span class="cd-error-message">Please enter a password!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>
<!--p class="fieldset"-->
<input class="full-width" id="submitBtn" type="submit" value="Login">
<!--/p-->
</form>
<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
<!-- <a href="#0" class="cd-close-form">Close</a> -->
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-username" for="signup-username">Username</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email" for="signup-email">E-mail</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signup-password">Password</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Password">
<a href="#0" class="hide-password">Hide</a>
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">I agree to the <a href="#0">Terms</a></label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Create account">
</p>
</form>
<!-- <a href="#0" class="cd-close-form">Close</a> -->
</div> <!-- cd-signup -->
<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>
<p class="cd-form-bottom-message"><a href="#0">Back to log-in</a></p>
</div> <!-- cd-reset-password -->
<a href="#0" class="cd-close-form">Close</a>
</div> <!-- cd-user-modal-container -->
</div> <!-- cd-user-modal -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
</body>
</html>
The new main.js
$(window).load(function(){
var $form_modal = $('.cd-user-modal'),
$form_login = $form_modal.find('#cd-login'),
$form_signup = $form_modal.find('#cd-signup'),
$form_forgot_password = $form_modal.find('#cd-reset-password'),
$form_modal_tab = $('.cd-switcher'),
$tab_login = $form_modal_tab.children('li').eq(0).children('a'),
$tab_signup = $form_modal_tab.children('li').eq(1).children('a'),
$forgot_password_link = $form_login.find('.cd-form-bottom-message a'),
$back_to_login_link = $form_forgot_password.find('.cd-form-bottom-message a'),
$main_nav = $('.main-nav');
//open modal
$main_nav.on('click', function(event){
if( $(event.target).is($main_nav) ) {
// on mobile open the submenu
$(this).children('ul').toggleClass('is-visible');
} else {
// on mobile close submenu
$main_nav.children('ul').removeClass('is-visible');
//show modal layer
$form_modal.addClass('is-visible');
//show the selected form
( $(event.target).is('.cd-signup') ) ? signup_selected() : login_selected();
}
});
//close modal
$('.cd-user-modal').on('click', function(event){
if( $(event.target).is($form_modal) || $(event.target).is('.cd-close-form') ) {
$form_modal.removeClass('is-visible');
}
});
//close modal when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$form_modal.removeClass('is-visible');
}
});
//switch from a tab to another
$form_modal_tab.on('click', function(event) {
event.preventDefault();
( $(event.target).is( $tab_login ) ) ? login_selected() : signup_selected();
});
//show forgot-password form
$forgot_password_link.on('click', function(event){
event.preventDefault();
forgot_password_selected();
});
//back to login from the forgot-password form
$back_to_login_link.on('click', function(event){
event.preventDefault();
login_selected();
});
function login_selected(){
$form_login.addClass('is-selected');
$form_signup.removeClass('is-selected');
$form_forgot_password.removeClass('is-selected');
$tab_login.addClass('selected');
$tab_signup.removeClass('selected');
}
function signup_selected(){
$form_login.removeClass('is-selected');
$form_signup.addClass('is-selected');
$form_forgot_password.removeClass('is-selected');
$tab_login.removeClass('selected');
$tab_signup.addClass('selected');
}
function forgot_password_selected(){
$form_login.removeClass('is-selected');
$form_signup.removeClass('is-selected');
$form_forgot_password.addClass('is-selected');
}
//$form_login.find('input[id="submitBtn"]').on('click', function(event){
//validate();
//console.log("YO");
//event.preventDefault();
$('#submitBtn').click(function(){
var loginUsername = $('#log_username');
var loginPass = $('#log_password');
var logintext = false;
var passwordtext = false;
if (loginUsername.val() != 0){
loginUsername.removeClass('has-error').next('span').removeClass('is-visible');
logintext = true;
} else {
loginUsername.addClass('has-error').next('span').addClass('is-visible');
logintext = false;
//console.log("NO");
}
if (loginPass.val() != 0){
loginPass.removeClass('has-error').next('span').removeClass('is-visible');
passwordtext = true;
} else {
loginPass.addClass('has-error').next('span').addClass('is-visible');
passwordtext = false;
//console.log("NO");
}
if (logintext == true && passwordtext == true){
console.log("Both");
return true;
} else {
console.log("Missing");
return false;
}
});
Old Login.php for reference
<?php
session_start();
?>
<?php
//Log out and delete cookie
if(isset($_GET['logout'])){
session_destroy();
}
//After validation, then check the entered data
if( isset($_POST['log_username']) && isset($_POST['log_password'])) {
$log_username = $_POST['log_username'];
$log_password = $_POST['log_password'];
$con =mysql_connect("localhost", "user4321", "4321");
mysql_select_db('supernatural',$con);
$sql = "SELECT * FROM user WHERE user_username='$log_username' AND user_password2='$log_password'";
$sql_E = "SELECT * FROM user WHERE user_username='$log_username'";
$loginShow = mysql_query($sql);
$loginShow_E = mysql_query($sql_E);
$lookOver=mysql_num_rows($loginShow);
$lookOver_E=mysql_num_rows($loginShow_E);
$row = mysql_fetch_array($loginShow);
$row_E = mysql_fetch_array($loginShow_E);
$myuser = $row['user_fn'];
//$cookie_name = "cook_name";
if($lookOver == 1){
//Set Cookie for 1 day
//setcookie($cookie_name,"$myuser", time() + 86400,"/");
$_SESSION['loggedin'] = true;
$_SESSION['user'] = $myuser;
$_SESSION['userid'] = $row['user_id'];
$_SESSION['userlevel'] = $row['level'];
header("location: map.php");
/*
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie name does not exist!";
} else {
echo "Cookie is named: <br>" . $_COOKIE[$cookie_name]."<a href='?logout'>Log Out</a>";
}
*/
} else {
//If only password is wrong, then it will send an email with password.
if($lookOver_E == 1){
echo "Don't remember your password? </br> <a class='refound_P' href='register.php'>Register a new account with a new email</a>";
/*href='found.php '>Send me a email with my password.</a>"; */
//If there is not one data relevant to, then it requires users reset.
}else{
echo "</br>Don't remember your Username? </br> <a class='refound_E' href='register.php'>Register a new account with a new email</a>";
}
}
mysql_close($con);
}
//echo json_encode($_SESSION['loggedin'] ? 'true' : 'false');
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://www.finvisionconsultants.com/images/login_key.png">
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="validation2.js"></script>
<title>Login</title>
<style type='text/css'>
body{background-color: #575757;}
input {padding: 5px 10px;font-size: 15px;}
button {padding: 5px 10px;border-radius: 0px;}
.erroB {border: 1px solid #ec9acd;}
.msg {font-family: fantasy;color: #ec9acd;}
#msgBox{}
h1{color: green;}
.refound_P,.refund_E{color: #8480d4;}
form{margin-left: 35%;margin-top: 10%;}
.main{font-size: xx-large;color: white;}
</style>
</head>
<body>
<div class="col-lg-6" id="logo-area">
<img src="images/mainTitle.png" alt="Supernatural Guide Map">
</div>
<form action="login.php" method="post">
<table>
<tr id="msgBox">
<td colspan="2"><p class="msg"></p></td>
<td></td>
</tr>
<tr>
<td>
<label>Username</label>
</td>
<td>
<input type="text" id="log_username" name="log_username" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="log_password" name="log_password" />
</td>
</tr>
</table>
<button type="submit" id="submitBtn">Log In</button>
</form>
<button style="margin-left:35%; margin-top:7px;" onClick="location.href='index.php'">Cancel</button>
<div id="status">
</div>
</body>
</html>
Old validation2.js (equivalent to what main.js does above) for reference
$(window).load(function() {
$('#submitBtn').click(function() {
return validate();
});
//Assign two functions for acting displaying message and removing it
function displayMsg(msg) {
$('.msg').html(msg);
}
function clearMsg() {
$('.msg').html("");
}
function validate() {
var loginUsername = $('#log_username');
var loginPass = $('#log_password');
//the rule of validating letters and email format
// var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
//Login validation:Email
//if (emailRegex.test(loginEmail.val())) {
if (loginUsername.val() != 0){
loginUsername.removeClass("erroB");
} else {
loginUsername.addClass("erroB");
displayMsg("Please check your username");
return false;
}
//Login validation:Password
if (loginPass.val() != 0) {
loginPass.removeClass("erroB");
} else {
loginPass.addClass("erroB");
displayMsg("Password is required");
return false;
}
clearMsg();
return true;
}
//make the validation be immidiatelly.
$('input').keyup(function() {
validate();
});
});
I have only tried with getting the login part (not the register) working to start but even this is not doing anything.
I've basically copied exactly what I had from the previous login but cannot work out why it is not working! All of the database credentials are correct.
Am I missing something really simple here?
