mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 03:51:09 -05:00
b9063ff4f8
- Implemented park detail page with dynamic content loading for rides and weather. - Created park list page with filters and search functionality. - Developed ride detail page showcasing ride stats, reviews, and similar rides. - Added ride list page with filtering options and dynamic loading. - Introduced search results page with tabs for parks, rides, and users. - Added HTMX tests for global search functionality.
32 lines
2.2 KiB
HTML
32 lines
2.2 KiB
HTML
{% comment %}
|
|
Enhanced Authentication Modal Component
|
|
Matches React frontend AuthDialog functionality with modal-based auth
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
{% load i18n %}
|
|
{% load account socialaccount %}
|
|
|
|
<!-- HTMX-driven Auth Modal Container -->
|
|
{# This modal no longer manages form submission client-side. Forms are fetched
|
|
and submitted via HTMX using the account views endpoints (CustomLoginView/CustomSignupView). #}
|
|
|
|
<div id="auth-modal" class="fixed inset-0 z-50 hidden items-center justify-center" role="dialog" aria-modal="true" tabindex="-1" hx-on:keydown="if(event.key==='Escape'){ document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden'); }">
|
|
<div id="auth-modal-overlay" class="fixed inset-0 bg-background/80 backdrop-blur-sm" onclick="document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden');"></div>
|
|
|
|
<div id="auth-modal-content" class="relative w-full max-w-md mx-4 bg-background border rounded-lg shadow-lg" role="dialog" aria-modal="true">
|
|
<button type="button" class="absolute top-4 right-4 p-2 text-muted-foreground hover:text-foreground rounded-md hover:bg-accent transition-colors auth-close" onclick="document.getElementById('auth-modal').classList.add('hidden'); document.body.classList.remove('overflow-hidden');">
|
|
<i class="fas fa-times w-4 h-4"></i>
|
|
</button>
|
|
|
|
<!-- Content will be loaded here via HTMX -->
|
|
<div id="auth-modal-body" hx-swap-oob="true" hx-on:htmx:afterSwap="(function(){ var el=document.querySelector('#auth-modal-body input, #auth-modal-body button'); if(el){ el.focus(); } })()"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Example triggers (elsewhere in the app you can use hx-get to load the desired form into #auth-modal-body):
|
|
<button hx-get="{% url 'account_login' %}" hx-target="#auth-modal-body" hx-swap="innerHTML" onclick="document.getElementById('auth-modal').classList.remove('hidden')">Sign in</button>
|
|
<button hx-get="{% url 'account_signup' %}" hx-target="#auth-modal-body" hx-swap="innerHTML" onclick="document.getElementById('auth-modal').classList.remove('hidden')">Sign up</button>
|
|
The login/signup views already return partials for HTMX requests (see `CustomLoginView` / `CustomSignupView`).
|
|
#}
|