- JWT stored in HttpOnly, Secure, SameSite=Strict cookie — JS cannot read the token at all; SameSite=Strict prevents CSRF without tokens - Non-sensitive user payload returned in response body and stored in localStorage for UI purposes only (not usable for auth) - Add POST /api/auth/logout endpoint that clears the cookie server-side - Add SECURE_COOKIES env var (default true) for local HTTP testing - Extract login.html inline script to login.js (CSP compliance) - Remove Authorization: Bearer header from API calls; add credentials: include so cookies are sent automatically - CSP script-src includes unsafe-inline to support existing onclick handlers throughout the app Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
// login.js — login / register page logic
|
|
|
|
// Redirect if already logged in
|
|
(function () {
|
|
const raw = localStorage.getItem('user');
|
|
if (raw) {
|
|
try {
|
|
const user = JSON.parse(raw);
|
|
if (user.exp > Date.now() / 1000) {
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
} catch (_) {}
|
|
localStorage.removeItem('user');
|
|
}
|
|
})();
|
|
|
|
function showLogin() {
|
|
document.getElementById('register-panel').style.display = 'none';
|
|
document.getElementById('login-panel').style.display = 'block';
|
|
document.getElementById('username').focus();
|
|
}
|
|
|
|
function showRegister() {
|
|
document.getElementById('login-panel').style.display = 'none';
|
|
document.getElementById('register-panel').style.display = 'block';
|
|
document.getElementById('reg-username').focus();
|
|
}
|
|
|
|
function showError(elId, text) {
|
|
const el = document.getElementById(elId);
|
|
el.textContent = text;
|
|
el.className = 'message error visible';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.getElementById('show-register-link').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
showRegister();
|
|
});
|
|
|
|
document.getElementById('show-login-link').addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
showLogin();
|
|
});
|
|
|
|
// ── Login ──
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('login-btn');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Signing in…';
|
|
document.getElementById('login-msg').className = 'message';
|
|
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await res.json();
|
|
if (res.status === 429) { showError('login-msg', 'Too many attempts — please wait a minute and try again.'); return; }
|
|
if (!res.ok) { showError('login-msg', data.detail || 'Login failed'); return; }
|
|
localStorage.setItem('user', JSON.stringify(data.user));
|
|
window.location.href = '/';
|
|
} catch (err) {
|
|
showError('login-msg', 'Could not reach the server. Please try again.');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Sign In';
|
|
}
|
|
});
|
|
|
|
// ── Register ──
|
|
document.getElementById('reg-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('reg-btn');
|
|
const username = document.getElementById('reg-username').value.trim();
|
|
const password = document.getElementById('reg-password').value;
|
|
const confirm = document.getElementById('reg-confirm').value;
|
|
|
|
if (password !== confirm) { showError('reg-msg', 'Passwords do not match'); return; }
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = 'Creating account…';
|
|
document.getElementById('reg-msg').className = 'message';
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/register', {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) { showError('reg-msg', data.detail || 'Registration failed'); return; }
|
|
localStorage.setItem('user', JSON.stringify(data.user));
|
|
window.location.href = '/';
|
|
} catch (err) {
|
|
showError('reg-msg', 'Could not reach the server. Please try again.');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Create Account';
|
|
}
|
|
});
|
|
});
|