Skip to content

fix(web): improve copy functionality for Google Authenticator secret (#616) #876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

fix(web): improve copy functionality for Google Authenticator secret (#616) #876

wants to merge 1 commit into from

Conversation

@the-dev-z
Copy link
Collaborator

@the-dev-z the-dev-z commented Nov 10, 2025

Pull Request - Frontend | 前端 PR

📝 Description | 描述

English:
Fixed the issue where the copy button for Google Authenticator secret key had no feedback, leaving users unsure if the copy succeeded.

中文：
修复了 Google 验证器密钥复制按钮无反馈的问题，导致用户不确定复制是否成功。

🎯 Type of Change | 变更类型

  • 🐛 Bug fix | 修复 Bug

🔗 Related Issues | 相关 Issue

📋 Changes Made | 具体变更

English:

  • Added copySuccess state to track copy status
  • Enhanced copyToClipboard function with:
    • async/await for proper asynchronous handling
    • Visual feedback (button turns green, shows ✓ Copied! for 2 seconds)
    • Error handling with fallback to document.execCommand for older browsers
    • Error message display if copy fails
  • Updated copy button UI:
    • Added transition-all animation
    • Background changes to green (#0ECB81) on success
    • Text changes from 'Copy' to '✓ Copied!'

中文：

  • 添加 copySuccess state 追踪复制状态
  • 增强 copyToClipboard 函数：
    • 使用 async/await 正确处理异步操作
    • 添加视觉反馈（按钮变绿色，显示 ✓ Copied! 2秒）
    • 添加错误处理，降级到 document.execCommand 支持旧浏览器
    • 复制失败时显示错误提示
  • 更新复制按钮 UI：
    • 添加 transition-all 动画效果
    • 复制成功时背景变为绿色 (#0ECB81)
    • 文字从 'Copy' 变为 '✓ Copied!'

🧪 Testing | 测试

Test Environment | 测试环境

  • OS | 操作系统: macOS
  • Node Version | Node 版本: Latest
  • Browser(s) | 浏览器: Chrome, Safari

Manual Testing | 手动测试

  • Tested in development mode | 开发模式测试通过
  • Tested production build | 生产构建测试通过
  • Tested on multiple browsers | 多浏览器测试通过
  • Verified no existing functionality broke | 确认没有破坏现有功能

Test Results | 测试结果:

  • ✅ Button turns green and shows ✓ Copied! on success
  • ✅ Automatically reverts to original state after 2 seconds
  • ✅ Fallback works in older browsers
  • ✅ Compatible with upstream changes (betaMode, password toggle)

✅ Checklist | 检查清单

Code Quality | 代码质量

  • Code follows project style | 代码遵循项目风格
  • Self-review completed | 已完成代码自查
  • Comments added for complex logic | 已添加必要注释

By submitting this PR, I confirm | 提交此 PR，我确认：

  • I have read the Contributing Guidelines | 已阅读贡献指南
  • I agree to the Code of Conduct | 同意行为准则
  • My contribution is licensed under AGPL-3.0 | 贡献遵循 AGPL-3.0 许可证

@github-actions
Copy link

github-actions bot commented Nov 10, 2025

🤖 Advisory Check Results

These are advisory checks to help improve code quality. They won't block your PR from being merged.

📋 PR Information

Title Format: ✅ Good - Follows Conventional Commits
PR Size: 🟢 Small (36 lines: +30 -6)

🔧 Backend Checks

Go Formatting: ⚠️ Needs formatting

Files needing formatting 
api/server.go
manager/trader_manager.go

Go Vet: ✅ Good
Tests: ✅ Passed

Fix locally:

go fmt ./...      # Format code
go vet ./...      # Check for issues
go test ./...     # Run tests

⚛️ Frontend Checks

Build & Type Check: ✅ Success

Fix locally:

cd web
npm run build  # Test build (includes type checking)

📖 Resources

Questions? Feel free to ask in the comments! 🙏

These checks are advisory and won't block your PR from being merged. This comment is automatically generated from pr-checks-run.yml.

@github-actions
Copy link

github-actions bot commented Nov 10, 2025

🤖 Advisory Check Results

These are advisory checks to help improve code quality. They won't block your PR from being merged.

📋 PR Information

Title Format: ✅ Good - Follows Conventional Commits
PR Size: 🟢 Small (39 lines: +32 -7)

🔧 Backend Checks

Go Formatting: ✅ Good
Go Vet: ✅ Good
Tests: ✅ Passed

Fix locally:

go fmt ./...      # Format code
go vet ./...      # Check for issues
go test ./...     # Run tests

⚛️ Frontend Checks

Build & Type Check: ✅ Success

Fix locally:

cd web
npm run build  # Test build (includes type checking)

📖 Resources

Questions? Feel free to ask in the comments! 🙏

These checks are advisory and won't block your PR from being merged. This comment is automatically generated from pr-checks-run.yml.

@hzb1115
Copy link
Member

hzb1115 commented Nov 11, 2025

Could you provide a snapshot for this?

@xqliu
Copy link
Contributor

xqliu commented Nov 11, 2025 •
edited
Loading

Havet got what this used for can put some business scenario and test screenshot ?
Thanks.

@the-dev-z

@the-dev-z
fix(web): improve copy functionality for Google Authenticator secret (N…
95e4261 
…oFxAiOS#616)

**问题**：
绑定 Google 验证器时，复制密钥功能无反馈，用户不知道是否复制成功

**修复**：
- 添加 copySuccess state 追踪复制状态
- 增强 copyToClipboard 函数：
  - 使用 async/await 处理异步操作
  - 添加视觉反馈（按钮变绿色，显示 ✓ Copied!，2秒后恢复）
  - 添加错误处理和 document.execCommand 降级方案
  - 复制失败时显示错误提示
- 更新复制按钮 UI：
  - 添加 transition-all 动画效果
  - 复制成功时背景变为绿色 (#0ECB81)
  - 文字从 'Copy' 变为 '✓ Copied!'

**测试**：
- ✅ 复制成功时按钮变绿并显示 ✓ Copied!
- ✅ 2秒后自动恢复原样
- ✅ 降级方案在旧浏览器上工作
- ✅ 与上游最新代码（betaMode, password toggle）兼容

Related to NoFxAiOS#616
@the-dev-z the-dev-z force-pushed the fix/issue-616-google-auth-copy branch from 29fe11f to 95e4261 Compare November 11, 2025 07:07
@the-dev-z the-dev-z requested a review from xqliu as a code owner November 11, 2025 07:07
@github-actions
Copy link

github-actions bot commented Nov 11, 2025

🤖 Advisory Check Results

These are advisory checks to help improve code quality. They won't block your PR from being merged.

📋 PR Information

Title Format: ✅ Good - Follows Conventional Commits
PR Size: 🟢 Small (17 lines: +11 -6)

🔧 Backend Checks

Go Formatting: ⚠️ Needs formatting

Files needing formatting 
decision/prompt_manager_test.go
market/data_test.go
trader/hyperliquid_trader_race_test.go

Go Vet: ✅ Good
Tests: ✅ Passed

Fix locally:

go fmt ./...      # Format code
go vet ./...      # Check for issues
go test ./...     # Run tests

⚛️ Frontend Checks

Build & Type Check: ✅ Success

Fix locally:

cd web
npm run build  # Test build (includes type checking)

📖 Resources

Questions? Feel free to ask in the comments! 🙏

These checks are advisory and won't block your PR from being merged. This comment is automatically generated from pr-checks-run.yml.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hzb1115 hzb1115 Awaiting requested review from hzb1115 hzb1115 is a code owner

@tangmengqiu tangmengqiu Awaiting requested review from tangmengqiu tangmengqiu is a code owner

@SkywalkerJi SkywalkerJi Awaiting requested review from SkywalkerJi

@Icyoung Icyoung Awaiting requested review from Icyoung

@xqliu xqliu Awaiting requested review from xqliu

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] 绑定google验证器流程中，无法复制密钥

3 participants

@the-dev-z @hzb1115 @xqliu