sync/www/login.html

70 lines
2.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CyTube - Login</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
</head>
<body>
<form class="form-horizontal" action="javascript:void(0)">
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="pw">Password</label>
<div class="controls">
<input type="password" id="pw">
</div>
</div>
<div class="control-group" style="display: none" id="pw2div">
<label class="control-label" for="pw2" id="confirm">Confirm Password</label>
<div class="controls">
<input type="password" id="pw2">
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn" id="login">Login</button>
<button class="btn" id="register">Register</button>
</div>
</div>
</form>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var source;
var respond = function(e) {
if(e.data == "cytube-syn") {
source = e.source;
source.postMessage("cytube-ack", document.location);
}
}
window.addEventListener("message", respond, false);
$("#login").click(function() {
$.getJSON("api/json/login?name="+$("#username").val()+"&pw="+$("#pw").val(), function(data) {
data.uname = $("#username").val();
source.postMessage("cytube-login:"+JSON.stringify(data), document.location);
});
});
$("#register").click(function() {
if($("#pw2div").css("display") == "none") {
$("#pw2div").css("display", "");
return false;
}
else if($("#pw2").val() != $("#pw").val()) {
$("#confirm").addClass("text-error");
return;
}
$.getJSON("api/json/register?name="+$("#username").val()+"&pw="+$("#pw").val(), function(data) {
console.log(data);
data.uname = $("#username").val();
source.postMessage("cytube-login:"+JSON.stringify(data), document.location);
});
});
</script>
</body>
</html>