master

分支 (1)

管理

管理

master

go-game-client
/
forgetpassword.html

<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>锋迷五子棋游戏-找回密码页面</title>
		<!-- 样式标签 -->
		<style>
			.body_class{
				height: 100%;
				background-image: url(img/background.jpeg);
				background-size: 100% 100%;
				display: flex;/*设置当前的标签为 弹性盒子模型**/
				flex-direction: row;/*水平排列**/
				align-items: center;/*纵向居中**/
				justify-content: center; /*横向居中**/
			}

			.main_div{
				width: 400px;
				height: 250px;
				background-color: bisque;
				border-radius: 10px;
				box-shadow: 10px 10px 10px #888888;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.title_span {
				margin-top: 30px;
				font-size: 25px;
				font-family: "楷体";
				text-shadow: 5px 5px 5px black;
			}

			.item_div {
				margin-top: 15px;
			}

			.item_div3{
				margin-top: 15px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.div_bottom {
				margin-top: 30px;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
			}

		</style>
		<!-- js -->
		<script src="js/jquery.js"></script>
		<script>
			/**
			 * 找回密码
			 */
			function findPassword(btn){
				//获得用户账号
				var username = $("#username").val();

				//校验
				if(username == null || username.trim() == ""){
					//用户名为空
					alert("用户名不能为空！");
					return;
				}

				//禁用按钮 - 表示邮件已经发送
				btnDisTime(btn);

				//通过ajax 请求后端发送短信
				$.ajax({
					type: "POST",
					url: "http://localhost:8080/user/sendEmailCode",
					data: {
						username: username
					},
					success: function(data){
						if(data == 1){
							// alert("邮件发送成功");
						} else if(data == -1){
							alert("账号不存在！");
							//按钮恢复
							$(btn).removeAttr("disabled");
							$(btn).html("发送邮件");
							//关闭定时器
							clearTimeout(mytimeout);

						} else if(data == -2){
							// alert("邮件发送失败！");
						}
					}
				});
			}

			/**
			 * 按钮禁用的倒计时
			 */
			var time = 60;
			var mytimeout = null;
			function btnDisTime(btn){
				$(btn).attr("disabled", "disabled");
				//改变按钮的内容
				$(btn).html("邮件已发送...(" + time + ")");

				//开启定时器
				mytimeout = setTimeout(function(){

					//时间扣减
					time--;

					if(time > 0){
						btnDisTime(btn);
					} else {
						//结束递归
						//按钮恢复
						$(btn).removeAttr("disabled");
						$(btn).html("发送邮件");
						time = 60;
					}
				}, 1000);
			}


			/**
			 * 重置密码请求
			 */
			function updatePassword(){

				var username = $("#username").val();
				var newpassword = $("#newpassword").val();
				var code = $("#code").val();

				//参数校验
				$.ajax({
					type: "POST",
					url: "http://localhost:8080/user/updatePassword",
					data: {
						username: username,
						newpassword: newpassword,
						code: code
					},
					success: function(data){
						if(data == 1){
							alert("密码重置成功");
							//跳回登录页面
							location.href="index.html";
						} else if(data == -1){
							alert("无效或已过期的验证码");
						} else if(data == -2){
							alert("验证码错误");
						}
					}
				});
			}
		</script>
	</head>
	<!-- 网页体 -->
	<body class="body_class">

		<!-- 登录注册的背景框 -->
		<div class="main_div">

			<span class="title_span">找回密码</span>

			<div class="item_div">
				账号：<input id="username" placeholder="请输入用户名"/> <button onclick="findPassword(this)">发送邮件</button>
			</div>

			<div class="item_div">
				重置密码：<input id="newpassword" placeholder="请输入新密码"/>
			</div>

			<div class="item_div">
				验证码：<input id="code" placeholder="验证码" style="width: 50px;"/>
			</div>

			<div class="div_bottom">
				<button onclick="updatePassword()" style="width: 100%; height: 100%;">重置密码</button>
			</div>
		</div>

	</body>
</html>