feat: add 'Keep me logged in' checkbox to login form
- index.html: checkbox between password field and login button - app.js: reads #remember-me and passes rememberMe in POST body - auth.js: rememberMe=true sets 30-day maxAge; false = session cookie (expires when browser closes) - style.css: .form-group--checkbox and .checkbox-label styles
This commit is contained in:
@@ -136,6 +136,7 @@ async function handleLogin(e) {
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const rememberMe = document.getElementById('remember-me').checked;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
@@ -143,7 +144,7 @@ async function handleLogin(e) {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ username, password })
|
||||
body: JSON.stringify({ username, password, rememberMe })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
@@ -31,6 +31,12 @@
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="form-group form-group--checkbox">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="remember-me" name="rememberMe">
|
||||
<span>Keep me logged in</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="login-btn">Login</button>
|
||||
</form>
|
||||
<div id="login-error" class="error-message" style="display: none;"></div>
|
||||
|
||||
@@ -612,6 +612,32 @@ body {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-group--checkbox {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-label span {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
@@ -34,7 +34,7 @@ const loginLimiter = rateLimit({
|
||||
// Authenticate user with Emby
|
||||
router.post('/login', loginLimiter, async (req, res) => {
|
||||
try {
|
||||
const { username, password } = req.body;
|
||||
const { username, password, rememberMe } = req.body;
|
||||
|
||||
console.log(`[Auth] Attempting login for user: ${username}`);
|
||||
|
||||
@@ -68,15 +68,20 @@ router.post('/login', loginLimiter, async (req, res) => {
|
||||
storeToken(user.Id, authData.AccessToken);
|
||||
|
||||
// Set authentication cookie (signed when COOKIE_SECRET is set).
|
||||
// rememberMe=true → persistent cookie, expires in 30 days
|
||||
// rememberMe=false → session cookie, expires when browser closes
|
||||
const cookiePayload = JSON.stringify({ id: user.Id, name: user.Name, isAdmin });
|
||||
const signed = !!process.env.COOKIE_SECRET;
|
||||
res.cookie('emby_user', cookiePayload, {
|
||||
const cookieOptions = {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'strict',
|
||||
signed,
|
||||
maxAge: 24 * 60 * 60 * 1000 // 24 hours
|
||||
});
|
||||
signed
|
||||
};
|
||||
if (rememberMe) {
|
||||
cookieOptions.maxAge = 30 * 24 * 60 * 60 * 1000; // 30 days
|
||||
}
|
||||
res.cookie('emby_user', cookiePayload, cookieOptions);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
|
||||
Reference in New Issue
Block a user