| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Login Debug - Moharek</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| body { |
| font-family: 'Cairo', Arial, sans-serif; |
| background: linear-gradient(135deg, #071f21 0%, #0F4246 100%); |
| color: #fff; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| } |
| .container { |
| background: rgba(255,255,255,0.05); |
| padding: 40px; |
| border-radius: 20px; |
| max-width: 500px; |
| width: 100%; |
| border: 1px solid rgba(255,255,255,0.1); |
| } |
| h1 { margin-bottom: 30px; text-align: center; } |
| .form-group { margin-bottom: 20px; } |
| label { display: block; margin-bottom: 8px; font-weight: 600; } |
| input { |
| width: 100%; |
| padding: 12px; |
| border-radius: 8px; |
| border: 1px solid rgba(255,255,255,0.2); |
| background: rgba(255,255,255,0.05); |
| color: #fff; |
| font-size: 16px; |
| } |
| button { |
| width: 100%; |
| padding: 15px; |
| background: #c8f04e; |
| color: #071f21; |
| border: none; |
| border-radius: 8px; |
| font-size: 18px; |
| font-weight: 700; |
| cursor: pointer; |
| margin-top: 10px; |
| } |
| button:hover { background: #b8e03e; } |
| .debug { |
| background: rgba(0,0,0,0.3); |
| padding: 15px; |
| border-radius: 8px; |
| margin-top: 20px; |
| font-size: 12px; |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| .debug div { margin: 5px 0; } |
| .success { color: #4ade80; } |
| .error { color: #ff4d4d; } |
| .info { color: #60a5fa; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1> Login Debug</h1> |
| |
| <div class="form-group"> |
| <label>Email:</label> |
| <input type="email" id="email" value="admin@moharek.com"> |
| </div> |
| |
| <div class="form-group"> |
| <label>Password:</label> |
| <input type="password" id="password" value="admin123"> |
| </div> |
| |
| <button onclick="testLogin()">Login</button> |
| <button onclick="testRegister()" style="background: #60a5fa;">Register Test User</button> |
| |
| <div class="debug" id="debug"> |
| <div class="info">Debug console will appear here...</div> |
| </div> |
| </div> |
|
|
| <script> |
| const API = window.location.origin + '/api'; |
| |
| function log(msg, type = 'info') { |
| const debug = document.getElementById('debug'); |
| const time = new Date().toLocaleTimeString(); |
| debug.innerHTML += `<div class="${type}">[${time}] ${msg}</div>`; |
| debug.scrollTop = debug.scrollHeight; |
| console.log(msg); |
| } |
| |
| log(`Origin: ${window.location.origin}`, 'info'); |
| log(`API URL: ${API}`, 'info'); |
| log(`Full URL: ${window.location.href}`, 'info'); |
| |
| async function testLogin() { |
| const email = document.getElementById('email').value; |
| const password = document.getElementById('password').value; |
| |
| log(`Attempting login for: ${email}`, 'info'); |
| log(`Sending POST to: ${API}/users/login`, 'info'); |
| |
| try { |
| const response = await fetch(`${API}/users/login`, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ email, password }) |
| }); |
| |
| log(`Response status: ${response.status}`, response.ok ? 'success' : 'error'); |
| |
| const data = await response.json(); |
| log(`Response data: ${JSON.stringify(data, null, 2)}`, data.ok ? 'success' : 'error'); |
| |
| if (data.ok && data.token) { |
| log(' Login successful!', 'success'); |
| log(`Token: ${data.token.substring(0, 30)}...`, 'success'); |
| localStorage.setItem('token', data.token); |
| localStorage.setItem('user', JSON.stringify(data.user)); |
| log('Token saved to localStorage', 'success'); |
| } else { |
| log(` Login failed: ${data.error || 'Unknown error'}`, 'error'); |
| } |
| } catch (error) { |
| log(` Network error: ${error.message}`, 'error'); |
| log(`Error details: ${error.stack}`, 'error'); |
| } |
| } |
| |
| async function testRegister() { |
| const testEmail = `test${Date.now()}@test.com`; |
| const testPassword = 'test123456'; |
| |
| log(`Attempting register for: ${testEmail}`, 'info'); |
| log(`Sending POST to: ${API}/users/register`, 'info'); |
| |
| try { |
| const response = await fetch(`${API}/users/register`, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ |
| email: testEmail, |
| password: testPassword |
| }) |
| }); |
| |
| log(`Response status: ${response.status}`, response.ok ? 'success' : 'error'); |
| |
| const data = await response.json(); |
| log(`Response data: ${JSON.stringify(data, null, 2)}`, data.ok ? 'success' : 'error'); |
| |
| if (data.ok && data.token) { |
| log('Registration successful!', 'success'); |
| log(`User ID: ${data.user_id}`, 'success'); |
| } else { |
| log(` Registration failed: ${data.error || 'Unknown error'}`, 'error'); |
| } |
| } catch (error) { |
| log(` Network error: ${error.message}`, 'error'); |
| log(`Error details: ${error.stack}`, 'error'); |
| } |
| } |
| |
| |
| (async () => { |
| try { |
| log('Testing health endpoint...', 'info'); |
| const response = await fetch(`${window.location.origin}/health`); |
| const data = await response.json(); |
| log(` Health check: ${JSON.stringify(data)}`, 'success'); |
| } catch (error) { |
| log(` Health check failed: ${error.message}`, 'error'); |
| } |
| })(); |
| </script> |
| </body> |
| </html> |
|
|
