340 lines
12 KiB
HTML
340 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<!-- 引入头部 -->
|
||
<head th:replace="~{./public/header :: header}"></head>
|
||
<body class="no-padding">
|
||
<!-- header -->
|
||
<div th:replace="~{./public/common_header::common_header}"></div>
|
||
|
||
<style>
|
||
.login-card-box {
|
||
display: flex;
|
||
width: 920px;
|
||
max-width: 96%;
|
||
height: 510px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 6px 30px rgba(0,0,0,0.18);
|
||
}
|
||
.login-card-pic {
|
||
flex: 1;
|
||
padding: 32px 8px;
|
||
box-sizing: border-box;
|
||
background-color: #1681fd;
|
||
background-image: url('/static/assets/images/login-img.png');
|
||
background-repeat: no-repeat;
|
||
background-position: bottom;
|
||
background-size: contain;
|
||
text-align: center;
|
||
}
|
||
.login-card-pic-text h1 {
|
||
color: #ffffff;
|
||
font-size: 28px;
|
||
margin: 0 0 6px;
|
||
font-weight: 400;
|
||
letter-spacing: 1.2px;
|
||
}
|
||
.login-card-pic-text p {
|
||
color: rgba(255,255,255,0.8);
|
||
font-size: 16px;
|
||
margin: 0;
|
||
font-weight: 400;
|
||
letter-spacing: 1.2px;
|
||
}
|
||
.login-card-form {
|
||
width: 400px;
|
||
padding: 32px 36px 24px !important;
|
||
box-sizing: border-box;
|
||
margin: 0 !important;
|
||
box-shadow: none !important;
|
||
background: transparent !important;
|
||
}
|
||
.login-card-form h2 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: #0b1a33;
|
||
text-align: left;
|
||
margin-bottom: 22px;
|
||
}
|
||
.login-card-form .layui-form-item {
|
||
margin-bottom: 18px;
|
||
}
|
||
.login-card-form .layui-input {
|
||
height: 44px;
|
||
border-radius: 8px;
|
||
border-color: #e8edf5;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
.login-card-form .layui-input:focus {
|
||
border-color: #1681fd;
|
||
box-shadow: 0 0 0 3px rgba(22,129,253,0.1);
|
||
}
|
||
.login-card-form .login-captcha-group {
|
||
display: flex !important;
|
||
gap: 12px;
|
||
padding-right: 0 !important;
|
||
position: relative;
|
||
}
|
||
.login-card-form .login-captcha-group .layui-input {
|
||
flex: 1;
|
||
}
|
||
.login-card-form .login-captcha-group .layui-btn {
|
||
position: static !important;
|
||
width: 120px !important;
|
||
height: 44px !important;
|
||
border-radius: 8px !important;
|
||
background: #1681fd !important;
|
||
background-color: #1681fd !important;
|
||
color: #fff !important;
|
||
border: none !important;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
line-height: 44px !important;
|
||
}
|
||
.login-card-form .layui-text {
|
||
display: flex !important;
|
||
justify-content: flex-end !important;
|
||
margin-bottom: 18px;
|
||
padding: 0;
|
||
}
|
||
.login-card-form .layui-text a {
|
||
color: #1681fd;
|
||
font-size: 13px;
|
||
}
|
||
.login-card-form .layui-btn-fluid {
|
||
height: 46px;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
letter-spacing: 4px;
|
||
background: #1681fd;
|
||
border: none;
|
||
box-shadow: 0 4px 14px rgba(22,129,253,0.3);
|
||
transition: box-shadow 0.3s, transform 0.2s;
|
||
}
|
||
.login-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
.login-wrapper:before { display: none; }
|
||
.login-card-form .layui-btn-fluid:hover {
|
||
background: #1270e0;
|
||
box-shadow: 0 6px 20px rgba(22,129,253,0.4);
|
||
transform: translateY(-1px);
|
||
}
|
||
@media screen and (max-width: 800px) {
|
||
.login-card-box {
|
||
flex-direction: column;
|
||
width: 400px;
|
||
height: auto;
|
||
}
|
||
.login-card-pic {
|
||
width: 100%;
|
||
padding: 20px 12px 100px;
|
||
background-size: auto 100px;
|
||
}
|
||
.login-card-form {
|
||
width: 100%;
|
||
padding: 28px 24px 24px !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- forget -->
|
||
<div class="login-wrapper">
|
||
<div class="login-card-box">
|
||
<!-- 左侧插图 -->
|
||
<div class="login-card-pic">
|
||
<div class="login-card-pic-text">
|
||
<h1>小蚂蚁云官方网站</h1>
|
||
<p>赋能开发者，助力企业发展，全方位提供数据中台解决方案!</p>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧表单 -->
|
||
<form class="layui-form login-card-form">
|
||
<h2>忘记密码</h2>
|
||
<div class="layui-form-item">
|
||
<input class="layui-input" name="email" type="text" placeholder="请输入邮箱账号"
|
||
lay-verType="tips" lay-verify="required|email" maxlength="100" required/>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<input class="layui-input" name="password" type="password" placeholder="请输入新的登录密码"
|
||
lay-verType="tips" lay-verify="required|psw" maxlength="100" required/>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<input class="layui-input" name="rePassword" type="password" placeholder="请再次输入新的登录密码"
|
||
lay-verType="tips" lay-verify="required|repeat" data-target="input[name=password]"
|
||
data-tips="两次密码输入不一致" required/>
|
||
</div>
|
||
<div class="layui-form-item login-captcha-group">
|
||
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
|
||
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="20" required/>
|
||
<button id="btnGetCode" type="button" class="layui-btn">获取验证码</button>
|
||
</div>
|
||
<div class="layui-form-item layui-text">
|
||
<a href="/login">返回登录</a>
|
||
</div>
|
||
<div>
|
||
<button class="layui-btn layui-btn-lg layui-btn-fluid" lay-filter="forgetSubmit" lay-submit>修改密码</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输入图形验证码弹窗 -->
|
||
<script type="text/html" id="layerGetCode">
|
||
<div class="layer-get-code">
|
||
<p>验证码将发送到您的邮箱，输入下方图形验证码点击按钮即可发送：</p>
|
||
<div class="lay-code-group">
|
||
<input maxlength="20" placeholder="请输入图形验证码" class="layui-input"/>
|
||
<img class="forget-captcha" src="/captcha"/>
|
||
</div>
|
||
<div>
|
||
<button class="layui-btn layui-btn-fluid">立即发送</button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
<!-- js部分 -->
|
||
<script type="text/javascript" src="/static/assets/layui/layui.js"></script>
|
||
<script type="text/javascript" src="/static/assets/js/common.js"></script>
|
||
<script>
|
||
layui.use(['layer', 'form', 'formX'], function () {
|
||
var $ = layui.jquery;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
|
||
/**
|
||
* 忘记密码表单提交
|
||
* 将表单数据以JSON格式POST到/forget接口
|
||
* 成功后跳转至登录页，失败则弹出错误提示
|
||
*/
|
||
form.on('submit(forgetSubmit)', function (obj) {
|
||
var loadIndex = layer.msg('请求中...', {icon: 16, shade: 0.01});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/forget',
|
||
data: JSON.stringify(obj.field),
|
||
contentType: "application/json",
|
||
dataType: "json",
|
||
success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code == 0) {
|
||
layer.msg('找回密码成功', {icon: 1, time: 1500}, function () {
|
||
location.href = '/login';
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2, anim: 6});
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg("AJAX请求异常");
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
/**
|
||
* 获取邮箱验证码
|
||
* 1. 校验邮箱是否为空及格式是否正确
|
||
* 2. 弹出图形验证码弹窗
|
||
* 3. 用户输入图形验证码后，调用/sendEmail接口发送邮件验证码
|
||
* 4. 发送成功后启动60秒倒计时
|
||
*/
|
||
$('#btnGetCode').click(function () {
|
||
var $btn = $(this);
|
||
// 获取并校验邮箱
|
||
var $inputEmail = $('input[name="email"]');
|
||
var email = $inputEmail.val();
|
||
if (!email) {
|
||
layer.tips('请输入邮箱账号', $inputEmail, {tips: [1, '#ff4c4c']});
|
||
return;
|
||
}
|
||
var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
|
||
if (!emailReg.test(email)) {
|
||
layer.tips('邮箱格式不正确', $inputEmail, {tips: [1, '#ff4c4c']});
|
||
return;
|
||
}
|
||
var layIndex = layer.open({
|
||
type: 1,
|
||
title: false,
|
||
shade: .1,
|
||
skin: 'layui-layer-admin',
|
||
content: $('#layerGetCode').html(),
|
||
success: function () {
|
||
// 图形验证码图片点击刷新
|
||
$('.layer-get-code>.lay-code-group>img').click(function () {
|
||
this.src = this.src + '?t=' + new Date().getTime();
|
||
});
|
||
// 弹窗内"立即发送"按钮点击事件
|
||
$('.layer-get-code .layui-btn-fluid').click(function () {
|
||
var $input = $('.layer-get-code>.lay-code-group>input');
|
||
var captcha = $input.val();
|
||
if (!captcha) {
|
||
layer.tips('请输入图形验证码', $input, {tips: [3, '#ff4c4c']});
|
||
return;
|
||
}
|
||
// 启动倒计时并发送邮件验证码请求
|
||
startTimer($btn);
|
||
var loadIndex = layer.msg('邮件发送中...', {icon: 16, shade: 0.01, time: false});
|
||
$.ajax({
|
||
type: "POST",
|
||
url: '/sendEmail',
|
||
data: JSON.stringify({email: email, captcha: captcha, type: 3}),
|
||
contentType: "application/json",
|
||
dataType: "json",
|
||
success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code == 0) {
|
||
layer.msg(res.msg, {icon: 1});
|
||
layer.close(layIndex);
|
||
startTimer($btn);
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2, anim: 6});
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg("AJAX请求异常");
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
}
|
||
})
|
||
});
|
||
|
||
/**
|
||
* 按钮倒计时
|
||
* @param {Object} $btn - jQuery按钮对象
|
||
* @param {Number} second - 倒计时秒数，默认60秒
|
||
*/
|
||
function startTimer($btn, second) {
|
||
second || (second = 60);
|
||
$btn.attr('org-text', $btn.text());
|
||
$btn.text(second + 's');
|
||
$btn.attr('disabled', 'disabled');
|
||
$btn.addClass('layui-disabled');
|
||
var timer = setInterval(function () {
|
||
second--;
|
||
if (second <= 0) {
|
||
clearInterval(timer);
|
||
$btn.text($btn.attr('org-text'));
|
||
$btn.removeAttr('disabled');
|
||
$btn.removeClass('layui-disabled');
|
||
} else {
|
||
$btn.text(second + 's');
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
/* 页面加载时刷新图形验证码，点击图片也可刷新 */
|
||
$('img.forget-captcha').click(function () {
|
||
this.src = '/captcha?t=' + (new Date).getTime();
|
||
}).trigger('click');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |