<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;" >
登录通行证
<a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>
</div>
<div class="ui-dialog-content">
<form id="login-form" action="/login" method = "post">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" name="username" type="text" placeholder="用户名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" name="password" type="password" placeholder="密码" />
</div>
<div class="ui-dialog-l40 test">
<a href="#">忘记密码</a>
</div>
<div>
<input class="ui-dialog-submit" type="submit" value="登录">
</div>
<div class="ui-dialog-l40 message">
<a href="javascript:;">立即注册</a>
</div>
</form>
<form id="register-form" action="/signup" method = "post">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" id="username" name="username" type="text" placeholder="用户名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" id="password" name="password" type="password" placeholder="密码" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-email" id="email" name="email" type="email" placeholder="邮箱" />
</div>
<div class="ui-dialog-pt15">
<input class="ui-dialog-submit" type="submit" value="注册">
</div>
<div class="ui-dialog-l40 message">
<a href="javascript:;">立刻登录</a>
</div>
</form>
<form id="forget-form" action="/forget" method = "post">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-email" name="email" type="email" placeholder="邮箱" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" name="password" type="password" placeholder="新密码" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" name="again_password" type="password" placeholder="再次输入新密码" />
</div>
<div class="ui-dialog-pt15">
<input class="ui-dialog-submit" type="submit" value="确认">
</div>
<div class="ui-dialog-l40 test">
<a href="javascript:;">立刻登录</a>
</div>
</form>
</div>
</div>
var dialogInstace , onMoveStartId;
function g(id){return document.getElementById(id);}
function autoCenter( el ){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = (bodyW-elW)/2 + 'px';
el.style.top = (bodyH-elH)/2 + 'px';
}
function fillToBody( el ){
el.style.width = document.documentElement.clientWidth +'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
function Dialog( dragId , moveId ){
var instace = {} ;
instace.dragElement = g(dragId);
instace.moveElement = g(moveId);
instace.mouseOffsetLeft = 0;
instace.mouseOffsetTop = 0;
instace.dragElement.addEventListener('mousedown',function(e){
var e = e || window.event;
dialogInstace = instace;
instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ;
})
return instace;
}
document.onmouseup = function(e){
dialogInstace = false;
clearInterval(onMoveStartId);
}
document.onmousemove = function(e) {
var e = e || window.event;
var instace = dialogInstace;
if (instace) {
var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;
instace.moveElement.style.left = Math.min( Math.max( ( e.pageX - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
instace.moveElement.style.top = Math.min( Math.max( ( e.pageY - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";
}
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
};
Dialog('dialogDrag','dialogMove');
function onMoveStart(){
}
function showDialog(){
g('dialogMove').style.display = 'block';
g('mask').style.display = 'block';
autoCenter( g('dialogMove') );
fillToBody( g('mask') );
}
function hideDialog(){
g('dialogMove').style.display = 'none';
g('mask').style.display = 'none';
}
$('.message a').click(function () {
$("#forget-form").css('display','block');
$('form').animate({
height: 'toggle',
opacity: 'toggle'
}, 'slow');
});
$('.test a').click(function () {
$("#register-form").css('display','block');
$('form').animate({
height: 'toggle',
opacity: 'toggle'
}, 'slow');
});
$('#login-form').submit(function (event) {
event.preventDefault();
var form = $(this);
var formData = new FormData(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function(res) {
if (res.status === 0) {
message.showSuccess('登录成功');
location.href = "/"
}else if(res.status === 1){
message.showError('密码错误');
}else if(res.status === 2){
message.showError('用户名不存在');
$('#login-form')[0].reset();
}
},
error: function(err){
message.showError('服务器错误');
}
})
});
$('#register-form').submit(function (event) {
event.preventDefault();
var form = $(this);
var formData = new FormData(this);
var email = formData.get('email');
var username = formData.get('username');
var password = formData.get('password');
if(username === ""){
message.showError('用户名不能为空!');
return ;
}else if(password === ""){
message.showError('密码不能为空!');
return ;
}else if(email === ""){
message.showError('邮箱不能为空!');
return ;
}
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function(res) {
if (res.status === 0) {
message.showSuccess('注册成功');
$('#register-form .message a').click();
}else if(res.status === 1){
message.showError('该用户名已被注册');
}else if(res.status === 2){
message.showError('该邮箱已被注册');
$('#login-form')[0].reset();
}
},
error: function(err){
message.showError('服务器错误');
}
})
});
$('#forget-form').submit(function (event) {
event.preventDefault();
var form = $(this);
var formData = new FormData(this);
var email = formData.get('email');
var password = formData.get('password');
var again_password = formData.get('again_password');
if(email === ""){
message.showError('邮箱不能为空!');
return ;
}else if(password === ""){
message.showError('密码不能为空!');
return ;
}else if(again_password === ""){
message.showError('密码不能为空!');
return ;
}else if(password != again_password){
message.showError('两次密码不同,请重新输入!');
return ;
}
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
dataType: 'json',
success: function(res) {
if (res.status === 0) {
message.showSuccess('修改成功,请登录!');
location.href = "/"
}else if(res.status === 1){
message.showError('邮箱不存在!');
}
},
error: function(err){
message.showError('服务器错误');
}
})
});