<!VDNDOC "pageBase":"nvo_login","IniEvent":"PageIni","ResetSession":true,"NotValidLogin":true>
<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>VDN WebApp</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.top_content {
				width: 100%;
				height: 200px;
				background-color: #0064C8;
				text-align: center;
				vertical-align: middle;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
				font-size: 25pt;
				font-weight: bold;
				line-height: 35px;
			}
			
			.icon_size {
				font-size: 50pt;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-content-padded {
				margin-top: 5px;
			}
			
			.mui-btn {
				padding: 10px;
			}
		</style>

	</head>

	<body>
		<!--
        	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
        -->
		<div class="mui-content">
			<div class="top_content">
				<div>
					<span class="icon_size mui-icon mui-icon-contact"></span>
					<div class="mui-content-padded">VDN WebAPP</div>
				</div>
			</div>
			<form id='login-form' class="mui-input-group" method="post">
				<div class="mui-input-row">
					<label><nobr>用户名</nobr></label>
					<input name="account" id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row mui-password">
					<label>密码</label>

					<input name="password" id='password' showpassword="1" type="password" class="mui-input-clear mui-input mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-content-padded">
					<button name='login' id='login' class="mui-btn mui-btn-block mui-btn-primary" onclick="javascript:this.disabled = false;">登录</button>
					<button type="button" id='login_ajax' class="mui-btn mui-btn-block mui-btn-primary" data-loading-text="提交中">Ajax登录</button>
					<a name='wx_login' href="wxlogin.html" class="mui-btn mui-btn-block mui-btn-primary">微信登录</a>
				</div>
				<div class="mui-content-padded oauth-area">
				</div>
				<!--INCLUDE:t_ret-->
				<script type="text/javascript" src="js/mui.min.js"></script>
				<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
				<script type="text/javascript" src="js/vdn.js"></script>
				<script type="text/javascript">
					$(function() {
						//取消回车自动提交
						$('input:text:first').focus();
						var $inp = $('input');
						$inp.bind('keydown', function(e) {
							var key = e.which;
							if(key == 13) {
								if(e.target.type == "text") {
									e.preventDefault();
									var nxtIdx = $inp.index(this) + 1;
									$(":input:eq(" + nxtIdx + ")").focus();
								}
							}
						});

						//Ajax登录
						$("#login_ajax").bind("tap", function() {
							mui("#login_ajax").button('loading');
							vdn.post({
									method: 'nvo_login.login_ajax',
									params: [$('#account').val(), $('#password').val()]
								}, function(data) {
									//这里直接返回URL
									$(location).prop('href', data.Result);
								},
								function(err) {
									alert(err.Message + "(" + err.Code.toString() + ")");
									mui("#login_ajax").button('reset');
								});
						});
						//form提交
//						$("#login-form").bind("submit", function() {
//							mui("#login").button('loading');
//						});

					});
				</script>
			</form>
		</div>
	</body>

</html>