修改BUG：登录页面忘记密码功能增加行为验证码 closed #ITOIA closed #ITOIB

#Issue
https://gitee.com/LongbowEnterprise/dashboard/issues?id=ITOIA
https://gitee.com/LongbowEnterprise/dashboard/issues?id=ITOIB

Bootstrap.Admin/Views/Account/Login.cshtml

@@ -112,7 +112,7 @@
                                 <span class="fa fa-user-circle-o"></span>
                             </div>
                         </div>
-                        <input type="text" id="displayName" class="form-control" value="" placeholder="显示名称不可为空" maxlength="20"  data-valid="true" />
+                        <input type="text" id="displayName" class="form-control" value="" placeholder="显示名称不可为空" maxlength="20" data-valid="true" />
                     </div>
                 </div>
                 <div class="form-group">
@@ -151,6 +151,13 @@
                     <i class="fa fa-save"></i>
                     <span>提交</span>
                 </button>
+                <div class="slidercaptcha forgot reg card">
+                    <div class="card-header">
+                        <span>请完成安全验证</span>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    </div>
+                    <div class="card-body"><div id="regcap"></div></div>
+                </div>
             </div>
         </div>
     </div>
@@ -199,6 +206,13 @@
                     <i class="fa fa-send-o"></i>
                     <span>提交</span>
                 </button>
+                <div class="slidercaptcha forgot card">
+                    <div class="card-header">
+                        <span>请完成安全验证</span>
+                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                    </div>
+                    <div class="card-body"><div id="forgotcap"></div></div>
+                </div>
             </div>
         </div>
     </div>

Bootstrap.Admin/wwwroot/css/login-responsive.css

@@ -38,6 +38,9 @@
     .slidercaptcha {
         top: -254px;
         left: -15px;
+    }
+
+    .slidercaptcha, .slidercaptcha.forgot {
         width: 310px;
         height: 280px;
     }

Bootstrap.Admin/wwwroot/css/login.css

@@ -86,3 +86,17 @@
         .slidercaptcha.card .card-header .close:hover {
             color: #fff;
         }
+
+.slidercaptcha.forgot {
+    position: absolute;
+    left: auto;
+    right: 14px;
+    bottom: 14px;
+    top: auto;
+    margin: 0;
+    width: 274px;
+}
+
+.slidercaptcha.reg {
+    bottom: 60px;
+}

Bootstrap.Admin/wwwroot/js/login.js

@@ -13,43 +13,57 @@
         }
     });
 
-    $.extend({
+    $.extend({
-        captchaCheck: function (success) {
+        captchaCheck: function (captcha, success) {
             $.bc({
                 url: "api/OnlineUsers",
                 method: "put",
                 callback: function (result) {
-                    if (result) $captcha.addClass('d-block');
+                    if (result) captcha.addClass('d-block');
                     else success();
                 }
-            });
+            });
+        },
+        capWidth: function () {
+            return $(window).width() < 768 ? 216 : 280;
+        },
+        capHeight: function () {
+            return $(window).width() < 768 ? 110 : 150;
+        },
+        capRegSuccess: function () {
+            $.bc({
+                url: "api/Register",
+                data: { UserName: $('#userName').val(), Password: $('#password').val(), DisplayName: $('#displayName').val(), Description: $('#description').val() },
+                modal: '#dialogNew',
+                method: "post",
+                callback: function (result) {
+                    var title = result ? "提交成功<br/>等待管理员审批" : "提交失败";
+                    lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
+                }
+            });
+        },
+        capForgotSuccess: function () {
+            $.bc({
+                url: "api/Register",
+                data: { UserName: $('#f_userName').val(), DisplayName: $('#f_displayName').val(), Reason: $('#f_desc').val() },
+                modal: '#dialogForgot',
+                method: "put",
+                callback: function (result) {
+                    var title = result ? "提交成功<br/>等待管理员重置密码" : "提交失败";
+                    lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
+                }
+            });
         }
     });
 
     $('#btnSubmit').on('click', function () {
-        $.bc({
+        $.captchaCheck($('#dialogNew .slidercaptcha'), $.capRegSuccess);
-            url: "api/Register",
+        return false;
-            data: { UserName: $('#userName').val(), Password: $('#password').val(), DisplayName: $('#displayName').val(), Description: $('#description').val() },
-            modal: '#dialogNew',
-            method: "post",
-            callback: function (result) {
-                var title = result ? "提交成功<br/>等待管理员审批" : "提交失败";
-                lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
-            }
-        });
     });
 
     $('#btnForgot').on('click', function () {
-        $.bc({
+        $.captchaCheck($('#dialogForgot .slidercaptcha'), $.capForgotSuccess);
-            url: "api/Register",
+        return false;
-            data: { UserName: $('#f_userName').val(), DisplayName: $('#f_displayName').val(), Reason: $('#f_desc').val() },
-            modal: '#dialogForgot',
-            method: "put",
-            callback: function (result) {
-                var title = result ? "提交成功<br/>等待管理员重置密码" : "提交失败";
-                lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
-            }
-        });
     });
 
     $('.rememberPwd').on('click', function () {
@@ -65,26 +79,36 @@
         }
     });
 
-    var $captcha = $('.slidercaptcha');
+    $('.slidercaptcha .close').on('click', function (e) {
-    $('.slidercaptcha .close').on('click', function () {
+        $(this).parents('.slidercaptcha').removeClass('d-block');
-        $captcha.removeClass('d-block');
+        return false;
     });
 
     $('button[type="submit"]').on('click', function (e) {
-        $.captchaCheck(function () {
+        $.captchaCheck($('#login .slidercaptcha'), function () {
             $('form').submit();
         });
         return false;
     });
 
-    $('#captcha').sliderCaptcha({
+    $('#captcha, #regcap, #forgotcap').sliderCaptcha({
-        width: $(window).width() < 768 ? 216 : 280,
+        width: $.capWidth(),
-        height: $(window).width() < 768 ? 110 : 150,
+        height: $.capHeight(),
         setSrc: function () {
             return 'http://pocoafrro.bkt.clouddn.com/Pic' + Math.round(Math.random() * 136) + '.jpg';
         },
         onSuccess: function () {
-            $('form').submit();
+            var parent = this.$element.parents('.slidercaptcha').removeClass('d-block');
+            this.reset();
+            if (parent.hasClass('reg')) {
+                $.capRegSuccess();
+            }
+            else if (parent.hasClass('forgot')) {
+                $.capForgotSuccess();
+            }
+            else {
+                $('form').submit();
+            }
         }
     });
 });

Bootstrap.Admin/wwwroot/lib/captcha/longbow.slidercaptcha.js

@@ -185,7 +185,7 @@
         $(this.refreshIcon).on('click', function () {
             that.text.text(that.options.barText);
             that.reset();
-            if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element);
+            if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that);
         });
 
         var originX, originY, trail = [],
@@ -226,10 +226,10 @@
             } = that.verify()
             if (spliced && verified) {
                 that.sliderContainer.addClass('sliderContainer_success');
-                if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element);
+                if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that);
             } else {
                 that.sliderContainer.addClass('sliderContainer_fail');
-                if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element);
+                if ($.isFunction(that.options.onFail)) that.options.onFail.call(that);
                 setTimeout(() => {
                     that.text.text(that.options.failedText);
                     that.reset();