From d4feaf1e08ba0559cd732d8f495c9155cb93e8d2 Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Thu, 10 Dec 2020 20:48:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=94=B1=E4=BA=8E?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0django=20captch=E7=89=88=E6=9C=AC=E5=BC=95?=
 =?UTF-8?q?=E8=B5=B7=E7=9A=84css=E4=B8=A2=E5=A4=B1=E9=97=AE=E9=A2=98=20(#5?=
 =?UTF-8?q?204)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复由于更新django captch版本引起的css丢失问题

* perf: 优化验证码的高度

Co-authored-by: ibuler <ibuler@qq.com>
---
 apps/authentication/forms.py                  |  8 +++--
 .../authentication/_captcha_field.html        | 29 +++++++++++++++++++
 apps/jumpserver/settings/base.py              |  1 +
 apps/jumpserver/settings/libs.py              |  4 +--
 apps/jumpserver/urls.py                       |  1 -
 apps/templates/captcha/field.html             | 12 --------
 apps/templates/captcha/hidden_field.html      |  1 -
 apps/templates/captcha/image.html             |  4 ---
 apps/templates/captcha/text_field.html        |  7 -----
 9 files changed, 38 insertions(+), 29 deletions(-)
 create mode 100644 apps/authentication/templates/authentication/_captcha_field.html
 delete mode 100644 apps/templates/captcha/field.html
 delete mode 100644 apps/templates/captcha/hidden_field.html
 delete mode 100644 apps/templates/captcha/image.html
 delete mode 100644 apps/templates/captcha/text_field.html

diff --git a/apps/authentication/forms.py b/apps/authentication/forms.py
index 2f03d935b..fe28edb68 100644
--- a/apps/authentication/forms.py
+++ b/apps/authentication/forms.py
@@ -4,7 +4,7 @@
 from django import forms
 from django.conf import settings
 from django.utils.translation import gettext_lazy as _
-from captcha.fields import CaptchaField
+from captcha.fields import CaptchaField, CaptchaTextInput
 
 
 class UserLoginForm(forms.Form):
@@ -26,8 +26,12 @@ class UserCheckOtpCodeForm(forms.Form):
     otp_code = forms.CharField(label=_('MFA code'), max_length=6)
 
 
+class CustomCaptchaTextInput(CaptchaTextInput):
+    template_name = 'authentication/_captcha_field.html'
+
+
 class CaptchaMixin(forms.Form):
-    captcha = CaptchaField()
+    captcha = CaptchaField(widget=CustomCaptchaTextInput)
 
 
 class ChallengeMixin(forms.Form):
diff --git a/apps/authentication/templates/authentication/_captcha_field.html b/apps/authentication/templates/authentication/_captcha_field.html
new file mode 100644
index 000000000..a190aacb7
--- /dev/null
+++ b/apps/authentication/templates/authentication/_captcha_field.html
@@ -0,0 +1,29 @@
+{% load i18n %}
+{% spaceless %}
+    <img src="{{ image }}" alt="captcha" class="captcha" />
+    <div class="row" style="padding-bottom: 10px">
+        <div class="col-sm-6">
+            <div class="input-group-prepend">
+                {% if audio %}
+                    <a title="{% trans "Play CAPTCHA as audio file" %}" href="{{ audio }}">
+                {% endif %}
+            </div>
+            {% include "django/forms/widgets/multiwidget.html" %}
+         </div>
+    </div>
+    <script>
+        var placeholder = '{% trans "Captcha" %}'
+        function refresh_captcha() {
+            $.getJSON("{% url "captcha-refresh" %}",
+                function (result) {
+                    $('.captcha').attr('src', result['image_url']);
+                    $('#id_captcha_0').val(result['key'])
+                })
+        }
+        $(document).ready(function () {
+            $('.captcha').click(refresh_captcha)
+            $('#id_captcha_1').addClass('form-control').attr('placeholder', placeholder)
+        })
+    </script>
+
+{% endspaceless %}
\ No newline at end of file
diff --git a/apps/jumpserver/settings/base.py b/apps/jumpserver/settings/base.py
index 47b3d7a04..2a6291751 100644
--- a/apps/jumpserver/settings/base.py
+++ b/apps/jumpserver/settings/base.py
@@ -64,6 +64,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django.forms',
 ]
 
 
diff --git a/apps/jumpserver/settings/libs.py b/apps/jumpserver/settings/libs.py
index 782d2bc06..8a8df7ca4 100644
--- a/apps/jumpserver/settings/libs.py
+++ b/apps/jumpserver/settings/libs.py
@@ -64,10 +64,10 @@ SWAGGER_SETTINGS = {
 
 
 # Captcha settings, more see https://django-simple-captcha.readthedocs.io/en/latest/advanced.html
-CAPTCHA_IMAGE_SIZE = (80, 33)
+CAPTCHA_IMAGE_SIZE = (140, 34)
 CAPTCHA_FOREGROUND_COLOR = '#001100'
 CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_dots',)
-CAPTCHA_TEST_MODE = CONFIG.CAPTCHA_TEST_MODE
+CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'
 
 # Django bootstrap3 setting, more see http://django-bootstrap3.readthedocs.io/en/latest/settings.html
 BOOTSTRAP3 = {
diff --git a/apps/jumpserver/urls.py b/apps/jumpserver/urls.py
index c6d85b48b..47518d946 100644
--- a/apps/jumpserver/urls.py
+++ b/apps/jumpserver/urls.py
@@ -30,7 +30,6 @@ api_v2 = [
     path('users/', include('users.urls.api_urls_v2', namespace='api-users-v2')),
 ]
 
-
 app_view_patterns = [
     path('auth/', include('authentication.urls.view_urls'), name='auth'),
     path('ops/', include('ops.urls.view_urls'), name='ops'),
diff --git a/apps/templates/captcha/field.html b/apps/templates/captcha/field.html
deleted file mode 100644
index 6979e870c..000000000
--- a/apps/templates/captcha/field.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{{image}}{{hidden_field}}{{text_field}}
-
-<script>
-    function refresh_captcha() {
-        $.getJSON("{% url "captcha-refresh" %}",
-                function (result) {
-                    $('.captcha').attr('src', result['image_url']);
-                    $('#id_captcha_0').val(result['key'])
-                })
-    }
-    $('.captcha').click(refresh_captcha)
-</script>
\ No newline at end of file
diff --git a/apps/templates/captcha/hidden_field.html b/apps/templates/captcha/hidden_field.html
deleted file mode 100644
index 36d7490a3..000000000
--- a/apps/templates/captcha/hidden_field.html
+++ /dev/null
@@ -1 +0,0 @@
-<input id="{{id}}_0" name="{{name}}_0" type="hidden" value="{{key}}" />
diff --git a/apps/templates/captcha/image.html b/apps/templates/captcha/image.html
deleted file mode 100644
index b4a415536..000000000
--- a/apps/templates/captcha/image.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{% load i18n %}
-{% spaceless %}
-    {% if audio %}<a title="{% trans "Play CAPTCHA as audio file" %}" href="{{audio}}">{% endif %}<img src="{{image}}" alt="captcha" class="captcha" />{% if audio %}</a>{% endif %}
-{% endspaceless %}
\ No newline at end of file
diff --git a/apps/templates/captcha/text_field.html b/apps/templates/captcha/text_field.html
deleted file mode 100644
index 413eb1893..000000000
--- a/apps/templates/captcha/text_field.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-<div class="row">
-    <div class="col-sm-6">
-        <input autocomplete="off" id="{{id}}_1" class="form-control" name="{{name}}_1" placeholder="{% trans 'Captcha' %}" type="text" />
-    </div>
-</div>
-</br>