login.html 8.13 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>登录</title>
<link
	href="/metronic_v4.5.4/plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<!-- Bootstrap style -->
<link href="/metronic_v4.5.4/plugins/bootstrap/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />

<!-- METRONIC style -->
<link href="/metronic_v4.5.4/css/components.css" rel="stylesheet"
	type="text/css" />

<style type="text/css">
body>.wrapper {
	background-image: url(/assets/img/bg_9b9dcb65ff.png);
	background-size: 100px;
	background-repeat: repeat;
	min-height: 800px;
	min-width: 630px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#loginPanel.dialog-shadow {
	width: 450px;
	/* height: 400px; */
	border: 1px solid #dadada;
	border-radius: 10px !important;
	position: absolute;
	box-shadow: 0 9px 30px -6px rgba(0, 0, 0, .2), 0 18px 20px -10px
		rgba(0, 0, 0, .04), 0 18px 20px -10px rgba(0, 0, 0, .04), 0 10px 20px
		-10px rgba(0, 0, 0, .04);
	background: url(/assets/img/dialog-gray-bg_42c40b3eb6.png) #fff bottom
		repeat-x;
	top: 50%;
	left: 50%;
	margin-left: -225px;
	margin-top: -300px;
	text-align: center;
	color: #333;
	opacity: .5;

	padding-bottom: 56px;

	animation: to_center 1s forwards;
	animation-delay: .2s;

	transition: all .3s ease;
}

@keyframes to_center
{
	0%   {margin-top: -300px;opacity: .5;}
	100% {margin-top: -270px;opacity: 1;}
}


h3 {
    font-size: 25px;
    font-weight: 600;
    color: #4a4a4a
}

.input-icon input {
	height: 48px;
	border-radius: 5px !important;
	transition: all .5s ease;
}

.input-icon input:FOCUS {
	border-color: #c2cad8;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}

.input-icon>i {
	margin-top: 16px;
}

#loginPanel #loginBtn.btn{
	border-radius: 6px !important;
    width: 378px;
    height: 48px;
    font-size: 20px;
    font-family: 微软雅黑;
    transition: all .3s ease;

    background: #5f7ed7;
    background: linear-gradient(#6f97e5,#527ed9);
    box-shadow: inset 0 1px 2px #7ea1e8 !important;
    color: #fff;
    text-shadow: #4f70b3 0 -1px 0;
    border: none;
}

#loginPanel #loginBtn.btn:HOVER {
	box-shadow: inset 0 1px 1px #7696de,inset 0 0 2px #627dca,inset 0 -2px 3px #5a77c7,inset 0 0 100px rgba(48,77,147,.4) !important;
}


#loginPanel.show_msg{
	top: calc(50% - 10px);
}

#loginPanel .alert{
	display: none;
	padding: 12px;
    margin-top: 21px;
    border-radius: 0 0 10px 10px !important;
    font-size: 13px;

    position: absolute;
    width: 100%;
    border-bottom: 1px solid #dadada;
}

#loginPanel .alert.login-success{
    color: #27a4b0;
    background: #abe7ed;
    border-color: #abe7ed;
}

#loginPanel .alert i{
    font-size: 16px;
    vertical-align: middle;
    margin: 0 5px 3px;
}

#loginPanel.show_msg .alert{
	display: block;
}

#captchaWrap{
	display: none;
	text-align: left;
    border-top: 1px solid #f3f2f2;
}

img.captcha-img{
	cursor: pointer;
}

.login-footer{
    position: fixed;
    width: 100%;
    bottom: 35px;
    text-align: center;
    color: #a6a6a6;
}

h3.logo-text{
	font-family: 华文楷体,华文细黑;
	font-size: 28px;
}
</style>
</head>

<body>
	<div class="wrapper ng-scope">
		<div id="loginPanel" class="dialog dialog-shadow">
			<br>
			<h3 class="logo-text">闵行公交调度系统  </h3>
			<hr>
			<form style="padding: 0px 35px;">
				<div class="form-group" style="margin-bottom: 0">
					<label></label>
					<div class="input-icon">
						<i class="fa fa-user font-gray"></i> <input type="text" name="userName"
							class="form-control" placeholder="输入用户名" autofocus="autofocus" autocomplete="off">
					</div>
				</div>

				<div class="form-group">
					<label></label>
					<div class="input-icon">
						<i class="fa fa-key font-gray"></i> <input type="password" name="password"
							class="form-control" placeholder="输入密码" >
					</div>
				</div>

				<div class="form-group" id="captchaWrap">
					<label></label>
					<div class="input-icon">
						<input type="text" name="captcha" style="width: 153px !important;"
							class="form-control input-inline input-medium" placeholder="输入验证码" >

						<span class="help-inline"> <img alt="验证码" class="captcha-img" title="点击刷新验证码"> </span>
					</div>
                </div>
			</form>
			<br><br>
			<div class="form-actions" >
                    <button type="button" class="btn blue-steel" id="loginBtn" disabled="disabled">登录</button>
            </div>

            <div class="alert alert-danger"></div>
		</div>

		<div class="login-footer"> © 2016 上海巴士拓华科技发展有限公司 Some Rights Reserved </div>
	</div>

<!-- jQuery -->
<script src="/metronic_v4.5.4/plugins/jquery.min.js" ></script>
<script src="/assets/plugins/jquery.base64.min.js" ></script>

<script>
!function(){
	var form = $('#loginPanel form')
		,nameInput = $('input[name=userName]', form)
		,pwdInput = $('input[name=password]', form)
		,msgAlert = $('#loginPanel .alert-danger');

	$('input', form).on('keyup', checkBtnStatus);

	function checkBtnStatus(){
		var es = $('input:visible', form);
		for(var i = 0, e; e = es[i++];){
			if($.trim($(e).val()) == ''){
				$('#loginBtn').attr('disabled', 'disabled');
				$('#loginPanel').removeClass('show_msg');
				return;
			}
		}
		$('#loginBtn').removeAttr('disabled');
	}

	nameInput.on('blur', checkStatus);
	//keyup 事件做延迟
	var uNameKeyup;
	nameInput.on('keyup', function(){
		if(uNameKeyup)
			return;
		uNameKeyup = true;
		setTimeout(function(){
			checkStatus();
			uNameKeyup = false;
		}, 200);
	});

	//密码框回车事件
	pwdInput.on('keyup', function(e){
		if (e.keyCode == 13)
			$('#loginBtn').click();
	});
	//验证码框回车事件
	$('input[name=captcha]').on('keyup', function(e){
		if (e.keyCode == 13)
			$('#loginBtn').click();
	});

	$('#loginBtn').on('click', function(){
		if(lock || $(this).attr('disabled')) return;
		var userName = nameInput.val()
			,pwd = fourBase64(pwdInput.val());

		login(userName, pwd);
	});

	var lock;
	function login(userName, pwd){
		lock = true;
		$('#loginBtn').attr('disabled', 'disabled');
		var params = {
				userName: userName,
				password: pwd,
				captcha: $('input[name=captcha]').val()
		};
		$.post('/user/login', params
			,function(rs){

			$('#loginPanel').addClass('show_msg');
			if(error(rs)){
				lock = false;
				$('#loginBtn').removeAttr('disabled');

				msgAlert.html('<i class="fa fa-times-circle"> </i> 登录失败，' + rs.msg);

				_captcha.refresh();
				checkStatus();
			}
			else{
				msgAlert.html('<i class="fa fa-check"> </i> 登录成功!');
				msgAlert.addClass('login-success');
				window.location.href = '/';
			}
		});
	}

	function checkStatus(){
		var t = nameInput.val();
		if(!t){
			hide();
			return;
		}

		$.get('/user/login/captchaStatus', {userName: t}, function(rs){
			if(rs >= 3)
				_captcha.show();
			else
				hide();
		});

		function hide(){
			if(!$("#captchaWrap").is(":hidden")){
				_captcha.hide();
				//隐藏提示消息
				msgAlert.html('');
				$('#loginPanel').removeClass('show_msg');
			}
		}
	}


	var _captcha = {
		show: function(){
			if($("#captchaWrap").is(":hidden")){
				$('#captchaWrap').fadeIn(500);
				_captcha.refresh();
				checkBtnStatus();
			}
		},
		refresh: function(){
			if($("#captchaWrap").is(":hidden"))
				return;
			$('#captchaWrap img.captcha-img').attr('src', '/captcha.jpg?t=' + Math.random());
		},
		hide: function(){
			$('#captchaWrap').hide();
			$('input[name=captcha]').val('');
		}
	};

	$('#captchaWrap img.captcha-img').on('click', function(){
		$(this).attr('src', '/captcha.jpg?t=' + Math.random());
	});

	function fourBase64(t){
		var ed = $.base64.encode;
		return ed(ed(ed(ed(t))));
	}

	function error(rs){
		return rs.status == 'ERROR' || rs.status == 500;
	}
}();
</script>
</body>
</html>