From 3f0588f947aa45e7a76526f2528c46db20a76984 Mon Sep 17 00:00:00 2001 From: pac7 <47831526-pac7@users.noreply.replit.com> Date: Sun, 21 Sep 2025 17:15:36 +0000 Subject: [PATCH] Add a new reusable authentication modal component to the platform Integrate a new Django component for the authentication modal, ensuring parity with existing React frontend functionality, and add a corresponding test view for comparison. Replit-Commit-Author: Agent Replit-Commit-Session-Id: dcfff319-6e91-4220-98a9-8295b87755b7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint --- .../templates/components/auth/auth-modal.html | 2 +- backend/templates/cotton/auth_modal.html | 397 ++++++++++++++ .../templates/test_auth_modal_comparison.html | 511 ++++++++++++++++++ backend/thrillwiki/urls.py | 3 +- backend/thrillwiki/views.py | 8 + 5 files changed, 919 insertions(+), 2 deletions(-) create mode 100644 backend/templates/cotton/auth_modal.html create mode 100644 backend/templates/test_auth_modal_comparison.html diff --git a/backend/templates/components/auth/auth-modal.html b/backend/templates/components/auth/auth-modal.html index b8c3137a..523e3048 100644 --- a/backend/templates/components/auth/auth-modal.html +++ b/backend/templates/components/auth/auth-modal.html @@ -12,7 +12,7 @@ Matches React frontend AuthDialog functionality with modal-based auth x-data="authModal" x-show="open" x-cloak - x-init="window.authModal = $data" + x-init="window.authModalOriginal = $data" class="fixed inset-0 z-50 flex items-center justify-center" @keydown.escape.window="close()" > diff --git a/backend/templates/cotton/auth_modal.html b/backend/templates/cotton/auth_modal.html new file mode 100644 index 00000000..a2348e14 --- /dev/null +++ b/backend/templates/cotton/auth_modal.html @@ -0,0 +1,397 @@ +{% comment %} +Auth Modal Component - Django Cotton Version +Enhanced Authentication Modal Component that matches React frontend AuthDialog functionality +Preserves EXACT Alpine.js behavior, styling, and functionality + +Usage: + +Critical: ALL Alpine.js directives, transitions, and behaviors are preserved exactly +{% endcomment %} + +{% load static %} +{% load i18n %} +{% load account socialaccount %} + + + + +
+ +
+ + +
+ + + + +
+
+

+ {{ login_title }} +

+

+ {{ login_subtitle }} +

+
+ + + {% if show_social_providers == "true" %} +
+
+ +
+ +
+
+
+
+ + +
+
+
+
+
+ + {{ social_divider_text_login }} + +
+
+
+ {% endif %} + + +
+
+ + +
+ +
+ +
+ + +
+
+ + {% if show_forgot_password == "true" %} +
+ + Forgot password? + +
+ {% endif %} + + +
+ +
+ + +
+ + +
+ Don't have an account? + +
+
+ + +
+
+

+ {{ register_title }} +

+

+ {{ register_subtitle }} +

+
+ + + {% if show_social_providers == "true" %} +
+
+ +
+ + +
+
+
+
+
+ + {{ social_divider_text_register }} + +
+
+
+ {% endif %} + + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + +
+
+ +
+ + +
+ + +
+ +
+ + +
+ + +
+ Already have an account? + +
+
+
+
\ No newline at end of file diff --git a/backend/templates/test_auth_modal_comparison.html b/backend/templates/test_auth_modal_comparison.html new file mode 100644 index 00000000..726f890a --- /dev/null +++ b/backend/templates/test_auth_modal_comparison.html @@ -0,0 +1,511 @@ +{% load static %} + + + + + + Auth Modal Component Comparison Test + + + + + + +
+

Auth Modal Component Comparison Test

+

Comparing original include method vs new cotton component for Auth Modal with full Alpine.js functionality

+ +
+

Test Instructions:

+
    +
  1. Click test buttons to open both modals and compare behavior
    2. +
  2. Test modal opening/closing with both buttons and ESC key
    3. +
  3. Switch between login and register forms in both modals
    4. +
  4. Test form validation and error states
    5. +
  5. Verify all Alpine.js transitions and animations work
    6. +
  6. Check that styling and layout are identical
    7. +
  7. Test password visibility toggle functionality
    8. +
  8. Verify social provider buttons render correctly
    9. +
+
+ + +
+

Test 1: Basic Modal Open/Close Functionality

+
Modal Opening, Closing, and Overlay Interaction
+ +
+
+ +
+ Features to test: +
    +
  • Modal opens with fade-in animation
    • +
  • Background overlay blocks interaction
    • +
  • Close button works (top-right X)
    • +
  • ESC key closes modal
    • +
  • Click outside modal closes it
    • +
  • Modal content scales properly
    • +
+
+
+ +
+ +
+ Features to test: +
    +
  • Modal opens with fade-in animation
    • +
  • Background overlay blocks interaction
    • +
  • Close button works (top-right X)
    • +
  • ESC key closes modal
    • +
  • Click outside modal closes it
    • +
  • Modal content scales properly
    • +
+
+
+
+
+ + +
+

Test 2: Login/Register Form Switching

+
Form Mode Switching and Content Display
+ +
+
+ + +
+ Test form switching: +
    +
  • Default mode is login
    • +
  • "Sign up" link switches to register
    • +
  • "Sign in" link switches to login
    • +
  • Form fields update correctly
    • +
  • Titles and descriptions change
    • +
  • Social button text updates
    • +
+
+
+ +
+ + +
+ Test form switching: +
    +
  • Default mode is login
    • +
  • "Sign up" link switches to register
    • +
  • "Sign in" link switches to login
    • +
  • Form fields update correctly
    • +
  • Titles and descriptions change
    • +
  • Social button text updates
    • +
+
+
+
+
+ + +
+

Test 3: Alpine.js Interactive Elements

+
Password Visibility, Loading States, and Error Handling
+ +
+
+ +
+ Interactive features: +
    +
  • Password visibility toggle (eye icon)
    • +
  • Form validation states
    • +
  • Loading spinner on submit
    • +
  • Error message display
    • +
  • Social provider button states
    • +
  • Form field x-model binding
    • +
+
+
+ +
+ +
+ Interactive features: +
    +
  • Password visibility toggle (eye icon)
    • +
  • Form validation states
    • +
  • Loading spinner on submit
    • +
  • Error message display
    • +
  • Social provider button states
    • +
  • Form field x-model binding
    • +
+
+
+
+
+ + +
+

Test 4: Visual Styling and Layout

+
CSS Classes, Gradients, and Responsive Design
+ +
+
+ +
+ Visual elements to verify: +
    +
  • Gradient title text (blue to purple)
    • +
  • Button styling and hover states
    • +
  • Input field styling and focus states
    • +
  • Modal size and positioning
    • +
  • Social provider button colors
    • +
  • Divider lines and spacing
    • +
  • Error message styling
    • +
  • Responsive layout behavior
    • +
+
+
+
+
+ + +
+

Test 5: Cotton Component Configuration

+
Testing Cotton c-vars Configuration Options
+ +
+
+ +
+ Cotton c-vars to test: +
    +
  • Custom login/register titles
    • +
  • Custom subtitle text
    • +
  • Custom divider text
    • +
  • Show/hide social providers
    • +
  • Show/hide forgot password
    • +
  • Custom CSS classes
    • +
  • Custom forgot password URL
    • +
+
+
+
+
+ + +
+

Test Results Checklist

+
+
+
Modal opens and closes identically
+
Form switching works the same
+
Alpine.js directives function identically
+
Visual styling is identical
+
Password toggle works the same
+
Error states display identically
+
Social provider buttons render the same
+
Keyboard shortcuts work (ESC key)
+
Form validation behaves identically
+
Cotton c-vars configuration works
+
+
+
+
+ + +
+ {% include 'components/auth/auth-modal.html' %} +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/backend/thrillwiki/urls.py b/backend/thrillwiki/urls.py index b41e6b4b..e1990bd2 100644 --- a/backend/thrillwiki/urls.py +++ b/backend/thrillwiki/urls.py @@ -101,8 +101,9 @@ urlpatterns = [ views.environment_and_settings_view, name="environment_and_settings", ), - # Button component testing + # Component testing path("test-button/", views.test_button_comparison, name="test_button_comparison"), + path("test-auth-modal/", views.test_auth_modal_comparison, name="test_auth_modal_comparison"), ] # Add autocomplete URLs if available diff --git a/backend/thrillwiki/views.py b/backend/thrillwiki/views.py index c8752c13..e0a436c9 100644 --- a/backend/thrillwiki/views.py +++ b/backend/thrillwiki/views.py @@ -164,3 +164,11 @@ def test_button_comparison(request): Renders a comprehensive test page with all button variants and combinations. """ return render(request, "test_button_comparison.html") + + +def test_auth_modal_comparison(request): + """ + Test view to compare cotton auth modal component with original include version. + Renders a comprehensive test page to verify Alpine.js functionality, styling, and behavior parity. + """ + return render(request, "test_auth_modal_comparison.html")