完善登录界面逻辑，新增登录页面预览

login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java

@@ -89,5 +89,13 @@ public interface IUserCenterConst {
      * 菜单模式
      */
     String MENU_MODE = "menuMode";
+    /**
+     * 页面参数
+     */
+    String PAGE_PARAMS = "pageParams";
+    /**
+     * 自定义表单
+     */
+    String CUSTOM_LOGIN_FORM = "customLoginForm";
 
 }

login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java

@@ -2,10 +2,8 @@ package ink.wgink.login.base.controller.route;
 
 import ink.wgink.interfaces.consts.ISystemConstant;
 import ink.wgink.login.base.consts.IUserCenterConst;
-import ink.wgink.login.base.manager.ConfigManager;
+import ink.wgink.login.base.service.IOAuthService;
 import ink.wgink.login.base.service.login.ILoginFormService;
-import ink.wgink.properties.BaseProperties;
-import ink.wgink.properties.ServerProperties;
 import ink.wgink.util.verification.code.Captcha;
 import ink.wgink.util.verification.code.GifCaptcha;
 import ink.wgink.util.verification.code.SpecCaptcha;
@@ -22,7 +20,6 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpSession;
 import java.io.IOException;
-import java.util.HashMap;
 import java.util.Map;
 
 /**
@@ -40,9 +37,7 @@ import java.util.Map;
 public class OAuthRouteController {
 
     @Autowired
-    private ServerProperties serverProperties;
+    private IOAuthService oAuthService;
-    @Autowired
-    private BaseProperties baseProperties;
     @Autowired
     private ILoginFormService loginFormService;
 
@@ -54,38 +49,9 @@ public class OAuthRouteController {
     @GetMapping("login")
     public ModelAndView login(HttpServletRequest request) {
         ModelAndView mv = new ModelAndView();
-        Map<String, Object> config = ConfigManager.getInstance().getConfig();
+        Map<String, Object> pageParams = oAuthService.getPageParams(request);
-
+        mv.addObject(IUserCenterConst.PAGE_PARAMS, pageParams);
-        Map<String, Object> pageParams = new HashMap<>(16);
+        mv.addObject(IUserCenterConst.CUSTOM_LOGIN_FORM, loginFormService.getActive());
-        pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
-        // 服务地址
-        pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
-        // 系统LOGO
-        pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
-        // 背景图片
-        pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
-        // 系统标题
-        pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
-        // 系统标题大小，默认26
-        pageParams.put(IUserCenterConst.SYSTEM_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_TITLE_SIZE).toString()));
-        // 系统子标题
-        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
-        // 系统子标题大小，默认16
-        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
-        // 版权年份
-        pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
-        // 版权所属
-        pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
-        // 官方链接
-        pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
-        // 开启验证码
-        pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
-        // 登录框位置
-        pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
-        // 登录表单action
-        pageParams.put(IUserCenterConst.LOGIN_FORM_ACTION, baseProperties.getLoginProcess().startsWith("/") ? baseProperties.getLoginProcess().substring(1) : baseProperties.getLoginProcess());
-        mv.addObject("pageParams", pageParams);
-        mv.addObject("customLoginForm", loginFormService.getActive());
         mv.setViewName("login");
         return mv;
     }

login-base/src/main/java/ink/wgink/login/base/controller/route/login/LoginFormRouteController.java

@@ -1,12 +1,19 @@
 package ink.wgink.login.base.controller.route.login;
 
 import ink.wgink.interfaces.consts.ISystemConstant;
+import ink.wgink.login.base.consts.IUserCenterConst;
+import ink.wgink.login.base.service.IOAuthService;
+import ink.wgink.login.base.service.login.ILoginFormService;
 import io.swagger.annotations.Api;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.servlet.ModelAndView;
 
+import javax.servlet.http.HttpServletRequest;
+
 /**
  * @ClassName: LoginFormRouteController
  * @Description: 登录form
@@ -19,6 +26,11 @@ import org.springframework.web.servlet.ModelAndView;
 @RequestMapping(ISystemConstant.ROUTE_PREFIX + "/login-form")
 public class LoginFormRouteController {
 
+    @Autowired
+    private IOAuthService oauthService;
+    @Autowired
+    private ILoginFormService loginFormService;
+
     @GetMapping("save")
     public ModelAndView save() {
         return new ModelAndView("login/form/save");
@@ -34,4 +46,13 @@ public class LoginFormRouteController {
         return new ModelAndView("login/form/list");
     }
 
+    @GetMapping("get-login-preview/{loginFormId}")
+    public ModelAndView getLoginPreview(@PathVariable("loginFormId") String loginFormId, HttpServletRequest request) {
+        ModelAndView mv = new ModelAndView("login/form/get-login-preview");
+        mv.addObject(IUserCenterConst.PAGE_PARAMS, oauthService.getPageParams(request));
+        mv.addObject(IUserCenterConst.CUSTOM_LOGIN_FORM, loginFormService.get(loginFormId));
+        mv.setViewName("login/form/get-login-preview");
+        return mv;
+    }
+
 }

login-base/src/main/java/ink/wgink/login/base/service/IOAuthService.java

@@ -0,0 +1,16 @@
+package ink.wgink.login.base.service;
+
+import javax.servlet.http.HttpServletRequest;
+import java.util.Map;
+
+/**
+ * @ClassName: IOAuthService
+ * @Description: oauth认证
+ * @Author: wanggeng
+ * @Date: 2021/7/30 10:56 上午
+ * @Version: 1.0
+ */
+public interface IOAuthService {
+
+    Map<String, Object> getPageParams(HttpServletRequest request);
+}

login-base/src/main/java/ink/wgink/login/base/service/impl/OAuthServiceImpl.java

@@ -0,0 +1,64 @@
+package ink.wgink.login.base.service.impl;
+
+import ink.wgink.interfaces.consts.ISystemConstant;
+import ink.wgink.login.base.consts.IUserCenterConst;
+import ink.wgink.login.base.manager.ConfigManager;
+import ink.wgink.login.base.service.IOAuthService;
+import ink.wgink.properties.BaseProperties;
+import ink.wgink.properties.ServerProperties;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import javax.servlet.http.HttpServletRequest;
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * @ClassName: OAuthServiceImpl
+ * @Description: Oauth认证
+ * @Author: wanggeng
+ * @Date: 2021/7/30 10:57 上午
+ * @Version: 1.0
+ */
+@Service
+public class OAuthServiceImpl implements IOAuthService {
+
+    @Autowired
+    private ServerProperties serverProperties;
+    @Autowired
+    private BaseProperties baseProperties;
+
+    @Override
+    public Map<String, Object> getPageParams(HttpServletRequest request) {
+        Map<String, Object> config = ConfigManager.getInstance().getConfig();
+        Map<String, Object> pageParams = new HashMap<>(16);
+        pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
+        // 服务地址
+        pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
+        // 系统LOGO
+        pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
+        // 背景图片
+        pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
+        // 系统标题
+        pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
+        // 系统标题大小，默认26
+        pageParams.put(IUserCenterConst.SYSTEM_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_TITLE_SIZE).toString()));
+        // 系统子标题
+        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
+        // 系统子标题大小，默认16
+        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
+        // 版权年份
+        pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
+        // 版权所属
+        pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
+        // 官方链接
+        pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
+        // 开启验证码
+        pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
+        // 登录框位置
+        pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
+        // 登录表单action
+        pageParams.put(IUserCenterConst.LOGIN_FORM_ACTION, baseProperties.getLoginProcess().startsWith("/") ? baseProperties.getLoginProcess().substring(1) : baseProperties.getLoginProcess());
+        return pageParams;
+    }
+}

login-base/src/main/resources/templates/login.html

@@ -8,6 +8,7 @@
     <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/fonts/font-awesome/css/font-awesome.css"/>
     <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">
@@ -66,7 +67,7 @@
                             </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">
+                                    <img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
                                 </div>
                             </div>
                         </div>
@@ -157,6 +158,10 @@
                         slides             : photos
                     });
                 },
+                // 刷新验证码
+                refreshVerificationCode: function(event) {
+                    event.target.src = event.target.src;
+                },
                 // 记住我
                 rememberMe: function() {
                     var self = this;
@@ -195,7 +200,6 @@
                 // 复选框勾选事件
                 form.on('checkbox(rememberFilter)', function(data) {
                     self.formData.remember = data.elem.checked;
-                    console.log(self.formData.remember);
                 });
                 // 保单验证
                 form.verify({

login-base/src/main/resources/templates/login/form/get-login-preview.html

@@ -0,0 +1,155 @@
+<!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/fonts/font-awesome/css/font-awesome.css"/>
+    <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:utext="${customLoginForm.formCss}"></style>
+    <style th:if="${pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
+    <style th:if="${pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
+    <style th:if="${pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
+</head>
+<body>
+<div id="app">
+    <div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></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', '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;
+
+        new Vue({
+            el: '#app',
+            data: {
+                pageParams: [[${pageParams}]],
+                formData: {
+                    verificationCode: '',
+                    username: '',
+                    password: '',
+                    remember: false
+                }
+            },
+            methods: {
+                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;
+                },
+                // 记住我
+                rememberMe: function() {
+                    var self = this;
+                    var rememberMe = cookie.getCookie('rememberMe');
+                    if(rememberMe) {
+                        var rememberMes = base64.decode(rememberMe).split('_$WG$_');
+                        self.formData.username = rememberMes[0];
+                        self.formData.password = rememberMes[1];
+                        self.formData.remember = true;
+                    }
+                    self.$nextTick(function() {
+                        form.render();
+                    });
+                },
+                // 提交表单
+                submitForm: function() {
+                    var self = this;
+                    console.log(self.pageParams);
+                    console.log(self.formData);
+                    layer.msg('正在登录，请稍后...', {icon: 16, time: 3000});
+                    self.formData.password = md5(md5(md5(self.formData.password)));
+                    return false;
+                },
+
+            },
+            mounted: function() {
+                var self = this;
+                self.showErrorMessage();
+                self.initBackground();
+                self.rememberMe();
+                // 复选框勾选事件
+                form.on('checkbox(rememberFilter)', function(data) {
+                    self.formData.remember = data.elem.checked;
+                });
+                // 保单验证
+                form.verify({
+                    username: function(value, item) {
+                        if(!value){
+                            return '用户名不能为空';
+                        }
+                    },
+                    password: function(value, item) {
+                        if(!value) {
+                            return '密码不能为空';
+                        }
+                    },
+                    verificationCode: function(value, item) {
+                        if(!value) {
+                            return '验证码不能为空';
+                        }
+                    }
+                });
+            }
+        })
+    });
+</script>
+</body>
+</html>

login-base/src/main/resources/templates/login/form/list.html

@@ -129,6 +129,11 @@
                                 return rowData;
                             }
                         },
+                        {field:'previewPage', width:100, title: '操作', align:'center', fixed: 'right',
+                            templet: function(row) {
+                                return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="previewPageEvent">预览效果</button>';
+                            }
+                        },
                     ]
                 ],
                 page: true,
@@ -273,6 +278,8 @@
                 }, function() {
                     top.dialog.close(loadLayerIndex);
                 });
+            } else if(event === 'previewPageEvent') {
+                window.open(top.restAjax.path('route/login-form/get-login-preview/{loginFormId}', [data.loginFormId]));
             }
         })
     });

login-base/src/main/resources/templates/login/form/update.html

@@ -296,6 +296,7 @@
                         <div class="layui-footer" style="left: 0;">
                             <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
                             <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
+                            <button type="button" class="layui-btn layui-btn-normal" id="previewPageBtn">预览页面</button>
                         </div>
                     </div>
                 </div>
@@ -533,6 +534,11 @@
             });
             return false;
         });
+
+        $('#previewPageBtn').on('click', function() {
+            window.open(top.restAjax.path('route/login-form/get-login-preview/{loginFormId}', [loginFormId]));
+        });
+
         $('.close').on('click', function() {
             closeBox();
         });