新增登录页面样式
This commit is contained in:
parent
fb848e7400
commit
0d708e2c8b
@ -81,4 +81,8 @@ public interface IUserCenterConst {
|
||||
* 菜单模式
|
||||
*/
|
||||
String MENU_MODE = "menuMode";
|
||||
/**
|
||||
* 登录页面
|
||||
*/
|
||||
String LOGIN_PAGE = "loginPage";
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ public class OAuthRouteController {
|
||||
*/
|
||||
@GetMapping("login")
|
||||
public ModelAndView login(HttpServletRequest request) {
|
||||
ModelAndView mv = new ModelAndView("login");
|
||||
ModelAndView mv = new ModelAndView();
|
||||
mv.addObject(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
|
||||
if (request.getParameter(IUserCenterConst.ERROR) != null) {
|
||||
mv.addObject(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
|
||||
@ -137,6 +137,11 @@ public class OAuthRouteController {
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.LOGIN_BOX_POSITION, "default");
|
||||
}
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_PAGE))) {
|
||||
mv.setViewName(config.get(IUserCenterConst.LOGIN_PAGE).toString());
|
||||
} else {
|
||||
mv.setViewName("login");
|
||||
}
|
||||
return mv;
|
||||
}
|
||||
|
||||
|
||||
@ -69,6 +69,9 @@ public class ConfigVO {
|
||||
@ApiModelProperty(name = "menuMode", value = "菜单模式")
|
||||
@CheckEmptyAnnotation(name = "菜单模式", types = {"fixedLeft", "floatLeft"})
|
||||
private String menuMode;
|
||||
@ApiModelProperty(name = "loginPage", value = "登录页面")
|
||||
@CheckEmptyAnnotation(name = "登录页面", types = {"login", "login2"})
|
||||
private String loginPage;
|
||||
|
||||
public String getPasswordValidity() {
|
||||
return passwordValidity == null ? "" : passwordValidity.trim();
|
||||
@ -229,4 +232,12 @@ public class ConfigVO {
|
||||
public void setMenuMode(String menuMode) {
|
||||
this.menuMode = menuMode;
|
||||
}
|
||||
|
||||
public String getLoginPage() {
|
||||
return loginPage == null ? "" : loginPage.trim();
|
||||
}
|
||||
|
||||
public void setLoginPage(String loginPage) {
|
||||
this.loginPage = loginPage;
|
||||
}
|
||||
}
|
||||
|
||||
@ -225,6 +225,13 @@
|
||||
<input type="radio" name="menuMode" value="floatLeft" title="左浮动">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" style="margin: 4px 0;">
|
||||
<div class="layui-form-mid layui-word-aux">登录页面</div>
|
||||
<div class="layui-input-inline" style="width: 400px;">
|
||||
<input type="radio" name="loginPage" value="login" title="默认" checked>
|
||||
<input type="radio" name="loginPage" value="login2" title="样式1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-layout-admin">
|
||||
|
||||
335
login-base/src/main/resources/templates/login2.html
Normal file
335
login-base/src/main/resources/templates/login2.html
Normal file
@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<base th:href="${#request.getContextPath() + '/'}">
|
||||
<title th:text="${systemTitle}"></title>
|
||||
<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">
|
||||
<link rel="icon" type="image/ico" href="assets/favicon.ico"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
|
||||
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
|
||||
<style th:if="${loginBoxPosition eq 'center'}">
|
||||
.layadmin-user-login-main {
|
||||
left: 50%;
|
||||
margin-left: -188px;
|
||||
}
|
||||
</style>
|
||||
<style th:if="${loginBoxPosition eq 'left'}">
|
||||
@media screen and (max-width: 1920px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 68%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 62%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
|
||||
<div id="layadminUserLoginMain" class="layadmin-user-login-main" style="">
|
||||
<div class="layadmin-user-login-box layadmin-user-login-header">
|
||||
<img class="system-logo" th:src="'route/file/download/true/'+ ${systemLogo}" th:if="${systemLogo ne ''}">
|
||||
<div th:class="${(systemLogo ne '') ? 'system-logo-title': ''}">
|
||||
<h2 th:text="${systemTitle}" th:style="'font-size:'+ ${systemTitleSize} +'px'"></h2>
|
||||
<p th:text="${systemSubTitle}" th:style="'font-size:'+ ${systemSubTitleSize} +'px'"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="userLoginBox" class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="LAY-form-signin">
|
||||
<form id="LAY-form-signin" action="userlogin" method="post">
|
||||
<input type="hidden" name="loginType" id="LAY-user-login-logintype" value="1">
|
||||
<input type="hidden" name="uKey" id="LAY-user-login-ukey" value="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
|
||||
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="passwordBox">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
|
||||
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="verificationCodeBox" th:if="${verificationCode eq 'true'}">
|
||||
<!-- 验证码 -->
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
|
||||
<input type="text" name="verificationCode" id="LAY-user-login-vercode" lay-verify="required" 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" id="LAY-user-get-vercode">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item u-key-box" id="uKeyBox" th:if="${uKeyLogin eq 'true'}">
|
||||
<!-- ukey登录 -->
|
||||
<span id="checkUKey">【检测UKey中...】</span>
|
||||
<span class="get-u-key" id="getUKey">【UKey已插入】</span>
|
||||
</div>
|
||||
<div class="layui-form-item remember-password" id="rememberPassword">
|
||||
<input type="checkbox" name="remember" lay-filter="LAY-user-login-remember" lay-skin="primary" title="记住密码">
|
||||
<!--<a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" id="LAY-user-login-submit" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
|
||||
</div>
|
||||
<div id="otherLoginBox" class="other-login-box" th:if="${scanCodeLogin ne 'false'}">
|
||||
<!-- 钉钉扫码 -->
|
||||
<div th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<img src="assets/images/login/dingding.png" style="width: 16px;">
|
||||
<a href="javascript:void(0);" id="dingDingScanCodeBtn">钉钉扫码</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="dingDingScanCodeBox" class="ding-ding-scan-code-box" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<!-- 钉钉扫码登录 -->
|
||||
<div class="code-box">
|
||||
<div id="dingDingScanCode"></div>
|
||||
<a id="cancelDingDingScanCodeBtn" class="cancel-ding-ding-scan-code-btn" href="javascript:void(0);">取消扫码</a>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="errorMessage" th:value="${errorMessage}"/>
|
||||
</div>
|
||||
<div class="layui-trans layadmin-user-login-footer footer-text">
|
||||
<p th:if="${copyRightYear ne ''}"><span th:text="${'© '+ copyRightYear +' '}"></span><a href="javascript:void(0);" th:if="${copyleft ne ''}" th:text="${copyleft}"></a></p>
|
||||
<p th:if="${officialUrl ne ''}">
|
||||
<span><a th:href="@{${officialUrl}}" target="_blank">前往官网</a></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none">
|
||||
<object type="application/x-dongle" id="uKey"></object>
|
||||
</div>
|
||||
<input type="hidden" id="serverUrl" th:value="${serverUrl +'/userlogin/dingding'}">
|
||||
<input type="hidden" id="dingDingScanCodeAppId" th:value="${dingDingScanCodeAppId}" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<input type="hidden" id="loginBackgroundImages" th:value="${loginBackgroundImages}">
|
||||
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js" th:if="${scanCodeLogin eq 'dingDingScanCode'}"></script>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'user', 'cookie', 'md5', '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 common = layui.common;
|
||||
var ftukey = layui.ftukey;
|
||||
var restAjax = layui.restajax;
|
||||
var isCheckLoginType = false;
|
||||
|
||||
var pageData = {
|
||||
remember: false
|
||||
};
|
||||
// 显示错误信息
|
||||
var errorMessage = $('#errorMessage').val();
|
||||
if (errorMessage != '') {
|
||||
layer.msg(errorMessage);
|
||||
}
|
||||
// 初始化背景
|
||||
function initBackground() {
|
||||
var loginBackgroundImages = $('#loginBackgroundImages').val();
|
||||
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
|
||||
});
|
||||
}
|
||||
initBackground();
|
||||
|
||||
// 记住密码
|
||||
form.on('checkbox(LAY-user-login-remember)', function(data){
|
||||
pageData.remember = data.elem.checked;
|
||||
});
|
||||
|
||||
//提交
|
||||
form.on('submit(LAY-user-login-submit)', function (obj) {
|
||||
if(pageData.remember) {
|
||||
cookie.setCookie('rememberMe', base64.encode(obj.field.username +'_$cm$_'+ obj.field.password), 30);
|
||||
} else {
|
||||
cookie.setCookie('rememberMe', '', 0);
|
||||
}
|
||||
$('#LAY-user-login-password').val(md5(md5(md5(obj.field.password))));
|
||||
layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
|
||||
});
|
||||
|
||||
$('#dingDingScanCodeBtn').on('click', function() {
|
||||
$('#userLoginBox').hide();
|
||||
var url = encodeURIComponent($('#serverUrl').val());
|
||||
var appId = $('#dingDingScanCodeAppId').val();
|
||||
var obj = DDLogin({
|
||||
id: 'dingDingScanCode',
|
||||
goto: encodeURIComponent('https://oapi.dingtalk.com/connect/qrconnect?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url),
|
||||
style: 'border:none; background-color:#FFFFFF;',
|
||||
width : '100%',
|
||||
height: '320'
|
||||
});
|
||||
$('#dingDingScanCodeBox').show();
|
||||
|
||||
var handleMessage = function (event) {
|
||||
var origin = event.origin;
|
||||
if( origin == "https://login.dingtalk.com" ) {
|
||||
var loginTmpCode = event.data;
|
||||
var snsAuthorizeHref = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url +'&loginTmpCode='+ loginTmpCode;
|
||||
window.location.href = snsAuthorizeHref;
|
||||
}
|
||||
};
|
||||
// 添加监听事件
|
||||
if (typeof window.addEventListener != 'undefined') {
|
||||
window.addEventListener('message', handleMessage, false);
|
||||
} else if (typeof window.attachEvent != 'undefined') {
|
||||
window.attachEvent('onmessage', handleMessage);
|
||||
}
|
||||
});
|
||||
|
||||
$('#cancelDingDingScanCodeBtn').on('click', function() {
|
||||
$('#dingDingScanCodeBox').hide();
|
||||
$('#userLoginBox').show();
|
||||
});
|
||||
|
||||
// 记住我
|
||||
var rememberMe = cookie.getCookie('rememberMe');
|
||||
if(null != rememberMe && '' != rememberMe) {
|
||||
var rememberMes = base64.decode(rememberMe).split('_$cm$_');
|
||||
$('#LAY-user-login-username').val(rememberMes[0]);
|
||||
$('#LAY-user-login-password').val(rememberMes[1])
|
||||
pageData.remember = true;
|
||||
form.val('LAY-form-signin', {
|
||||
remember: true
|
||||
});
|
||||
}
|
||||
// 刷新表单
|
||||
form.render();
|
||||
|
||||
// 初始化表单
|
||||
function initLoginForm(uKeyData) {
|
||||
if(uKeyData.UserLoginName.length == 0) {
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-username').val(uKeyData.UserLoginName);
|
||||
var loadLayerIndex;
|
||||
restAjax.get(restAjax.path('api/user/getsignintype/{userUsername}', [uKeyData.UserLoginName]), {}, null, function(code, data) {
|
||||
if(data.data != 1 && data.data != 2 && data.data != 3) {
|
||||
layer.msg('用户登录类型错误，请使用用户名和密码登录');
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-logintype').val(data.data);
|
||||
if(data.data == 1) {
|
||||
return;
|
||||
}
|
||||
// 隐藏验证码
|
||||
if($('#verificationCodeBox')) {
|
||||
$('#verificationCodeBox').hide();
|
||||
}
|
||||
$('#LAY-user-login-vercode').removeAttr('lay-verify');
|
||||
if(data.data === 2) {
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-password').removeAttr('lay-verify');
|
||||
$('#passwordBox').hide();
|
||||
$('#rememberPassword').hide();
|
||||
$('#uKeyBox').css('marginBottom', '20px');
|
||||
if(data.data === 3) {
|
||||
return;
|
||||
}
|
||||
}, function(code, data) {
|
||||
layer.msg(data.msg);
|
||||
}, function() {
|
||||
loadLayerIndex = layer.msg('查询登录类型，请稍后...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function() {
|
||||
layer.close(loadLayerIndex);
|
||||
});
|
||||
}
|
||||
// 检查UKey
|
||||
function checkUKey() {
|
||||
var ukeyData = ftukey.ReadUKeyData();
|
||||
if(ukeyData.success && ukeyData.data.length != 0) {
|
||||
if(!isCheckLoginType) {
|
||||
isCheckLoginType = true;
|
||||
$('#LAY-form-signin').attr('action', 'userlogin/ukey');
|
||||
$('#checkUKey').hide();
|
||||
$('#getUKey').show();
|
||||
setTimeout(function() {
|
||||
var data = ftukey.ParseJson(ukeyData.data);
|
||||
$('#LAY-user-login-ukey').val(ukeyData.hid);
|
||||
initLoginForm(data);
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
if(isCheckLoginType) {
|
||||
isCheckLoginType = false;
|
||||
$('#LAY-form-signin').attr('action', 'userlogin');
|
||||
$('#LAY-user-login-vercode').attr('lay-verify', 'required');
|
||||
$('#LAY-user-login-password').attr('lay-verify', 'required');
|
||||
if($('#verificationCodeBox')) {
|
||||
$('#verificationCodeBox').show();
|
||||
}
|
||||
$('#passwordBox').show();
|
||||
$('#rememberPassword').show();
|
||||
$('#uKeyBox').css('marginBottom', '0px');
|
||||
$('#getUKey').hide();
|
||||
$('#checkUKey').show();
|
||||
}
|
||||
}
|
||||
setTimeout(function() {
|
||||
checkUKey();
|
||||
}, 1000);
|
||||
}
|
||||
// 初始化UKey监听器
|
||||
function initUKeyListener() {
|
||||
if (common.getBrowserType() != 'IE') {
|
||||
return;
|
||||
}
|
||||
if (common.getIEBrowserVersion() != '11') {
|
||||
return;
|
||||
}
|
||||
$('#uKeyBox').show();
|
||||
setTimeout(function() {
|
||||
checkUKey();
|
||||
}, 1000);
|
||||
}
|
||||
if($('#uKeyBox')) {
|
||||
initUKeyListener();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user