refactor(web): redesign httpClient with axios and unified error handling (#1061)

* fix(web): remove duplicate PasswordChecklist in error block
- Remove duplicate PasswordChecklist component from error message area
- Keep only the real-time password validation checklist
- Error block now displays only the error message text
Bug was introduced in commit aa0bd93 (PR #872)
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
* refactor(web): redesign httpClient with axios and unified error handling
Major refactoring to improve error handling architecture:
## Changes
### 1. HTTP Client Redesign (httpClient.ts)
- Replaced native fetch with axios for better interceptor support
- Implemented request/response interceptors for centralized error handling
- Added automatic Bearer token injection in request interceptor
- Network errors and system errors (404, 403, 500) now intercepted and shown via toast
- Only business logic errors (4xx except 401/403/404) returned to caller
- New ApiResponse<T> interface for type-safe responses
### 2. API Migration (api.ts)
- Migrated all 31 API methods from legacy fetch-style to new httpClient
- Updated pattern: from `res.ok/res.json()` to `result.success/result.data`
- Removed getAuthHeaders() helper (token now auto-injected)
- Added TypeScript generics for better type safety
### 3. Component Updates
- AuthContext.tsx: Updated register() to use new API
- TraderConfigModal.tsx: Migrated 3 API calls (config, templates, balance)
- RegisterPage.tsx: Simplified error display (error type handling now in API layer)
### 4. Removed Legacy Code
- Removed legacyHttpClient compatibility wrapper (~30 lines)
- Removed legacyRequest() method
- Clean separation: API layer handles all error classification
## Benefits
- Centralized error handling - no need to check network/system errors in components
- Better UX - automatic toast notifications for system errors
- Type safety - generic ApiResponse<T> provides compile-time checks
- Cleaner business components - only handle business logic errors
- Consistent error messages across the application
Co-Authored-By: tinkle-community <tinklefund@gmail.com>
---------
Co-authored-by: tinkle-community <tinklefund@gmail.com>

web/src/contexts/AuthContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react'
 import { getSystemConfig } from '../lib/config'
-import { reset401Flag } from '../lib/httpClient'
+import { reset401Flag, httpClient } from '../lib/httpClient'
 
 interface User {
   id: string
@@ -183,39 +183,36 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     password: string,
     betaCode?: string
   ) => {
-    try {
-      const requestBody: {
-        email: string
-        password: string
-        beta_code?: string
-      } = { email, password }
-      if (betaCode) {
-        requestBody.beta_code = betaCode
+    const requestBody: {
+      email: string
+      password: string
+      beta_code?: string
+    } = { email, password }
+    if (betaCode) {
+      requestBody.beta_code = betaCode
+    }
+
+    const result = await httpClient.post<{
+      user_id: string
+      otp_secret: string
+      qr_code_url: string
+      message: string
+    }>('/api/register', requestBody)
+
+    if (result.success && result.data) {
+      return {
+        success: true,
+        userID: result.data.user_id,
+        otpSecret: result.data.otp_secret,
+        qrCodeURL: result.data.qr_code_url,
+        message: result.message || result.data.message,
       }
+    }
 
-      const response = await fetch('/api/register', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(requestBody),
-      })
-
-      const data = await response.json()
-
-      if (response.ok) {
-        return {
-          success: true,
-          userID: data.user_id,
-          otpSecret: data.otp_secret,
-          qrCodeURL: data.qr_code_url,
-          message: data.message,
-        }
-      } else {
-        return { success: false, message: data.error }
-      }
-    } catch (error) {
-      return { success: false, message: '注册失败，请重试' }
+    // Only business errors reach here (system/network errors were intercepted)
+    return {
+      success: false,
+      message: result.message || 'Registration failed',
     }
   }