Dev Crypto (#730)

* feat: remove admin mode * feat: bugfix * feat(crypto): 添加RSA-OAEP + AES-GCM混合加密服务 - 实现CryptoService加密服务，支持RSA-OAEP-2048 + AES-256-GCM混合加密 - 集成数据库层加密，自动加密存储敏感字段(API密钥、私钥等) - 支持环境变量DATA_ENCRYPTION_KEY配置数据加密密钥 - 适配SQLite数据库加密存储(从PostgreSQL移植) - 保持Hyperliquid代理钱包处理兼容性 - 更新.gitignore以正确处理crypto模块代码 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(scripts): 添加加密环境一键设置脚本 - setup_encryption.sh: 一键生成RSA密钥对+数据加密密钥+JWT密钥 - generate_rsa_keys.sh: 专业的RSA-2048密钥对生成工具 - generate_data_key.sh: 生成AES-256数据加密密钥和JWT认证密钥 - ENCRYPTION_README.md: 详细的加密系统说明文档 - 支持自动检测现有密钥并只生成缺失的密钥 - 完善的权限管理和安全验证 - 兼容macOS和Linux的跨平台支持 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(api): 添加加密API端点和Gin框架集成 - 新增CryptoHandler处理加密相关API请求 - 提供/api/crypto/public-key端点获取RSA公钥 - 提供/api/crypto/decrypt端点解密敏感数据 - 适配Gin框架的HTTP处理器格式 - 集成CryptoService到API服务器 - 支持前端加密数据传输和解密 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(web): 添加前端加密服务和两阶段密钥输入组件 - CryptoService: Web Crypto API集成，支持RSA-OAEP加密 - TwoStageKeyModal: 安全的两阶段私钥输入组件，支持剪贴板混淆 - 完善国际化翻译支持加密相关UI文本 - 修复TypeScript类型错误和编译问题 - 支持前端敏感数据加密传输到后端 - 增强用户隐私保护和数据安全 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(auth): 增强JWT认证安全性 - 优先使用环境变量JWT_SECRET而不是数据库配置 - 支持通过.env文件安全配置JWT认证密钥 - 保留数据库配置作为回退机制 - 改进JWT密钥来源日志显示 - 增强系统启动时的安全配置检查 - 支持运行时动态JWT密钥切换 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(docker): 集成加密环境变量到Docker部署 - 添加DATA_ENCRYPTION_KEY环境变量传递到容器 - 添加JWT_SECRET环境变量支持 - 挂载secrets目录使容器可访问RSA密钥文件 - 确保容器内加密服务正常工作 - 解决容器启动失败和加密初始化问题 - 完善Docker Compose加密环境配置 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat(start): 集成自动加密环境检测和设置 - 增强check_encryption()函数检测JWT_SECRET和DATA_ENCRYPTION_KEY - 自动运行setup_encryption.sh当检测到缺失密钥时 - 改进加密状态显示，包含RSA+AES+JWT全套加密信息 - 优化用户体验，提供清晰的加密配置反馈 - 支持一键设置完整加密环境 - 确保容器启动前加密环境就绪 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * feat: format fix * fix(security): 修复前端模型和交易所配置敏感数据明文传输 - 在handleSaveModelConfig中对API密钥进行RSA-OAEP加密 - 在handleSaveExchangeConfig中对API密钥、Secret密钥和Aster私钥进行加密 - 只有非空敏感数据才进行加密处理 - 添加加密失败错误处理和用户友好提示 - 增加encryptionFailed翻译键的中英文支持 - 使用用户ID和会话ID作为加密上下文增强安全性这修复了之前敏感数据在网络传输中以明文形式发送的安全漏洞。 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> * fix(crypto): 修复后端加密服务集成和缺失的加密端点 - 添加Server结构体缺少的cryptoService字段 - 实现handleUpdateModelConfigsEncrypted处理器用于模型配置加密传输 - 修复handleUpdateExchangeConfigsEncrypted中的函数调用 - 在前端API中添加updateModelConfigsEncrypted方法 - 统一RSA密钥路径从secrets/rsa_key改为keys/rsa_private.key - 确保前端可以使用加密端点安全传输敏感数据 - 兼容原有加密通信模式和二段输入私钥功能 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: tinkle-community <tinklefund@gmail.com> --------- Co-authored-by: icy <icyoung520@gmail.com> Co-authored-by: tinkle-community <tinklefund@gmail.com>
2026-07-09 22:10:57 +08:00 · 2025-11-08 02:03:09 +08:00
parent 7c26e10121
commit 89085173f9
21 changed files with 2478 additions and 458 deletions
--- a/web/src/components/AITradersPage.tsx
+++ b/web/src/components/AITradersPage.tsx
@@ -13,6 +13,10 @@ import { useAuth } from '../contexts/AuthContext'
 import { getExchangeIcon } from './ExchangeIcons'
 import { getModelIcon } from './ModelIcons'
 import { TraderConfigModal } from './TraderConfigModal'
+import {
+  TwoStageKeyModal,
+  type TwoStageKeyModalResult,
+} from './TwoStageKeyModal'
 import {
  Bot,
  Brain,
@@ -147,10 +151,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
      }
      // Hyperliquid 需要检查钱包地址（后端会返回这个字段）
      if (e.id === 'hyperliquid') {
-        return (
-          e.hyperliquidWalletAddr &&
-          e.hyperliquidWalletAddr.trim() !== ''
-        )
+        return e.hyperliquidWalletAddr && e.hyperliquidWalletAddr.trim() !== ''
      }
      // 其他交易所：如果已启用，说明已配置（后端返回的已配置交易所会有 enabled: true）
      return e.enabled
@@ -175,10 +176,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {

      // Hyperliquid 需要钱包地址（后端会返回这个字段）
      if (e.id === 'hyperliquid') {
-        return (
-          e.hyperliquidWalletAddr &&
-          e.hyperliquidWalletAddr.trim() !== ''
-        )
+        return e.hyperliquidWalletAddr && e.hyperliquidWalletAddr.trim() !== ''
      }

      // 其他交易所：如果已启用，说明已配置完整（后端只返回已配置的交易所）
@@ -622,7 +620,7 @@ export function AITradersPage({ onTraderSelect }: AITradersPageProps) {
        ),
      }

-      await api.updateExchangeConfigs(request)
+      await api.updateExchangeConfigsEncrypted(request)

      // 重新获取用户配置以确保数据同步
      const refreshedExchanges = await api.getExchangeConfigs()
@@ -1699,6 +1697,11 @@ function ExchangeConfigModal({
  // Hyperliquid 特定字段
  const [hyperliquidWalletAddr, setHyperliquidWalletAddr] = useState('')

+  // 安全输入状态
+  const [secureInputTarget, setSecureInputTarget] = useState<
+    null | 'hyperliquid' | 'aster'
+  >(null)
+
  // 获取当前编辑的交易所信息
  const selectedExchange = allExchanges?.find(
    (e) => e.id === selectedExchangeId
@@ -1747,6 +1750,44 @@ function ExchangeConfigModal({
    })
  }

+  // 安全输入处理函数
+  const secureInputContextLabel =
+    secureInputTarget === 'aster'
+      ? t('asterExchangeName', language)
+      : secureInputTarget === 'hyperliquid'
+        ? t('hyperliquidExchangeName', language)
+        : undefined
+
+  const handleSecureInputCancel = () => {
+    setSecureInputTarget(null)
+  }
+
+  const handleSecureInputComplete = ({
+    value,
+    obfuscationLog,
+  }: TwoStageKeyModalResult) => {
+    const trimmed = value.trim()
+    if (secureInputTarget === 'hyperliquid') {
+      setApiKey(trimmed)
+    }
+    if (secureInputTarget === 'aster') {
+      setAsterPrivateKey(trimmed)
+    }
+    console.log('Secure input obfuscation log:', obfuscationLog)
+    setSecureInputTarget(null)
+  }
+
+  // 掩盖敏感数据显示
+  const maskSecret = (secret: string) => {
+    if (!secret || secret.length === 0) return ''
+    if (secret.length <= 8) return '*'.repeat(secret.length)
+    return (
+      secret.slice(0, 4) +
+      '*'.repeat(Math.max(secret.length - 8, 4)) +
+      secret.slice(-4)
+    )
+  }
+
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedExchangeId) return
@@ -2160,19 +2201,58 @@ function ExchangeConfigModal({
                    >
                      {t('hyperliquidAgentPrivateKey', language)}
                    </label>
-                    <input
-                      type="password"
-                      value={apiKey}
-                      onChange={(e) => setApiKey(e.target.value)}
-                      placeholder={t('enterHyperliquidAgentPrivateKey', language)}
-                      className="w-full px-3 py-2 rounded"
-                      style={{
-                        background: '#0B0E11',
-                        border: '1px solid #2B3139',
-                        color: '#EAECEF',
-                      }}
-                      required
-                    />
+                    <div className="flex flex-col gap-2">
+                      <div className="flex gap-2">
+                        <input
+                          type="text"
+                          value={maskSecret(apiKey)}
+                          readOnly
+                          placeholder={t(
+                            'enterHyperliquidAgentPrivateKey',
+                            language
+                          )}
+                          className="w-full px-3 py-2 rounded"
+                          style={{
+                            background: '#0B0E11',
+                            border: '1px solid #2B3139',
+                            color: '#EAECEF',
+                          }}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setSecureInputTarget('hyperliquid')}
+                          className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
+                          style={{
+                            background: '#F0B90B',
+                            color: '#000',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {apiKey
+                            ? t('secureInputReenter', language)
+                            : t('secureInputButton', language)}
+                        </button>
+                        {apiKey && (
+                          <button
+                            type="button"
+                            onClick={() => setApiKey('')}
+                            className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
+                            style={{
+                              background: '#1B1F2B',
+                              color: '#848E9C',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {t('secureInputClear', language)}
+                          </button>
+                        )}
+                      </div>
+                      {apiKey && (
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {t('secureInputHint', language)}
+                        </div>
+                      )}
+                    </div>
                    <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
                      {t('hyperliquidAgentPrivateKeyDesc', language)}
                    </div>
@@ -2190,7 +2270,10 @@ function ExchangeConfigModal({
                      type="text"
                      value={hyperliquidWalletAddr}
                      onChange={(e) => setHyperliquidWalletAddr(e.target.value)}
-                      placeholder={t('enterHyperliquidMainWalletAddress', language)}
+                      placeholder={t(
+                        'enterHyperliquidMainWalletAddress',
+                        language
+                      )}
                      className="w-full px-3 py-2 rounded"
                      style={{
                        background: '#0B0E11',
@@ -2278,19 +2361,55 @@ function ExchangeConfigModal({
                        />
                      </Tooltip>
                    </label>
-                    <input
-                      type="password"
-                      value={asterPrivateKey}
-                      onChange={(e) => setAsterPrivateKey(e.target.value)}
-                      placeholder={t('enterPrivateKey', language)}
-                      className="w-full px-3 py-2 rounded"
-                      style={{
-                        background: '#0B0E11',
-                        border: '1px solid #2B3139',
-                        color: '#EAECEF',
-                      }}
-                      required
-                    />
+                    <div className="flex flex-col gap-2">
+                      <div className="flex gap-2">
+                        <input
+                          type="text"
+                          value={maskSecret(asterPrivateKey)}
+                          readOnly
+                          placeholder={t('enterPrivateKey', language)}
+                          className="w-full px-3 py-2 rounded"
+                          style={{
+                            background: '#0B0E11',
+                            border: '1px solid #2B3139',
+                            color: '#EAECEF',
+                          }}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setSecureInputTarget('aster')}
+                          className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
+                          style={{
+                            background: '#F0B90B',
+                            color: '#000',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {asterPrivateKey
+                            ? t('secureInputReenter', language)
+                            : t('secureInputButton', language)}
+                        </button>
+                        {asterPrivateKey && (
+                          <button
+                            type="button"
+                            onClick={() => setAsterPrivateKey('')}
+                            className="px-3 py-2 rounded text-xs font-semibold transition-all hover:scale-105"
+                            style={{
+                              background: '#1B1F2B',
+                              color: '#848E9C',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {t('secureInputClear', language)}
+                          </button>
+                        )}
+                      </div>
+                      {asterPrivateKey && (
+                        <div className="text-xs" style={{ color: '#848E9C' }}>
+                          {t('secureInputHint', language)}
+                        </div>
+                      )}
+                    </div>
                  </div>
                </>
              )}
@@ -2419,6 +2538,16 @@ function ExchangeConfigModal({
          </div>
        </div>
      )}
+
+      {/* Two Stage Key Modal */}
+      <TwoStageKeyModal
+        isOpen={secureInputTarget !== null}
+        language={language}
+        contextLabel={secureInputContextLabel}
+        expectedLength={64}
+        onCancel={handleSecureInputCancel}
+        onComplete={handleSecureInputComplete}
+      />
    </div>
  )
 }
--- a/web/src/components/LoginPage.tsx
+++ b/web/src/components/LoginPage.tsx
@@ -17,7 +17,6 @@ export function LoginPage() {
  const [adminPassword, setAdminPassword] = useState('')
  const adminMode = false

-
  const handleAdminLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
--- a/web/src/components/TwoStageKeyModal.tsx
+++ b/web/src/components/TwoStageKeyModal.tsx
@@ -0,0 +1,324 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { t, type Language } from '../i18n/translations'
+
+const DEFAULT_LENGTH = 64
+
+function generateObfuscation(): string {
+  const bytes = new Uint8Array(32)
+  crypto.getRandomValues(bytes)
+  return Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join(
+    ''
+  )
+}
+
+function validatePrivateKeyFormat(
+  value: string,
+  expectedLength: number
+): boolean {
+  const normalized = value.startsWith('0x') ? value.slice(2) : value
+  if (normalized.length !== expectedLength) {
+    return false
+  }
+  return /^[0-9a-fA-F]+$/.test(normalized)
+}
+
+export interface TwoStageKeyModalResult {
+  value: string
+  obfuscationLog: string[]
+}
+
+interface TwoStageKeyModalProps {
+  isOpen: boolean
+  language: Language
+  onCancel: () => void
+  onComplete: (result: TwoStageKeyModalResult) => void
+  expectedLength?: number
+  contextLabel?: string
+}
+
+export function TwoStageKeyModal({
+  isOpen,
+  language,
+  onCancel,
+  onComplete,
+  expectedLength = DEFAULT_LENGTH,
+  contextLabel,
+}: TwoStageKeyModalProps) {
+  const [stage, setStage] = useState<1 | 2>(1)
+  const [part1, setPart1] = useState('')
+  const [part2, setPart2] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [clipboardStatus, setClipboardStatus] = useState<
+    'idle' | 'copied' | 'failed'
+  >('idle')
+  const [obfuscationLog, setObfuscationLog] = useState<string[]>([])
+  const [processing, setProcessing] = useState(false)
+  const [manualObfuscationValue, setManualObfuscationValue] = useState<
+    string | null
+  >(null)
+
+  const stage1Ref = useRef<HTMLInputElement>(null)
+  const stage2Ref = useRef<HTMLInputElement>(null)
+
+  const expectedPart1Length = Math.ceil(expectedLength / 2)
+  const expectedPart2Length = expectedLength - expectedPart1Length
+
+  useEffect(() => {
+    if (isOpen && stage === 1 && stage1Ref.current) {
+      stage1Ref.current.focus()
+    } else if (isOpen && stage === 2 && stage2Ref.current) {
+      stage2Ref.current.focus()
+    }
+  }, [isOpen, stage])
+
+  const handleStage1Next = async () => {
+    if (part1.length < expectedPart1Length) {
+      setError(
+        t('errors.privatekeyIncomplete', language, {
+          expected: expectedPart1Length,
+        })
+      )
+      return
+    }
+
+    setError(null)
+    setProcessing(true)
+
+    try {
+      // 生成混淆字符串
+      const obfuscation = generateObfuscation()
+      setManualObfuscationValue(obfuscation)
+
+      // 尝试复制到剪贴板
+      if (navigator.clipboard) {
+        try {
+          await navigator.clipboard.writeText(obfuscation)
+          setClipboardStatus('copied')
+          setObfuscationLog([
+            ...obfuscationLog,
+            `Stage 1: ${new Date().toISOString()} - Auto copied obfuscation`,
+          ])
+        } catch {
+          setClipboardStatus('failed')
+          setObfuscationLog([
+            ...obfuscationLog,
+            `Stage 1: ${new Date().toISOString()} - Auto copy failed, manual required`,
+          ])
+        }
+      } else {
+        setClipboardStatus('failed')
+        setObfuscationLog([
+          ...obfuscationLog,
+          `Stage 1: ${new Date().toISOString()} - Clipboard API not available`,
+        ])
+      }
+
+      setTimeout(() => {
+        setStage(2)
+        setProcessing(false)
+      }, 2000)
+    } catch (err) {
+      setError(t('errors.privatekeyObfuscationFailed', language))
+      setProcessing(false)
+    }
+  }
+
+  const handleStage2Complete = () => {
+    if (part2.length < expectedPart2Length) {
+      setError(
+        t('errors.privatekeyIncomplete', language, {
+          expected: expectedPart2Length,
+        })
+      )
+      return
+    }
+
+    const fullKey = part1 + part2
+    if (!validatePrivateKeyFormat(fullKey, expectedLength)) {
+      setError(t('errors.privatekeyInvalidFormat', language))
+      return
+    }
+
+    const finalLog = [
+      ...obfuscationLog,
+      `Stage 2: ${new Date().toISOString()} - Completed`,
+    ]
+    onComplete({
+      value: fullKey,
+      obfuscationLog: finalLog,
+    })
+  }
+
+  const handleReset = () => {
+    setStage(1)
+    setPart1('')
+    setPart2('')
+    setError(null)
+    setClipboardStatus('idle')
+    setObfuscationLog([])
+    setProcessing(false)
+    setManualObfuscationValue(null)
+  }
+
+  const modalContent = useMemo(() => {
+    if (!isOpen) return null
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
+        <div className="bg-gray-900 p-8 rounded-xl max-w-lg w-full mx-4 border border-gray-700">
+          <div className="text-center mb-6">
+            <h2 className="text-xl font-bold text-white mb-2">
+              🔐 {t('twoStageKey.title', language)}
+              {contextLabel && (
+                <span className="text-gray-300 text-base font-normal ml-2">
+                  ({contextLabel})
+                </span>
+              )}
+            </h2>
+            <p className="text-gray-300 text-sm">
+              {stage === 1
+                ? t('twoStageKey.stage1Description', language, {
+                    length: expectedPart1Length,
+                  })
+                : t('twoStageKey.stage2Description', language, {
+                    length: expectedPart2Length,
+                  })}
+            </p>
+          </div>
+
+          {/* Stage 1 */}
+          {stage === 1 && (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-gray-300 text-sm mb-2">
+                  {t('twoStageKey.stage1InputLabel', language)} (
+                  {expectedPart1Length} {t('twoStageKey.characters', language)})
+                </label>
+                <input
+                  ref={stage1Ref}
+                  type="password"
+                  value={part1}
+                  onChange={(e) => setPart1(e.target.value)}
+                  placeholder="0x1234..."
+                  className="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-white font-mono text-sm focus:border-blue-500 focus:outline-none"
+                  maxLength={expectedPart1Length + 2} // +2 for optional 0x prefix
+                  disabled={processing}
+                />
+              </div>
+
+              {error && <div className="text-red-400 text-sm">{error}</div>}
+
+              <div className="flex gap-3">
+                <button
+                  onClick={handleStage1Next}
+                  disabled={part1.length < expectedPart1Length || processing}
+                  className="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-medium py-3 px-4 rounded-lg transition-colors"
+                >
+                  {processing
+                    ? t('twoStageKey.processing', language)
+                    : t('twoStageKey.nextButton', language)}
+                </button>
+                <button
+                  onClick={onCancel}
+                  disabled={processing}
+                  className="px-6 py-3 text-gray-300 hover:text-white border border-gray-600 rounded-lg transition-colors"
+                >
+                  {t('twoStageKey.cancelButton', language)}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Transition Message */}
+          {stage === 2 && clipboardStatus !== 'idle' && (
+            <div className="mb-4 p-4 rounded-lg bg-blue-900/50 border border-blue-600">
+              {clipboardStatus === 'copied' && (
+                <div className="text-blue-300">
+                  <div className="font-medium">
+                    {t('twoStageKey.obfuscationCopied', language)}
+                  </div>
+                  <div className="text-sm mt-1">
+                    {t('twoStageKey.obfuscationInstruction', language)}
+                  </div>
+                </div>
+              )}
+              {clipboardStatus === 'failed' && manualObfuscationValue && (
+                <div className="text-yellow-300">
+                  <div className="font-medium">
+                    {t('twoStageKey.obfuscationManual', language)}
+                  </div>
+                  <div className="text-xs mt-2 p-2 bg-gray-800 rounded font-mono break-all border">
+                    {manualObfuscationValue}
+                  </div>
+                  <div className="text-sm mt-1">
+                    {t('twoStageKey.obfuscationInstruction', language)}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Stage 2 */}
+          {stage === 2 && (
+            <div className="space-y-4">
+              <div>
+                <label className="block text-gray-300 text-sm mb-2">
+                  {t('twoStageKey.stage2InputLabel', language)} (
+                  {expectedPart2Length} {t('twoStageKey.characters', language)})
+                </label>
+                <input
+                  ref={stage2Ref}
+                  type="password"
+                  value={part2}
+                  onChange={(e) => setPart2(e.target.value)}
+                  placeholder="...5678"
+                  className="w-full bg-gray-800 border border-gray-600 rounded-lg px-4 py-3 text-white font-mono text-sm focus:border-blue-500 focus:outline-none"
+                  maxLength={expectedPart2Length + 2}
+                />
+              </div>
+
+              {error && <div className="text-red-400 text-sm">{error}</div>}
+
+              <div className="flex gap-3">
+                <button
+                  onClick={handleStage2Complete}
+                  disabled={part2.length < expectedPart2Length}
+                  className="flex-1 bg-green-600 hover:bg-green-700 disabled:bg-gray-600 text-white font-medium py-3 px-4 rounded-lg transition-colors"
+                >
+                  🔒 {t('twoStageKey.encryptButton', language)}
+                </button>
+                <button
+                  onClick={handleReset}
+                  className="px-6 py-3 text-gray-300 hover:text-white border border-gray-600 rounded-lg transition-colors"
+                >
+                  {t('twoStageKey.backButton', language)}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }, [
+    isOpen,
+    stage,
+    part1,
+    part2,
+    error,
+    processing,
+    clipboardStatus,
+    manualObfuscationValue,
+    language,
+    expectedPart1Length,
+    expectedPart2Length,
+    contextLabel,
+    obfuscationLog,
+    onCancel,
+    onComplete,
+  ])
+
+  if (!isOpen) return null
+
+  return createPortal(modalContent, document.body)
+}
--- a/web/src/components/landing/HeaderBar.tsx
+++ b/web/src/components/landing/HeaderBar.tsx
@@ -474,18 +474,16 @@ export default function HeaderBar({
                    >
                      {t('signIn', language)}
                    </a>
-                    {true && (
-                      <a
-                        href="/register"
-                        className="px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90"
-                        style={{
-                          background: 'var(--brand-yellow)',
-                          color: 'var(--brand-black)',
-                        }}
-                      >
-                        {t('signUp', language)}
-                      </a>
-                    )}
+                    <a
+                      href="/register"
+                      className="px-4 py-2 rounded font-semibold text-sm transition-colors hover:opacity-90"
+                      style={{
+                        background: 'var(--brand-yellow)',
+                        color: 'var(--brand-black)',
+                      }}
+                    >
+                      {t('signUp', language)}
+                    </a>
                  </div>
                )
              )}
@@ -914,19 +912,17 @@ export default function HeaderBar({
                >
                  {t('signIn', language)}
                </a>
-                {true && (
-                  <a
-                    href="/register"
-                    className="block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors"
-                    style={{
-                      background: 'var(--brand-yellow)',
-                      color: 'var(--brand-black)',
-                    }}
-                    onClick={() => setMobileMenuOpen(false)}
-                  >
-                    {t('signUp', language)}
-                  </a>
-                )}
+                <a
+                  href="/register"
+                  className="block w-full px-4 py-2 rounded font-semibold text-sm text-center transition-colors"
+                  style={{
+                    background: 'var(--brand-yellow)',
+                    color: 'var(--brand-black)',
+                  }}
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {t('signUp', language)}
+                </a>
              </div>
            )}
        </div>