Introduce several improvements (please see the commit message for details)

1. Implement `BoundFieldWithCharacterCounter` to add character counter specific data to any `CharField` inputs.
2. Implement character counter in JavaScript so we can enhance the page progressively.
3. Make `ProfileForm.bio` field use `BoundFieldWithCharacterCounter`.
4. Set maxlength for `ProfileForm.bio` field.
5. Render `profile.bio` with `urlize` to convert URLs and mail addresses in the plaintext into clickable links.

Co-authored-by: Sarah Boyce <42296566+sarahboyce@users.noreply.github.com>

Author: ertgl

accounts/forms.py

@@ -3,6 +3,8 @@
 from django.db.models import ProtectedError
 from django.utils.translation import gettext_lazy as _
 
+from contrib.django.forms.boundfields import BoundFieldWithCharacterCounter
+
 from .models import Profile
 
 
@@ -21,7 +23,13 @@ class ProfileForm(forms.ModelForm):
         required=False, widget=forms.TextInput(attrs={"placeholder": _("Email")})
     )
     bio = forms.CharField(
-        required=False, widget=forms.Textarea(attrs={"placeholder": _("Bio")})
+        bound_field_class=BoundFieldWithCharacterCounter,
+        required=False,
+        max_length=3_000,
+        widget=forms.Textarea(attrs={"placeholder": _("Bio")}),
+        help_text=_(
+            "URLs and email addresses are automatically converted into clickable links.",
+        ),
     )
 
     class Meta:

contrib/__init__.py

@@ -0,0 +1,15 @@
+from contextlib import suppress
+from django.forms.boundfield import BoundField
+
+
+class BoundFieldWithCharacterCounter(BoundField):
+
+    def get_characters_remaining_count(self):
+        characters_remaining_count = None
+        max_length = None
+        with suppress(TypeError, ValueError):
+            max_length = int(self.field.max_length)
+        if isinstance(max_length, int):
+            value = self.value().replace("\r\n", "\n").replace("\r", "\n")
+            characters_remaining_count = max_length - len(value)
+        return characters_remaining_count

contrib/django/__init__.py

@@ -2967,6 +2967,10 @@ form {
             background: var(--primary);
         }
     }
+
+    .help-text  {
+      @include font-size(14);
+    }
 }
 
 .form-general {

contrib/django/forms/__init__.py

@@ -0,0 +1,67 @@
+let CHARACTER_COUNTER_INPUT_SELECTOR_ATTR = 'data-character-counter-input-selector';
+
+let CHARACTER_COUNTER_INDICATOR_SELECTOR_ATTR = 'data-character-counter-indicator-selector';
+
+let CharacterCounter = function (inputElement, indicatorElement) {
+  this.inputElement = inputElement;
+  this.indicatorElement = indicatorElement;
+};
+
+CharacterCounter.prototype = {
+  handleInputEvent: function (ev) {
+    this.updateDOM();
+  },
+
+  updateDOM: function () {
+    if (typeof this.inputElement.maxLength !== 'number') {
+      return;
+    }
+
+    if (typeof this.inputElement.value !== 'string') {
+      return;
+    }
+
+    const remaining = this.inputElement.maxLength - this.inputElement.value.length;
+    this.indicatorElement.innerText = String(remaining);
+  },
+};
+
+function setupCharacterCounter(counterElement) {
+  let inputSelector = counterElement.getAttribute(CHARACTER_COUNTER_INPUT_SELECTOR_ATTR);
+  if (typeof inputSelector !== 'string') {
+    return;
+  }
+
+  let indicatorSelector = counterElement.getAttribute(CHARACTER_COUNTER_INDICATOR_SELECTOR_ATTR);
+  if (typeof indicatorSelector !== 'string') {
+    return;
+  }
+
+  let inputElement = document.querySelector(inputSelector);
+  if (inputElement == null) {
+    return;
+  }
+
+  let indicatorElement = document.querySelector(indicatorSelector);
+  if (indicatorElement == null) {
+    return;
+  }
+
+  let characterCounter = new CharacterCounter(inputElement, indicatorElement);
+
+  inputElement.addEventListener(
+    'input',
+    characterCounter.handleInputEvent.bind(characterCounter),
+  )
+}
+
+function setupCharacterCounters() {
+  let counterElements = document.getElementsByClassName('character-counter');
+  for (let i = 0; i < counterElements.length; i++) {
+    setupCharacterCounter(counterElements[i]);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  setupCharacterCounters();
+});

contrib/django/forms/boundfields.py

@@ -1,8 +1,12 @@
 {% extends "registration/base.html" %}
-{% load i18n %}
+{% load i18n static %}
 
 {% block title %}{% translate "Edit your profile" %}{% endblock %}
 
+{% block head_extra %}
+  <script src="{% static "js/mod/character-counter.js" %}"></script>
+{% endblock head_extra %}
+
 {% block content %}
 
     {% if form.errors %}
@@ -29,9 +33,31 @@ <h1>{% translate "Edit your profile" %}</h1>
 
         <div>
             {% if form.bio.errors %}
-                <p class="errors">{{ form.bio.errors.as_text }}</p>
+                <p id="{{ form.bio.id_for_label }}_error" class="errors">
+                  {{ form.bio.errors.as_text }}
+                </p>
             {% endif %}
             <p>{{ form.bio }}</p>
+            <div id="{{ form.bio.id_for_label }}_helptext" class="help-text">
+                <div>{{ form.bio.help_text }}</div>
+                {% with bio_characters_remaining_count=form.bio.get_characters_remaining_count %}
+                    {% if bio_characters_remaining_count is not None %}
+                        <div
+                            class="character-counter"
+                            data-character-counter-input-selector="#{{ form.bio.id_for_label }}"
+                            data-character-counter-indicator-selector="#{{ form.bio.id_for_label }}_characters_remaining_count"
+                        >
+                            <span>{% translate "Characters remaining:" %}</span>
+                            <span
+                                id="{{ form.bio.id_for_label }}_characters_remaining_count"
+                                class="character-counter__indicator"
+                            >
+                                {{ bio_characters_remaining_count }}
+                            </span>
+                        </div>
+                    {% endif %}
+                {% endwith %}
+            </div>
         </div>
 
         <div class="submit">

djangoproject/scss/_style.scss

@@ -43,7 +43,7 @@ <h1 class="name">
 
         {% if user_obj.profile.bio %}
             <p class="bio">
-                {{ user_obj.profile.bio }}
+                {{ user_obj.profile.bio|urlize }}
             </p>
         {% endif %}