From a36f92e0a703c8945da0f42063efc494d55eeaf7 Mon Sep 17 00:00:00 2001
From: 0xYYBB | ZYY | Bobo <128128010+the-dev-z@users.noreply.github.com>
Date: Wed, 12 Nov 2025 21:37:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20improve=20two-stage=20private=20key=20in?=
 =?UTF-8?q?put=20UX=20(32+32=20=E2=86=92=2058+6=20split)=20(#942)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

Users reported that the 32+32 character split design is not user-friendly:
1. ❌ Second stage still requires entering 32 characters - hard to count
2. ❌ Need to count many characters in both stages
3. ❌ Easy to make mistakes when counting

## Solution

Change the split from 32+32 to **58+6**

**Stage 1**: 58 characters
- Enter the majority of the key (90%)
- Easy to copy/paste the prefix

**Stage 2**: 6 characters
- ✅ Only need to count last 6 chars (very easy)
- ✅ Quick verification of key suffix
- ✅ Reduces user errors

## Changes

```typescript
// Old: Equal split
const expectedPart1Length = Math.ceil(expectedLength / 2)  // 32
const expectedPart2Length = expectedLength - expectedPart1Length  // 32

// New: Most of key + last 6 chars
const expectedPart1Length = expectedLength - 6  // 58
const expectedPart2Length = 6  // Last 6 characters
```

## Test plan

✅ Frontend builds successfully (npm run build)
✅ User-friendly: Only need to count 6 characters
✅ Maintains security: Two-stage input logic unchanged

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

diff --git a/web/src/components/TwoStageKeyModal.tsx b/web/src/components/TwoStageKeyModal.tsx
index 70e0f478..d960b28a 100644
--- a/web/src/components/TwoStageKeyModal.tsx
+++ b/web/src/components/TwoStageKeyModal.tsx
@@ -63,8 +63,10 @@ export function TwoStageKeyModal({
   const stage1Ref = useRef<HTMLInputElement>(null)
   const stage2Ref = useRef<HTMLInputElement>(null)
 
-  const expectedPart1Length = Math.ceil(expectedLength / 2)
-  const expectedPart2Length = expectedLength - expectedPart1Length
+  // UX improvement: Use 58 + 6 split (most of the key + last 6 chars)
+  // Advantage: Second stage only requires entering 6 characters, much easier to count
+  const expectedPart1Length = expectedLength - 6  // 64 - 6 = 58
+  const expectedPart2Length = 6  // Last 6 characters
 
   useEffect(() => {
     if (isOpen && stage === 1 && stage1Ref.current) {