添加用户登录（只有管理员需要验证），注册的验证码

account/serializers.py

@@ -7,6 +7,7 @@ from .models import User
 class UserLoginSerializer(serializers.Serializer):
     username = serializers.CharField(max_length=30)
     password = serializers.CharField(max_length=30)
+    captcha = serializers.CharField(required=False,min_length=4,max_length=4)
 
 
 class UsernameCheckSerializer(serializers.Serializer):
@@ -22,6 +23,7 @@ class UserRegisterSerializer(serializers.Serializer):
     real_name = serializers.CharField(max_length=30)
     password = serializers.CharField(max_length=30, min_length=6)
     email = serializers.EmailField(max_length=254)
+    captcha = serializers.CharField(max_length=4, min_length=4)
 
 
 class UserChangePasswordSerializer(serializers.Serializer):

static/src/js/app/oj/account/login.js

@@ -1,26 +1,31 @@
 require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, csrfTokenHeader) {
+    var applied_captcha = false;
     $('form').validator().on('submit', function (e) {
         if (!e.isDefaultPrevented()) {
             var username = $("#username").val();
             var password = $("#password").val();
+            var ajaxData = {username: username, password: password};
+            if (applied_captcha) {
+                ajaxData.captcha = $("#captcha").val();
+            }
             $.ajax({
                 beforeSend: csrfTokenHeader,
                 url: "/api/login/",
-                data: {username: username, password: password},
+                data: ajaxData,
                 dataType: "json",
                 method: "post",
                 success: function (data) {
                     if (!data.code) {
                         //成功登陆
                         var ref = document.referrer;
-                        if(ref){
+                        if (ref) {
                             // 注册页和本页的来源的跳转回首页，防止死循环
-                            if(ref.indexOf("register") > -1 || ref.indexOf("login") > -1){
+                            if (ref.indexOf("register") > -1 || ref.indexOf("login") > -1) {
                                 location.href = "/";
                                 return;
                             }
                             // 判断来源，只有同域下才跳转
-                            if(ref.split("/")[2].split(":")[0] == location.hostname){
+                            if (ref.split("/")[2].split(":")[0] == location.hostname) {
                                 location.href = ref;
                                 return;
                             }
@@ -28,6 +33,7 @@ require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, c
                         location.href = "/";
                     }
                     else {
+                        refresh_captcha();
                         bsAlert(data.data);
                     }
                 }
@@ -35,5 +41,34 @@ require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, c
             });
             return false;
         }
-    })
+    });
+
+    $('#username').blur(function () {
+        if ($("#username").val()) {
+            $.ajax({
+                beforeSend: csrfTokenHeader,
+                url: "/api/account_security_check/?username=" + $("#username").val(),
+                method: "get",
+                success: function (data) {
+                    if (!data.code) {
+                        if (data.data.applied_captcha) {
+                            $('#captcha-area').html('<label for="captcha">验证码</label>&nbsp;&nbsp;<img src="/captcha/" id="captcha-img"><small><p></p></small><input type="text" class="form-control input-lg" id="captcha" name="captcha" placeholder="验证码" maxlength="4" data-error="请填写验证码" required><div class="help-block with-errors"></div>');
+                            applied_captcha = true;
+                        }
+                        else {
+                            $('#captcha-area').html('');
+                            applied_captcha = false;
+                        }
+                    }
+                }
+            });
+        }
+    });
+    function refresh_captcha(){
+        $("#captcha-img")[0].src = "/captcha/?" + Math.random();
+        $("#captcha")[0].value = "";
+    }
+    $("#captcha-img").click(function(){
+        refresh_captcha();
+    });
 });

static/src/js/app/oj/account/register.js

@@ -5,10 +5,11 @@ require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, c
             var realName = $("#real_name").val();
             var password = $("#password").val();
             var email = $("#email").val();
+            var captcha = $("#captcha").val();
             $.ajax({
                 beforeSend: csrfTokenHeader,
                 url: "/api/register/",
-                data: {username: username, real_name: realName, password: password, email: email},
+                data: {username: username, real_name: realName, password: password, email: email, captcha:captcha},
                 dataType: "json",
                 method: "post",
                 success: function (data) {
@@ -16,11 +17,20 @@ require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, c
                         window.location.href = "/login/";
                     }
                     else {
+                        refresh_captcha();
                         bsAlert(data.data);
                     }
                 }
             });
             return false;
         }
-    })
+    });
+    function refresh_captcha() {
+        $("#captcha-img")[0].src = "/captcha/?" + Math.random();
+        $("#captcha")[0].value = "";
+    }
+
+    $("#captcha-img").click(function () {
+        refresh_captcha();
+    });
 });

template/src/oj/account/change_password.html

@@ -21,9 +21,10 @@
                     <div class="help-block with-errors"></div>
                 </div>
                 <div class="form-group">
-                    <label for="confirm_password">验证码</label>
+                    <label for="captcha">验证码</label>
-                    <img src="/captcha/" id="captcha-img">
+                    &nbsp;&nbsp;<img src="/captcha/" id="captcha-img">
-                    <input type="text" class="form-control input-lg" id="captcha" name="captcha" placeholder="验证码" maxlength="4" required>
+                    <small><p></p></small>
+                    <input type="text" class="form-control input-lg" id="captcha" name="captcha" placeholder="验证码" maxlength="4" data-error="请填写验证码" required>
                     <div class="help-block with-errors"></div>
                 </div>
                 <div class="form-group">

template/src/oj/account/login.html

@@ -19,6 +19,7 @@
 
                 <div class="help-block with-errors"></div>
             </div>
+            <div class="form-group" id="captcha-area"></div>
             <div class="form-group">
                 <button type="submit" class="btn btn-primary">提交</button>
             </div>

template/src/oj/account/register.html

@@ -31,6 +31,12 @@
                            placeholder="确认密码" data-match="#password" data-match-error="两个密码不一致" data-error="请填写确认密码" required>
                     <div class="help-block with-errors"></div>
                 </div>
+                <div class="form-group">
+                    <label for="captcha">验证码</label>
+                    &nbsp;&nbsp;<img src="/captcha/" id="captcha-img"><small><p></p></small>
+                    <input type="text" class="form-control input-lg" id="captcha" name="captcha" placeholder="验证码" maxlength="4" data-error="请填写验证码" required>
+                    <div class="help-block with-errors"></div>
+                </div>
                 <div class="form-group">
                     <button type="submit" class="btn btn-primary">提交</button>
                 </div>