<#-- 登录页 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<base href="${baseURL}">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>登录 - ${title}</title>
		<meta name="keywords" content="${keywords}"/>
		<meta name="description" content="${description}"/>
		<link rel="shortcut icon" type="image/x-icon" href="${baseURL}${commonPath}images/favicon.ico" media="screen" />
		<link href="${commonPath}css/common.css" type="text/css" rel="stylesheet">
		<link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
		<script src="${commonPath}js/cryptoJS/core.js" language="javascript" type="text/javascript"></script>
		<script src="${commonPath}js/cryptoJS/sha256.js" language="javascript" type="text/javascript"></script>
		<script language="javascript" src="${commonPath}js/tool.js" type="text/javascript"></script>
		<script language="javascript" src="${commonPath}js/ajax.js" type="text/javascript"></script>
		<script language="javascript" src="${commonPath}js/json2.js" type="text/javascript"></script>
		<script type="text/javascript" src="${commonPath}js/jquery/jquery.min.js" language="javascript"></script>
    </head>
    <body>
    <#-- 引入页头 -->
    <@include action="${newPublic_2}"/>
   	<div class="skeleton">
		<div class="main wrap backgroundModule" >
	        <div class="loginModule" >
	        	<div class="tabs-nav">
		        	<div>
		        		<div id="local_tab" class="tabs-tab">
		        			<a href="javascript:void(0)" class="active">账号密码登录</a>
		        		</div>
	        			<div id="mobile_tab" class="tabs-tab">
	        				<a href="javascript:void(0)">手机号登录</a>
	        			</div>
		        	</div>
	        	</div>
	    		<div class="box">
	        		<div class="form">
						<!-- 令牌标记 -->
						<input type="hidden" id="token" name="token" value="${token}">
			        	<div class="form-field">
			        		<!-- form-field-container form-field-error -->
			        		<div id="account_field_error" class="form-field-container">
				        		<div class="form-field-text" >
				        			<div class="form-field-input-container">
					        			<input id="account" maxLength="40" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
					        			<!-- <label class="mi-floating-label form-field-active ">账号</label>-->
					        			<label class="form-field-label">账号</label>
				        			</div>
				        		</div>
				        		
			        			<div id="account_prompt_error" class="form-field-prompt-error"></div>
			        		</div>
			        	</div>
			        	<div class="form-field" >
			        		<div id="mobile_field_error" class="form-field-container">
				        		<div class="form-field-text">
				        			<div class="form-field-input-container">
					        			<input id="mobile" maxLength="11" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
					        			<label class="form-field-label">手机号</label>
				        			</div>
				        		</div>
			        			<div id="mobile_prompt_error" class="form-field-prompt-error"></div>
			        		</div>
			        	</div>
			        	<div class="form-field" >
			        		<div id="password_field_error" class="form-field-container">
				        		<div class="form-field-text">
				        			<div class="form-field-input-container">
					        			<input id="password" maxLength="20" class="form-field-text-input" type="password" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
					        			<label class="form-field-label">密码</label>
				        			</div>
				        		</div>
			        			<div id="password_prompt_error" class="form-field-prompt-error"></div>
			        		</div>
			        	</div>
			        	<div id="captchaValue_field" class="form-field" <#if formCaptcha.showCaptcha?c == 'false'>style='display: none;'</#if>>
				        	<div id="captchaValue_field_error" class="form-field-container">
				        		<div class="form-field-text">
						        	<div class="form-field-input-container">
							        	<input type="hidden" id="captchaKey" name="captchaKey" value="${formCaptcha.captchaKey}">
							        	<input id="captchaValue" class="form-field-text-input" type="text" maxlength="4" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
							        	<label class="form-field-label">验证码</label>
									</div>
							        <div class="form-field-image-container">
										<img id="captcha" src="captcha/${formCaptcha.captchaKey}.jpg" onClick="replaceCaptcha();" tabindex="4" />
										
							        </div>
							        <div class="form-field-button-container" style="background: #fff;">
							        	<button type="button" class="btn btn-link" tabindex="-1" onClick="replaceCaptcha();">换一幅</button>
							        </div>
							    </div>
							    <div id="captchaValue_prompt_error" class="form-field-prompt-error"></div>
							</div>
			        	</div>
		        	</div>
	        		<div id="token_prompt_error" style="color: red;">${(error['token'])!}</div>
	        		<div class="otherInfo">
	        			<a href="findPassWord/step1" tabindex="8">找回密码？</a>
							
						<label>
							<input id="rememberMe" name="rememberMe" type="checkbox" value="true"/>
							<span>自动登录</span>
						</label>
	        		</div>
	        		<div class="loginButton">
						<a href="javascript:void(0);" onClick="javascript:ajaxSubmit()" tabindex="6">登&nbsp;录</a>
					</div>
					
					<#-- 引入第三方登录模块 -->
					<@include action="${systemRelated_thirdPartyLogin_1}"/>
	        	</div>
	        </div>
	        <div class="push"><!-- 将页脚固定在页面底部 --></div>
		</div>
	</div>
	<#-- 引入页脚 -->
	<@include action="${newPublic_3}"/>
	<script language="javascript" type="text/javascript">
		$(".form-field").find(".form-field-input-container").bind("mousedown",function(e) {
			$(this).find(".form-field-text-input").focus();

			if($(this).find(".form-field-label").hasClass("form-field-active")){
				return;
			
			}
			$(this).find(".form-field-label").addClass("form-field-active");
		});
		
		$(document).mousedown(function (e) {
	        var target = $(e.target);
	        if (target.closest(".form-field-input-container").length == 0) {
	            $(".form-field-input-container").each(function(){
				    if($(this).find(".form-field-label").hasClass("form-field-active")){
						if($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == ""){
							$(this).find(".form-field-label").removeClass("form-field-active");
						}
						
					}
				});
	        }
	    });
		
		//监听Tab键
	    $(document).on('keyup',function (e) {
		    if(e.keyCode == 9){
		    	var input = $(this).find('input:focus');
		    	if (input.length) {
			    	if(!input.parent().parent().find(".form-field-label").hasClass("form-field-active")){
						input.parent().parent().find(".form-field-label").addClass("form-field-active");
					}
			    }
			}
		});
	    //解决提交按钮的click和blur事件冲突
		$(document).ready(function(){
			$("input[type='button']").mousedown(function(e){
		    	e.preventDefault();
			});
			$("a[href='javascript:void(0);']").mousedown(function(e){
		    	e.preventDefault();
			});
			
		});
	</script>
		
		
	<script language="javascript" type="text/javascript">	
		//选择账号类型
		$(document).ready(function(){
			//选择
			$(".tabs-nav").find(".tabs-tab").each(function(){
				if($(this).find("a").hasClass("active")){
					selectAccountType($(this).attr("id"));
				}
				
				$(this).bind("click",function(e) {
					$(".tabs-nav").find(".tabs-tab").each(function(){
						$(this).find("a").removeClass("active");
					});
					$(this).find("a").addClass("active");
					selectAccountType($(this).attr("id"));
				});
			});
		});
		
		function selectAccountType(id){
			if(id == "local_tab"){//本地账号密码用户
				$("#account_field_error").parent().show();
				$("#mobile_field_error").parent().hide();
				$("#smsCode_field_error").parent().hide();
			}
			if(id == "mobile_tab"){//手机用户
				$("#account_field_error").parent().hide();
				$("#mobile_field_error").parent().show();
				$("#smsCode_field_error").parent().show();
			}
		}
		
		
		//回车键登录
		$(document).keyup(function(event){
			if(event.keyCode ==13){
		    	ajaxSubmit();
			}
		});
		
		//点击输入框提示
		function inputBoxClickTip(obj){
		
		
		}
		//离开输入框提示
		function inputBoxOutTip(obj){
			verification(obj.id);
		}
		//验证参数
		function verification(field){
			$("#"+field+"_prompt_error").hide();
			$("#"+field+"_field_error").removeClass("form-field-error");
			
			if(field == "account"){//账号
				var account = $("#"+field).val().trim();
				if(account == ""){
					$("#"+field+"_prompt_error").html("账号不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				if(getStringLeng(account) < 3){
					$("#"+field+"_prompt_error").html("账号长度不能小于3位");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				if(getStringLeng(account) > 20){
					$("#"+field+"_prompt_error").html("账号长度不能大于20位");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				var pattern =  /^\w+$/;
				if(!pattern.test(account)){
					$("#"+field+"_prompt_error").html("账号只能输入由数字、26个英文字母或者下划线组成");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
			}
			if(field == "mobile"){//手机号
				var mobile = $("#"+field).val().trim();
				if(mobile == ""){
					$("#"+field+"_prompt_error").html("手机号不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				if(getStringLeng(mobile) < 11){
					$("#"+field+"_prompt_error").html("手机号不正确");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
			
			}
			
			if(field == "password"){//密码
				var password = $("#"+field).val().trim();
				if(password == ""){
					$("#"+field+"_prompt_error").html("密码不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				if(getStringLeng(password) < 6){
					$("#"+field+"_prompt_error").html("密码长度不能小于6位");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				if(getStringLeng(password) > 20){
					$("#"+field+"_prompt_error").html("密码长度不能大于20位");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
			}
	
			if(field == "captchaValue"){//验证码
				if(!$("#captchaValue_field").is(":hidden")){//如果验证码框显示
					var captchaKey = $("#captchaKey").val().trim();
					var captchaValue = $("#"+field).val().trim();
					if(captchaValue == ""){
						$("#"+field+"_prompt_error").html("验证码不能为空");
						$("#"+field+"_prompt_error").show();
						$("#"+field+"_field_error").addClass("form-field-error");
						return false;
					}
					
					get_request(function(value){
		            	if(value == "false"){
		            		$("#"+field+"_prompt_error").html("验证码错误");
							$("#"+field+"_prompt_error").show();
							$("#"+field+"_field_error").addClass("form-field-error");
		            	}
		            },
				 		"userVerification?captchaKey="+captchaKey+"&captchaValue="+captchaValue+"&timestamp=" + new Date().getTime(), true);
		            	
				}
			}
		}
		
		//更换验证码
		function replaceCaptcha(){
			var captchaKey = document.getElementById("captchaKey").value;
			document.getElementById("captcha").src = "captcha/"+captchaKey+".jpg?" + Math.random(); 
		}
		
		//组装参数
		function getParameter(){
			var parameter = "";
	
			//url跳转参数
			var jumpUrl = getUrlParam("jumpUrl");
			if(jumpUrl != null){
				parameter += "&jumpUrl="+encodeURIComponent(jumpUrl);
			}
			//令牌标记
			var token = $("#token").val();
			parameter += "&token="+token;
			
			//验证码Key
			parameter += "&captchaKey="+encodeURIComponent($("#captchaKey").val());
			
			//验证码值
			parameter += "&captchaValue="+encodeURIComponent($("#captchaValue").val());
	
			//用户类型
			if($("#local_tab").find("a").hasClass("active")){
				parameter += "&type=10";
				//账号
				parameter += "&account="+encodeURIComponent($("#account").val().trim());
			}
			if($("#mobile_tab").find("a").hasClass("active")){
				parameter += "&type=20";
				//手机号
				parameter += "&mobile="+encodeURIComponent($("#mobile").val().trim());
			}
		
			//密码需SHA256加密
			var password = $("#password").val().trim();
			if(password != ""){
				parameter += "&password="+ CryptoJS.SHA256(password);
			}
			
			//自动登录
			var rememberMe = $("input[id='rememberMe']:checked").val();
			if(rememberMe != null){
				parameter += "&rememberMe="+rememberMe;
			}
		
			//删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
			if(parameter.indexOf("&") == 0){
				parameter = parameter.substring(1,parameter.length);
			}
			return parameter;
		}
		
		//ajax提交
		function ajaxSubmit(){
			if(allVerification() == false){
				return;
			}
		
			var parameter = getParameter();
			
			post_request(function(value){
				if(value != ""){
					var returnValue = JSON.parse(value);//JSON转为对象
					
					var key_success = "";
					var key_error = null;
					var key_jumpUrl = null;
					var key_captchaKey = null;
					
					for(var key in returnValue){
						if(key == "success"){	
							key_success = returnValue[key];
						}else if(key == "error"){
							key_error = returnValue[key];
						}else if(key == "jumpUrl"){//跳转URL
							key_jumpUrl = returnValue[key];
						}else if(key == "captchaKey"){//显示验证码
							key_captchaKey = returnValue[key];
						}
					}
					
					//登录成功
					if(key_success == "true"){
						//跳转
						if(key_jumpUrl != null){
							window.location.href = (getBasePath()+key_jumpUrl);
						}
					}else{
						//显示错误
						if(key_error != null){
							for(var error in key_error){
								if(error != ""){
									if(error == "token"){//如果令牌错误
										//刷新当前页面
										window.location.reload();	
									}
									$("#"+error+"_prompt_error").html(key_error[error]);
									$("#"+error+"_prompt_error").show();
									$("#"+error+"_field_error").addClass("form-field-error");
								}
							}
						}
						if(key_captchaKey != null){
							$("#captchaValue_field").show();
							//设置验证码Key
							$("#captchaKey").val(key_captchaKey);
							//设置验证码图片
							replaceCaptcha();
						}
					}
				}	
			},
				"login?&timestamp=" + new Date().getTime(), true,parameter);
		}
		
		//验证全部参数
		function allVerification(){
			var isVerification = true;
			
			//用户类型
			if($("#local_tab").find("a").hasClass("active")){
				if(verification("account") == false){
					isVerification = false;
				}
			}
			if($("#mobile_tab").find("a").hasClass("active")){
				if(verification("mobile") == false){
					isVerification = false;
				}
			}
			
			
			
			if(verification("password") == false){
				isVerification = false;
			}
			return isVerification;
		}
	</script>	
    </body>
</html>