New Topic/Question
Reply
Could someone take a look at my code and give me some advice as to where I am going wrong. My development server is at www.example.com which is my localhost.
<?php
// First we execute our common code to connection to the database and start the session
require("common.php");
// This variable will be used to re-display the user's username to them in the
// login form if they fail to enter the correct password. It is initialized here
// to an empty value, which will be shown if the user has not submitted the form.
$submitted_username = '';
// This if statement checks to determine whether the login form has been submitted
// If it has, then the login code is run, otherwise the form is displayed
if(!empty($_POST))
{
// This query retreives the user's information from the database using
// their username.
$query = "
SELECT
id,
username,
password,
salt
FROM users
WHERE
username = :username
";
$query_params = array(
':username' => $_POST['username']
);
try
{
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex)
{
// Note: On a production website, you should not output $ex->getMessage().
// It may provide an attacker with helpful information about your code.
die("Failed to run query: " . $ex->getMessage());
}
// This variable tells us whether the user has successfully logged in or not.
// We initialize it to false, assuming they have not.
// If we determine that they have entered the right details, then we switch it to true.
$login_ok = false;
$row = $stmt->fetch();
if($row)
{
// Using the password submitted by the user and the salt stored in the database,
// we now check to see whether the passwords match by hashing the submitted password
// and comparing it to the hashed version already stored in the database.
$check_password = hash('sha256', $_POST['password'] . $row['salt']);
if($check_password === $row['password'])
{
// If they do, then we flip this to true
$login_ok = true;
}
}
// If the user logged in successfully, then we send them to the members page
// Otherwise, we display a login failed message and show the login form again
if($login_ok)
{
// Here I am preparing to store the $row array into the $_SESSION by
// removing the salt and password values from it. Although $_SESSION is
// stored on the server-side, there is no reason to store sensitive values
// in it unless you have to. Thus, it is best practice to remove these
// sensitive values first.
unset($row['salt']);
unset($row['password']);
// This stores the user's data into the session at the index 'user'.
// We will check this index on the members page to determine whether
// or not the user is logged in. We can also use it to retrieve
// the user's details.
$_SESSION['user'] = $row;
// Redirect the user to the members page.
header("Location: index.html");
die("Redirecting to: index.html");
}
else
{
header("Location: login.php");
die("Redirecting to: login.php");
// Show them their username again so all they have to do is enter a new
// password. The use of htmlentities prevents XSS attacks. You should
// always use htmlentities on user submitted values before displaying them
// to any users (including the user that submitted them). For more information:
// http://en.wikipedia.org/wiki/XSS_attack
$submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8');
}
}
?>
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="no-js iem7 oldie linen"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie linen" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie linen" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9 linen" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js linen" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Stevens Fine Homes</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- http://davidbcalhoun.com/2010/viewport-metatag -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- For all browsers -->
<link rel="stylesheet" href="css/reset.css?v=1">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="css/colors.css?v=1">
<link rel="stylesheet" media="print" href="css/print.css?v=1">
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only all and (min-width: 480px)" href="css/480.css?v=1">
<link rel="stylesheet" media="only all and (min-width: 768px)" href="css/768.css?v=1">
<link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?v=1">
<link rel="stylesheet" media="only all and (min-width: 1200px)" href="css/1200.css?v=1">
<!-- For Retina displays -->
<link rel="stylesheet" media="only all and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css?v=1">
<!-- Additional styles -->
<link rel="stylesheet" href="css/styles/form.css?v=1">
<link rel="stylesheet" href="css/styles/switches.css?v=1">
<!-- Login pages styles -->
<link rel="stylesheet" media="screen" href="css/login.css?v=1">
<!-- Javascript at bottom except for Modernizr -->
<script src="js/libs/modernizr.custom.js"></script>
<!-- For Modern Browsers -->
<link rel="shortcut icon" href="img/favicons/favicon.png">
<!-- For everything else -->
<link rel="shortcut icon" href="img/favicons/favicon.ico">
<!-- For retina screens -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/apple-touch-icon-retina.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/apple-touch-icon-ipad.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="img/favicons/apple-touch-icon.png">
<!-- iOS web-app metas -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Startup image for web apps -->
<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">
<!-- Microsoft clear type rendering -->
<meta http-equiv="cleartype" content="on">
<!-- IE9 Pinned Sites: http://msdn.microsoft.com/en-us/library/gg131029.aspx -->
<meta name="application-name" content="Developr Admin Skin">
<meta name="msapplication-tooltip" content="Cross-platform admin template.">
<meta name="msapplication-starturl" content="http://www.display-inline.fr/demo/developr">
<!-- These custom tasks are examples, you need to edit them to show actual pages -->
<meta name="msapplication-task" content="name=Agenda;action-uri=http://www.display-inline.fr/demo/developr/agenda.html;icon-uri=http://www.display-inline.fr/demo/developr/img/favicons/favicon.ico">
<meta name="msapplication-task" content="name=My profile;action-uri=http://www.display-inline.fr/demo/developr/profile.html;icon-uri=http://www.display-inline.fr/demo/developr/img/favicons/favicon.ico">
</head>
<body>
<div id="container">
<hgroup id="login-title" class="large-margin-bottom">
<h1 class="login-title-image">Stevens Fine Homes</h1>
</hgroup>
<div id="form-wrapper">
<div id="form-block" class="scratch-metal">
<div id="form-viewport">
<form method="post" action="login.php" id="form-login" class="input-wrapper blue-gradient glossy" title="Login">
<ul class="inputs black-input large">
<!-- The autocomplete="off" attributes is the only way to prevent webkit browsers from filling the inputs with yellow -->
<li><span class="icon-user mid-margin-right"></span><input type="text" name="username" id="login" value="<?php echo $submitted_username; ?>" class="input-unstyled" placeholder="Login" autocomplete="off"></li>
<li><span class="icon-lock mid-margin-right"></span><input type="password" name="password" id="pass" value="" class="input-unstyled" placeholder="Password" autocomplete="off"></li>
</ul>
<p class="button-height">
<button type="submit" class="button glossy float-right" id="login">Login</button>
<input type="checkbox" name="remind" id="remind" value="1" checked="checked" class="switch tiny mid-margin-right with-tooltip" title="Enable auto-login">
<label for="remind">Remember</label>
</p>
</form>
<form method="post" action="" id="form-password" class="input-wrapper blue-gradient glossy" title="Lost password?">
<p class="message">
If you can't remember your password, fill the input below with your e-mail and we'll send you a new one:
<span class="block-arrow"><span></span></span>
</p>
<ul class="inputs black-input large">
<li><span class="icon-mail mid-margin-right"></span><input type="email" name="mail" id="mail" value="" class="input-unstyled" placeholder="Your e-mail" autocomplete="off"></li>
</ul>
<button type="submit" class="button glossy full-width" id="send-password">Send new password</button>
</form>
<form method="post" action="register.php" id="form-register" class="input-wrapper blue-gradient glossy" title="Register">
<p class="message">
New user? Yay! Let us know a little bit about you before you start:
<span class="block-arrow"><span></span></span>
</p>
<ul class="inputs black-input large">
<li><span class="icon-card mid-margin-right"></span><input type="text" name="name" id="name-register" value="" class="input-unstyled" placeholder="Your name" autocomplete="off"></li>
<li><span class="icon-mail mid-margin-right"></span><input type="email" name="email" id="mail-register" value="" class="input-unstyled" placeholder="Your e-mail" autocomplete="off"></li>
</ul>
<ul class="inputs black-input large">
<li><span class="icon-user mid-margin-right"></span><input type="text" name="username" id="login-register" value="" class="input-unstyled" placeholder="Login" autocomplete="off"></li>
<li><span class="icon-lock mid-margin-right"></span><input type="password" name="password" id="pass-register" value="" class="input-unstyled" placeholder="Password" autocomplete="off"></li>
</ul>
<button type="submit" class="button glossy full-width" id="send-register">Register</button>
</form>
</div>
</div>
</div>
</div>
<!-- Javascript at the bottom for fast page loading -->
<!-- Scripts -->
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/setup.js"></script>
<!-- Template functions -->
<script src="js/developr.input.js"></script>
<script src="js/developr.message.js"></script>
<script src="js/developr.notify.js"></script>
<script src="js/developr.tooltip.js"></script>
<script>
$(document).ready(function()
{
/*
* JS login effect
* This script will enable effects for the login page
*/
// Elements
var doc = $('html').addClass('js-login'),
container = $('#container'),
formWrapper = $('#form-wrapper'),
formBlock = $('#form-block'),
formViewport = $('#form-viewport'),
forms = formViewport.children('form'),
// Doors
topDoor = $('<div id="top-door" class="form-door"><div></div></div>').appendTo(formViewport),
botDoor = $('<div id="bot-door" class="form-door"><div></div></div>').appendTo(formViewport),
doors = topDoor.add(botDoor),
// Switch
formSwitch = $('<div id="form-switch"><span class="button-group"></span></div>').appendTo(formBlock).children(),
// Current form
hash = (document.location.hash.length > 1) ? document.location.hash.substring(1) : false,
// If layout is centered
centered,
// Store current form
currentForm,
// Animation interval
animInt,
// Work vars
maxHeight = false,
blocHeight;
/******* EDIT THIS SECTION *******/
/*
* Login
* These functions will handle the login process through AJAX
*/
$('#form-login').submit(function(event)
{
// Values
var login = $.trim($('#login').val()),
pass = $.trim($('#pass').val());
// Check inputs
if (login.length === 0)
{
// Display message
displayError('Please fill in your login');
return false;
}
else if (pass.length === 0)
{
// Remove empty login message if displayed
formWrapper.clearMessages('Please fill in your login');
// Display message
displayError('Please fill in your password');
return false;
}
else
{
// Remove previous messages
formWrapper.clearMessages();
// Show progress
displayLoading('Checking credentials...');
// Stop normal behavior
//event.preventDefault();//If I uncomment this, it does not work the way I want it to. It always goes to the index.html
/*
* This is where you may do your AJAX call, for instance:
* $.ajax({ url: 'www.example.com/login/login.php',
* data: {
* login: login,
* pass: pass
* },
* success: function(data)
* {
* if (data.logged)
* {
* document.location.href = 'index.html';
* }
* else
* {
* formWrapper.clearMessages();
* displayError('Invalid user/password, please try again');
* }
* },
* error: function()
* {
* formWrapper.clearMessages();
* displayError('Error while contacting server, please try again');
* }
* });
*/
// Simulate server-side check
setTimeout(function() {
document.location.href = './'
}, 2000);
}
});
/*
* Password recovery
*/
$('#form-password').submit(function(event)
{
// Values
var mail = $.trim($('#mail').val());
// Check inputs
if (mail.length === 0)
{
// Display message
displayError('Please fill in your email');
}
else if (!/^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(mail))
{
// Remove empty email message if displayed
formWrapper.clearMessages('Please fill in your email');
// Display message
displayError('Email is not valid');
return false;
}
else
{
// Remove previous messages
formWrapper.clearMessages();
// Show progress
displayLoading('Checking credentials...');
// Stop normal behavior
//event.preventDefault();
/*
* This is where you may do your AJAX call, for instance:
* $.ajax(url, {
* data: {
* login: login,
* pass: pass
* },
* success: function(data)
* {
* if (data.logged)
* {
* document.location.href = 'index.html';
* }
* else
* {
* formWrapper.clearMessages();
* displayError('Invalid user/password, please try again');
* }
* },
* error: function()
* {
* formWrapper.clearMessages();
* displayError('Error while contacting server, please try again');
* }
* });
*/
// Simulate server-side check
setTimeout(function() {
document.location.href = './'
}, 2000);
}
});
/*
* Register
*/
$('#form-register').submit(function(event)
{
// Values
var name = $.trim($('#name-register').val()),
mail = $.trim($('#mail-register').val()),
login = $.trim($('#login-register').val()),
pass = $.trim($('#pass-register').val());
// Remove previous messages
formWrapper.clearMessages();
// Check inputs
if (name.length === 0)
{
// Display message
displayError('Please fill in your name');
return false;
}
else if (mail.length === 0)
{
// Display message
displayError('Please fill in your email');
return false;
}
else if (!/^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(mail))
{
// Display message
displayError('Email is not valid');
return false;
}
else if (login.length === 0)
{
// Display message
displayError('Please fill in your login');
return false;
}
else if (pass.length === 0)
{
// Display message
displayError('Please fill in your password');
return false;
}
});
/******* END OF EDIT SECTION *******/
/*
* Animated login
*/
// Prepare forms
forms.each(function(i)
{
var form = $(this),
height = form.outerHeight(),
active = (hash === false && i === 0) || (hash === this.id),
color = this.className.match(/[a-z]+-gradient/) ? ' '+(/([a-z]+)-gradient/.exec(this.className)[1])+'-active' : '';
// Store size
form.data('height', height);
// Min-height for mobile layout
if (maxHeight === false || height > maxHeight)
{
maxHeight = height;
}
// Button in the switch
form.data('button', $('<a href="#'+this.id+'" class="button anthracite-gradient'+color+(active ? ' active' : '')+'">'+this.title+'</a>')
.appendTo(formSwitch)
.data('form', form));
// If active
if (active)
{
// Store
currentForm = form;
// Height of viewport
formViewport.height(height);
}
else
{
// Hide for now
form.hide();
}
});
// Main bloc height (without form height)
blocHeight = formBlock.height()-currentForm.data('height');
// Handle resizing (mostly for debugging)
function handleLoginResize()
{
// Detect mode
centered = (container.css('position') === 'absolute');
// Set min-height for mobile layout
if (!centered)
{
formWrapper.css('min-height', (blocHeight+maxHeight+20)+'px');
container.css('margin-top', '');
}
else
{
formWrapper.css('min-height', '');
if (parseInt(container.css('margin-top'), 10) === 0)
{
centerForm(currentForm, false);
}
}
};
// Register and first call
$(window).bind('normalized-resize', handleLoginResize);
handleLoginResize();
// Switch behavior
formSwitch.on('click', 'a', function(event)
{
var link = $(this),
form = link.data('form'),
previousForm = currentForm;
event.preventDefault();
if (link.hasClass('active'))
{
return;
}
// Refresh forms sizes
forms.each(function(i)
{
var form = $(this),
hidden = form.is(':hidden'),
height = form.show().outerHeight();
// Store size
form.data('height', height);
// If not active
if (hidden)
{
// Hide for now
form.hide();
}
});
// Clear messages
formWrapper.clearMessages();
// If an animation is already running
if (animInt)
{
clearTimeout(animInt);
}
formViewport.stop(true);
// Update active button
currentForm.data('button').removeClass('active');
link.addClass('active');
// Set as current
currentForm = form;
// if CSS transitions are available
if (doc.hasClass('csstransitions'))
{
// Close doors - step 1
doors.removeClass('door-closed').addClass('door-down');
animInt = setTimeout(function()
{
// Close doors, step 2
doors.addClass('door-closed');
animInt = setTimeout(function()
{
// Hide previous form
previousForm.hide();
// Show target form
form.show();
// Center layout
centerForm(form, true);
// Height of viewport
formViewport.animate({
height: form.data('height')+'px'
}, function()
{
// Open doors, step 1
doors.removeClass('door-closed');
animInt = setTimeout(function()
{
// Open doors - step 2
doors.removeClass('door-down');
}, 300);
});
}, 300);
}, 300);
}
else
{
// Close doors
topDoor.animate({ top: '0%' }, 300);
botDoor.animate({ top: '50%' }, 300, function()
{
// Hide previous form
previousForm.hide();
// Show target form
form.show();
// Center layout
centerForm(form, true);
// Height of viewport
formViewport.animate({
height: form.data('height')+'px'
}, {
/* IE7 is a bit buggy, we must force redraw */
step: function(now, fx)
{
topDoor.hide().show();
botDoor.hide().show();
formSwitch.hide().show();
},
complete: function()
{
// Open doors
topDoor.animate({ top: '-50%' }, 300);
botDoor.animate({ top: '105%' }, 300);
formSwitch.hide().show();
}
});
});
}
});
// Initial vertical adjust
centerForm(currentForm, false);
/*
* Center function
* @param jQuery form the form element whose height will be used
* @param boolean animate whether or not to animate the position change
* @param string|element|array any jQuery selector, DOM element or set of DOM elements which should be ignored
* @return void
*/
function centerForm(form, animate, ignore)
{
// If layout is centered
if (centered)
{
var siblings = formWrapper.siblings().not('.closing'),
finalSize = blocHeight+form.data('height');
// Ignored elements
if (ignore)
{
siblings = siblings.not(ignore);
}
// Get other elements height
siblings.each(function(i)
{
finalSize += $(this).outerHeight(true);
});
// Setup
container[animate ? 'animate' : 'css']({ marginTop: -Math.round(finalSize/2)+'px' });
}
};
/**
* Function to display error messages
* @param string message the error to display
*/
function displayError(message)
{
// Show message
var message = formWrapper.message(message, {
append: false,
arrow: 'bottom',
classes: ['red-gradient'],
animate: false // We'll do animation later, we need to know the message height first
});
// Vertical centering (where we need the message height)
centerForm(currentForm, true, 'fast');
// Watch for closing and show with effect
message.bind('endfade', function(event)
{
// This will be called once the message has faded away and is removed
centerForm(currentForm, true, message.get(0));
}).hide().slideDown('fast');
};
/**
* Function to display loading messages
* @param string message the message to display
*/
function displayLoading(message)
{
// Show message
var message = formWrapper.message('<strong>'+message+'</strong>', {
append: false,
arrow: 'bottom',
classes: ['blue-gradient', 'align-center'],
stripes: true,
darkStripes: false,
closable: false,
animate: false // We'll do animation later, we need to know the message height first
});
// Vertical centering (where we need the message height)
centerForm(currentForm, true, 'fast');
// Watch for closing and show with effect
message.bind('endfade', function(event)
{
// This will be called once the message has faded away and is removed
centerForm(currentForm, true, message.get(0));
}).hide().slideDown('fast');
};
});
</script>
</body>
</html>
This post has been edited by Java Neil: 16 September 2012 - 04:56 PM
MultiQuote
| 