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

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

* perf: 优化验证码的高度

Co-authored-by: ibuler <ibuler@qq.com>

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):

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 %}

apps/jumpserver/settings/base.py

@@ -64,6 +64,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django.forms',
 ]
 
 

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 = {

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'),

apps/templates/captcha/field.html

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

apps/templates/captcha/hidden_field.html

@@ -1 +0,0 @@
-<input id="{{id}}_0" name="{{name}}_0" type="hidden" value="{{key}}" />

apps/templates/captcha/image.html

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

apps/templates/captcha/text_field.html

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