Fix/signup error style (#88)

Add django widget tweaks
---------

Co-authored-by: Mariatta <[email protected]>

Author: vybhavg

.gitignore

@@ -1,14 +1,25 @@
+# Python cache
+__pycache__/
+*.py[cod]
+
+# Virtual envs
+.venv/
+venv/
+env/
+
+# Env files
 .envrc
 .env.dev
 .env.prod
 .env.prod.db
 .env
-.venv
-venv
-env
 
+# Coverage and state
 .coverage
 .state
-staticroot
 
-__pycache__/
+# Django static build
+staticroot/
+
+# Editor files
+.vscode/

portal/settings.py

@@ -49,6 +49,7 @@
     "portal",
     "volunteer",
     "portal_account",
+    "widget_tweaks",
 ]
 
 MIDDLEWARE = [

requirements-app.txt

@@ -10,4 +10,5 @@ whitenoise==6.9.0
 dj-database-url==2.3.0
 boto3==1.38.5
 django-storages==1.14.6
-pillow==11.2.1
+django-widget-tweaks==1.5.0
+pillow==11.2.1

templates/account/signup.html

@@ -1,46 +1,60 @@
 {% extends "account/base_entrance.html" %}
 {% load allauth i18n %}
 {% load django_bootstrap5 %}
+{% load widget_tweaks %}
 {% block head_title %}
     {% trans "Signup" %}
 {% endblock head_title %}
 {% block content %}
     {% element h1 %}
-    {% trans "Sign Up" %}
-{% endelement %}
-{% setvar link %}
-<a href="{{ login_url }}">
-{% endsetvar %}
-{% setvar end_link %}
-</a>
-{% endsetvar %}
-{% element p %}
-{% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
-{% endelement %}
-{% if not SOCIALACCOUNT_ONLY %}
-    {% url 'account_signup' as action_url %}
-    {% element form form=form method="post" action=action_url tags="entrance,signup" %}
-    {% slot body %}
-    {% csrf_token %}
-    {% element fields form=form unlabeled=True %}
-{% endelement %}
-{{ redirect_field }}
-{% endslot %}
-{% slot actions %}
-{% element button tags="prominent,signup" type="submit" %}
-{% trans "Sign Up" %}
-{% endelement %}
-{% endslot %}
-{% endelement %}
-{% endif %}
-{% if PASSKEY_SIGNUP_ENABLED %}
-    {% element hr %}
-{% endelement %}
-{% element button href=signup_by_passkey_url tags="prominent,signup,outline,primary" %}
-{% trans "Sign up using a passkey" %}
-{% endelement %}
-{% endif %}
-{% if SOCIALACCOUNT_ENABLED %}
-    {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
-{% endif %}
+        {% trans "Sign Up" %}
+    {% endelement %}
+    {% setvar link %}
+        <a href="{{ login_url }}">
+        {% endsetvar %}
+        {% setvar end_link %}
+        </a>
+    {% endsetvar %}
+    {% element p %}
+        {% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
+    {% endelement %}
+    {% if not SOCIALACCOUNT_ONLY %}
+        {% url 'account_signup' as action_url %}
+
+        {% element form form=form method="post" action=action_url tags="entrance,signup" %}
+            {% slot body %}
+                {% csrf_token %}
+                {% for field in form %}
+                <div class="mb-3">
+                    {{ field.label_tag }}
+                    {% if field.errors %}
+                    {{ field|add_class:"form-control is-invalid" }}
+                    {% for error in field.errors %}
+                        <div class="invalid-feedback">{{ error }}</div>
+                    {% endfor %}
+                    {% else %}
+                    {{ field|add_class:"form-control" }}
+                    {% endif %}
+                </div>
+                {% endfor %}
+                {{ redirect_field }}
+            {% endslot %}
+            {% slot actions %}
+                {% element button tags="prominent,signup" type="submit" %}
+                    {% trans "Sign Up" %}
+                {% endelement %}
+            {% endslot %}
+        {% endelement %}
+
+    {% endif %}
+    {% if PASSKEY_SIGNUP_ENABLED %}
+        {% element hr %}
+        {% endelement %}
+        {% element button href=signup_by_passkey_url tags="prominent,signup,outline,primary" %}
+            {% trans "Sign up using a passkey" %}
+        {% endelement %}
+    {% endif %}
+    {% if SOCIALACCOUNT_ENABLED %}
+        {% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
+    {% endif %}
 {% endblock content %}

tests/portal/test_forms.py

@@ -0,0 +1,79 @@
+import pytest
+from allauth.account.forms import SignupForm
+from django.contrib.auth import get_user_model
+from django.contrib.sessions.middleware import SessionMiddleware
+from django.urls import reverse
+
+from portal.forms import CustomSignupForm
+
+User = get_user_model()
+
+
+@pytest.mark.django_db
+class TestCustomSignupForm:
+    @pytest.fixture
+    def form_data(self):
+        return {
+            "username": "testuser",
+            "email": "[email protected]",
+            "password1": "securepassword123",
+            "password2": "securepassword123",
+            "first_name": "Test",
+            "last_name": "User",
+        }
+
+    @pytest.fixture
+    def request_with_session(self, client):
+        """Create a request with session using the Django test client"""
+        # Make a dummy GET request
+        response = client.get(reverse("account_signup"))
+        request = response.wsgi_request
+
+        # Attach session middleware if not already
+        middleware = SessionMiddleware(lambda r: None)
+        middleware.process_request(request)
+        request.session.save()
+
+        return request
+
+    def test_form_inherits_from_allauth(self):
+        """Ensure CustomSignupForm inherits from allauth's SignupForm"""
+        assert issubclass(CustomSignupForm, SignupForm)
+
+    def test_form_has_custom_fields(self):
+        """Custom fields should be included and labeled correctly"""
+        form = CustomSignupForm()
+        assert "first_name" in form.fields
+        assert "last_name" in form.fields
+        assert form.fields["first_name"].label == "First Name"
+        assert form.fields["last_name"].label == "Last Name"
+
+    def test_form_save_method(self, form_data, request_with_session):
+        """Check that the form saves user with correct fields"""
+        form = CustomSignupForm(data=form_data)
+        assert form.is_valid()
+
+        user = form.save(request_with_session)
+        assert user.first_name == "Test"
+        assert user.last_name == "User"
+        assert user.username == "testuser"
+        assert user.email == "[email protected]"
+
+    def test_form_validation_missing_names(self):
+        """Validation should fail if first/last name are missing"""
+        data = {
+            "username": "testuser",
+            "email": "[email protected]",
+            "password1": "securepassword123",
+            "password2": "securepassword123",
+        }
+        form = CustomSignupForm(data=data)
+        assert not form.is_valid()
+        assert "first_name" in form.errors
+        assert "last_name" in form.errors
+
+    def test_form_widget_attrs(self):
+        """Ensure widget attributes are set correctly"""
+        form = CustomSignupForm()
+        assert form.fields["first_name"].widget.attrs["placeholder"] == "First Name"
+        assert form.fields["last_name"].widget.attrs["placeholder"] == "Last Name"

tests/portal_account/test_forms.py

@@ -1,4 +1,6 @@
 import pytest
+from django.urls import reverse
+from pytest_django.asserts import assertContains
 
 from portal_account.forms import PortalProfileForm
 from portal_account.models import PortalProfile
@@ -38,3 +40,37 @@ def test_profile_form_required_fields(self, portal_user):
         form_data = {"user": portal_user, "last_name": "new lname"}
         form = PortalProfileForm(user=portal_user, data=form_data)
         assert not form.is_valid()
+
+
+@pytest.mark.django_db
+class TestSignupView:
+    def test_error_styling_on_invalid_signup(self, client):
+        response = client.post(
+            reverse("account_signup"),
+            {
+                "username": "",  # Invalid empty username
+                "email": "invalid-email",  # Invalid email format
+                "password1": "short",  # Too short password
+                "password2": "mismatch",  # Password mismatch
+            },
+        )
+
+        # Verify error styling classes exist
+        assertContains(
+            response, "is-invalid", status_code=200
+        )  # Bootstrap invalid class
+        assertContains(
+            response, "invalid-feedback", status_code=200
+        )  # Error message class
+
+        # Verify specific field errors
+        assertContains(response, "This field is required", status_code=200)  # username
+        assertContains(
+            response, "Enter a valid email address", status_code=200
+        )  # email
+
+    def test_widget_tweaks_loaded(self, client):
+        response = client.get(reverse("account_signup"))
+        assertContains(
+            response, "form-control", status_code=200
+        )  # Verify Bootstrap styling