{{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 . "register"}}</h1>
		<form class="form-inline" id="boxForm">
			<div class="alert alert-danger" id="loginMsg"></div>
			<table>
				<tr>
					<td>
						<label for="email">{{msg . "email"}}</label>
						<input type="text" class="form-control" id="email" name="email">
					</td>
				</tr>
				<tr>
					<td>
				  	  	<label for="pwd">{{msg . "password"}}</label>
					    <input type="password" class="form-control" id="pwd" name="pwd">
					    {{msg . "passwordTips"}}
					</td>
				</tr>
				
				<tr>
					<td>
				  	  	<label for="pwd2">{{msg . "password2"}}</label>
					    <input type="password" class="form-control" id="pwd2" name="pwd2">
					</td>
				</tr>
				
				<tr>
					<td>
						<button id="registerBtn" class="btn btn-success" style="width: 100%">{{msg . "register"}}</button> 
					</td>
				</tr>
				
			</table>
		</form>		
		<div id="quickLinks">
			<a href="/login">{{msg . "login"}}</a>
			&nbsp;
			<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();
	
	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,3}$/;
			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();
		
		$.post("/doRegister", {email: email, pwd: pwd}, function(e) {
			$("#registerBtn").html("{{msg . "register"}}").removeClass("disabled");
			if(e.Ok) {
				$("#registerBtn").html("{{msg . "registerSuccessAndRdirectToNote"}}");
				location.href = '/note';
			} else {
				showMsg(e.Msg, "email");
			}
		});
		
	});
});
</script>
</body>
</html>