feat(P6B.T9): PIN-Idle-Auto-Lock setting + idle watcher

Adds opt-in (default OFF) auto-lock: after X minutes of no user input
the app calls signOut() (full memory wipe + PIN re-entry on next open).
Settings dropdown (Aus / 5 / 15 / 30 / 60 min) lives in SecurityCenter
below the existing wipe-on-close toggle. The idle timer is mounted in
AppShell via useIdleAutoLock; activity events are throttled to 1 Hz to
avoid timer thrash on rapid mouse movement. The localStorage key is
added to PRESERVE_LOCAL_STORAGE so a wipe never silently disables the
feature.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-05-16 23:59:27 +02:00
parent 21376daf39
commit 6c6828006b
5 changed files with 165 additions and 0 deletions
+2
View File
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { useIdleAutoLock } from '../hooks/useIdleAutoLock';
import { startConversationKeySync } from '../lib/conversationKeySync';
import { startDeviceApprovalListener } from '../lib/deviceApproval';
import { ensureInstallId } from '../lib/installId';
@@ -14,6 +15,7 @@ import { Sidebar } from './Sidebar';
export function AppShell() {
const { session } = useAuth();
useIdleAutoLock();
useMentionNotifications(session?.user.id);
useEffect(() => {
// Prompt once per authenticated shell mount. Module-level guard prevents
@@ -1,5 +1,11 @@
import { useState } from 'react';
import {
type AutoLockMinutes,
getAutoLockMinutes,
notifyAutoLockChanged,
setAutoLockMinutes,
} from '../lib/autoLockSettings';
import { isWipeOnCloseEnabled, setWipeOnClose } from '../lib/memoryWipeSettings';
import {
changePin,
@@ -21,6 +27,7 @@ export function SecurityCenter({ userId }: Props) {
const [recovery, setRecovery] = useState<string | null>(null);
const [migration, setMigration] = useState<LegacyMigrationReport | null>(null);
const [wipeOnClose, setWipeOnCloseState] = useState<boolean>(() => isWipeOnCloseEnabled());
const [autoLockMinutes, setAutoLockMinutesState] = useState<AutoLockMinutes>(() => getAutoLockMinutes());
async function handleRetryMigration() {
setBusy(true); setMsg(null); setMigration(null);
@@ -149,6 +156,39 @@ export function SecurityCenter({ userId }: Props) {
</label>
</section>
<section>
<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-fg-muted">
Auto-Lock nach Inaktivität
</h3>
<p className="mb-2 text-xs text-fg-muted">
Verlangt erneute PIN-Eingabe nach der gewählten Inaktivitätsdauer. Empfohlen für gemeinsam genutzte Rechner.
</p>
<div className="flex items-center justify-between gap-3">
<div>
<div className="text-sm font-medium text-fg">Automatisch sperren</div>
<div className="text-xs text-fg-muted">
Verlangt erneute PIN-Eingabe nach X Minuten Inaktivität.
</div>
</div>
<select
value={autoLockMinutes}
onChange={(e) => {
const next = Number(e.target.value) as AutoLockMinutes;
setAutoLockMinutes(next);
notifyAutoLockChanged(next);
setAutoLockMinutesState(next);
}}
className="cursor-pointer rounded-md border border-line bg-surface-2 px-3 py-1.5 text-sm text-fg focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/40"
>
<option value={0}>Aus</option>
<option value={5}>5 min</option>
<option value={15}>15 min</option>
<option value={30}>30 min</option>
<option value={60}>60 min</option>
</select>
</div>
</section>
<section>
<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-rose-400">Identität zurücksetzen</h3>
<p className="mb-2 text-xs text-fg-muted">Erstellt einen neuen Schlüssel. Alle alten Chats werden unlesbar.</p>
+79
View File
@@ -0,0 +1,79 @@
import { useEffect, useRef } from 'react';
import { useAuth } from '../context/AuthContext';
import {
getAutoLockMinutes,
subscribeAutoLockSetting,
type AutoLockMinutes,
} from '../lib/autoLockSettings';
const ACTIVITY_EVENTS: Array<keyof WindowEventMap> = [
'keydown',
'mousedown',
'pointermove',
'touchstart',
'wheel',
];
// Throttle activity-event resets to once per second to avoid thrashing the
// timer on rapid mouse movement.
const RESET_THROTTLE_MS = 1000;
export function useIdleAutoLock(): void {
const { session, signOut } = useAuth();
const minutesRef = useRef<AutoLockMinutes>(getAutoLockMinutes());
const timerRef = useRef<number | null>(null);
const lastResetAtRef = useRef<number>(0);
// Keep minutesRef live to the setting.
useEffect(() => {
const unsub = subscribeAutoLockSetting((v) => {
minutesRef.current = v;
scheduleNext();
});
return unsub;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Helper: schedule the lock based on the current setting.
function scheduleNext(): void {
if (timerRef.current !== null) {
window.clearTimeout(timerRef.current);
timerRef.current = null;
}
const min = minutesRef.current;
if (min === 0) return; // disabled
timerRef.current = window.setTimeout(() => {
timerRef.current = null;
// Fire the lock. signOut wipes local state and navigates to /device
// (PIN re-entry screen).
void signOut().catch((err) => console.warn('auto-lock signOut failed', err));
}, min * 60 * 1000);
}
useEffect(() => {
if (!session) return;
scheduleNext();
const onActivity = () => {
const now = Date.now();
if (now - lastResetAtRef.current < RESET_THROTTLE_MS) return;
lastResetAtRef.current = now;
scheduleNext();
};
for (const ev of ACTIVITY_EVENTS) {
window.addEventListener(ev, onActivity, { passive: true });
}
return () => {
for (const ev of ACTIVITY_EVENTS) {
window.removeEventListener(ev, onActivity);
}
if (timerRef.current !== null) {
window.clearTimeout(timerRef.current);
timerRef.current = null;
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [session]);
}
+43
View File
@@ -0,0 +1,43 @@
// Per-install setting for PIN-idle-auto-lock. 0 = disabled.
// Values match the dropdown options (5/15/30/60 minutes).
const KEY = 'chatapp.autoLockMinutes.v1';
export type AutoLockMinutes = 0 | 5 | 15 | 30 | 60;
const VALID: AutoLockMinutes[] = [0, 5, 15, 30, 60];
export function getAutoLockMinutes(): AutoLockMinutes {
try {
const raw = window.localStorage.getItem(KEY);
if (!raw) return 0;
const n = Number(raw);
if (VALID.includes(n as AutoLockMinutes)) return n as AutoLockMinutes;
return 0;
} catch {
return 0;
}
}
type Listener = (value: AutoLockMinutes) => void;
const listeners = new Set<Listener>();
export function subscribeAutoLockSetting(l: Listener): () => void {
listeners.add(l);
return () => listeners.delete(l);
}
export function notifyAutoLockChanged(value: AutoLockMinutes): void {
for (const l of listeners) {
try { l(value); } catch (err) { console.warn(err); }
}
}
export function setAutoLockMinutes(value: AutoLockMinutes): void {
try {
window.localStorage.setItem(KEY, String(value));
} catch {
/* quota */
}
notifyAutoLockChanged(value);
}
+1
View File
@@ -16,6 +16,7 @@ const PRESERVE_LOCAL_STORAGE = new Set([
'chatapp.locale',
'chatapp.installId',
'chatapp.wipeOnClose.v1',
'chatapp.autoLockMinutes.v1',
'i18nextLng',
]);