    <?php require "layout/header.php" ?>

    <?php require "layout/pageBanner.php" ?>
    	
    <!-- content -->
    <section class="content pagecontent">
    	<div class="container">
			<div class="content-box  panel-shadow">
				<div class="page-title">
					<h2 class="title border-theme"><span class="text-theme">重置密码</span></h2>
				</div>
				<!--重置密码表单-->
				<form class="form-horizontal validate-form" id="resetPS" method="post" autocomplete="off">
					<div class="crumbs nolink" id="crumbs">
						<ul>
							<li><a href="javascript:void(0)">发送确认邮件</a></li>
							<li><a href="javascript:void(0)">进行安全验证</a></li>
							<li class="active"><a href="javascript:void(0)">设置新密码</a></li>
						</ul>
					</div>
					<div class="alert alert-info mb10" role="alert">您的邮箱验证已通过，请重新设置您的登录密码</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>新密码:</label>
						<div class="col-sm-4">
							<input class="form-control" id="password" name="password" value="" type="password" maxlength="254">
							<div class="ps-letter">
	                            <span class="letter-group" id="strengthL">弱</span>
	                            <span class="letter-group" id="strengthM">中</span>
	                            <span class="letter-group" id="strengthH">强</span>
	                         </div>
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>6-16个字符，请使用字母加数字或符号的组合密码。请不要单独使用数字、字母或符号</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>确认新密码:</label>
						<div class="col-sm-4">
							<input class="form-control" id="rePassword" name="rePassword" value="" type="password" maxlength="254" disabled="">
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>请再输一次新密码!</p>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<button type="button" class="btn btn-theme btn-block mt10 btn-confirm" id="submitReset">确定提交</button>
						</div>
					</div>
				</form>
				
				<!--密码修改成功-->
				<div class="content-box success-group dis-none" id="resetSuccess">
					<img src="image/default_success_bg.png" >
					<div class="success-title mt-15">密码修改成功！</div>
					<p class="success-info mb10">请使用您设置的新密码重新登录</p>
					<a href="index.php?modal=modalLogin" class="btn btn-theme">现在登录</a>
				</div>
				
				<!--过期、错误或已修改-->
				<div class="content-box success-group dis-none" id="resetError">
					<img src="image/default_error_bg.png" >
					<div class="success-title mt-15"></div>
					<p class="success-info mb10"></p>
					<a href="index.php?modal=modalLogin" class="btn btn-theme" id="backToMain">返回首页登录</a>
					<button type="button" class="btn btn-theme ml10" id="resendEmail">重新发送确认邮件</button>
					<a href="forgetPS.php" class="btn btn-default ml10" id="stepBack">返回重新填写邮箱</a>
				</div>
			</div>
		</div>
	</section>
    <?php require "layout/footer.php" ?>

    <script>$(function(){$("#pageName").text("重置密码")})</script>
    	
    <script type="text/javascript">
    	
    	$(function(){
	    	//验证密码强度
			$("#password").on("keyup",function(){
				var val = $(this).val();
				$("#rePassword").val("").removeClass("error").next("label.error").remove();
				if($.trim(val)){
					switch(checkStrong(val)){
		                case 0:
		                case 1:
		                    $("#strengthL").attr("class","letter-group low");
		                    $("#strengthM, #strengthH").attr("class","letter-group");
		                    $("#rePassword").attr("disabled",true);
		                    break;
		                case 2:
		                	$("#strengthL, #strengthM").attr("class","letter-group medium");
		                	$("#strengthH").attr("class","letter-group");
		                    $("#rePassword").attr("disabled",false);
		                    break;
		                default:
		                	$("#strengthL, #strengthM, #strengthH").attr("class","letter-group strong");
		                    $("#rePassword").attr("disabled",false);
		            }
				}else{
					$("#strengthL, #strengthM, #strengthH").attr("class","letter-group");
					$("#rePassword").attr("disabled",true);
				}
			});
		});
	</script>
</body>
</html>
