|
|
<!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" id="loginBtn">Login</button> |
|
|
<button type="button" id="signupBtn">Sign Up</button> |
|
|
</form> |
|
|
<p id="message"></p> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
console.log("DOM fully loaded and parsed. Initializing script."); |
|
|
|
|
|
const API_BASE_URL = ''; |
|
|
|
|
|
const loginForm = document.getElementById('loginForm'); |
|
|
const signupBtn = document.getElementById('signupBtn'); |
|
|
const loginBtn = document.getElementById('loginBtn'); |
|
|
const messageEl = document.getElementById('message'); |
|
|
|
|
|
|
|
|
|
|
|
console.log("Attempting to find buttons..."); |
|
|
console.log("Login button element:", loginBtn); |
|
|
console.log("Signup button element:", signupBtn); |
|
|
|
|
|
|
|
|
loginForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
console.log("Login form submitted."); |
|
|
messageEl.textContent = ''; |
|
|
loginBtn.disabled = true; |
|
|
|
|
|
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 |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (response.ok) { |
|
|
const token = data.access_token; |
|
|
localStorage.setItem('accessToken', token); |
|
|
|
|
|
if (window.parent) { |
|
|
window.parent.postMessage({ accessToken: token }, '*'); |
|
|
} |
|
|
|
|
|
messageEl.style.color = 'green'; |
|
|
messageEl.textContent = 'Login Successful! You can return to the settings page.'; |
|
|
} else { |
|
|
messageEl.style.color = 'red'; |
|
|
messageEl.textContent = data.detail || 'Login failed.'; |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Login fetch error:', error); |
|
|
messageEl.style.color = 'red'; |
|
|
messageEl.textContent = 'An error occurred. Please try again.'; |
|
|
} finally { |
|
|
loginBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
signupBtn.addEventListener('click', async () => { |
|
|
messageEl.textContent = ''; |
|
|
signupBtn.disabled = true; |
|
|
|
|
|
const username = loginForm.username.value; |
|
|
const password = loginForm.password.value; |
|
|
|
|
|
if (!username || !password) { |
|
|
messageEl.style.color = 'red'; |
|
|
messageEl.textContent = 'Please enter a username and password to sign up.'; |
|
|
signupBtn.disabled = false; |
|
|
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.style.color = 'red'; |
|
|
messageEl.textContent = errorData.detail || 'Signup failed.'; |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Signup error:', error); |
|
|
messageEl.style.color = 'red'; |
|
|
messageEl.textContent = 'An error occurred. Please try again.'; |
|
|
} finally { |
|
|
signupBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
