fix(web): fix button disabled validation to normalize 0x prefix (#937)

## 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>
This commit is contained in:
0xYYBB | ZYY | Bobo
2025-11-12 19:43:00 +08:00
committed by GitHub
parent cca7bc5cf6
commit 5ad731d239

View File

@@ -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)}