<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - CompanyIQ</title>
<link rel="stylesheet" href="/public/css/styles.css">
</head>
<body>
<header class="header">
<div class="logo">CompanyIQ</div>
<nav class="nav-links">
<a href="/docs">Documentation</a>
</nav>
</header>
<div class="login-container">
<div class="login-card">
<h1>Welcome Back</h1>
<div id="error-message" class="error-message"></div>
<form id="login-form">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required autocomplete="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required autocomplete="current-password">
</div>
<button type="submit" class="btn btn-primary login-btn">Sign In</button>
</form>
</div>
</div>
<script>
document.getElementById('login-form').addEventListener('submit', async (e) => {
e.preventDefault();
const errorEl = document.getElementById('error-message');
errorEl.style.display = 'none';
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
const data = await response.json();
if (response.ok) {
window.location.href = '/dashboard';
} else {
errorEl.textContent = data.error || 'Login failed';
errorEl.style.display = 'block';
}
} catch (error) {
errorEl.textContent = 'Connection error. Please try again.';
errorEl.style.display = 'block';
}
});
</script>
</body>
</html>