feat: Implement Two-Factor Authentication (2FA) for enhanced user account security.

src/pages/Settings.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { User, Mail, Lock, Palette, Save, Loader2, Globe, Camera, X, Calendar, Plus, Trash2, Copy, Eye, EyeOff } from 'lucide-react';
+import { User, Mail, Lock, Palette, Save, Loader2, Globe, Camera, X, Calendar, Plus, Trash2, Copy, Eye, EyeOff, Shield, ShieldCheck, ShieldOff } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { useTheme } from '../contexts/ThemeContext';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -46,6 +46,17 @@ export default function Settings() {
   const [newlyCreatedToken, setNewlyCreatedToken] = useState(null);
   const [tokenVisible, setTokenVisible] = useState(false);
 
+  // 2FA state
+  const [twoFaEnabled, setTwoFaEnabled] = useState(!!user?.totp_enabled);
+  const [twoFaLoading, setTwoFaLoading] = useState(false);
+  const [twoFaSetupData, setTwoFaSetupData] = useState(null); // { secret, uri, qrDataUrl }
+  const [twoFaCode, setTwoFaCode] = useState('');
+  const [twoFaEnabling, setTwoFaEnabling] = useState(false);
+  const [twoFaDisablePassword, setTwoFaDisablePassword] = useState('');
+  const [twoFaDisableCode, setTwoFaDisableCode] = useState('');
+  const [twoFaDisabling, setTwoFaDisabling] = useState(false);
+  const [showDisableForm, setShowDisableForm] = useState(false);
+
   useEffect(() => {
     if (activeSection === 'caldav') {
       setCaldavLoading(true);
@@ -54,6 +65,13 @@ export default function Settings() {
         .catch(() => {})
         .finally(() => setCaldavLoading(false));
     }
+    if (activeSection === 'security') {
+      setTwoFaLoading(true);
+      api.get('/auth/2fa/status')
+        .then(r => setTwoFaEnabled(r.data.enabled))
+        .catch(() => {})
+        .finally(() => setTwoFaLoading(false));
+    }
   }, [activeSection]);
 
   const handleCreateToken = async (e) => {
@@ -85,6 +103,56 @@ export default function Settings() {
     }
   };
 
+  // 2FA handlers
+  const handleSetup2FA = async () => {
+    setTwoFaLoading(true);
+    try {
+      const res = await api.post('/auth/2fa/setup');
+      // Generate QR code data URL client-side
+      const QRCode = (await import('qrcode')).default;
+      const qrDataUrl = await QRCode.toDataURL(res.data.uri, { width: 200, margin: 2, color: { dark: '#000000', light: '#ffffff' } });
+      setTwoFaSetupData({ secret: res.data.secret, uri: res.data.uri, qrDataUrl });
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('settings.security.setupFailed'));
+    } finally {
+      setTwoFaLoading(false);
+    }
+  };
+
+  const handleEnable2FA = async (e) => {
+    e.preventDefault();
+    setTwoFaEnabling(true);
+    try {
+      await api.post('/auth/2fa/enable', { code: twoFaCode });
+      setTwoFaEnabled(true);
+      setTwoFaSetupData(null);
+      setTwoFaCode('');
+      toast.success(t('settings.security.enabled'));
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('settings.security.enableFailed'));
+      setTwoFaCode('');
+    } finally {
+      setTwoFaEnabling(false);
+    }
+  };
+
+  const handleDisable2FA = async (e) => {
+    e.preventDefault();
+    setTwoFaDisabling(true);
+    try {
+      await api.post('/auth/2fa/disable', { password: twoFaDisablePassword, code: twoFaDisableCode });
+      setTwoFaEnabled(false);
+      setShowDisableForm(false);
+      setTwoFaDisablePassword('');
+      setTwoFaDisableCode('');
+      toast.success(t('settings.security.disabled'));
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('settings.security.disableFailed'));
+    } finally {
+      setTwoFaDisabling(false);
+    }
+  };
+
   const groups = getThemeGroups();
 
   const avatarColors = [
@@ -184,6 +252,7 @@ export default function Settings() {
   const sections = [
     { id: 'profile', label: t('settings.profile'), icon: User },
     { id: 'password', label: t('settings.password'), icon: Lock },
+    { id: 'security', label: t('settings.security.title'), icon: Shield },
     { id: 'language', label: t('settings.language'), icon: Globe },
     { id: 'themes', label: t('settings.themes'), icon: Palette },
     { id: 'caldav', label: t('settings.caldav.title'), icon: Calendar },
@@ -411,6 +480,147 @@ export default function Settings() {
             </div>
           )}
 
+          {/* Security / 2FA section */}
+          {activeSection === 'security' && (
+            <div className="space-y-5">
+              <div className="card p-6">
+                <h2 className="text-lg font-semibold text-th-text mb-1">{t('settings.security.title')}</h2>
+                <p className="text-sm text-th-text-s mb-6">{t('settings.security.subtitle')}</p>
+
+                {twoFaLoading ? (
+                  <div className="flex items-center justify-center py-8">
+                    <Loader2 size={24} className="animate-spin text-th-text-s" />
+                  </div>
+                ) : twoFaEnabled ? (
+                  /* 2FA is enabled */
+                  <div>
+                    <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 mb-5">
+                      <ShieldCheck size={22} className="text-emerald-400 flex-shrink-0" />
+                      <div>
+                        <p className="text-sm font-medium text-emerald-300">{t('settings.security.statusEnabled')}</p>
+                        <p className="text-xs text-emerald-400/70">{t('settings.security.statusEnabledDesc')}</p>
+                      </div>
+                    </div>
+
+                    {!showDisableForm ? (
+                      <button
+                        onClick={() => setShowDisableForm(true)}
+                        className="btn-ghost text-th-error hover:text-th-error text-sm"
+                      >
+                        <ShieldOff size={16} />
+                        {t('settings.security.disable')}
+                      </button>
+                    ) : (
+                      <form onSubmit={handleDisable2FA} className="space-y-4 p-4 rounded-xl bg-th-bg-t border border-th-border">
+                        <p className="text-sm text-th-text-s">{t('settings.security.disableConfirm')}</p>
+                        <div>
+                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.currentPassword')}</label>
+                          <div className="relative">
+                            <Lock size={18} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-th-text-s" />
+                            <input
+                              type="password"
+                              value={twoFaDisablePassword}
+                              onChange={e => setTwoFaDisablePassword(e.target.value)}
+                              className="input-field pl-11"
+                              required
+                            />
+                          </div>
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.codeLabel')}</label>
+                          <input
+                            type="text"
+                            inputMode="numeric"
+                            autoComplete="one-time-code"
+                            value={twoFaDisableCode}
+                            onChange={e => setTwoFaDisableCode(e.target.value.replace(/[^0-9\s]/g, '').slice(0, 7))}
+                            className="input-field text-center text-lg tracking-[0.3em] font-mono"
+                            placeholder="000 000"
+                            required
+                            maxLength={7}
+                          />
+                        </div>
+                        <div className="flex gap-2">
+                          <button type="submit" disabled={twoFaDisabling} className="btn-primary bg-red-600 hover:bg-red-700 border-red-600">
+                            {twoFaDisabling ? <Loader2 size={14} className="animate-spin" /> : <ShieldOff size={14} />}
+                            {t('settings.security.disable')}
+                          </button>
+                          <button type="button" onClick={() => { setShowDisableForm(false); setTwoFaDisablePassword(''); setTwoFaDisableCode(''); }} className="btn-ghost text-sm">
+                            {t('common.cancel')}
+                          </button>
+                        </div>
+                      </form>
+                    )}
+                  </div>
+                ) : twoFaSetupData ? (
+                  /* Setup flow: show QR code + verification */
+                  <div className="space-y-5">
+                    <div className="text-center">
+                      <p className="text-sm text-th-text mb-4">{t('settings.security.scanQR')}</p>
+                      <div className="inline-block p-3 bg-white rounded-xl">
+                        <img src={twoFaSetupData.qrDataUrl} alt="TOTP QR Code" className="w-[200px] h-[200px]" />
+                      </div>
+                    </div>
+                    <div>
+                      <p className="text-xs font-medium text-th-text-s mb-1">{t('settings.security.manualKey')}</p>
+                      <div className="flex items-center gap-2">
+                        <code className="flex-1 text-xs bg-th-bg-t px-3 py-2 rounded-lg text-th-accent font-mono break-all">
+                          {twoFaSetupData.secret}
+                        </code>
+                        <button
+                          onClick={() => { navigator.clipboard.writeText(twoFaSetupData.secret); toast.success(t('room.linkCopied')); }}
+                          className="btn-ghost py-1.5 px-2 flex-shrink-0"
+                        >
+                          <Copy size={14} />
+                        </button>
+                      </div>
+                    </div>
+                    <form onSubmit={handleEnable2FA} className="space-y-3">
+                      <div>
+                        <label className="block text-sm font-medium text-th-text mb-1.5">{t('settings.security.verifyCode')}</label>
+                        <input
+                          type="text"
+                          inputMode="numeric"
+                          autoComplete="one-time-code"
+                          value={twoFaCode}
+                          onChange={e => setTwoFaCode(e.target.value.replace(/[^0-9\s]/g, '').slice(0, 7))}
+                          className="input-field text-center text-lg tracking-[0.3em] font-mono"
+                          placeholder="000 000"
+                          required
+                          maxLength={7}
+                        />
+                      </div>
+                      <div className="flex gap-2">
+                        <button type="submit" disabled={twoFaEnabling || twoFaCode.replace(/\s/g, '').length < 6} className="btn-primary">
+                          {twoFaEnabling ? <Loader2 size={14} className="animate-spin" /> : <ShieldCheck size={14} />}
+                          {t('settings.security.enable')}
+                        </button>
+                        <button type="button" onClick={() => { setTwoFaSetupData(null); setTwoFaCode(''); }} className="btn-ghost text-sm">
+                          {t('common.cancel')}
+                        </button>
+                      </div>
+                    </form>
+                  </div>
+                ) : (
+                  /* 2FA is disabled — show enable button */
+                  <div>
+                    <div className="flex items-center gap-3 p-4 rounded-xl bg-th-bg-t border border-th-border mb-5">
+                      <ShieldOff size={22} className="text-th-text-s flex-shrink-0" />
+                      <div>
+                        <p className="text-sm font-medium text-th-text">{t('settings.security.statusDisabled')}</p>
+                        <p className="text-xs text-th-text-s">{t('settings.security.statusDisabledDesc')}</p>
+                      </div>
+                    </div>
+                    <button onClick={handleSetup2FA} disabled={twoFaLoading} className="btn-primary">
+                      {twoFaLoading ? <Loader2 size={16} className="animate-spin" /> : <Shield size={16} />}
+                      {t('settings.security.enable')}
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
           {/* Language section */}
           {activeSection === 'language' && (
             <div className="card p-6">