Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Billboard API Auth Tester</title> | |
| <style> | |
| body { font-family: system-ui, -apple-system, sans-serif; background: #f4f4f5; padding: 20px; display: flex; gap: 20px; margin: 0; } | |
| .container { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; max-width: 1000px; margin: 0 auto; align-items: flex-start; } | |
| .forms { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 300px; } | |
| .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } | |
| h2 { margin-top: 0; font-size: 1.2rem; color: #333; } | |
| input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 14px; } | |
| button { width: 100%; padding: 10px; background: #000; color: #fff; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; font-weight: bold; font-size: 14px; transition: background 0.2s;} | |
| button:hover { background: #333; } | |
| button.google { background: #4285F4; } | |
| button.google:hover { background: #357AE8; } | |
| .response-panel { flex: 1; min-width: 300px; background: #1e1e2e; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: sticky; top: 20px;} | |
| .response-panel h2 { color: #fff; margin-bottom: 15px; } | |
| #response-output { color: #a6e3a1; font-family: monospace; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; line-height: 1.5; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="forms"> | |
| <!-- Signup --> | |
| <div class="card"> | |
| <h2>Sign Up</h2> | |
| <input type="email" id="signup-email" placeholder="Email"> | |
| <input type="password" id="signup-password" placeholder="Password"> | |
| <button onclick="submitForm('/signup', 'POST', 'signup-email', 'signup-password')">Sign Up</button> | |
| </div> | |
| <!-- Login --> | |
| <div class="card"> | |
| <h2>Login</h2> | |
| <input type="email" id="login-email" placeholder="Email"> | |
| <input type="password" id="login-password" placeholder="Password"> | |
| <button onclick="submitForm('/login', 'POST', 'login-email', 'login-password')">Login</button> | |
| </div> | |
| <!-- Forgot Password --> | |
| <div class="card"> | |
| <h2>Forgot Password</h2> | |
| <input type="email" id="forgot-email" placeholder="Email"> | |
| <button onclick="submitForm('/forgot-password', 'POST', 'forgot-email')">Send Reset Link</button> | |
| </div> | |
| <!-- Google Login --> | |
| <div class="card"> | |
| <h2>Google OAuth</h2> | |
| <button class="google" onclick="handleGoogleLogin()">Log in with Google</button> | |
| </div> | |
| </div> | |
| <!-- Response Output --> | |
| <div class="response-panel"> | |
| <h2>API Response</h2> | |
| <div id="response-output">Awaiting action...</div> | |
| </div> | |
| </div> | |
| <script> | |
| // Updated to match your modified routes (removed /api/v1) | |
| const BASE_URL = 'http://127.0.0.1:8000/auth'; | |
| function showLoading() { | |
| document.getElementById('response-output').innerText = 'Loading...'; | |
| } | |
| function showResponse(data) { | |
| document.getElementById('response-output').innerText = JSON.stringify(data, null, 2); | |
| } | |
| async function submitForm(endpoint, method, emailId, passwordId = null) { | |
| showLoading(); | |
| const email = document.getElementById(emailId).value; | |
| const body = { email: email }; | |
| if (passwordId) { | |
| body.password = document.getElementById(passwordId).value; | |
| } | |
| try { | |
| const response = await fetch(BASE_URL + endpoint, { | |
| method: method, | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(body) | |
| }); | |
| const data = await response.json(); | |
| // If response is not ok, format the error specifically | |
| if (!response.ok) { | |
| showResponse({ status: response.status, error: data.detail || data }); | |
| } else { | |
| showResponse(data); | |
| } | |
| } catch (error) { | |
| showResponse({ error: "Fetch failed. Is the server running and CORS enabled? " + error.message }); | |
| } | |
| } | |
| async function handleGoogleLogin() { | |
| showLoading(); | |
| try { | |
| const response = await fetch(BASE_URL + '/google', { | |
| method: 'GET' | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok) { | |
| showResponse({ status: response.status, error: data.detail || data }); | |
| return; | |
| } | |
| showResponse(data); | |
| // Automatically redirect to the Google URL if present | |
| if (data.url) { | |
| document.getElementById('response-output').innerText += '\n\nRedirecting to Google in 2 seconds...'; | |
| setTimeout(() => { | |
| window.location.href = data.url; | |
| }, 2000); | |
| } | |
| } catch (error) { | |
| showResponse({ error: "Fetch failed. Is the server running and CORS enabled? " + error.message }); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |