Feat v0.6.9 cookie fix roadmap (#44)
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #44.
This commit is contained in:
@@ -99,6 +99,13 @@
|
||||
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.login-keep-login {
|
||||
display: flex; align-items: center; gap: 6px; margin-top: 4px;
|
||||
font-size: 0.82rem; color: var(--text-secondary, #999); cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.login-keep-login input[type="checkbox"] { margin: 0; cursor: pointer; }
|
||||
|
||||
.login-auth-error {
|
||||
color: var(--danger); font-size: 0.78rem; margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
@@ -36,15 +36,18 @@ export function createAuth() {
|
||||
|
||||
// ── Token persistence ───────────────────────
|
||||
|
||||
let _cookieMaxAge = 604800; // default 7 days, updated from server response
|
||||
|
||||
function _saveTokens() {
|
||||
localStorage.setItem(_storageKey, JSON.stringify({
|
||||
accessToken: _accessToken,
|
||||
refreshToken: _refreshToken,
|
||||
user: _user,
|
||||
cookieMaxAge: _cookieMaxAge,
|
||||
}));
|
||||
// Cookie sync for Go template page auth
|
||||
if (_accessToken) {
|
||||
document.cookie = `arm_token=${_accessToken}; path=/; max-age=900; SameSite=Strict`;
|
||||
document.cookie = `arm_token=${_accessToken}; path=/; max-age=${_cookieMaxAge}; SameSite=Strict`;
|
||||
} else {
|
||||
document.cookie = 'arm_token=; path=/; max-age=0';
|
||||
}
|
||||
@@ -57,6 +60,7 @@ export function createAuth() {
|
||||
_accessToken = saved.accessToken || null;
|
||||
_refreshToken = saved.refreshToken || null;
|
||||
_user = saved.user || null;
|
||||
if (saved.cookieMaxAge) _cookieMaxAge = saved.cookieMaxAge;
|
||||
}
|
||||
} catch (_) { /* corrupt storage */ }
|
||||
}
|
||||
@@ -81,6 +85,7 @@ export function createAuth() {
|
||||
_accessToken = data.access_token;
|
||||
_refreshToken = data.refresh_token;
|
||||
_user = data.user;
|
||||
if (data.refresh_expires_in) _cookieMaxAge = data.refresh_expires_in;
|
||||
_saveTokens();
|
||||
_scheduleRefresh(data.expires_in || 900);
|
||||
}
|
||||
@@ -149,8 +154,8 @@ export function createAuth() {
|
||||
/**
|
||||
* Login with credentials. Stores tokens, fetches permissions, emits event.
|
||||
*/
|
||||
async login(login, password) {
|
||||
const data = await _restClient.post('/api/v1/auth/login', { login, password });
|
||||
async login(login, password, keepLogin = false) {
|
||||
const data = await _restClient.post('/api/v1/auth/login', { login, password, keep_login: keepLogin });
|
||||
_setAuth(data);
|
||||
await _fetchPermissions();
|
||||
_emit('auth.login', { user: auth.user }, { localOnly: true });
|
||||
@@ -245,9 +250,30 @@ export function createAuth() {
|
||||
|
||||
if (_accessToken) {
|
||||
_emit('auth.boot', { user: auth.user }, { localOnly: true });
|
||||
auth._startActivityTracking();
|
||||
}
|
||||
},
|
||||
|
||||
// ── Activity Ping (idle-timeout support) ──
|
||||
|
||||
/**
|
||||
* Start activity tracking. Sends POST /api/v1/auth/activity
|
||||
* on user interaction, debounced to max once per minute.
|
||||
*/
|
||||
_startActivityTracking() {
|
||||
let lastPing = 0;
|
||||
const INTERVAL = 60_000; // 1 minute
|
||||
const ping = () => {
|
||||
if (!_accessToken) return;
|
||||
const now = Date.now();
|
||||
if (now - lastPing < INTERVAL) return;
|
||||
lastPing = now;
|
||||
_restClient.post('/api/v1/auth/activity', {}).catch(() => {});
|
||||
};
|
||||
document.addEventListener('click', ping, { passive: true });
|
||||
document.addEventListener('keydown', ping, { passive: true });
|
||||
},
|
||||
|
||||
// ── Internal (called by rest-client / index.js) ──
|
||||
|
||||
_getToken() { return _accessToken; },
|
||||
|
||||
@@ -37,6 +37,10 @@ export default function SettingsSection() {
|
||||
footer_enabled: !!cfg_.footer?.enabled,
|
||||
footer_text: cfg_.footer?.text || '',
|
||||
package_registry_url: cfg_.package_registry?.url || '',
|
||||
session_access_ttl: cfg_.session?.access_token_ttl || '15m',
|
||||
session_refresh_ttl: cfg_.session?.refresh_token_ttl || '7d',
|
||||
session_idle_enabled: !!cfg_.session?.idle_timeout,
|
||||
session_idle_timeout: cfg_.session?.idle_timeout || '2h',
|
||||
});
|
||||
setVault(v);
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
@@ -82,6 +86,13 @@ export default function SettingsSection() {
|
||||
// Package Registry
|
||||
await sw.api.admin.settings.update('package_registry', { value: { url: cfg.package_registry_url } });
|
||||
|
||||
// Session
|
||||
await sw.api.admin.settings.update('session', { value: {
|
||||
access_token_ttl: cfg.session_access_ttl,
|
||||
refresh_token_ttl: cfg.session_refresh_ttl,
|
||||
idle_timeout: cfg.session_idle_enabled ? cfg.session_idle_timeout : '',
|
||||
}});
|
||||
|
||||
sw.toast('Settings saved', 'success');
|
||||
} catch (e) { sw.toast(e.message, 'error'); }
|
||||
finally { setSaving(false); }
|
||||
@@ -163,6 +174,48 @@ export default function SettingsSection() {
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="settings-section"><h3>Session</h3>
|
||||
<div class="form-row">
|
||||
<div class="form-group"><label>Access token TTL</label>
|
||||
<select value=${cfg.session_access_ttl} onChange=${e => set('session_access_ttl', e.target.value)}>
|
||||
<option value="5m">5 minutes</option>
|
||||
<option value="10m">10 minutes</option>
|
||||
<option value="15m">15 minutes (default)</option>
|
||||
<option value="30m">30 minutes</option>
|
||||
<option value="60m">60 minutes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group"><label>Refresh token TTL</label>
|
||||
<select value=${cfg.session_refresh_ttl} onChange=${e => set('session_refresh_ttl', e.target.value)}>
|
||||
<option value="1h">1 hour</option>
|
||||
<option value="12h">12 hours</option>
|
||||
<option value="24h">24 hours</option>
|
||||
<option value="7d">7 days (default)</option>
|
||||
<option value="30d">30 days</option>
|
||||
<option value="90d">90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-muted" style="font-size:12px;">Access token controls JWT lifetime. Refresh token controls how long sessions persist. "Keep me logged in" unchecked caps refresh at 24h.</span>
|
||||
<div style="margin-top:8px;">
|
||||
<label class="toggle-label"><input type="checkbox" checked=${cfg.session_idle_enabled} onChange=${e => set('session_idle_enabled', e.target.checked)} /><span class="toggle-track"></span><span>Enable idle timeout</span></label>
|
||||
${cfg.session_idle_enabled && html`
|
||||
<div class="form-group" style="margin-top:8px;"><label>Idle timeout</label>
|
||||
<select value=${cfg.session_idle_timeout} onChange=${e => set('session_idle_timeout', e.target.value)}>
|
||||
<option value="15m">15 minutes</option>
|
||||
<option value="30m">30 minutes</option>
|
||||
<option value="1h">1 hour</option>
|
||||
<option value="2h">2 hours (default)</option>
|
||||
<option value="4h">4 hours</option>
|
||||
<option value="8h">8 hours</option>
|
||||
<option value="24h">24 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="text-muted" style="font-size:12px;">Rejects token refresh if no user activity within the timeout period.</span>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section"><h3>Encryption Vault</h3>
|
||||
${vault
|
||||
? html`<div class="text-muted" style="font-size:12px;">Key set: ${vault.encryption_key_set ? 'Yes' : 'No'} \u2022 User vaults: ${vault.user_vaults_count ?? '?'}</div>`
|
||||
|
||||
@@ -10,6 +10,7 @@ const { useState, useRef, useCallback } = hooks;
|
||||
export function LoginForm({ onSuccess }) {
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [keepLogin, setKeepLogin] = useState(false);
|
||||
const userRef = useRef(null);
|
||||
const passRef = useRef(null);
|
||||
|
||||
@@ -25,7 +26,7 @@ export function LoginForm({ onSuccess }) {
|
||||
setError('');
|
||||
setLoading(true);
|
||||
try {
|
||||
await sw.auth.login(username, password);
|
||||
await sw.auth.login(username, password, keepLogin);
|
||||
if (onSuccess) {
|
||||
onSuccess();
|
||||
} else {
|
||||
@@ -35,7 +36,7 @@ export function LoginForm({ onSuccess }) {
|
||||
setError(e.message || 'Login failed');
|
||||
setLoading(false);
|
||||
}
|
||||
}, [onSuccess]);
|
||||
}, [onSuccess, keepLogin]);
|
||||
|
||||
const onUserKey = useCallback((e) => {
|
||||
if (e.key === 'Enter') passRef.current?.focus();
|
||||
@@ -59,6 +60,11 @@ export function LoginForm({ onSuccess }) {
|
||||
placeholder="Enter password" autocomplete="current-password"
|
||||
onKeyDown=${onPassKey} />
|
||||
</div>
|
||||
<label class="login-keep-login">
|
||||
<input type="checkbox" checked=${keepLogin}
|
||||
onChange=${e => setKeepLogin(e.target.checked)} />
|
||||
<span>Keep me logged in</span>
|
||||
</label>
|
||||
${error && html`<p class="login-auth-error">${error}</p>`}
|
||||
<button class="login-btn" disabled=${loading} onClick=${doLogin}>
|
||||
${loading ? 'Logging in\u2026' : 'Log In'}
|
||||
|
||||
Reference in New Issue
Block a user