Story 2130: V3 Sign Up and Log In Pages

[julhoang]

Issue: #2130

Summary & Context

Implement the V3 sign-up and login pages with a two-column auth layout (illustration + form), client-side field validation, and a password requirements checklist driven by Django's AUTH_PASSWORD_VALIDATORS.

• Figma links:

1. Sign Up page
2. Log In page
3. Disabled buttons

• Link to components/page:

1. http://localhost:8000/v3/accounts/signup/
2. http://localhost:8000/v3/accounts/login/
3. http://localhost:8000/v3/demo/components/#buttons (disabled state)

Changes

• Add auth_page.html base layout with two-column grid (illustration panel + form content) for all auth pages to extend
• Add signup.html with email, password, confirm-password fields, mailing list opt-in, and social login buttons
• Add login.html with email, password, remember-me checkbox, forgot-password link, and social login buttons
• Add _field_password.html component with show/hide toggle, Alpine.js live validation checklist, and password-match support
  • For No-JS: There will be no client-side validation, we'll just show the static password requirement checklist.
• Add auth-page.css with full responsive styling for the auth layout, cards, divider, and social login section.
• Add password_rules.py to generate frontend validation rules from Django's AUTH_PASSWORD_VALIDATORS config
• Add V3AuthContextMixin (extends V3Mixin), V3SignupView, and V3LoginView in users/views.py with URL routes at /v3/accounts/signup/ and /v3/accounts/login/. Pages are gated by the v3 waffle flag via V3Mixin and return 404 when the flag is inactive.
• Add google-colored, eye, and eye-off icons to icon.html
• Improve _field_text.html with client-side email validation (validate_type="email") and expanded documentation
• Add disabled and alpine_disabled props to _button.html for disabling submit when form has errors
• Add disabled button styling (.btn:disabled) to buttons.css and disabled examples to the button demo page

‼️ Risks & Considerations ‼️

• Views are TemplateView-based (frontend templates only) — not yet wired to allauth's signup/login processing. Allauth redirects authenticated users away from auth pages, but the V3 feature flag currently requires an authenticated user to be enabled, creating a conflict that needs to be resolved before connecting form submission.
• Social login buttons (Continue with GitHub/Google) link to # — needs backend OAuth integration
• Forgot password link falls back to the legacy allauth account_reset_password URL until a V3 password reset page is created

Screenshots

Desktop Light Mode	Desktop Dark Mode	Mobile

New Disabled Buttons Styling

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[jlchilders11]

Couple of small nits, and a request to make the images S3 content rather than adding them to the repo

[jlchilders11]

While my PR has not yet been accepted, these particular files should be converted to S3 content once it is.

[herzog0]

Looking great! Just added a small comment about tailwind selectors, but I'm pre-approving

[jlchilders11]

LGTM, with two clean up tasks after merge:

• V3 urls spun off into their own include
• Large image files removed as part of the general clean up pending the s3 switchover.

[julioest]

Approved!

[julhoang]

Hey @herzog0 & @julioest – can I request for your re-review for this PR please? I just added V3Mixin to the V3AuthContextMixin class to follow the code pattern and most importantly to render 404 when non-V3 users try to access it.

[kattyode]

QA Approved