Story 2412: Sign Up Page Integration

ak/views.py

@@ -74,7 +74,7 @@ def get_events(self):
         return dict(sorted_events)
 
     def get_v3_context_data(self, **kwargs):
-        ctx = super().get_context_data(**kwargs)
+        ctx = super().get_v3_context_data(**kwargs)
         ctx["install_card_pkg_managers"] = SharedResources.install_card_pkg_managers
         ctx["install_card_system_install"] = SharedResources.install_card_system_install
 

config/v3_urls.py

@@ -55,7 +55,6 @@
     V3PasswordResetFromKeyDoneView,
     V3PasswordResetFromKeyView,
     V3PasswordResetView,
-    V3SignupView,
 )
 
 v3_urlpatterns = [
@@ -74,11 +73,6 @@
         V3AllTypesCreateView.as_view(),
         name="v3-news-create",
     ),
-    path(
-        "v3/accounts/signup/",
-        V3SignupView.as_view(),
-        name="v3-signup",
-    ),
     path(
         "v3/accounts/login/",
         V3LoginView.as_view(),

core/mixins.py

@@ -1,9 +1,12 @@
 from django.http import Http404
-from django.urls import URLPattern, URLResolver, get_resolver
+from django.urls import URLPattern, URLResolver, get_resolver, reverse_lazy
+from django.views.generic import TemplateView
 from waffle import flag_is_active
 
+from core.templatetags.custom_static import large_static
 
-class V3Mixin:
+
+class V3Mixin(TemplateView):
     """Renders a v3 template when the 'v3' waffle flag is active.
 
     Hooks into dispatch() to short-circuit the normal view flow (e.g.
@@ -23,20 +26,22 @@ class V3Mixin:
     def dispatch(self, request, *args, **kwargs):
         if self.v3_template_name and flag_is_active(request, "v3"):
             self._v3_active = True
-            return self.render_v3_response()
+            return super().dispatch(request, *args, **kwargs)
         self._v3_active = False
         if not getattr(self, "template_name", None):
             raise Http404
         return super().dispatch(request, *args, **kwargs)
 
+    def get_context_data(self, **kwargs):
+        if getattr(self, "_v3_active", False):
+            context = super().get_context_data(**self.get_v3_context_data(**kwargs))
+        else:
+            context = super().get_context_data(**kwargs)
+        return context
+
     def get_v3_context_data(self, **kwargs):
         """Override in subclasses to provide v3-specific context."""
-        return {}
-
-    def render_v3_response(self):
-        """Render the v3 template through Django's standard TemplateView pipeline."""
-        context = self.get_context_data(**self.get_v3_context_data())
-        return self.render_to_response(context)
+        return {**kwargs}
 
     def get_template_names(self):
         if getattr(self, "_v3_active", False):
@@ -63,3 +68,27 @@ def walk(patterns):
                     yield entry, view_class
 
     yield from walk(get_resolver().url_patterns)
+
+
+class V3AuthContextMixin(V3Mixin):
+    """Shared context for all V3 auth pages (signup, login, password reset, etc.)."""
+
+    def dispatch(self, request, *args, **kwargs):
+        if not flag_is_active(request, "v3"):
+            if not getattr(self, "template_name", None):
+                raise Http404
+        return super().dispatch(request, *args, **kwargs)
+
+    def get_v3_context_data(self, **kwargs):
+        context = super().get_v3_context_data(**kwargs)
+        context["page_title"] = getattr(self, "page_title", "Account")
+        context["foreground_image_url"] = large_static(
+            "img/v3/auth-page/auth-page-foreground.png"
+        )
+        context["background_image_url"] = large_static(
+            "img/v3/auth-page/auth-page-background.png"
+        )
+        context["login_url"] = reverse_lazy("v3-login")
+        context["signup_url"] = reverse_lazy("account_signup")
+        context["password_reset_url"] = reverse_lazy("v3-password-reset")
+        return context

core/views.py

@@ -114,13 +114,12 @@ class CalendarView(V3Mixin, TemplateView):
     v3_template_name = "v3/calendar.html"
 
     def get_context_data(self, **kwargs):
-        ctx = super().get_context_data(**kwargs)
+        ctx = {}
         ctx["boost_calendar"] = settings.BOOST_CALENDAR
         return ctx
 
     def get_v3_context_data(self, **kwargs):
         ctx = super().get_v3_context_data(**kwargs)
-        print(self.request.headers)
         ctx["timezone"] = "America/Chicago"
         return ctx
 
@@ -502,7 +501,7 @@ class LearnPageView(V3Mixin, TemplateView):
     v3_template_name = "v3/learn_page.html"
 
     def get_v3_context_data(self, **kwargs):
-        ctx = self.get_context_data(**kwargs)
+        ctx = super().get_v3_context_data(**kwargs)
         ctx["learn_card_data"] = [
             {
                 "title": "I want to learn:",

libraries/views.py

@@ -125,7 +125,10 @@ class LibraryListBase(BoostVersionMixin, V3Mixin, VersionAlertMixin, ListView):
     v3_template_name = "v3/library_page.html"
 
     def get_v3_context_data(self, queryset=None, **kwargs):
-        context = {}
+        queryset = self.get_queryset()
+        context = super().get_v3_context_data(
+            **kwargs, object_list=queryset, queryset=queryset
+        )
         view_str = self.kwargs.get("library_view_str")
 
         cpp_options = [("all", "All")] + list(
@@ -258,16 +261,6 @@ def get_v3_context_data(self, queryset=None, **kwargs):
         context["library_search_query"] = self.request.GET.get("q", "")
         return context
 
-    def render_v3_response(self):
-        """Render the v3 template through Django's standard TemplateView pipeline."""
-        queryset = self.get_queryset()
-        # Resolve selected_version once so get_v3_context_data can reuse it.
-        self._selected_version = self._resolve_selected_version()
-        context = self.get_context_data(
-            **self.get_v3_context_data(queryset=queryset), object_list=queryset
-        )
-        return self.render_to_response(context)
-
     def _resolve_selected_version(self):
         version_slug = determine_selected_boost_version(
             self.kwargs.get("version_slug"), self.request
@@ -326,8 +319,10 @@ def get_categories(self, version=None):
         )
 
     def dispatch(self, request, *args, **kwargs):
-        """Set the selected version in the cookies."""
+        # Resolve selected_version once so get_v3_context_data can reuse it.
+        self._selected_version = self._resolve_selected_version()
         response = super().dispatch(request, *args, **kwargs)
+        """Set the selected version in the cookies."""
         set_selected_boost_version(self.kwargs.get("version_slug"), response)
         view = get_prioritized_library_view(request)
         if request.resolver_match.view_name == "libraries":

news/views.py

@@ -154,6 +154,7 @@ def get_v3_context_data(self, **kwargs):
             "libraries": self.libary_values,
             "header_text": self.header_text,
             "filter_value": self.filter_value,
+            **kwargs,
         }
 
     def get_queryset(self):
@@ -176,7 +177,10 @@ def get_queryset(self):
         return result
 
     def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
+        object_list = self.get_queryset()
+        context = super().get_context_data(
+            queryset=object_list, object_list=object_list, **kwargs
+        )
         context["is_moderator"] = False
 
         if self.request.user.is_authenticated:

static/css/v3/auth-page.css

@@ -70,7 +70,8 @@ body:has(.auth-page) .header {
 }
 
 .auth-page__illustration-foreground {
-  margin-top: 80px; /* This is the size of the header navbar, added so that the content will not be hidden behind it */
+  margin-top: 80px;
+  /* This is the size of the header navbar, added so that the content will not be hidden behind it */
   position: absolute;
   inset: 0;
   width: 100%;
@@ -85,7 +86,8 @@ body:has(.auth-page) .header {
   justify-content: center;
   align-items: center;
   padding: var(--space-xlarge);
-  margin-top: 80px; /* This is the size of the header navbar, added so that the content will not be hidden behind it */
+  margin-top: 80px;
+  /* This is the size of the header navbar, added so that the content will not be hidden behind it */
 }
 
 .auth-page__content-inner {
@@ -152,6 +154,24 @@ body:has(.auth-page) .header {
   color: var(--color-text-link-accent);
 }
 
+/* ── Sign In Link ──────────────────────────── */
+.auth-page__sign-in-link {
+  width: 100%;
+  text-align: center;
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+  margin-bottom: var(--space-large) !important;
+}
+
+.auth-page__sign-in-link a{
+  text-decoration: underline;
+  color: var(--color-text-link-accent);
+}
+
 /* ── Divider ───────────────────────────────── */
 .auth-page__divider {
   font-family: var(--font-display);
@@ -164,6 +184,24 @@ body:has(.auth-page) .header {
   margin: 0;
 }
 
+.auth-page__signup-divider {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-default);
+  letter-spacing: var(--letter-spacing-tight);
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
+.auth-page__signup-divider hr {
+  flex: 1 1 0;
+}
+
 /* ── Social Card ───────────────────────────── */
 .auth-page__social-card {
   display: flex;
@@ -175,6 +213,31 @@ body:has(.auth-page) .header {
   background: var(--color-surface-weak);
 }
 
+/* ── Social Card Disable pending tou ────────────────────── */
+.auth-page__signup-form:not(:has(input[name="accept_terms_of_use"]:checked)) a.btn-secondary,
+.auth-page__signup-form:not(:has(input[name="accept_terms_of_use"]:checked)) button.btn {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+.auth-page__signup-form:has(input[name="invisible-check-protect"]:checked):not(:has(input[name="accept_terms_of_use"]:checked)) .auth-page_tou-checkbox .checkbox__box {
+  background-color: var(--color-surface-error-weak);
+  border-color: var(--color-stroke-error);
+}
+
+.auth-page__signup-form:has(input[name="invisible-check-protect"]:checked):not(:has(input[name="accept_terms_of_use"]:checked)) .auth-page_tou-checkbox .checkbox__label {
+  color: var(--color-text-error);
+}
+
+.auth-page__signup-form:has(input[name="invisible-check-protect"]:checked):not(:has(input[name="accept_terms_of_use"]:checked)) .auth-page__invisible-check-label {
+  pointer-events: none;
+}
+
+.auth-page__invisible-check-label .btn {
+  width: 100%;
+}
+
 /* ── Responsive (Tablet) ────────────────────────────── */
 @media (max-width: 1279px) {
   .auth-page__wrapper {

static/css/v3/forms.css

@@ -641,6 +641,10 @@
   color: var(--color-text-primary, #050816);
 }
 
+.checkbox__label a {
+  text-decoration: underline;
+}
+
 .checkbox--disabled {
   opacity: 0.5;
   cursor: not-allowed;

templates/v3/accounts/signup.html

@@ -18,13 +18,14 @@
     redirect_field_value  (string, optional, default unset) — URL to redirect to after signup; hidden input omitted when unset
     password_rules        (list, optional, default unset) — rule objects for password validation checklist
 {% endcomment %}
-{% load static %}
+{% load static socialaccount %}
 {% block auth_content %}
   <div class="auth-page__header">
     <h1 class="auth-page__title">Create an account</h1>
     <p class="auth-page__subtitle">Advance your career, learn from experts, and help shape the future of Boost and C++.</p>
   </div>
-  <form class="auth-page__card"
+  <form class="auth-page__card auth-page__signup-form"
+    id="signup_form"
     method="post"
     action=""
     novalidate
@@ -53,17 +54,51 @@ <h1 class="auth-page__title">Create an account</h1>
       {% for error in form.non_field_errors %}<p class="field__error" role="alert">{{ error }}</p>{% endfor %}
     {% endif %}
     {% include "v3/includes/_field_checkbox.html" with name="mailing_list" label="Also join the Boost Developers Mailing List" %}
+    <label class="checkbox  auth-page_tou-checkbox" for="checkbox-accept_terms_of_use">
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          id="checkbox-accept_terms_of_use"
+          name="accept_terms_of_use"
+          value="on"
+          required
+        >
+          <span class="checkbox__box" aria-hidden="true">
+            {% include "includes/icon.html" with icon_name="check" icon_class="checkbox__check" %}
+          </span>
+          <span class="checkbox__label">I have read and accepted the <a href="{% url 'terms-of-use' %}">Terms of Use</a> for this service</span>
+    </label>
     {% if redirect_field_value %}
       <input type="hidden"
              name="{{ redirect_field_name }}"
              value="{{ redirect_field_value }}">
     {% endif %}
+
+    <label class="auth-page__invisible-check-label" for="checkbox-create">
+    <input name="invisible-check-protect" class="checkbox__input" id="checkbox-create" type="checkbox">
     {% include "v3/includes/_button.html" with label="Create Account" type="submit" style="primary" alpine_disabled="hasErrors" %}
+    </label>
+    <div class="auth-page__signup-divider">
+      <hr />
+      <span>
+      OR
+      </span>
+      <hr />
+    </div>
+    {% get_providers as socialaccount_providers %}
+    {% if socialaccount_providers %}
+    {% for provider in socialaccount_providers %}
+    <label class="auth-page__invisible-check-label" for="checkbox-{{provider.name}}">
+    {% provider_login_url provider process="login" scope=scope auth_params=auth_params as href %}
+    <input name="invisible-check-protect" class="checkbox__input" id="checkbox-{{provider.name}}" type="checkbox">
+    {% if provider.name == "GitHub" %}
+    {% include "v3/includes/_button.html" with label="Continue with "|add:provider.name url=href icon_name="github" style="secondary" %}
+    {% elif provider.name == "Google" %}
+    {% include "v3/includes/_button.html" with label="Continue with "|add:provider.name url=href icon_name="google-colored" style="secondary" %}
+    {% endif %}
+    </label>
+    {% endfor %}
+    {% endif %}
   </form>
-  <p class="auth-page__divider">OR</p>
-  <div class="auth-page__social-card">
-    {% include "v3/includes/_button.html" with label="Continue with GitHub" url="#" icon_name="github" style="secondary" %}
-    {% include "v3/includes/_button.html" with label="Continue with Google" url="#" icon_name="google-colored" style="secondary" %}
-    {% include "v3/includes/_button.html" with label="Already have an account? Sign in →" url=login_url style="primary" %}
-  </div>
+  <p class="auth-page__sign-in-link">Already have an account? <a href="{{login_url}}">Sign in</a></p>
 {% endblock auth_content %}

users/forms.py

@@ -5,6 +5,7 @@
 from django import forms
 
 from allauth.account.forms import ResetPasswordKeyForm
+from allauth.account.forms import SignupForm
 
 from .models import Preferences
 from news.models import NEWS_MODELS
@@ -25,6 +26,10 @@ def save(self, **kwargs):
         return result
 
 
+class CustomSignUpForm(SignupForm):
+    accept_terms_of_use = forms.BooleanField(required=True)
+
+
 class PreferencesForm(forms.ModelForm):
     allow_notification_own_news_approved = forms.MultipleChoiceField(
         choices=NEWS_ENTRY_CHOICES,