Release 0.11.0: trust device for 30 days

frontend/src/components/Login.jsx

@@ -72,6 +72,7 @@ import {
   checkPasscode,
   verifyPasscode,
   setPasscode as apiSetPasscode,
+  startDeviceTrust,
 } from '../api'
 
 export default function Login() {
@@ -84,6 +85,13 @@ export default function Login() {
   const [code, setCode] = useState('')
   const [passcode, setPasscode] = useState('')
   const [newPasscode, setNewPasscode] = useState('')
+  // v0.11.0 — "trust this device for 30 days" checkbox, shared by the
+  // OTC and passcode verify steps. The flag rides on the verify POST;
+  // a checked box mints a device-trust row server-side and sets the
+  // long-lived `rfc_device_trust` cookie. Defaults off so the user
+  // makes an explicit choice — auth credentials shouldn't persist by
+  // default.
+  const [trustDevice, setTrustDevice] = useState(false)
   // v0.8.0 — capture-profile fields.
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
@@ -105,6 +113,28 @@ export default function Login() {
     else if (step === 'set-passcode') newPasscodeRef.current?.focus()
   }, [step])
 
+  // v0.11.0 — on mount, try the device-trust cookie path. If the
+  // browser still carries a valid `rfc_device_trust` cookie from a
+  // prior "trust this device" gesture, the server re-establishes the
+  // session without any user input and we redirect home. The cookie
+  // is HttpOnly so we can't peek at it; we just call the endpoint and
+  // see whether it returns 200. 401 (no cookie / invalid / revoked)
+  // is the structural-silent case — the user proceeds to the email
+  // step normally. We do not surface any UI about the attempt; a
+  // failure should be invisible.
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        await startDeviceTrust()
+        if (!cancelled) window.location.assign('/')
+      } catch (_) {
+        // No trusted device — fall through to the email step.
+      }
+    })()
+    return () => { cancelled = true }
+  }, [])
+
   async function submitEmail(e) {
     e.preventDefault()
     if (!email.trim() || !email.includes('@')) {
@@ -143,7 +173,7 @@ export default function Login() {
     setBusy(true)
     setStatus('')
     try {
-      await verifyPasscode(email.trim(), passcode.trim())
+      await verifyPasscode(email.trim(), passcode.trim(), { trustDevice })
       // Reload so App.jsx's getMe() picks up the fresh session. A
       // returning passcode user is by definition already past the
       // §6.1 capture step (they couldn't have set a passcode while
@@ -189,7 +219,7 @@ export default function Login() {
     setBusy(true)
     setStatus('')
     try {
-      await verifyOtc(email.trim(), code.trim())
+      await verifyOtc(email.trim(), code.trim(), { trustDevice })
       // OTC verified — the server has signed in the user. Fetch the
       // canonical /api/auth/me to decide where to land:
       //   * needs_profile  → §6.1 capture (then /beta-pending).
@@ -378,6 +408,19 @@ export default function Login() {
               required
               disabled={busy}
             />
+            {/* v0.11.0 — trust device for 30 days. The checkbox lives
+                on the verify step so the user makes the trust gesture
+                in the same breath as signing in. Off by default; the
+                user opts in deliberately. */}
+            <label className="otc-trust-device">
+              <input
+                type="checkbox"
+                checked={trustDevice}
+                onChange={e => setTrustDevice(e.target.checked)}
+                disabled={busy}
+              />
+              <span>Trust this device for 30 days</span>
+            </label>
             <div className="otc-actions">
               <button type="submit" disabled={busy || !passcode.trim()}>
                 {busy ? 'Signing in…' : 'Sign in'}
@@ -420,6 +463,17 @@ export default function Login() {
               required
               disabled={busy}
             />
+            {/* v0.11.0 — trust device for 30 days. Same shape as the
+                passcode step; the user opts in deliberately. */}
+            <label className="otc-trust-device">
+              <input
+                type="checkbox"
+                checked={trustDevice}
+                onChange={e => setTrustDevice(e.target.checked)}
+                disabled={busy}
+              />
+              <span>Trust this device for 30 days</span>
+            </label>
             <div className="otc-actions">
               <button type="submit" disabled={busy || code.length !== 6}>
                 {busy ? 'Signing in…' : 'Sign in'}

frontend/src/components/NotificationSettings.jsx

@@ -32,6 +32,9 @@ import {
   getMe,
   setPasscode,
   clearPasscode,
+  listMyDevices,
+  revokeMyDevice,
+  revokeAllMyDevices,
 } from '../api.js'
 import { getConsent, onConsentChange, hydrateFromServer } from '../lib/consent.js'
 
@@ -54,11 +57,126 @@ export default function NotificationSettings({ viewer }) {
       <WatchesSection />
       <MutesSection viewer={viewer} />
       <SignInSection />
+      <DevicesSection />
       <PrivacyCookiesSection />
     </div>
   )
 }
 
+// ── v0.11.0: trusted devices (§6.2, roadmap item #9) ──────────────────────
+//
+// Lists the user's active device-trust rows and lets them revoke any
+// or all. A revoke marks the row dead server-side; the matching
+// device's next visit will be refused and the cookie cleared. The
+// surface intentionally does not single out the row whose cookie the
+// current request carries — every row reads identically, so the user
+// can revoke "this device" alongside any other from a single page.
+
+function DevicesSection() {
+  const [devices, setDevices] = useState(null)
+  const [error, setError] = useState(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  async function refresh() {
+    try {
+      const { items } = await listMyDevices()
+      setDevices(items || [])
+      setError(null)
+    } catch (e) {
+      setError(e.message || 'Could not load trusted devices.')
+    }
+  }
+
+  async function onRevoke(deviceId) {
+    setBusy(true)
+    try {
+      await revokeMyDevice(deviceId)
+      await refresh()
+    } catch (e) {
+      setError(e.message || 'Could not revoke device.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function onRevokeAll() {
+    if (!confirm('Revoke trust on every device, including this one? You will be asked to sign in via email next time.')) {
+      return
+    }
+    setBusy(true)
+    try {
+      await revokeAllMyDevices()
+      await refresh()
+    } catch (e) {
+      setError(e.message || 'Could not revoke devices.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <SectionShell
+      title="Trusted devices"
+      subtitle="Devices where you've checked “Trust this device for 30 days.” Sign-in is automatic on these devices until the trust expires or you revoke it."
+    >
+      {devices === null && <p className="settings-note">Loading…</p>}
+      {devices !== null && devices.length === 0 && (
+        <p className="device-empty">
+          No trusted devices. Sign in and check “Trust this device for 30 days”
+          to add the device you're on now.
+        </p>
+      )}
+      {devices !== null && devices.length > 0 && (
+        <>
+          <ul className="device-list">
+            {devices.map(d => (
+              <li key={d.id} className="device-list-item">
+                <div className="device-meta">
+                  <div className="device-ua">{d.user_agent || 'Unknown device'}</div>
+                  <div className="device-stamps">
+                    Trusted {formatStamp(d.created_at)} · last seen {formatStamp(d.last_seen_at)} · expires {formatStamp(d.expires_at)}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => onRevoke(d.id)}
+                  disabled={busy}
+                  title="Revoke trust on this device"
+                >
+                  Revoke
+                </button>
+              </li>
+            ))}
+          </ul>
+          <button
+            type="button"
+            className="device-revoke-all"
+            onClick={onRevokeAll}
+            disabled={busy}
+          >
+            Revoke all devices
+          </button>
+        </>
+      )}
+      {error && <p className="settings-note warning">{error}</p>}
+    </SectionShell>
+  )
+}
+
+function formatStamp(stamp) {
+  // The server emits SQLite `datetime('now')` strings (UTC, no
+  // timezone marker). Parse defensively; fall back to the raw stamp
+  // if Date can't make sense of it.
+  if (!stamp) return '—'
+  const d = new Date(stamp.replace(' ', 'T') + 'Z')
+  if (Number.isNaN(d.getTime())) return stamp
+  return d.toLocaleString()
+}
+
 // ── §6.2 sign-in (v0.10.0 / roadmap item #8): passcode management ──────────
 
 function SignInSection() {