mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 14:11:09 -05:00
528 lines
23 KiB
HTML
528 lines
23 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auth Modal Component Comparison Test</title>
|
|
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
|
|
<style>
|
|
.test-section {
|
|
margin: 2rem 0;
|
|
padding: 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
}
|
|
.modal-test-container {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin: 1rem 0;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.modal-test-group {
|
|
border: 1px solid #d1d5db;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
min-width: 300px;
|
|
flex: 1;
|
|
}
|
|
.modal-test-group::before {
|
|
content: attr(data-label);
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 12px;
|
|
background: white;
|
|
padding: 0 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #374151;
|
|
}
|
|
.test-description {
|
|
font-weight: bold;
|
|
color: #374151;
|
|
margin-bottom: 1rem;
|
|
font-size: 18px;
|
|
}
|
|
.feature-list {
|
|
background: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 1rem;
|
|
margin: 0.5rem 0;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
.test-button {
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
.test-button:hover {
|
|
background: #2563eb;
|
|
}
|
|
.test-button.secondary {
|
|
background: #6b7280;
|
|
}
|
|
.test-button.secondary:hover {
|
|
background: #4b5563;
|
|
}
|
|
.instructions {
|
|
background: #dbeafe;
|
|
border: 1px solid #93c5fd;
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.status-pass { background: #10b981; }
|
|
.status-fail { background: #ef4444; }
|
|
.status-pending { background: #f59e0b; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 p-8" x-data="authModalTestSuite()">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-3xl font-bold mb-8 text-center">Auth Modal Component Comparison Test</h1>
|
|
<p class="text-center text-gray-600 mb-8">Comparing original include method vs new cotton component for Auth Modal with full Alpine.js functionality</p>
|
|
|
|
<div class="instructions">
|
|
<h3 class="font-bold mb-2">Test Instructions:</h3>
|
|
<ol class="list-decimal list-inside space-y-1">
|
|
<li>Click test buttons to open both modals and compare behavior</li>
|
|
<li>Test modal opening/closing with both buttons and ESC key</li>
|
|
<li>Switch between login and register forms in both modals</li>
|
|
<li>Test form validation and error states</li>
|
|
<li>Verify all Alpine.js transitions and animations work</li>
|
|
<li>Check that styling and layout are identical</li>
|
|
<li>Test password visibility toggle functionality</li>
|
|
<li>Verify social provider buttons render correctly</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Test 1: Basic Modal Functionality -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 1: Basic Modal Open/Close Functionality</h2>
|
|
<div class="test-description">Modal Opening, Closing, and Overlay Interaction</div>
|
|
|
|
<div class="modal-test-container">
|
|
<div class="modal-test-group" data-label="Original Include Version">
|
|
<button class="test-button" @click="openOriginalModal()">
|
|
Open Original Auth Modal
|
|
</button>
|
|
<div class="feature-list">
|
|
Features to test:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Modal opens with fade-in animation</li>
|
|
<li>Background overlay blocks interaction</li>
|
|
<li>Close button works (top-right X)</li>
|
|
<li>ESC key closes modal</li>
|
|
<li>Click outside modal closes it</li>
|
|
<li>Modal content scales properly</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-test-group" data-label="Cotton Component Version">
|
|
<button class="test-button" @click="openCottonModal()">
|
|
Open Cotton Auth Modal
|
|
</button>
|
|
<div class="feature-list">
|
|
Features to test:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Modal opens with fade-in animation</li>
|
|
<li>Background overlay blocks interaction</li>
|
|
<li>Close button works (top-right X)</li>
|
|
<li>ESC key closes modal</li>
|
|
<li>Click outside modal closes it</li>
|
|
<li>Modal content scales properly</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 2: Form Switching -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 2: Login/Register Form Switching</h2>
|
|
<div class="test-description">Form Mode Switching and Content Display</div>
|
|
|
|
<div class="modal-test-container">
|
|
<div class="modal-test-group" data-label="Original Include Version">
|
|
<button class="test-button" @click="openOriginalModalInMode('login')">
|
|
Open in Login Mode
|
|
</button>
|
|
<button class="test-button secondary" @click="openOriginalModalInMode('register')">
|
|
Open in Register Mode
|
|
</button>
|
|
<div class="feature-list">
|
|
Test form switching:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Default mode is login</li>
|
|
<li>"Sign up" link switches to register</li>
|
|
<li>"Sign in" link switches to login</li>
|
|
<li>Form fields update correctly</li>
|
|
<li>Titles and descriptions change</li>
|
|
<li>Social button text updates</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-test-group" data-label="Cotton Component Version">
|
|
<button class="test-button" @click="openCottonModalInMode('login')">
|
|
Open in Login Mode
|
|
</button>
|
|
<button class="test-button secondary" @click="openCottonModalInMode('register')">
|
|
Open in Register Mode
|
|
</button>
|
|
<div class="feature-list">
|
|
Test form switching:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Default mode is login</li>
|
|
<li>"Sign up" link switches to register</li>
|
|
<li>"Sign in" link switches to login</li>
|
|
<li>Form fields update correctly</li>
|
|
<li>Titles and descriptions change</li>
|
|
<li>Social button text updates</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 3: Alpine.js Interactive Elements -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 3: Alpine.js Interactive Elements</h2>
|
|
<div class="test-description">Password Visibility, Loading States, and Error Handling</div>
|
|
|
|
<div class="modal-test-container">
|
|
<div class="modal-test-group" data-label="Original Include Version">
|
|
<button class="test-button" @click="testOriginalInteractivity()">
|
|
Test Original Interactions
|
|
</button>
|
|
<div class="feature-list">
|
|
Interactive features:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Password visibility toggle (eye icon)</li>
|
|
<li>Form validation states</li>
|
|
<li>Loading spinner on submit</li>
|
|
<li>Error message display</li>
|
|
<li>Social provider button states</li>
|
|
<li>Form field x-model binding</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-test-group" data-label="Cotton Component Version">
|
|
<button class="test-button" @click="testCottonInteractivity()">
|
|
Test Cotton Interactions
|
|
</button>
|
|
<div class="feature-list">
|
|
Interactive features:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Password visibility toggle (eye icon)</li>
|
|
<li>Form validation states</li>
|
|
<li>Loading spinner on submit</li>
|
|
<li>Error message display</li>
|
|
<li>Social provider button states</li>
|
|
<li>Form field x-model binding</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 4: Visual Styling Comparison -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 4: Visual Styling and Layout</h2>
|
|
<div class="test-description">CSS Classes, Gradients, and Responsive Design</div>
|
|
|
|
<div class="modal-test-container">
|
|
<div class="modal-test-group" data-label="Styling Verification">
|
|
<button class="test-button" @click="compareModalStyling()">
|
|
Compare Both Modals Side by Side
|
|
</button>
|
|
<div class="feature-list">
|
|
Visual elements to verify:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Gradient title text (blue to purple)</li>
|
|
<li>Button styling and hover states</li>
|
|
<li>Input field styling and focus states</li>
|
|
<li>Modal size and positioning</li>
|
|
<li>Social provider button colors</li>
|
|
<li>Divider lines and spacing</li>
|
|
<li>Error message styling</li>
|
|
<li>Responsive layout behavior</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Test 5: Custom Configuration -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test 5: Cotton Component Configuration</h2>
|
|
<div class="test-description">Testing Cotton c-vars Configuration Options</div>
|
|
|
|
<div class="modal-test-container">
|
|
<div class="modal-test-group" data-label="Custom Configuration Test">
|
|
<button class="test-button" @click="testCustomConfiguration()">
|
|
Test Custom Cotton Config
|
|
</button>
|
|
<div class="feature-list">
|
|
Cotton c-vars to test:
|
|
<ul class="list-disc list-inside mt-2 text-sm">
|
|
<li>Custom login/register titles</li>
|
|
<li>Custom subtitle text</li>
|
|
<li>Custom divider text</li>
|
|
<li>Show/hide social providers</li>
|
|
<li>Show/hide forgot password</li>
|
|
<li>Custom CSS classes</li>
|
|
<li>Custom forgot password URL</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Checklist -->
|
|
<div class="test-section">
|
|
<h2 class="text-xl font-semibold mb-4">Test Results Checklist</h2>
|
|
<div class="feature-list">
|
|
<div class="space-y-2">
|
|
<div><span class="status-indicator status-pending"></span>Modal opens and closes identically</div>
|
|
<div><span class="status-indicator status-pending"></span>Form switching works the same</div>
|
|
<div><span class="status-indicator status-pending"></span>Alpine.js directives function identically</div>
|
|
<div><span class="status-indicator status-pending"></span>Visual styling is identical</div>
|
|
<div><span class="status-indicator status-pending"></span>Password toggle works the same</div>
|
|
<div><span class="status-indicator status-pending"></span>Error states display identically</div>
|
|
<div><span class="status-indicator status-pending"></span>Social provider buttons render the same</div>
|
|
<div><span class="status-indicator status-pending"></span>Keyboard shortcuts work (ESC key)</div>
|
|
<div><span class="status-indicator status-pending"></span>Form validation behaves identically</div>
|
|
<div><span class="status-indicator status-pending"></span>Cotton c-vars configuration works</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Include Original Auth Modal -->
|
|
<div x-data="{ originalModalId: 'original' }">
|
|
<c-auth_modal window_key="authModalOriginal" />
|
|
</div>
|
|
|
|
<!-- Include Cotton Auth Modal -->
|
|
<c-auth_modal window_key="authModalCotton" />
|
|
|
|
<!-- Custom Cotton Auth Modal with Configuration -->
|
|
<div id="custom-cotton-modal" style="display: none;">
|
|
<c-auth_modal
|
|
window_key="authModalCustom"
|
|
login_title="Custom Sign In"
|
|
register_title="Custom Registration"
|
|
login_subtitle="Welcome back! Please sign in to your account"
|
|
register_subtitle="Join our amazing community of theme park enthusiasts"
|
|
social_divider_text_login="Or use your credentials"
|
|
social_divider_text_register="Or create with email"
|
|
show_social_providers="true"
|
|
show_forgot_password="true"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Alpine.js -->
|
|
<script src="{% static 'js/alpine.min.js' %}" defer></script>
|
|
|
|
<!-- Auth Modal Alpine.js Component -->
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('authModal', () => ({
|
|
open: false,
|
|
mode: 'login',
|
|
showPassword: false,
|
|
socialProviders: [
|
|
{ id: 'google', name: 'Google' },
|
|
{ id: 'discord', name: 'Discord' }
|
|
],
|
|
socialLoading: false,
|
|
loginLoading: false,
|
|
registerLoading: false,
|
|
loginError: '',
|
|
registerError: '',
|
|
loginForm: {
|
|
username: '',
|
|
password: ''
|
|
},
|
|
registerForm: {
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
username: '',
|
|
password1: '',
|
|
password2: ''
|
|
},
|
|
|
|
close() {
|
|
this.open = false;
|
|
this.resetForms();
|
|
},
|
|
|
|
switchToLogin() {
|
|
this.mode = 'login';
|
|
this.showPassword = false;
|
|
this.registerError = '';
|
|
},
|
|
|
|
switchToRegister() {
|
|
this.mode = 'register';
|
|
this.showPassword = false;
|
|
this.loginError = '';
|
|
},
|
|
|
|
resetForms() {
|
|
this.loginForm = { username: '', password: '' };
|
|
this.registerForm = { first_name: '', last_name: '', email: '', username: '', password1: '', password2: '' };
|
|
this.loginError = '';
|
|
this.registerError = '';
|
|
this.showPassword = false;
|
|
},
|
|
|
|
handleLogin() {
|
|
this.loginLoading = true;
|
|
this.loginError = '';
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
this.loginLoading = false;
|
|
if (!this.loginForm.username || !this.loginForm.password) {
|
|
this.loginError = 'Please fill in all fields';
|
|
} else {
|
|
this.loginError = 'Demo: Login functionality would work here';
|
|
}
|
|
}, 1500);
|
|
},
|
|
|
|
handleRegister() {
|
|
this.registerLoading = true;
|
|
this.registerError = '';
|
|
|
|
// Simulate API call
|
|
setTimeout(() => {
|
|
this.registerLoading = false;
|
|
if (this.registerForm.password1 !== this.registerForm.password2) {
|
|
this.registerError = 'Passwords do not match';
|
|
} else if (!this.registerForm.email || !this.registerForm.username) {
|
|
this.registerError = 'Please fill in all required fields';
|
|
} else {
|
|
this.registerError = 'Demo: Registration functionality would work here';
|
|
}
|
|
}, 1500);
|
|
},
|
|
|
|
handleSocialLogin(providerId) {
|
|
this.socialLoading = true;
|
|
setTimeout(() => {
|
|
this.socialLoading = false;
|
|
alert(`Demo: ${providerId} login would work here`);
|
|
}, 1000);
|
|
}
|
|
}));
|
|
});
|
|
|
|
// Auth Modal Test Suite Component
|
|
Alpine.data('authModalTestSuite', () => ({
|
|
init() {
|
|
// Wait for Alpine.js to initialize and modal instances to be created
|
|
setTimeout(() => {
|
|
console.log('Auth Modal References:', {
|
|
original: window.authModalOriginal,
|
|
cotton: window.authModalCotton,
|
|
custom: window.authModalCustom
|
|
});
|
|
}, 500);
|
|
},
|
|
|
|
openOriginalModal() {
|
|
if (window.authModalOriginal) {
|
|
window.authModalOriginal.open = true;
|
|
}
|
|
},
|
|
|
|
openCottonModal() {
|
|
if (window.authModalCotton) {
|
|
window.authModalCotton.open = true;
|
|
}
|
|
},
|
|
|
|
openOriginalModalInMode(mode) {
|
|
if (window.authModalOriginal) {
|
|
window.authModalOriginal.mode = mode;
|
|
window.authModalOriginal.open = true;
|
|
}
|
|
},
|
|
|
|
openCottonModalInMode(mode) {
|
|
if (window.authModalCotton) {
|
|
window.authModalCotton.mode = mode;
|
|
window.authModalCotton.open = true;
|
|
}
|
|
},
|
|
|
|
testOriginalInteractivity() {
|
|
if (window.authModalOriginal) {
|
|
window.authModalOriginal.open = true;
|
|
window.authModalOriginal.mode = 'login';
|
|
setTimeout(() => {
|
|
window.authModalOriginal.loginError = 'Test error message';
|
|
window.authModalOriginal.showPassword = true;
|
|
}, 500);
|
|
}
|
|
},
|
|
|
|
testCottonInteractivity() {
|
|
if (window.authModalCotton) {
|
|
window.authModalCotton.open = true;
|
|
window.authModalCotton.mode = 'login';
|
|
setTimeout(() => {
|
|
window.authModalCotton.loginError = 'Test error message';
|
|
window.authModalCotton.showPassword = true;
|
|
}, 500);
|
|
}
|
|
},
|
|
|
|
compareModalStyling() {
|
|
if (window.authModalOriginal && window.authModalCotton) {
|
|
window.authModalOriginal.open = true;
|
|
setTimeout(() => {
|
|
window.authModalCotton.open = true;
|
|
}, 200);
|
|
}
|
|
},
|
|
|
|
testCustomConfiguration() {
|
|
// Show the custom cotton modal
|
|
const customModal = this.$el.querySelector('#custom-cotton-modal');
|
|
if (customModal) {
|
|
customModal.style.display = 'block';
|
|
}
|
|
|
|
// Dispatch custom event for configuration test
|
|
this.$dispatch('custom-config-test', {
|
|
message: 'Custom configuration test - check the modal titles and text changes'
|
|
});
|
|
}
|
|
}));
|
|
</script>
|
|
</body>
|
|
</html>
|