CAPTCHAと2FAを実装

web/templates/pages/profile.html

@@ -67,6 +67,43 @@
             </div>
         </div>
 
+        <!-- 2段階認証設定 -->
+        <div class="card mt-4">
+            <div class="card-header">
+                <h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>2段階認証（2FA）</h5>
+            </div>
+            <div class="card-body">
+                {{if .totpError}}<div class="alert alert-danger">{{.totpError}}</div>{{end}}
+                {{if .totpSuccess}}<div class="alert alert-success">{{.totpSuccess}}</div>{{end}}
+                {{if .user.TOTPEnabled}}
+                <div class="d-flex align-items-center mb-3">
+                    <span class="badge bg-success me-2"><i class="bi bi-check-lg me-1"></i>有効</span>
+                    <span class="text-muted">2段階認証が有効になっています</span>
+                </div>
+                <form method="POST" action="/profile/totp/disable">
+                    {{.csrfField}}
+                    <div class="mb-3">
+                        <label for="totp_disable_password" class="form-label">現在のパスワードを入力して無効化</label>
+                        <input type="password" class="form-control" id="totp_disable_password" name="password"
+                            placeholder="パスワード" required style="max-width:320px">
+                    </div>
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-shield-x me-1"></i>2段階認証を無効化
+                    </button>
+                </form>
+                {{else}}
+                <div class="d-flex align-items-center mb-3">
+                    <span class="badge bg-secondary me-2"><i class="bi bi-x-lg me-1"></i>無効</span>
+                    <span class="text-muted">2段階認証が設定されていません</span>
+                </div>
+                <p class="text-muted small">2段階認証を有効にするとセキュリティが向上します。Google Authenticator などのアプリが必要です。</p>
+                <a href="/profile/totp/setup" class="btn btn-primary">
+                    <i class="bi bi-shield-plus me-1"></i>2段階認証を設定する
+                </a>
+                {{end}}
+            </div>
+        </div>
+
         <!-- 通知設定 -->
         <div class="card mt-4">
             <div class="card-header">