mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 07:31:07 -05:00
499c8c5abf
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
154 lines
5.7 KiB
HTML
154 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mobile Auth Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.test-container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.test-status {
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
}
|
|
.pass { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
|
.fail { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
|
|
button {
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin: 5px;
|
|
}
|
|
button:hover { background: #0056b3; }
|
|
.mobile-frame {
|
|
width: 375px;
|
|
height: 667px;
|
|
border: 1px solid #ccc;
|
|
margin: 20px auto;
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>ThrillWiki Mobile Authentication Testing</h1>
|
|
<p>This page will test the mobile authentication buttons functionality.</p>
|
|
|
|
<div id="test-results">
|
|
<div class="test-status pending" id="test-1">
|
|
⏳ Test 1: Loading ThrillWiki homepage in mobile view...
|
|
</div>
|
|
<div class="test-status pending" id="test-2">
|
|
⏳ Test 2: Locating mobile Sign In and Join buttons...
|
|
</div>
|
|
<div class="test-status pending" id="test-3">
|
|
⏳ Test 3: Testing Sign In button functionality...
|
|
</div>
|
|
<div class="test-status pending" id="test-4">
|
|
⏳ Test 4: Testing Join button functionality...
|
|
</div>
|
|
<div class="test-status pending" id="test-5">
|
|
⏳ Test 5: Testing modal close functionality...
|
|
</div>
|
|
<div class="test-status pending" id="test-6">
|
|
⏳ Test 6: Verifying button touch-friendliness...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button onclick="runTests()">Run Automated Tests</button>
|
|
<button onclick="openThrillWiki()">Open ThrillWiki Mobile</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mobile-frame" id="mobile-frame" style="display: none;">
|
|
<iframe id="thrillwiki-frame" src=""></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
const THRILLWIKI_URL = 'http://localhost:5000';
|
|
let testResults = {};
|
|
|
|
function updateTestStatus(testId, status, message) {
|
|
const element = document.getElementById(testId);
|
|
element.className = `test-status ${status}`;
|
|
const emoji = status === 'pass' ? '✅' : status === 'fail' ? '❌' : '⏳';
|
|
element.innerHTML = `${emoji} ${message}`;
|
|
testResults[testId] = { status, message };
|
|
}
|
|
|
|
async function runTests() {
|
|
console.log('Starting mobile authentication tests...');
|
|
|
|
// Test 1: Load homepage
|
|
updateTestStatus('test-1', 'pending', 'Test 1: Loading ThrillWiki homepage...');
|
|
try {
|
|
const response = await fetch(THRILLWIKI_URL);
|
|
if (response.ok) {
|
|
updateTestStatus('test-1', 'pass', 'Test 1: ✅ Homepage loaded successfully');
|
|
} else {
|
|
updateTestStatus('test-1', 'fail', 'Test 1: ❌ Failed to load homepage');
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
updateTestStatus('test-1', 'fail', `Test 1: ❌ Network error: ${error.message}`);
|
|
return;
|
|
}
|
|
|
|
// Test 2: Check mobile frame and buttons
|
|
updateTestStatus('test-2', 'pending', 'Test 2: Setting up mobile frame...');
|
|
const mobileFrame = document.getElementById('mobile-frame');
|
|
const iframe = document.getElementById('thrillwiki-frame');
|
|
|
|
mobileFrame.style.display = 'block';
|
|
iframe.src = THRILLWIKI_URL;
|
|
|
|
// Wait for iframe to load
|
|
await new Promise(resolve => {
|
|
iframe.onload = resolve;
|
|
setTimeout(resolve, 5000); // Fallback timeout
|
|
});
|
|
|
|
updateTestStatus('test-2', 'pass', 'Test 2: ✅ Mobile frame loaded');
|
|
|
|
// Test 3-6: Will be completed via manual inspection
|
|
updateTestStatus('test-3', 'pending', 'Test 3: 👆 Please manually test Sign In button in frame below');
|
|
updateTestStatus('test-4', 'pending', 'Test 4: 👆 Please manually test Join button in frame below');
|
|
updateTestStatus('test-5', 'pending', 'Test 5: 👆 Please test modal close (ESC key & X button)');
|
|
updateTestStatus('test-6', 'pending', 'Test 6: 👆 Please verify buttons are touch-friendly (>44px)');
|
|
|
|
console.log('Tests setup complete. Manual testing required.');
|
|
}
|
|
|
|
function openThrillWiki() {
|
|
window.open(THRILLWIKI_URL, '_blank');
|
|
}
|
|
|
|
// Auto-run tests when page loads
|
|
window.onload = () => {
|
|
setTimeout(runTests, 1000);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |