mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 17:11:09 -05:00
Improve mobile authentication by refining how buttons interact with the modal
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
pacnpal
154
test_mobile_auth.html
Normal file
154
test_mobile_auth.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user