From 5ad731d239535d70eabd94fdc1108fa846ef826e Mon Sep 17 00:00:00 2001
From: 0xYYBB | ZYY | Bobo <128128010+the-dev-z@users.noreply.github.com>
Date: Wed, 12 Nov 2025 19:43:00 +0800
Subject: [PATCH] fix(web): fix button disabled validation to normalize 0x
 prefix (#937)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

PR #917 fixed the validation logic but missed fixing the button disabled state:

**Issue:**
- Button enabled/disabled check uses raw input length (includes "0x")
- Validation logic uses normalized length (excludes "0x")
- **Result:** Button can be enabled with insufficient hex characters

**Example scenario:**
1. User inputs: `0x` + 30 hex chars = 32 total chars
2. Button check: `32 < 32` → false → ✅ Button enabled
3. User clicks button
4. Validation: normalized to 30 hex chars → `30 < 32` → ❌ Error
5. Error message: "需要至少 32 個字符" (confusing!)

## Root Cause

**Lines 230 & 301**: Button disabled conditions don't normalize input

```typescript
// ❌ Before: Checks raw length including "0x"
disabled={part1.length < expectedPart1Length || processing}
disabled={part2.length < expectedPart2Length}
```

## Solution

Normalize input before checking length in disabled conditions:

```typescript
// ✅ After: Normalize before checking
disabled={
  (part1.startsWith('0x') ? part1.slice(2) : part1).length <
    expectedPart1Length || processing
}
disabled={
  (part2.startsWith('0x') ? part2.slice(2) : part2).length <
  expectedPart2Length
}
```

## Testing

| Input | Total Length | Normalized Length | Button (Before) | Button (After) | Click Result |
|-------|--------------|-------------------|-----------------|----------------|--------------|
| `0x` + 30 hex | 32 | 30 | ✅ Enabled (bug) | ❌ Disabled | N/A |
| `0x` + 32 hex | 34 | 32 | ✅ Enabled | ✅ Enabled | ✅ Valid |
| 32 hex | 32 | 32 | ✅ Enabled | ✅ Enabled | ✅ Valid |

## Impact

- ✅ Button state now consistent with validation logic
- ✅ Users won't see confusing "need 32 chars" errors when button is enabled
- ✅ Better UX - button only enabled when input is truly valid

**Related:** Follow-up to PR #917

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: the-dev-z <the-dev-z@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 web/src/components/TwoStageKeyModal.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/src/components/TwoStageKeyModal.tsx b/web/src/components/TwoStageKeyModal.tsx
index 0e261fb4..70e0f478 100644
--- a/web/src/components/TwoStageKeyModal.tsx
+++ b/web/src/components/TwoStageKeyModal.tsx
@@ -227,7 +227,10 @@ export function TwoStageKeyModal({
               <div className="flex gap-3">
                 <button
                   onClick={handleStage1Next}
-                  disabled={part1.length < expectedPart1Length || processing}
+                  disabled={
+                    (part1.startsWith('0x') ? part1.slice(2) : 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
@@ -298,7 +301,10 @@ export function TwoStageKeyModal({
               <div className="flex gap-3">
                 <button
                   onClick={handleStage2Complete}
-                  disabled={part2.length < expectedPart2Length}
+                  disabled={
+                    (part2.startsWith('0x') ? part2.slice(2) : 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)}