forked from mirror/MrDoc
129 lines
5.1 KiB
HTML
129 lines
5.1 KiB
HTML
{% load staticfiles %}
|
||
<!DOCTYPE html>
|
||
<html lang='zh-CN'>
|
||
<head>
|
||
<title>忘记密码 - MrDoc</title>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" crossorigin="anonymous">
|
||
<style>
|
||
body{
|
||
background-color: #fafafa;
|
||
text-align: center;
|
||
}
|
||
.container{
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.login-form{
|
||
margin-top: 15%;
|
||
{#width: 400px;#}
|
||
padding: 20px 50px 20px 60px;
|
||
background-color: #fff;
|
||
-webkit-box-shadow: #666 0px 0px 10px;
|
||
-moz-box-shadow: #666 0px 0px 10px;
|
||
box-shadow: #666 0px 0px 10px;
|
||
}
|
||
.register-link{
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div></div>
|
||
<div></div>
|
||
<div class="login-form">
|
||
<form class="layui-form" action="{% url 'forget_pwd' %}" method='POST'>
|
||
{% csrf_token %}
|
||
<div class="layui-form-item">
|
||
<h2><strong>忘记密码 - MrDoc</strong></h2>
|
||
</div>
|
||
<span style='color:red;margin-bottom: 10px;'>{{ errormsg }}</span>
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="email" id="email" required lay-verify="required" placeholder="请输入注册邮箱" class="layui-input">
|
||
</div>
|
||
<button class="layui-btn layui-btn-normal" type="button" id="send_email_vcode" onclick="getCode(this)">发送验证码</button>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<input type="text" name="vcode" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<input type="password" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<input type="password" name="confirm_password" required lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-normal" lay-submit type="submit">修改密码</button>
|
||
</div>
|
||
<a href="{% url 'login' %}" class="register-link">返回登录</a>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
|
||
<script src="{% static 'layui/layui.all.js' %}"></script>
|
||
<script>
|
||
$.ajaxSetup({
|
||
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
|
||
});
|
||
layer = layui.layer;
|
||
btn = $("#send_email_vcode");
|
||
// 发送验证码倒计时60s
|
||
function getCode(e) {
|
||
email = document.getElementById("email");
|
||
if(email.value.length == 0){
|
||
layer.msg("请输入电子邮箱");
|
||
}else{
|
||
if(!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.value))){
|
||
layer.msg("电子邮箱有误，请重填")
|
||
}else{
|
||
//调用获取验证码的接口
|
||
$.post("{% url 'send_email_vcode' %}",{'email':email.value},function(r){
|
||
if(r.status){
|
||
layer.msg("验证码发送成功，请查收！");
|
||
}else{
|
||
layer.msg(r.data)
|
||
}
|
||
});
|
||
//按照指定的周期（以毫秒计）来调用函数或计算表达式。
|
||
//在ajax请求之后再调用函数
|
||
t = setInterval(function () {
|
||
countdown(e)
|
||
}, 1000)
|
||
//获取验证码成功后调用倒计时函数
|
||
countdown(e);
|
||
}
|
||
}
|
||
}
|
||
var time = 60;
|
||
function countdown(e){
|
||
if (time == 0) {
|
||
//这里时设置当时间到0的时候重新设置点击事件，并且默认time修改为60
|
||
//e.setAttribute("onclick","getcode(this)");
|
||
|
||
btn.attr("disabled", false);
|
||
btn.html("获取验证码");
|
||
btn.removeClass("disabled");
|
||
btn.removeClass("layui-btn-disabled")
|
||
time = 60;
|
||
clearInterval(t);
|
||
}else{
|
||
//这里是显示时间倒计时的时候点击不生效
|
||
//e.setAttribute("onclick", '');
|
||
|
||
btn.addClass("disabled");
|
||
btn.addClass("layui-btn-disabled")
|
||
btn.attr("disabled", true);
|
||
btn.html("重新发送(" + time + ")");
|
||
|
||
//document.getElementById("getcode").innerHTML="重新发送"+time;
|
||
time--;
|
||
}
|
||
}
|
||
</script>
|
||
</html> |