<%@ page import="java.security.Principal" %>
<%@ page import="java.io.PrintWriter" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	// nginx proxy: proxy_set_header 	X-Scheme 	$scheme; 
	String scheme = request.getHeader("X-Scheme");
	if (scheme == null) {
		scheme = request.getScheme();
	}
	int port = request.getServerPort();
	String basePath = scheme + "://" + request.getServerName() + ((port == 80 || port == 443) ? "" : (":" + port)) + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>找回密码 - 优软云</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="<%=basePath%>">
<link rel="shortcut icon" href="static/img/icon.png">
<link rel="stylesheet" type="text/css"
	href="static/lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="static/lib/css/toastr.min.css">
	<link rel="stylesheet" type="text/css"
		  href="static/lib/keyboard/css/softkeys-0.0.1.css">
	<link rel="stylesheet" type="text/css" href="static/css/pwd.css" />
<meta name="referrer" content="origin" />
	<style>
		input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
			-webkit-transition-delay: 99999s;
			-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
			/* -webkit-box-shadow: 0 0 0px 1000px white inset; */
		}
	</style>
</head>
<body>
	<!-- old brower Start -->
	<jsp:include page="../common/brower_tip.jsp" />
	<!-- old brower End -->
	<!-- header Start -->

	<nav class="x-navbar">
		<div class="container">
			<div class="navbar-header">
				<span class="navbar-brand">密码找回</span>
			</div>
			<div class="collapse navbar-collapse navbar-right">
				<span class="navbar-text"> 想起密码了？ <a
					href="sso/login?appId=${appId}&returnURL=${returnURL}" class="x-text-link">立即登录</a> <a
					href="changeAdmin/changeAdmin" class="x-text-link">更换管理员</a>
				</span>
			</div>
		</div>
	</nav>
	<!-- header End -->
	<!-- content Start -->
	<div class="x-content">
		<div class="container">
			<div class="pwd-wrap">
				<ul class="list-unstyled list-inline x-step">
					<li class="active">1.初步验证<img src="static/img/nav-point.png" style="display: none" alt=""></li>
					<li>2.密保验证<img src="static/img/nav-point.png" style="display: none" alt=""></li>
					<li>3.设置新密码<img src="static/img/nav-point.png" style="display: none" alt=""></li>
					<li>4.完成<img src="static/img/nav-point.png" style="display: none" alt=""></li>
				</ul>
				<div class="x-step-content">
					<div class="x-form-wrap" style="padding: 40px">
						<!-- 初步验证 -->
						<div id="firstStep">
							<!-- 验证方式选择 -->
							<div class="check-rule-area">
								验证方式：
								<label class="check-rule">
									<input type="radio" value="telCheck" id="telCheck"
										   placeholder="手机验证" name="checkType"  checked>手机验证
									<label for="telCheck"></label>
								</label>
								<label class="check-rule">
									<input type="radio" value="emailCheck" id="emailCheck"
										   placeholder="邮箱验证" name="checkType">邮箱验证
									<label for="emailCheck"></label>
								</label>
							</div>
							<!-- 手机号验证 -->
							<form id="checkForm" name="checkForm" class="pwd-form-group">
								<div class="form-group">
									<div class="step-form-line">
										<span>手机号：</span>
										<input type="text" class="form-control x-input"
											   x-pattern="^1[0-9]{10}$" id="tel"
											    placeholder="请输入手机号" name="tel" required x-error-by="tel_err" autocomplete="off" x-help-by="tel_help">
										<div id="tel_help" class="x-text-help" style="display: none">
											<img src="static/img/input-check-yes.png" alt="">
										</div>
										<div id="tel_err" class="x-text-error"
											 style="display: none">请输入正确的手机号
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="step-form-line">
										<span>验证码：</span>
										<span class="valid-code-area">
											<input type="text" class="form-control x-input" id="validCode"
												   placeholder="请输入验证码" name="validCode" required x-pattern="^[0-9]{6}$"
												   x-error-by="validCode_err" autocomplete="off" x-help-by="validCode_help">
											<button class="btn x-btn btn-lg x-btn-default x-btn-code" style="padding:0px;line-height: 34px;" disabled type="button">获取验证码</button>
										</span>
										<div id="validCode_help" class="x-text-help" style="display: none">
											<img src="static/img/input-check-yes.png" alt="">
										</div>
										<div id="validCode_err" class="x-text-error" style="display: none">验证码错误
										</div>
									</div>
								</div>
								<a class="pwd-btn-next btn btn-lg x-btn x-btn-primary x-btn-submit btn-block"
								   type="button">下一步</a>
							</form>
							<!-- 邮箱验证 -->
							<form id="emailCheckForm" name="emailCheckForm" class="x-form x-form-lg pwd-form-group"
								  style="display: none">
								<div class="form-group">
									<div class="step-form-line">
										<span>邮箱：</span>
										<input type="text" class="form-control"
											   x-pattern="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
											   placeholder="请输入邮箱" autocomplete="off" name="email" required x-help-by="email_help"
											   x-error-by="email_err">
										<div class="">
											<div id="email_help" class="x-text-help" style="display: none">
												<img src="static/img/input-check-yes.png" alt="">
											</div>
											<div id="email_err" class="x-text-error"
												 style="display: none">请输入正确的邮箱
											</div>
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="step-form-line">
										<span>验证码：</span>
										<span class="valid-code-area">
											<input type="text" class="form-control" x-error-by="emailCode_err"
												   x-help-by="emailCode_help"
												   placeholder="请输入验证码" autocomplete="off" name="validEmailCode" required
												   x-error-text="请输入验证码">
										<button class="btn x-btn btn-lg x-btn-default x-btn-emailCode" style="padding:0px;line-height: 34px;" disabled type="button">获取验证码</button>
										</span>
										<div id="emailCode_help" class="x-text-help" style="display: none">
											<img src="static/img/input-check-yes.png" alt="">
										</div>
										<div id="emailCode_err" class="x-text-error" style="display: none">验证码错误
										</div>
									</div>
								</div>
								<a class="btn btn-lg x-btn x-btn-primary x-btn-submit btn-block pwd-btn-next"
								   type="button">下一步</a>
							</form>
							<div class="link-server">若以上方法均不能使用，请联系客服。<a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank">在线客服</a></div>
						</div>
						<div id="secondStep" style="display: none">
							<!-- 密保验证 -->
							<form id="encryptedCheckForm" name="encryptedCheckForm" class="x-form x-form-lg">
								<div class="form-group pwd-question">
									密保问题一：<span class="question-first">xxxxxxx</span>
								</div>
								<div class="form-group">
									<div class="step-form-line">
										<span>答案：</span>
										<input type="text" name="answer-first" required
											   autocomplete="off"  class="answer-first" x-error-by="answer-first_err"
											   x-help-by="answer-first_help">
										<div class="x-input-addon">
											<div id="answer-first_help" class="x-text-help" style="display: none">
												<img src="static/img/input-check-yes.png" alt="">
											</div>
											<div id="answer-first_err" class="x-text-error"
												 style="display: none">请输入正确的答案
											</div>
										</div>
									</div>
								</div>
								<div class="form-group pwd-question">
									密保问题二：<span class="question-second"></span>
								</div>
								<div class="form-group">
									<div class="step-form-line">
										<span>答案：</span>
										<input type="text" name="answer-second" required
											   autocomplete="off"  class="answer-second" x-error-by="answer-second_err"
											   x-help-by="answer-second_help">
										<div class="x-input-addon">
											<div id="answer-second_help" class="x-text-help" style="display: none">
												<img src="static/img/input-check-yes.png" alt="">
											</div>
											<div id="answer-second_err" class="x-text-error"
												 style="display: none">请输入正确的答案
											</div>
										</div>
									</div>
								</div>
								<a class="pwd-btn-next btn btn-lg x-btn x-btn-primary x-btn-submit btn-block"
								   type="button">下一步</a>
							</form>
							<form id="noEncryptedForm" name="noEncryptedForm" class="x-form x-form-lg"
								  style="display: none">
								<div style="text-align:center">
									您尚未设置密保，请联系客服协助处理
								</div>
							</form>
							<div class="link-server">若以上方法不能使用，请联系客服。<a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank">在线客服</a></div>
						</div>
						<div id="thirdStep" style="display: none">
							<!-- 设置新密码 -->
							<form name="resetForm" class="x-form x-form-lg" autocomplete="off">
								<div class="form-group step-form-line">
									<span>设置新密码：</span>
									<span class="password-input-area">
								    <input type="password" class="form-control" id="password"
										   placeholder="设置新密码" name="password" required x-error-by="password_err" x-help-by="password_help"
										   x-error-text="密码为8-20位字母、数字组合密码" autocomplete="off">
                                    <img src="static/img/keyboard.png" id="keyboard1" alt="">
										<div class="softkeys softkeys1" style="display: none" data-target="input[name='password']"></div>
                                </span>
									<div class="x-input-addon">
										<div id="password_help" class="x-text-help" style="display: none">
											<img src="static/img/input-check-yes.png" alt="">
										</div>
										<div id="password_err" class="x-text-error"
											 style="display: none">请输入8-20位字母、数字组合密码
										</div>
									</div>
								</div>
								<div class="form-group step-form-line">
									<span>再次输入密码：</span>
									<span class="password-input-area">
								    <input type="password" class="form-control" id="passwordConfirm"
										   placeholder="再次输入密码" name="passwordConfirm" required
										   x-minlength="8" x-maxlength="20" x-error-by="passwordConfirm_err"
										   x-help-by="passwordConfirm_help" x-error-text="两次密码不一致" autocomplete="off">
                                    <img src="static/img/keyboard.png" id="keyboard2" alt="">
									<div class="softkeys softkeys2" style="display: none" data-target="input[name='passwordConfirm']"></div>
                                </span>
									<div class="x-input-addon">
										<div id="passwordConfirm_help" class="x-text-help" style="display: none">
											<img src="static/img/input-check-yes.png" alt="">
										</div>
										<div id="passwordConfirm_err" class="x-text-error"
											 style="display: none">两次密码不一致
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="safe-level">
										安全等级：
										<span>弱</span>
										<span>中</span>
										<span>强</span>
										<font id="passstrength" style="font-size: 12px; padding-left: 5px;"></font>
									</div>
								</div>
								<a class="btn btn-lg x-btn x-btn-primary x-btn-submit btn-block pwd-btn-next"
										type="button">下一步
								</a>
							</form>
						</div>
						<div id="fourthStep" style="display: none">
							<!-- 完成 -->
							<form name="finishForm" class="x-form x-form-lg">
								<div class="finish-step">
									<div>
										<img src="static/img/complete.png" alt="">
										<p>新密码设置成功</p>
										<span>请牢记您设置的密码</span>
									</div>
									<a href="http://www.usoftmall.com/" id="goBack">返回首页</a>
									<a id="toLogin">马上登录</a>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- content End -->
	<!-- footer Start -->
	<jsp:include page="../common/footer.jsp" />
	<!-- footer End -->
	<!-- loading box -->
	<div id="loading">
		<div class="x-loading-wrap"></div>
		<div class="x-loading">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
	<script src="static/lib/js/jquery.min.js"></script>
	<script src="static/lib/js/bootstrap.min.js"></script>
	<script src="static/lib/js/toastr.min.js"></script>
	<script src="static/js/base.js"></script>
	<script src="static/js/pwd.js"></script>
	<script src="static/lib/keyboard/js/softkeys-0.0.1.js"></script>
</body>
</html>