system-operator/src/main/resources/templates/systemuser/login.html

484 lines
22 KiB
HTML
Raw Normal View History

2024-02-03 10:57:28 +08:00
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath() + '/'}">
2024-10-30 20:39:35 +08:00
<title th:text="${pageParams.systemTitle}"></title>
2024-02-03 10:57:28 +08:00
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
2024-05-27 11:06:01 +08:00
<link rel="icon" type="image/svg" href="assets/favicon.svg"/>
2024-02-03 10:57:28 +08:00
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
2025-03-07 14:00:01 +08:00
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=4" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=4" media="all">
2024-02-03 10:57:28 +08:00
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
2025-03-07 14:00:01 +08:00
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=4" media="all">
2024-09-13 10:09:47 +08:00
<style>[v-cloak] {display: none;}</style>
2024-02-03 10:57:28 +08:00
</head>
<style>
.nav {
2024-10-30 20:39:35 +08:00
position: fixed;
top: 0;
width: 100%;
2024-02-03 10:57:28 +08:00
display: flex;
justify-content: space-between;
2024-10-30 20:39:35 +08:00
align-items: center;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
.nav .logo {
padding: 15px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
.nav .logo a img {
2025-03-04 19:55:18 +08:00
height: 60px;
width: 186px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
.nav .go-page {
padding: 15px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
.nav .go-page a {
2024-02-03 10:57:28 +08:00
background-color: rgba(255, 255, 255, .4);
2024-10-30 20:39:35 +08:00
padding: 5px 15px;
border-radius: 50px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
.nav .go-page a:hover {
2024-02-03 10:57:28 +08:00
background-color: #42210B;
2024-10-30 20:39:35 +08:00
font-weight: bold;
2024-02-03 10:57:28 +08:00
color: #FFF;
}
2024-10-30 20:39:35 +08:00
#app {
height: 100%;
2024-02-03 10:57:28 +08:00
display: flex;
justify-content: center;
2024-10-30 20:39:35 +08:00
align-items: center;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container {
width: 300px;
padding: 15px;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .header {
font-size: 16px;
border-left: 5px solid #fda633;
padding-left: 10px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .body {
margin-top: 15px;
2024-03-18 14:52:43 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .body .layui-form-item .layui-input {
padding-left: 35px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .body .layui-form-item .verify-code {
height: 38px;
2024-03-18 14:52:43 +08:00
display: flex;
2024-10-30 20:39:35 +08:00
justify-content: center;
align-items: center;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .body .layui-form-item .verify-code a {
color: #1e9fff;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .remember-username {
margin-bottom: 10px;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .footer {
2024-02-03 10:57:28 +08:00
font-size: 12px;
}
2024-10-30 20:39:35 +08:00
#app .container .footer .login-type {
text-align: right;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .footer a {
color: #1e9fff;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
#app .container .footer .other {
margin-top: 10px;
2024-02-03 10:57:28 +08:00
display: flex;
justify-content: space-between;
2024-04-10 14:47:38 +08:00
}
2024-10-30 20:39:35 +08:00
#app .forget-password-box {
width: 300px;
padding: 15px;
2024-02-03 10:57:28 +08:00
background-color: #FFF;
}
</style>
<body>
2024-10-30 20:39:35 +08:00
<div id="app">
<div class="nav">
<div class="logo">
<a th:href="${ HomeServerUrl }">
2025-03-07 14:00:01 +08:00
<img src="assets/images/headicon1.png?v=4" alt="">
2024-10-30 20:39:35 +08:00
</a>
2024-02-03 10:57:28 +08:00
</div>
2024-10-30 20:39:35 +08:00
<div class="go-page">
<a th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
<a th:href="${ HomeServerUrl }">去首页</a>
</div>
</div>
<div v-cloak>
<div class="container" v-if="isLogin">
<div class="header">用户登录</div>
<div class="body">
<form id="loginForm" :action="activeAction" method="post" @submit.prevent="submitForm">
2024-02-03 10:57:28 +08:00
<input type="hidden" name="referToken" v-model="formData.referToken"/>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
2024-10-30 20:39:35 +08:00
<input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名 / 手机号" class="layui-input">
2024-02-03 10:57:28 +08:00
</div>
2024-10-30 20:39:35 +08:00
<div class="layui-form-item" v-if="loginType === 'username'">
2024-02-03 10:57:28 +08:00
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
<input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
</div>
2024-10-30 20:39:35 +08:00
<div class="layui-form-item" v-if="loginType === 'username' && pageParams.verificationCode == 'true'" >
2024-02-03 10:57:28 +08:00
<!-- 验证码 -->
<div class="layui-row">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
<input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
</div>
</div>
</div>
</div>
2024-10-30 20:39:35 +08:00
<div class="layui-form-item" v-if="loginType === 'sms'">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
<input type="text" v-model="sms.smsCode" id="smsCode" name="smsCode" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5 verify-code">
<a href="javascript:void(0);" v-if="!sms.isCountingDown" @click="onLoginSmsCodeClick" style="font-size: 13px;">获取验证码</a>
<a href="javascript:void(0);" style="color: #d2d2d2; font-size: 13px;" v-if="sms.isCountingDown">{{sms.countDownSeconds}}秒后重试</a>
</div>
</div>
<div class="layui-form remember-username">
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住账号" lay-filter="rememberFilter">
2024-02-03 10:57:28 +08:00
</div>
<div class="layui-form-item">
2024-10-30 20:39:35 +08:00
<button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit style="background-color: #fda633;">登录</button>
2024-02-03 10:57:28 +08:00
</div>
</form>
2024-10-30 20:39:35 +08:00
</div>
<div class="footer">
<div class="login-type">
<a href="javascript:void(0);" v-if="loginType === 'sms'" @click="onLoginTypeClick('username')">账号密码登录 <i class="fa fa-angle-right"></i></a>
<a href="javascript:void(0);" v-if="loginType === 'username'" @click="onLoginTypeClick('sms')">短信登录 <i class="fa fa-angle-right"></i></a>
</div>
<div class="other">
<div>
<a href="javascript:void(0)" class="forget-username-password" @click="onForgetPasswordClick">忘记密码?</a>
</div>
<div>
没有账号?<a th:href="${ HomeServerUrl + 'Register.html'}">立即注册</a>
</div>
</div>
</div>
</div>
<div class="container" v-if="!isLogin">
<div class="header">忘记密码</div>
<div class="body">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
<input type="text" v-model="forgetPassword.username" id="cpUsername" placeholder="用户名 / 手机号" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
<input type="password" v-model="forgetPassword.newPassword" id="cpNewPassword" placeholder="新密码" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
<input type="password" v-model="forgetPassword.confirmNewPassword" id="cpConfirmNewPassword" placeholder="确认新密码" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-col-xs7">
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
<input type="text" v-model="sms.smsCode" id="cpSmsCode" placeholder="验证码" class="layui-input">
</div>
<div class="layui-col-xs5 verify-code">
<a href="javascript:void(0);" v-if="!sms.isCountingDown" @click="onForgetPasswordSmsCodeClick" style="font-size: 13px;">获取验证码</a>
<a href="javascript:void(0);" style="color: #d2d2d2; font-size: 13px;" v-if="sms.isCountingDown">{{sms.countDownSeconds}}秒后重试</a>
</div>
</div>
<div class="layui-form-item">
<button type="button" class="layui-btn layui-btn-fluid login-btn" style="background-color: #fda633;" @click="onForgetPasswordUpdateClick">修改</button>
</div>
</div>
<div class="footer">
<div class="login-type" style="text-align: left;">
<a href="javascript:void(0);" @click="isLogin = true"><i class="fa fa-angle-left"></i> 去登录</a>
</div>
2024-02-03 10:57:28 +08:00
</div>
</div>
<div class="layui-trans layadmin-user-login-footer footer-text">
<p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
<p v-if="pageParams.officialUrl">
<span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form', 'cookie', 'md5', 'dialog', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var cookie = layui.cookie;
var md5 = layui.md5;
var base64 = layui.base64;
var restAjax = layui.restajax;
var dialog = layui.dialog;
var pageParams = [[${pageParams}]];
new Vue({
el: '#app',
data: {
2024-10-30 20:39:35 +08:00
isLogin: true,
2024-02-03 10:57:28 +08:00
pageParams: pageParams,
2024-10-30 20:39:35 +08:00
loginType: 'username',
2024-04-10 14:47:38 +08:00
activeAction: pageParams.loginFormAction,
2024-02-03 10:57:28 +08:00
formData: {
referToken: pageParams.referToken,
verificationCode: '',
username: pageParams.loginUsername,
password: '',
remember: false
2024-10-30 20:39:35 +08:00
},
forgetPassword: {
username: '',
smsCode: '',
newPassword: '',
confirmNewPassword: '',
},
sms: {
smsCode: '',
countDownInterval: null,
countDownSeconds: 120,
isCountingDown: false,
isCountClick: false
2024-02-03 10:57:28 +08:00
}
},
methods: {
2024-10-30 20:39:35 +08:00
// 提交表单
submitForm: function() {
var self = this;
if(!self.formData.username) {
layer.msg('用户名不能为空');
$('#username').focus();
return;
}
if(self.loginType === 'username') {
if(!self.formData.password) {
layer.msg('密码不能为空');
$('#password').focus();
return;
}
if(self.pageParams.verificationCode == 'true' && !self.formData.verificationCode) {
layer.msg('验证码不能为空');
$('#verificationCode').focus();
return;
}
} else if(self.loginType === 'sms') {
if(!self.sms.smsCode) {
layer.msg('短信验证码不能为空');
$('#smsCode').focus();
return;
}
}
if(self.loginType === 'username') {
self.activeAction = self.pageParams.loginFormAction;
}
if(self.loginType === 'sms') {
self.activeAction = self.pageParams.loginPhoneAction;
}
if(self.formData.remember) {
cookie.setCookie('rememberMe', self.formData.username, 30);
} else {
cookie.setCookie('rememberMe', '', 0);
}
layer.msg('正在登录,请稍后...', {icon: 16, shade: 0.1, time: 0});
self.formData.password = md5(md5(md5(self.formData.password)));
self.$nextTick(function() {
$('#loginForm').submit();
})
},
onForgetPasswordUpdateClick: function() {
var self = this;
if(!self.forgetPassword.username) {
layer.msg('用户名不能为空');
$('#cpUsername').focus();
return;
}
if(!self.forgetPassword.newPassword) {
layer.msg('新密码不能为空');
$('#cpNewPassword').focus();
return;
}
if(!self.forgetPassword.confirmNewPassword) {
layer.msg('确认新密码不能为空');
$('#cpConfirmNewPassword').focus();
return;
}
if(self.forgetPassword.newPassword !== self.forgetPassword.confirmNewPassword) {
layer.msg('两次密码不一致');
$('#cpConfirmNewPassword').focus();
return;
}
if(!self.sms.smsCode) {
layer.msg('短信验证码不能为空');
$('#cpSmsCode').focus();
return;
}
2024-02-03 10:57:28 +08:00
var loadLayerIndex;
2024-10-30 20:39:35 +08:00
restAjax.put(restAjax.path('app/user/forget-phone-password', []), {
phone: self.forgetPassword.username,
newPassword: md5(md5(md5(self.forgetPassword.newPassword))),
verificationCode: self.sms.smsCode
}, null, function(code, data) {
layer.msg("密码修改成功,请登录");
self.loginType = 'username';
self.isLogin = true;
2024-02-03 10:57:28 +08:00
}, function(code, data) {
dialog.msg(data.msg);
}, function() {
loadLayerIndex = dialog.msg('正在提交修改信息...', {icon: 16, time: 0, shade: 0.3});
}, function() {
dialog.close(loadLayerIndex);
});
},
2024-10-30 20:39:35 +08:00
onForgetPasswordClick: function() {
this.isLogin = false;
},
onLoginClick: function() {
this.isLogin = true;
},
onLoginSmsCodeClick: function() {
this.sendSmsCode(this.formData.username)
},
onForgetPasswordSmsCodeClick: function() {
this.sendSmsCode(this.forgetPassword.username)
},
sendSmsCode: function(phone) {
if(this.sms.isCountClick) {
2024-02-03 10:57:28 +08:00
return;
}
2024-10-30 20:39:35 +08:00
if(!phone) {
layer.msg('请输入手机号');
2024-02-03 10:57:28 +08:00
return;
}
2024-10-30 20:39:35 +08:00
if(!/^1[3456789]\d{9}$/.test(phone)) {
layer.msg('手机号格式不正确');
return;
}
var self = this;
restAjax.get('api/verify/code/send/'+ phone, {}, null, function(code, data) {
layer.msg('验证码发送成功');
self.sms.isCountingDown = true;
self.sms.countDownInterval = setInterval(function() {
self.sms.countDownSeconds -= 1;
if(self.sms.countDownSeconds <= 0) {
clearInterval(self.sms.countDownInterval);
self.sms.countDownInterval = null;
self.sms.isCountingDown = false;
2024-02-03 10:57:28 +08:00
}
2024-10-30 20:39:35 +08:00
}, 1000);
}, function(code, data) {
layer.msg(data.msg);
}, function() {
self.isCountClick = true;
}, function() {
self.isCountClick = false;
})
},
onLoginTypeClick: function(type) {
this.loginType = type;
if(type === 'username') {
this.activeAction = pageParams.loginFormAction;
} else if(type === 'sms') {
this.activeAction = pageParams.loginPhoneAction;
}
2024-02-03 10:57:28 +08:00
},
showErrorMessage: function() {
var self = this;
if(self.pageParams.errorMessage) {
layer.msg(self.pageParams.errorMessage);
}
},
initBackground: function() {
var self = this;
var loginBackgroundImages = self.pageParams.loginBackgroundImages;
var photos = [];
if(loginBackgroundImages) {
var loginBackgroundImageArray = loginBackgroundImages.split(',');
for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
photos.push({
image: 'route/file/download/true/'+ item
})
}
} else {
for(var i = 1; i <= 9; i++) {
photos.push({
image: 'assets/images/backgrounds/'+ i +'.jpg'
})
}
}
$.supersized({
slide_interval : 4000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : photos
});
},
// 刷新验证码
refreshVerificationCode: function(event) {
event.target.src = event.target.src + '?t='+ new Date().getTime();
},
// 记住我
rememberMe: function() {
var self = this;
var rememberMe = cookie.getCookie('rememberMe');
if(rememberMe) {
2024-10-30 20:39:35 +08:00
self.formData.username = rememberMe;
2024-02-03 10:57:28 +08:00
self.formData.remember = true;
}
self.$nextTick(function() {
form.render();
});
},
2024-10-30 20:39:35 +08:00
2024-04-10 14:47:38 +08:00
loginTypeChange: function(type) {
this.loginType = type;
}
2024-02-03 10:57:28 +08:00
},
mounted: function() {
var self = this;
self.showErrorMessage();
self.initBackground();
self.rememberMe();
// 复选框勾选事件
form.on('checkbox(rememberFilter)', function(data) {
self.formData.remember = data.elem.checked;
});
}
})
});
</script>
</body>
</html>