修改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

@@ -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

@@ -14,19 +14,23 @@
     });
 
     $.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;
-    $('#btnSubmit').on('click', function () {
+        },
+        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() },
@@ -37,9 +41,8 @@
                     lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
                 }
             });
-    });
+        },
-
+        capForgotSuccess: function () {
-    $('#btnForgot').on('click', function () {
             $.bc({
                 url: "api/Register",
                 data: { UserName: $('#f_userName').val(), DisplayName: $('#f_displayName').val(), Reason: $('#f_desc').val() },
@@ -50,6 +53,17 @@
                     lgbSwal({ timer: 1500, title: title, type: result ? "success" : "error" });
                 }
             });
+        }
+    });
+
+    $('#btnSubmit').on('click', function () {
+        $.captchaCheck($('#dialogNew .slidercaptcha'), $.capRegSuccess);
+        return false;
+    });
+
+    $('#btnForgot').on('click', function () {
+        $.captchaCheck($('#dialogForgot .slidercaptcha'), $.capForgotSuccess);
+        return false;
     });
 
     $('.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 () {
+            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();