feat: add recovery code functionality and device management

webapp/src/components/ConfirmDialog.tsx

@@ -11,6 +11,7 @@ interface ConfirmDialogProps {
   onConfirm: () => void;
   onCancel: () => void;
   children?: ComponentChildren;
+  afterActions?: ComponentChildren;
 }
 
 export default function ConfirmDialog(props: ConfirmDialogProps) {
@@ -31,6 +32,7 @@ export default function ConfirmDialog(props: ConfirmDialogProps) {
         <button type="button" className="btn btn-secondary dialog-btn" onClick={props.onCancel}>
           {props.cancelText || 'No'}
         </button>
+        {props.afterActions}
       </div>
     </div>
   );

webapp/src/components/RecoverTwoFactorPage.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'preact/hooks';
+import { Eye, EyeOff } from 'lucide-preact';
+
+interface RecoverTwoFactorPageProps {
+  values: { email: string; password: string; recoveryCode: string };
+  onChange: (next: { email: string; password: string; recoveryCode: string }) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+}
+
+export default function RecoverTwoFactorPage(props: RecoverTwoFactorPageProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1>Recover Two-step Login</h1>
+        <p className="muted">Sign in with your one-time recovery code to disable two-step verification.</p>
+
+        <label className="field">
+          <span>Email</span>
+          <input
+            className="input"
+            type="email"
+            value={props.values.email}
+            onInput={(e) => props.onChange({ ...props.values, email: (e.currentTarget as HTMLInputElement).value })}
+          />
+        </label>
+
+        <label className="field">
+          <span>Master Password</span>
+          <div className="password-wrap">
+            <input
+              className="input"
+              type={showPassword ? 'text' : 'password'}
+              value={props.values.password}
+              onInput={(e) => props.onChange({ ...props.values, password: (e.currentTarget as HTMLInputElement).value })}
+            />
+            <button type="button" className="eye-btn" onClick={() => setShowPassword((v) => !v)}>
+              {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          </div>
+        </label>
+
+        <label className="field">
+          <span>Recovery Code</span>
+          <input
+            className="input"
+            value={props.values.recoveryCode}
+            onInput={(e) => props.onChange({ ...props.values, recoveryCode: (e.currentTarget as HTMLInputElement).value.toUpperCase() })}
+          />
+        </label>
+
+        <div className="field-grid">
+          <button type="button" className="btn btn-primary" onClick={props.onSubmit}>
+            Submit
+          </button>
+          <button type="button" className="btn btn-secondary" onClick={props.onCancel}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

webapp/src/components/SecurityDevicesPage.tsx

@@ -0,0 +1,129 @@
+import { Clock3, RefreshCw, ShieldOff, Trash2 } from 'lucide-preact';
+import type { AuthorizedDevice } from '@/lib/types';
+
+interface SecurityDevicesPageProps {
+  devices: AuthorizedDevice[];
+  loading: boolean;
+  onRefresh: () => void;
+  onRevokeTrust: (device: AuthorizedDevice) => void;
+  onRemoveDevice: (device: AuthorizedDevice) => void;
+  onRevokeAll: () => void;
+}
+
+function formatDateTime(value: string | null | undefined): string {
+  if (!value) return '-';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '-';
+  return date.toLocaleString();
+}
+
+function mapDeviceTypeName(type: number): string {
+  switch (type) {
+    case 0: return 'Android';
+    case 1: return 'iOS';
+    case 2: return 'Chrome Extension';
+    case 3: return 'Firefox Extension';
+    case 4: return 'Opera Extension';
+    case 5: return 'Edge Extension';
+    case 6: return 'Windows Desktop';
+    case 7: return 'macOS Desktop';
+    case 8: return 'Linux Desktop';
+    case 9: return 'Chrome Browser';
+    case 10: return 'Firefox Browser';
+    case 11: return 'Opera Browser';
+    case 12: return 'Edge Browser';
+    case 13: return 'IE Browser';
+    case 14: return 'Web';
+    default: return `Type ${type}`;
+  }
+}
+
+export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
+  return (
+    <div className="stack">
+      <section className="card">
+        <div className="section-head">
+          <div>
+            <h3 style={{ margin: 0 }}>Account Security</h3>
+            <div className="muted-inline" style={{ marginTop: 4 }}>
+              Manage authorized devices and 30-day TOTP trusted sessions.
+            </div>
+          </div>
+          <div className="actions">
+            <button type="button" className="btn btn-secondary small" onClick={props.onRefresh}>
+              <RefreshCw size={14} className="btn-icon" />
+              Refresh
+            </button>
+            <button type="button" className="btn btn-danger small" onClick={props.onRevokeAll}>
+              <ShieldOff size={14} className="btn-icon" />
+              Revoke All Trusted
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section className="card">
+        <h3 style={{ marginTop: 0 }}>Authorized Devices</h3>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>Device</th>
+              <th>Type</th>
+              <th>Added</th>
+              <th>Last Seen</th>
+              <th>Trusted Until</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.devices.map((device) => (
+              <tr key={device.identifier}>
+                <td>
+                  <div>{device.name || 'Unknown device'}</div>
+                  <div className="muted-inline">{device.identifier}</div>
+                </td>
+                <td>{mapDeviceTypeName(device.type)}</td>
+                <td>{formatDateTime(device.creationDate)}</td>
+                <td>{formatDateTime(device.revisionDate)}</td>
+                <td>
+                  {device.trusted ? (
+                    <div className="trusted-cell">
+                      <Clock3 size={13} />
+                      <span>{formatDateTime(device.trustedUntil)}</span>
+                    </div>
+                  ) : (
+                    <span className="muted-inline">Not trusted</span>
+                  )}
+                </td>
+                <td>
+                  <div className="actions">
+                    <button
+                      type="button"
+                      className="btn btn-secondary small"
+                      disabled={!device.trusted}
+                      onClick={() => props.onRevokeTrust(device)}
+                    >
+                      <ShieldOff size={14} className="btn-icon" />
+                      Revoke Trust
+                    </button>
+                    <button type="button" className="btn btn-danger small" onClick={() => props.onRemoveDevice(device)}>
+                      <Trash2 size={14} className="btn-icon" />
+                      Remove Device
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {!props.loading && props.devices.length === 0 && (
+              <tr>
+                <td colSpan={6}>
+                  <div className="empty" style={{ minHeight: 80 }}>No devices found.</div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </section>
+    </div>
+  );
+}

webapp/src/components/SettingsPage.tsx

@@ -10,6 +10,8 @@ interface SettingsPageProps {
   onChangePassword: (currentPassword: string, nextPassword: string, nextPassword2: string) => Promise<void>;
   onEnableTotp: (secret: string, token: string) => Promise<void>;
   onOpenDisableTotp: () => void;
+  onGetRecoveryCode: (masterPassword: string) => Promise<string>;
+  onNotify?: (type: 'success' | 'error', text: string) => void;
 }
 
 function randomBase32Secret(length: number): string {
@@ -35,6 +37,8 @@ export default function SettingsPage(props: SettingsPageProps) {
   const [secret, setSecret] = useState(() => localStorage.getItem(totpSecretStorageKey) || randomBase32Secret(32));
   const [token, setToken] = useState('');
   const [totpLocked, setTotpLocked] = useState(props.totpEnabled);
+  const [recoveryMasterPassword, setRecoveryMasterPassword] = useState('');
+  const [recoveryCode, setRecoveryCode] = useState('');
 
   useEffect(() => {
     if (!props.totpEnabled) {
@@ -57,6 +61,12 @@ export default function SettingsPage(props: SettingsPageProps) {
     setTotpLocked(true);
   }
 
+  async function loadRecoveryCode(): Promise<void> {
+    const code = await props.onGetRecoveryCode(recoveryMasterPassword);
+    setRecoveryCode(code);
+    props.onNotify?.('success', 'Recovery code loaded');
+  }
+
   return (
     <div className="stack">
       <section className="card">
@@ -112,41 +122,90 @@ export default function SettingsPage(props: SettingsPageProps) {
       </section>
 
       <section className="card">
-        <h3>TOTP</h3>
-        {totpLocked && <div className="status-ok">TOTP is enabled for this account.</div>}
-        <div className="totp-grid">
-          <div className="totp-qr" dangerouslySetInnerHTML={{ __html: qrSvg }} />
-          <div>
-            <div>
-              <label className="field">
-                <span>Authenticator Key</span>
-                <input className="input" value={secret} disabled={totpLocked} onInput={(e) => setSecret((e.currentTarget as HTMLInputElement).value.toUpperCase())} />
-              </label>
-              <label className="field">
-                <span>Verification Code</span>
-                <input className="input" value={token} disabled={totpLocked} onInput={(e) => setToken((e.currentTarget as HTMLInputElement).value)} />
-              </label>
-              <div className="actions">
-                <button type="button" className="btn btn-primary" disabled={totpLocked} onClick={() => void enableTotp()}>
-                  <ShieldCheck size={14} className="btn-icon" />
-                  {totpLocked ? 'Enabled' : 'Enable TOTP'}
-                </button>
-                <button type="button" className="btn btn-secondary" disabled={totpLocked} onClick={() => setSecret(randomBase32Secret(32))}>
-                  <RefreshCw size={14} className="btn-icon" />
-                  Regenerate
-                </button>
-                <button type="button" className="btn btn-secondary" disabled={totpLocked} onClick={() => navigator.clipboard.writeText(secret)}>
-                  <Clipboard size={14} className="btn-icon" />
-                  Copy Secret
-                </button>
+        <div className="settings-twofactor-grid">
+          <div className="settings-subcard">
+            <h3>TOTP</h3>
+            {totpLocked && <div className="status-ok">TOTP is enabled for this account.</div>}
+            <div className="totp-grid">
+              <div className="totp-qr" dangerouslySetInnerHTML={{ __html: qrSvg }} />
+              <div>
+                <div>
+                  <label className="field">
+                    <span>Authenticator Key</span>
+                    <input className="input" value={secret} disabled={totpLocked} onInput={(e) => setSecret((e.currentTarget as HTMLInputElement).value.toUpperCase())} />
+                  </label>
+                  <label className="field">
+                    <span>Verification Code</span>
+                    <input className="input" value={token} disabled={totpLocked} onInput={(e) => setToken((e.currentTarget as HTMLInputElement).value)} />
+                  </label>
+                  <div className="actions">
+                    <button type="button" className="btn btn-primary" disabled={totpLocked} onClick={() => void enableTotp()}>
+                      <ShieldCheck size={14} className="btn-icon" />
+                      {totpLocked ? 'Enabled' : 'Enable TOTP'}
+                    </button>
+                    <button type="button" className="btn btn-secondary" disabled={totpLocked} onClick={() => setSecret(randomBase32Secret(32))}>
+                      <RefreshCw size={14} className="btn-icon" />
+                      Regenerate
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-secondary"
+                      disabled={totpLocked}
+                      onClick={() => {
+                        void navigator.clipboard.writeText(secret);
+                        props.onNotify?.('success', 'Secret copied');
+                      }}
+                    >
+                      <Clipboard size={14} className="btn-icon" />
+                      Copy Secret
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
+            <button type="button" className="btn btn-danger" disabled={!totpLocked} onClick={props.onOpenDisableTotp}>
+              <ShieldOff size={14} className="btn-icon" />
+              Disable TOTP
+            </button>
+          </div>
+
+          <div className="settings-subcard">
+            <h3>Recovery Code</h3>
+            <p className="muted-inline" style={{ marginBottom: 8 }}>
+              This is a one-time code. After it is used, a new code is generated automatically.
+            </p>
+            <label className="field">
+              <span>Master Password</span>
+              <input
+                className="input"
+                type="password"
+                value={recoveryMasterPassword}
+                onInput={(e) => setRecoveryMasterPassword((e.currentTarget as HTMLInputElement).value)}
+              />
+            </label>
+            <div className="actions">
+              <button type="button" className="btn btn-secondary" onClick={() => void loadRecoveryCode()}>
+                View Recovery Code
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                disabled={!recoveryCode}
+                onClick={() => {
+                  void navigator.clipboard.writeText(recoveryCode);
+                  props.onNotify?.('success', 'Recovery code copied');
+                }}
+              >
+                Copy Code
+              </button>
+            </div>
+            {recoveryCode && (
+              <div className="card" style={{ marginTop: 10, marginBottom: 0 }}>
+                <div style={{ fontWeight: 800, letterSpacing: '0.08em' }}>{recoveryCode}</div>
+              </div>
+            )}
           </div>
         </div>
-        <button type="button" className="btn btn-danger" onClick={props.onOpenDisableTotp}>
-          <ShieldOff size={14} className="btn-icon" />
-          Disable TOTP
-        </button>
       </section>
     </div>
   );