| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Login / Signup</title> |
| <style> |
| :root { |
| --bg-dark: #1C1C1E; |
| |
| --bg-dark-rgb: 28, 28, 30; |
| --bg-content-area: #2C2C2E; |
| --bg-content-elements: #3A3A3C; |
| --text-primary: #FFFFFF; |
| --text-secondary: #EBEBF599; |
| --text-tertiary: #8A8A8E; |
| --accent-color-active: #FF9500; |
| --border-color: #38383A; |
| --button-bg: #4A4A4F; |
| } |
| body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1C1C1E; } |
| .container { background: #2C2C2E; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 300px; } |
| h2 { text-align: center; color: var(--accent-color-active); } |
| .form-group { margin-bottom: 1rem; } |
| label { display: block; margin-bottom: .5rem; color: var(--text-primary); } |
| input { width: 100%; padding: .5rem; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; } |
| button { width: 100%; padding: .7rem; border: none; border-radius: 4px; color: white; background-color: var(--bg-content-elements); cursor: pointer; font-size: 1rem; } |
| button:hover { background-color: var(--accent-color-active); } |
| #signupBtn { margin-top: .5rem; } |
| #message { margin-top: 1rem; text-align: center; color: red; font-weight: bold; } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h2>Animex</h2> |
| <form id="loginForm"> |
| <div class="form-group"> |
| <label for="username">Username</label> |
| <input type="text" id="username" name="username" required> |
| </div> |
| <div class="form-group"> |
| <label for="password">Password</label> |
| <input type="password" id="password" name="password" required> |
| </div> |
| <button type="submit">Login</button> |
| <button type="button" id="signupBtn">Sign Up</button> |
| </form> |
| <p id="message"></p> |
| </div> |
|
|
| <script> |
| |
| const API_BASE_URL = ''; |
| |
| const loginForm = document.getElementById('loginForm'); |
| const signupBtn = document.getElementById('signupBtn'); |
| const messageEl = document.getElementById('message'); |
| |
| loginForm.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| messageEl.textContent = ''; |
| |
| const formData = new FormData(); |
| formData.append('username', e.target.username.value); |
| formData.append('password', e.target.password.value); |
| |
| try { |
| const response = await fetch(`${API_BASE_URL}/token`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (response.ok) { |
| const data = await response.json(); |
| localStorage.setItem('accessToken', data.access_token); |
| messageEl.style.color = 'green'; |
| messageEl.textContent = 'Login successful! Redirecting...'; |
| } else { |
| const errorData = await response.json(); |
| messageEl.textContent = errorData.detail || 'Login failed.'; |
| } |
| } catch (error) { |
| console.error('Login error:', error); |
| messageEl.textContent = 'An error occurred. Check console.'; |
| } |
| }); |
| |
| signupBtn.addEventListener('click', async () => { |
| messageEl.textContent = ''; |
| const username = loginForm.username.value; |
| const password = loginForm.password.value; |
| |
| if (!username || !password) { |
| messageEl.textContent = 'Please enter username and password to sign up.'; |
| return; |
| } |
| |
| try { |
| const response = await fetch(`${API_BASE_URL}/signup`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ username, password }) |
| }); |
| |
| if (response.status === 201) { |
| messageEl.style.color = 'green'; |
| messageEl.textContent = 'Signup successful! Please log in now.'; |
| } else { |
| const errorData = await response.json(); |
| messageEl.textContent = errorData.detail || 'Signup failed.'; |
| } |
| } catch (error) { |
| console.error('Signup error:', error); |
| messageEl.textContent = 'An error occurred. Check console.'; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
