derekc
59f9685e2b
- 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>
62 lines
2.9 KiB
HTML
62 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login — Yolkbook</title>
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body class="login-body">
|
|
<div class="login-container">
|
|
<div class="login-brand">🥚 Yolkbook</div>
|
|
|
|
<!-- Sign In -->
|
|
<div class="card login-card" id="login-panel">
|
|
<h1 class="login-title">Sign In</h1>
|
|
<div id="login-msg" class="message"></div>
|
|
<form id="login-form">
|
|
<div class="form-group" style="margin-bottom:1rem">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" autocomplete="username" required autofocus>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:1.5rem">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" autocomplete="current-password" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width:100%" id="login-btn">Sign In</button>
|
|
</form>
|
|
<p style="text-align:center;margin-top:1rem;font-size:0.9rem;color:var(--muted)">
|
|
No account? <a href="#" id="show-register-link">Create one</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Register -->
|
|
<div class="card login-card" id="register-panel" style="display:none">
|
|
<h1 class="login-title">Create Account</h1>
|
|
<div id="reg-msg" class="message"></div>
|
|
<form id="reg-form">
|
|
<div class="form-group" style="margin-bottom:1rem">
|
|
<label for="reg-username">Username</label>
|
|
<input type="text" id="reg-username" autocomplete="username" required minlength="2" maxlength="64">
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:1rem">
|
|
<label for="reg-password">Password</label>
|
|
<input type="password" id="reg-password" autocomplete="new-password" required minlength="10" placeholder="min 10 characters">
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:1.5rem">
|
|
<label for="reg-confirm">Confirm Password</label>
|
|
<input type="password" id="reg-confirm" autocomplete="new-password" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="width:100%" id="reg-btn">Create Account</button>
|
|
</form>
|
|
<p style="text-align:center;margin-top:1rem;font-size:0.9rem;color:var(--muted)">
|
|
Already have an account? <a href="#" id="show-login-link">Sign in</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/login.js"></script>
|
|
</body>
|
|
</html>
|