{{template "home/header_box.html" .}}
<section id="box">
	<div>
		<a class="back" href="javascript:history.go(-1);" tabindex="-1">←Back</a>
	</div>
	<div>
		<h1>leanote | {{msg . "login"}}</h1>
		<form class="form-inline" id="boxForm" >
			<div class="alert alert-danger" id="loginMsg"></div>
			<table>
				<tr>
					<td>
						<label for="email">{{msg . "usernameOrEmail"}}</label>
						<input type="text" class="form-control" id="email" name="email" value="{{.email}}"> 
					</td>
				</tr>
				<tr>
					<td>
				  	  	<label for="pwd">{{msg . "password"}}</label>
					    <input type="password" class="form-control" id="pwd" name="pwd">
					</td>
				</tr>
				<tr>
					<td>
						<button id="loginBtn" class="btn btn-success" style="width: 100%">{{msg . "login"}}</button> 
						<br />
						<a href="/findPassword">{{msg . "forgetPassword"}}</a>
						{{if .openRegister}}
						<br />
						<a href="/register">{{msg . "register"}}</a> 
						{{msg . "or"}}
						<a href="/demo">{{msg . "try"}}</a>
						<div style="border-top: 1px dashed #666;margin:2px 0">
						  {{msg . "3th"}}: <a id="github">github<i class="fa fa-github"></i></a>
						  <span id="thirdLoginLoading" style="display: none"> <img src="/images/loading-a-20-2.gif" />正在登录...</span> 
						</div>
						{{end}}
						
					</td>
				</tr>
			</table>
		</form>		
		<div id="quickLinks">
			<a href="/index">{{msg . "home"}}</a>
		</div>
    </div>
</section>

<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/bootstrap.js"></script>

<script>
$(function() {
	$("#email").focus();
	if($("#email").val()) {
		$("#pwd").focus();
	}
	function showMsg(msg, id) {
		$("#loginMsg").html(msg).show();
		if(id) {
			$("#" + id).focus();
		}
	}
	function hideMsg() {
		$("#loginMsg").hide();
	}
	$("#loginBtn").click(function(e){
		e.preventDefault();
		var email = $("#email").val();
		var pwd = $("#pwd").val();
		if(!email) {
			showMsg("{{msg . "inputUsername"}}", "email");
			return;
		}
		if(!pwd) {
			showMsg("{{msg . "inputPassword"}}", "pwd");
			return;
		} else {
			if(pwd.length < 6) {
				showMsg("{{msg . "wrongPassword"}}", "pwd");
				return;
			}
		}
		
		$("#loginBtn").html("{{msg . "logining"}}...").addClass("disabled");
		// hideMsg();
		
		$.post("/doLogin", {email: email, pwd: pwd}, function(e) {
			$("#loginBtn").html("{{msg . "login"}}").removeClass("disabled");
			if(e.Ok) {
				$("#loginBtn").html("{{msg . "loginSuccess"}}...");
				location.href = '/note';
			} else {
				showMsg(e.Msg, "pwd");
			}
		});
	});
	
	// github
	$("#github").click(function() {
		$("#thirdLoginLoading").show();
		location.href="https://github.com/login/oauth/authorize?access_type=&approval_prompt=&client_id=3790fbf1fc14bc6c5d85&redirect_uri=http%3A%2F%2Fleanote.com%2Foauth%2FgithubCallback&response_type=code&scope=user&state=";
	});
});
</script>
</body>
</html>