{{template "home/header_box.html" .}}
<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 . "register"}}</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" for="email">{{msg . "email"}}</label>
					<input type="text" class="form-control" id="email" name="email"> 
				</div>
				<div class="form-group"> 
					<label class="control-label" for="pwd">{{msg . "password"}}</label>
					<input type="password" class="form-control" id="pwd" name="pwd">
					{{msg . "passwordTips"}} 
				</div>
				<div class="form-group"> 
					<label class="control-label" for="pwd2">{{msg . "password2"}}</label>
					<input type="password" class="form-control" id="pwd2" name="pwd2" >
				</div>
				
				<button id="registerBtn" class="btn btn-success">{{msg . "register"}}</button>
				
				<div class="line line-dashed"></div>
				
				<p class="text-muted text-center"><small>{{msg . "hadAcount"}}</small></p>
				
				<a id="loginBtn" href="/login" class="btn btn-default btn-block">{{msg . "login"}}</a>
			</form>		
		</div>
    </div>
</section>

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

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

<script>
$(function() {
	$("#email").focus();
	
	function showMsg(msg, id) {
		$("#loginMsg").html(msg).show();
		if(id) {
			$("#" + id).focus();
		}
	}
	function hideMsg() {
		$("#loginMsg").hide();
	}
	$("#registerBtn").click(function(e){
		e.preventDefault();
		var email = $("#email").val();
		var pwd = $("#pwd").val();
		var pwd2 = $("#pwd2").val();
		if(!email) {
			showMsg("{{msg . "inputEmail"}}", "email");
			return;
		} else {
			var myreg = /^([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9\-_]+@([a-zA-Z0-9\-]+[_|\_|\.|\-]?)*[a-zA-Z0-9\-]+\.[0-9a-zA-Z]{2,6}$/;
			if(!myreg.test(email)) {
				showMsg("{{msg . "wrongEmail"}}", "email");
				return;
			}
		}
		if(!pwd) {
			showMsg("{{msg . "inputPassword"}}", "pwd");
			return;
		} else {
			if(pwd.length < 6) {
				showMsg("{{msg . "notGoodPassword"}}", "pwd");
				return;
			}
		}
		if(!pwd2) {
			showMsg("{{msg . "inputPassword2"}}", "pwd2");
			return;
		} else {
			if(pwd != pwd2) {
				showMsg("{{msg . "confirmPassword"}}", "pwd2");
				return;
			}
		}
		
		$("#registerBtn").html("{{msg . "ing"}}...").addClass("disabled");
		// hideMsg();
		
		var iu = "{{.iu}}";
		
		$.post("/doRegister", {email: email, pwd: pwd, iu: iu}, function(e) {
			$("#registerBtn").html("{{msg . "register"}}").removeClass("disabled");
			if(e.Ok) {
				$("#registerBtn").html("{{msg . "registerSuccessAndRdirectToNote"}}");
				var from = $("#from").val() || "{{.noteUrl}}" || "/note";
				location.href = from;
			} else {
				showMsg(e.Msg, "email");
			}
		});
		
	});
});
</script>
</body>
</html>