Skip to content

Commit 29a5265

Browse files
the-dev-zclaude
andcommitted
fix(web): fix button disabled validation to normalize 0x prefix
## Problem PR NoFxAiOS#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 NoFxAiOS#917 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 74ac9b7 commit 29a5265

File tree

1 file changed

+8
-2
lines changed

1 file changed

+8
-2
lines changed

web/src/components/TwoStageKeyModal.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,10 @@ export function TwoStageKeyModal({
227227
<div className="flex gap-3">
228228
<button
229229
onClick={handleStage1Next}
230-
disabled={part1.length < expectedPart1Length || processing}
230+
disabled={
231+
(part1.startsWith('0x') ? part1.slice(2) : part1).length <
232+
expectedPart1Length || processing
233+
}
231234
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"
232235
>
233236
{processing
@@ -298,7 +301,10 @@ export function TwoStageKeyModal({
298301
<div className="flex gap-3">
299302
<button
300303
onClick={handleStage2Complete}
301-
disabled={part2.length < expectedPart2Length}
304+
disabled={
305+
(part2.startsWith('0x') ? part2.slice(2) : part2).length <
306+
expectedPart2Length
307+
}
302308
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"
303309
>
304310
🔒 {t('twoStageKey.encryptButton', language)}

0 commit comments

Comments
 (0)