Fixes issue 451 (#452)

Author: danirus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [2.10.3] - 2025-02-28
+
+* Fixes [issue 451](https://github.com/danirus/django-comments-xtd/issues/451): Exceeding the `COMMENT_MAX_LENGTH` does not reflect in the UI, either when using django templates or when using the JavaScript plugin.
+
 ## [2.10.2] - 2025-01-07
 
 * Add reminder about template loading order to the documentation.

django_comments_xtd/__init__.py

@@ -17,7 +17,7 @@ def get_form():
     return import_string(settings.COMMENTS_XTD_FORM_CLASS)
 
 
-VERSION = (2, 10, 2, 'f', 0)  # following PEP 440
+VERSION = (2, 10, 3, 'f', 0)  # following PEP 440
 
 
 def get_version():

django_comments_xtd/api/frontend.py

@@ -124,6 +124,7 @@ def get_props(cls, obj, user, request=None):
             "default_followup": settings.COMMENTS_XTD_DEFAULT_FOLLOWUP,
             "html_id_suffix": get_html_id_suffix(obj),
             "max_thread_level": max_thread_level_for_content_type(ctype),
+            "comment_max_length": settings.COMMENT_MAX_LENGTH,
         }
         try:
             user_is_authenticated = user.is_authenticated()

django_comments_xtd/forms.py

@@ -66,3 +66,15 @@ def get_comment_create_data(self, site_id=None):
                      'followup': self.cleaned_data['followup'],
                      'content_object': target})
         return data
+
+    def clean(self):
+        cleaned_data = super().clean()
+        for field_name in self.errors.keys():
+            if 'class' not in self.fields[field_name].widget.attrs.keys():
+                continue
+            widget_classes = self.fields[field_name].widget.attrs['class']
+            widget_classes = widget_classes.split(" ")
+            widget_classes.append("is-invalid")
+            widget_classes = " ".join(widget_classes)
+            self.fields[field_name].widget.attrs['class'] = widget_classes
+        return cleaned_data

django_comments_xtd/static/django_comments_xtd/js/src/commentform.jsx

@@ -6,13 +6,13 @@ import { getCookie } from './lib.js';
 import { InitContext } from './context';
 
 
-export function FieldIsRequired({replyTo}) {
+export function FieldIsRequired({replyTo, message}) {
   return (
     <span
       className="form-text small invalid-feedback"
       {...((replyTo > 0) && {style: {"fontSize": "0.71rem"}})}
     >
-      {django.gettext("This field is required.")}
+      {django.gettext(message)}
     </span>
   );
 }
@@ -67,6 +67,7 @@ export function PreviewComment({avatar, name, url, comment, replyTo}) {
 
 export function CommentForm({ replyTo, onCommentCreated }) {
   const {
+    comment_max_length,
     default_followup,
     default_form,
     is_authenticated,
@@ -82,36 +83,59 @@ export function CommentForm({ replyTo, onCommentCreated }) {
     avatar: undefined, name: "", email: "", url: "", comment: "",
     followup: default_followup,
     errors: { name: false, email: false, comment: false },
-    alert: { message: "", cssc: "" }
+    alert: { message: "", cssc: "" },
+    comment_field_error: "",
   });
 
+  const default_error = "This field is required.";
+
+  const get_comment_length_error_msg = () => {
+    return (
+      `Ensure this value has at most ${comment_max_length} `
+      + `character (it has ${lstate.comment.length}).`
+    );
+  }
+
   const handle_input_change = (event) => {
     const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const iname = target.name;
 
-    setLstate({ ...lstate, [iname]: value });
+    let comment_field_error = "";
+    if (lstate.comment_field_error.length > 0) {
+      comment_field_error = get_comment_length_error_msg();
+    }
+    setLstate({
+      ...lstate,
+      [iname]: value,
+      comment_field_error: comment_field_error
+    });
   }
 
   const is_valid_data = () => {
-    let is_valid_name = true, is_valid_email = true;
+    let is_valid_name = true, is_valid_email = true, comment_field_error = "";
 
     if (!is_authenticated || request_name)
       is_valid_name = (/^\s*$/.test(lstate.name)) ? false : true;
 
     if (!is_authenticated || request_email_address)
       is_valid_email = (/\S+@\S+\.\S+/.test(lstate.email)) ? true : false;
 
-    const is_valid_comment = (/^\s*$/.test(lstate.comment)) ? false : true;
+    let is_valid_comment = (/^\s*$/.test(lstate.comment)) ? false : true;
+    if (lstate.comment.length >= comment_max_length) {
+      is_valid_comment = false;
+      comment_field_error = get_comment_length_error_msg();
+    }
 
     setLstate({
       ...lstate,
       errors: {
         ...lstate.errors,
         name: !is_valid_name,
         email: !is_valid_email,
-        comment: !is_valid_comment
-      }
+        comment: !is_valid_comment,
+      },
+      comment_field_error: comment_field_error
     });
 
     return is_valid_name && is_valid_email && is_valid_comment;
@@ -253,12 +277,17 @@ export function CommentForm({ replyTo, onCommentCreated }) {
         <div className={(replyTo > 0) ? "col-12" : "col-10"}>
           <textarea
             required name="comment" id="id_comment"
-            value={lstate.comment} maxLength={3000}
+            value={lstate.comment}
             placeholder={django.gettext("Your comment")}
             className={get_input_css_classes("comment")}
             onChange={handle_input_change}
           />
-          {lstate.errors.comment && <FieldIsRequired replyTo={replyTo} />}
+          {lstate.errors.comment && (
+            <FieldIsRequired
+              replyTo={replyTo}
+              message={lstate.comment_field_error || default_error}
+            />
+          )}
         </div>
       </div>
     );
@@ -285,7 +314,12 @@ export function CommentForm({ replyTo, onCommentCreated }) {
             onChange={handle_input_change}
             className={get_input_css_classes("name")}
           />
-          {lstate.errors.name && <FieldIsRequired replyTo={replyTo} />}
+          {lstate.errors.name && (
+            <FieldIsRequired
+              replyTo={replyTo}
+              message="This field is required."
+            />
+          )}
         </div>
       </div>
     );

django_comments_xtd/static/django_comments_xtd/js/src/context.js

@@ -42,7 +42,8 @@ export const init_context_default = {
   },
   default_followup: false,
   html_ud_suffix: "",
-  max_thread_level: -1
+  max_thread_level: -1,
+  comment_max_length: 3000,
 }
 
 export const InitContext = React.createContext(init_context_default);

django_comments_xtd/static/django_comments_xtd/js/tests/commentform.test.jsx

@@ -16,7 +16,7 @@ import { InitContext, init_context_default } from '../src/context.js';
 describe("Test <FieldIsRequired />", () => {
   it("Renders a <span> with 'This field is required.' text", () => {
     const { container } = render(
-      <FieldIsRequired replyTo={0} />
+      <FieldIsRequired replyTo={0} message={"This field is required."} />
     );
 
     const span_elem = container.querySelector("span");
@@ -30,7 +30,7 @@ describe("Test <FieldIsRequired />", () => {
 
   it("Renders a <span> with a explicit style attribute", () => {
     const { container } = render(
-      <FieldIsRequired replyTo={1} />  // If replyTo > 0.
+      <FieldIsRequired replyTo={1} message={"This field is required."} />
     );
 
     const span_elem = container.querySelector("span");
@@ -191,6 +191,7 @@ describe("Test <CommentForm />", () => {
     };
     props = {
       ...init_context_default,
+      comment_max_length: 140,
       default_form
     };
   });
@@ -293,6 +294,49 @@ describe("Test <CommentForm />", () => {
     expect(field_is_required.textContent).toEqual("This field is required.");
   });
 
+  it("Submits with comment field too long displays error", async () => {
+    global.fetch = jest.fn();
+    const { container } = render(
+      <InitContext.Provider value={props}>
+        <CommentForm
+          replyTo={0}
+          onCommentCreated={() => commentCreatedHandler()}
+        />
+      </InitContext.Provider>
+    );
+
+    const long_comment = (
+      "Cras faucibus vitae nisi sit amet semper. Aenean varius, neque sit"
+      + " amet porta malesuada, odio est laoreet tellus, non fermentum nunc"
+      + " ex et est. Sed consequat sit amet turpis ut congue. Aenean"
+      + " convallis quis ex a porta."
+    );
+
+    const comment_error_msg = (
+      `Ensure this value has at most 140 character`
+      + ` (it has ${long_comment.length}).`
+    );
+
+    const comment_field = container.querySelector("[name=comment]");
+    fireEvent.change(comment_field, {target: {value: long_comment}});
+    const name_field = container.querySelector("[name=name]");
+    fireEvent.change(name_field, {target: {value: "Fulanito de Tal"}});
+    const email_field = container.querySelector("[name=email]");
+    fireEvent.change(email_field, {target: {value: "[email protected]"}});
+
+    const post_button = container.querySelector("[name=post]");
+    expect(post_button).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(post_button);
+    });
+
+    expect(global.fetch).not.toHaveBeenCalled();
+    expect(comment_field).toBeInTheDocument();
+    const field_is_required = comment_field.nextSibling;
+    expect(field_is_required.nodeName).toEqual("SPAN");
+    expect(field_is_required.textContent).toEqual(comment_error_msg);
+  });
+
   it("Submits with name field empty does not call fetch", async () => {
     global.fetch = jest.fn();
     const { container } = render(

django_comments_xtd/templates/comments/form.html

@@ -10,8 +10,11 @@
     {% if field.is_hidden %}<div>{{ field }}</div>{% endif %}
     {% endfor %}
     <div style="display:none">{{ form.honeypot }}</div>
-    <div class="row justify-content-center my-3 form-group{% if 'comment' in form.errors %} has-danger{% endif %}">
-      <div class="col-10">{{ form.comment }}</div>
+    <div class="row justify-content-center my-3 form-group">
+      <div class="col-10">
+        {{ form.comment }}
+        {% if 'comment' in form.errors %}<span class="form-text small invalid-feedback">{{ form.errors.comment.0 }}</span>{% endif %}
+      </div>
     </div>
 
     {% if not request.user.is_authenticated or not request.user.get_full_name %}

django_comments_xtd/tests/test_frontend.py

@@ -3,7 +3,7 @@
 from django.contrib.auth.models import AnonymousUser, User
 from django.test import RequestFactory, TestCase
 
-from django_comments_xtd.api.frontend import commentbox_props_response
+from django_comments_xtd.api.frontend import commentbox_props_response, settings
 from django_comments_xtd.models import XtdComment
 from django_comments_xtd.tests.models import Diary, UUIDDiary
 
@@ -28,6 +28,7 @@ def test_comment_box_props_response(self):
         self.assertEqual(d['count_url'], '/comments/api/tests-diary/1/count/')
         self.assertEqual(d['list_url'], '/comments/api/tests-diary/1/')
         self.assertEqual(d['current_user'], "1:bob")
+        self.assertEqual(d['comment_max_length'], settings.COMMENT_MAX_LENGTH)
 
     def test_comment_box_props_response_anonymous(self):
         request_factory = RequestFactory()

docs/conf.py

@@ -67,7 +67,7 @@
 # The short X.Y version.
 version = '2.10'
 # The full version, including alpha/beta/rc tags.
-release = '2.10.2'
+release = '2.10.3'
 
 releases = [
     "latest",