Story 2412: Sign Up Page Integration

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,7 +1,9 @@
 from django.http import Http404
-from django.urls import URLPattern, URLResolver, get_resolver
+from django.urls import URLPattern, URLResolver, get_resolver, reverse_lazy
 from waffle import flag_is_active
 
+from core.templatetags.custom_static import large_static
+
 
 class V3Mixin:
     """Renders a v3 template when the 'v3' waffle flag is active.
@@ -21,7 +23,11 @@ class V3Mixin:
     v3_template_name = None
 
     def dispatch(self, request, *args, **kwargs):
-        if self.v3_template_name and flag_is_active(request, "v3"):
+        if (
+            self.v3_template_name
+            and flag_is_active(request, "v3")
+            and request.method == "GET"
+        ):
             self._v3_active = True
             return self.render_v3_response()
         self._v3_active = False
@@ -63,3 +69,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

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-spaceing-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-spaceing-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,

users/views.py

@@ -6,7 +6,7 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.contrib import auth
 from django.contrib.messages.views import SuccessMessageMixin
-from django.http import HttpResponseNotFound, HttpResponseRedirect
+from django.http import HttpResponseRedirect
 from django.urls import reverse_lazy
 from django.views.generic import DetailView, FormView
 from django.views.generic.base import TemplateView
@@ -22,17 +22,18 @@
 from rest_framework import generics
 from rest_framework import viewsets
 from rest_framework.permissions import IsAuthenticated, AllowAny
+
 from waffle import flag_is_active
 
 from core.constants import BadgeToken
-from core.mixins import V3Mixin
-from core.templatetags.custom_static import large_static
+from core.mixins import V3Mixin, V3AuthContextMixin
 from libraries.models import CommitAuthorEmail
 from .forms import (
     PreferencesForm,
     UserProfileForm,
     UserProfilePhotoForm,
     DeleteAccountForm,
+    CustomSignUpForm,
 )
 from .models import User
 from .password_rules import build_password_rules
@@ -547,7 +548,7 @@ def form_invalid(self, form):
         return res if res else super().form_invalid(form)
 
 
-class CustomSignupView(ClaimExistingAccountMixin, SignupView):
+class CustomSignupView(ClaimExistingAccountMixin, V3AuthContextMixin, SignupView):
     """
     Override the allauth SignupView to customize behavior:
 
@@ -556,6 +557,18 @@ class CustomSignupView(ClaimExistingAccountMixin, SignupView):
     with authors and maintainers.
     """
 
+    v3_template_name = "v3/accounts/signup.html"
+
+    def get_form_class(self):
+        if flag_is_active(self.request, "v3"):
+            return CustomSignUpForm
+        return super().get_form_class()
+
+    def get_v3_context_data(self, **kwargs):
+        context = super().get_v3_context_data(**kwargs)
+        context["password_rules"] = build_password_rules()
+        return context
+
     def form_invalid(self, form):
         """
         Override this form to catch users who were created as part of the GitHub data
@@ -583,39 +596,6 @@ def get_context_data(self, **kwargs):
         return context
 
 
-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"):
-            return HttpResponseNotFound()
-        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("v3-signup")
-        context["password_reset_url"] = reverse_lazy("v3-password-reset")
-        return context
-
-
-class V3SignupView(V3AuthContextMixin, TemplateView):
-    v3_template_name = "v3/accounts/signup.html"
-    page_title = "Create An Account"
-
-    def get_v3_context_data(self, **kwargs):
-        context = super().get_v3_context_data(**kwargs)
-        context["password_rules"] = build_password_rules()
-        return context
-
-
 class V3LoginView(V3AuthContextMixin, TemplateView):
     v3_template_name = "v3/accounts/login.html"
     page_title = "Login"