pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 16:31:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile authentication by refining how buttons interact with the modal

Browse Source 
Refactor the mobile authentication button handling by removing a global event listener and implementing a direct component interaction method. This ensures the auth modal can be opened correctly from mobile buttons. Additional tests and documentation have been added to verify and explain the functionality.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 495199c6-aa06-48cd-8c40-9cccf398cfcf
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/495199c6-aa06-48cd-8c40-9cccf398cfcf/IQPlVNL
This commit is contained in:
pac7
2025-09-21 14:33:07 +00:00
committed by pacnpal
parent 828d7d9b9a
commit 499c8c5abf
5 changed files with 631 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
backend/static/js/alpine-components.js
View File

@@ -376,12 +376,7 @@ Alpine.data('authModal', (defaultMode = 'login') => ({
}
});
// Listen for global auth modal events
document.addEventListener('show-auth-modal', (event) => {
const mode = event.detail?.mode || 'login';
this.show(mode);
console.log('Auth modal opened via event:', mode);
});
// No need for event listeners since x-init handles global exposure
},
async fetchSocialProviders() {
@@ -626,19 +621,42 @@ Alpine.store('toast', {
console.log('All Alpine.js components registered successfully');
// Expose global authModal instance for mobile buttons
// Ensure global authModal is available immediately
if (typeof window !== 'undefined') {
// Create a simple proxy that will find the authModal component when called
window.authModal = {
show: (mode = 'login') => {
// Dispatch custom event to trigger auth modal
const event = new CustomEvent('show-auth-modal', {
detail: { mode: mode }
});
document.dispatchEvent(event);
console.log('Auth modal event dispatched:', mode);
console.log('Attempting to show auth modal:', mode);
// Find the authModal component in the DOM
const modalEl = document.querySelector('[x-data*="authModal"]');
if (modalEl && modalEl._x_dataStack && modalEl._x_dataStack[0]) {
const component = modalEl._x_dataStack[0];
if (component.show && typeof component.show === 'function') {
component.show(mode);
console.log('Auth modal opened successfully');
return;
}
}
// Fallback: try to find any component with a show method
const elements = document.querySelectorAll('[x-data]');
for (let el of elements) {
if (el._x_dataStack) {
for (let stack of el._x_dataStack) {
if (stack.show && stack.mode !== undefined) {
stack.show(mode);
console.log('Auth modal opened via fallback method');
return;
}
}
}
}
console.error('Could not find authModal component to open');
}
};
console.log('Global authModal exposed on window');
console.log('Global authModal proxy created');
}
}

3
backend/templates/components/auth/auth-modal.html
View File

@@ -12,9 +12,10 @@ 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.authModal = $data; console.log('Auth modal initialized and exposed globally')"
class="fixed inset-0 z-50 flex items-center justify-center"
@keydown.escape.window="close()"
style="display: none;"
>
<!-- Modal Overlay -->
<div