<script type="text/javascript">
function validateSignin() {	
	// make ajax call to validate() function in Signin Controller
	$.ajax({
		type: 'post',
		url: '/sign-in/validate',
		dataType: 'json', data: $('#signinForm').serialize(),
		success: function (rets) {
			var countRets = TPF.countJSON(rets);
			TPF.setFormError('#signinForm', '', ''); // clear errors
			if (countRets > 0)
			{
				TPF.setFormError('#signinForm', rets[0]['field'], rets[0]['msg']);
				TPF.focusField('#signinForm', rets[0]['field']);	
			} else {
				TPF.delaySubmit('#signinForm', 300);	// delay submit() to avoid flooding
				return true;
			}
		}
	});
	return false;
}
</script>
<form id="signinForm" action="/sign-in" method="post" onsubmit="return validateSignin()">
	<a href="http://demo.thinphp.com/app/ext/authentication/src/oauth_google.php?refresh" class="signin_google"><img border="0" src="/web/img/oauth/google_32.png" /></a>
	<a href="http://demo.thinphp.com/app/ext/authentication/src/oauth_facebook.php?refresh" class="signin_facebook"><img border="0" src="/web/img/oauth/facebook_32.png" /></a>
	<a href="http://demo.thinphp.com/app/ext/authentication/src/oauth_twitter.php?refresh" class="signin_twitter"><img border="0" src="/web/img/oauth/twitter_32.png" /></a>
	
	<span>Username</span>
	<input name="username" type="text"><span class="fmsg"></span>
	<span>Password</span>
	<input name="password" type="password">

	<input id="signinSubmit" name="signinSubmit" type="submit" value="Sign in">
</form>
<script type="text/javascript">
	//$(".signin_google").colorbox({ width:"65%", height:"65%", iframe:true });	
</script>