{{template "home/header_box.html" .}}

<!-- 验证码 -->
<script type="text/x-jsrender" id="tCaptcha">
	<div class="form-group"> 
		<label class="control-label">{{rawMsg . "captcha"}}</label>
	    <input type="text" class="form-control" id="captcha" name="captcha">
	    <a id="reloadCaptcha" title="{{msg . "reloadCaptcha"}}" onclick="$('#captchaImage').attr('src', '/captcha/get?' + ((new Date()).getTime()))"><img src="/captcha/get" id="captchaImage"/></a>
	</div>
</script>
<section id="box"  class="animated fadeInUp">
	<!--
	<div>
		<a class="back" href="javascript:history.go(-1);" tabindex="-1">←Back</a>
	</div>
	-->
	<div>
		<h1 id="logo">leanote</h1>
		<div id="boxForm">
			<div id="boxHeader">{{msg . "login"}}</div>
			<form>
				<div class="alert alert-danger" id="loginMsg"></div>
				<input id="from" type="hidden" value="{{.from}}" />
				<div class="form-group">
					<label class="control-label">{{msg . "usernameOrEmail"}}</label>
					<input type="text" class="form-control" id="email" name="email" value="{{.email}}"> 
				</div>
				<div class="form-group"> 
					<label class="control-label">{{msg . "password"}}</label>
				    <input type="password" class="form-control" id="pwd" name="pwd">
				</div>
				
				<div id="captchaContainer">
					
				</div>
				
				<div class="clearfix">
					<a href="/findPassword" class="pull-right m-t-xs"><small>{{msg . "forgetPassword"}}</small></a>
					<button id="loginBtn" class="btn btn-success">{{msg . "login"}}</button>
				</div>
				<div class="line line-dashed"></div>
				
				<a href="#" id="github" class="btn btn-github btn-block m-b-sm"><i class="fa fa-github pull-left"></i>{{msg . "use"}} Github</a>
				
				<div class="line line-dashed"></div>
				
				<p class="text-muted text-center"><small>{{msg . "hasAcount"}}</small></p>
				
				{{if .openRegister}}
				<a href="/register" class="btn btn-default btn-block">{{msg . "register"}}</a>
				{{end}}
				
				{{msg . "or"}}
				
				<a id="loginBtn" href="/demo" class="btn btn-default btn-block">{{msg . "try"}}</a>
			</form>	
		</div>
    </div>
</section>

<div id="boxFooter">
	<p>
		<a href="/index">{{msg . "home"}}</a>
	</p>
	<p>
		<a href="/index">leanote</a> © 2014
	</p>
</div>

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

<script>
$(function() {
	var needCaptcha = {{.needCaptcha}};
	
	if(needCaptcha){
		$("#captchaContainer").html($("#tCaptcha").html());
	}
	
	$("#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();
		var captcha = $("#captcha").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;
			}
		}
		if(needCaptcha && !captcha) {
			showMsg("{{msg . "inputCaptcha"}}", "captcha");
			return;
		}
		
		$("#loginBtn").html("{{msg . "logining"}}...").addClass("disabled");
		// hideMsg();
		
		$.post("/doLogin", {email: email, pwd: pwd, captcha: $("#captcha").val()}, function(e) {
			$("#loginBtn").html("{{msg . "login"}}").removeClass("disabled");
			if(e.Ok) {
				$("#loginBtn").html("{{msg . "loginSuccess"}}...");
				var from = $("#from").val() || "{{.noteUrl}}" || "/note";
				location.href = from;
			} else {
				if(e.Item && $.trim($("#captchaContainer").text()) == "") {
					$("#captchaContainer").html($("#tCaptcha").html());
					needCaptcha = true
				}
				
				showMsg(e.Msg);
			}
		});
	});
	
	// github
	$("#github").click(function() {
		$(this).button("loading");
		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>