Skip to content
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.

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

Fix/passcode #6335

Open
wants to merge 16 commits into
base: x
Choose a base branch
from
Open

Fix/passcode #6335

wants to merge 16 commits into from

Conversation

ezailWang
Copy link
Contributor

@ezailWang ezailWang commented Dec 12, 2024

Summary by CodeRabbit

  • 新功能

    • 引入了新的 PassCodeInput 组件,用于处理用户输入的 PIN 码。
    • 添加了 PassCodeProtectionDialogContent 组件,显示与通行码保护相关的设置。
    • 引入了 PassCodeProtectionSwitch 组件,允许用户切换通行码错误保护状态。
  • 用户界面更新

    • 更新了多个组件中的文本标识,将“密码”更改为“通行码”,包括设置、验证和恢复密码的提示信息。
  • 错误处理

    • 修改了错误消息标识,以反映通行码相关的错误情况,确保用户反馈的准确性。

Copy link

codesandbox bot commented Dec 12, 2024

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

Copy link
Contributor

coderabbitai bot commented Dec 12, 2024

概述

演练

这次更新主要关注密码和密码保护机制的重构。系统引入了新的密码模式枚举(EPasswordMode),支持密码和密码码两种验证方式。组件和服务层进行了相应调整,增加了更灵活的密码验证逻辑,包括错误尝试保护、生物认证尝试追踪等功能。整体变更旨在提升应用的安全性和用户体验。

变更

文件路径 变更摘要
package.json 新增 react-native-confirmation-code-field 依赖
packages/kit-bg/src/services/ServicePassword/types.ts 新增密码模式枚举和相关常量
packages/kit/src/components/Password/* 新增多个组件和钩子,支持密码和密码码验证
packages/shared/src/errors/errors/appErrors.ts 更新错误类的默认翻译键,将"password"替换为"passcode"

序列图

sequenceDiagram
    participant User
    participant PasswordVerify
    participant ServicePassword
    participant PasswordProtection

    User->>PasswordVerify: 输入密码/密码码
    PasswordVerify->>ServicePassword: 验证密码
    alt 验证成功
        ServicePassword-->>PasswordVerify: 验证通过
        PasswordVerify->>User: 允许访问
    else 验证失败
        ServicePassword->>PasswordProtection: 记录失败尝试
        PasswordProtection-->>PasswordVerify: 更新错误状态
        PasswordVerify->>User: 显示错误信息
        alt 超过最大尝试次数
            PasswordProtection->>User: 锁定应用
        end
    end
Loading

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or Summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

socket-security bot commented Dec 23, 2024

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

@ezailWang ezailWang marked this pull request as ready for review December 25, 2024 10:16
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2bfc8fa and fa6f0fa.

⛔ Files ignored due to path filters (2)
  • apps/mobile/ios/Podfile.lock is excluded by !**/*.lock
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (27)
  • apps/ext/src/ui/renderPassKeyPage.tsx (2 hunks)
  • apps/mobile/ios/OneKeyWallet.xcodeproj/project.pbxproj (0 hunks)
  • development/spellCheckerSkipWords.js (1 hunks)
  • package.json (1 hunks)
  • packages/components/src/forms/Form/index.tsx (3 hunks)
  • packages/kit-bg/src/services/ServicePassword/index.ts (6 hunks)
  • packages/kit-bg/src/services/ServicePassword/types.ts (1 hunks)
  • packages/kit-bg/src/states/jotai/atoms/password.ts (3 hunks)
  • packages/kit/src/components/Password/components/PassCodeInput.tsx (1 hunks)
  • packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx (1 hunks)
  • packages/kit/src/components/Password/components/PasswordSetup.tsx (2 hunks)
  • packages/kit/src/components/Password/components/PasswordVerify.tsx (8 hunks)
  • packages/kit/src/components/Password/container/PassCodeProtectionSwitch.tsx (1 hunks)
  • packages/kit/src/components/Password/container/PasswordSetupContainer.tsx (4 hunks)
  • packages/kit/src/components/Password/container/PasswordUpdateContainer.tsx (3 hunks)
  • packages/kit/src/components/Password/container/PasswordVerifyContainer.tsx (9 hunks)
  • packages/kit/src/components/Password/container/PasswordVerifyPromptMount.tsx (2 hunks)
  • packages/kit/src/components/Password/hooks/usePasswordProtection.ts (1 hunks)
  • packages/kit/src/components/Password/utils.ts (1 hunks)
  • packages/kit/src/provider/Container/AppStateLockContainer/components/AppStateLock.tsx (1 hunks)
  • packages/kit/src/provider/Container/AppStateLockContainer/index.tsx (2 hunks)
  • packages/kit/src/views/CloudBackup/components/useResotrePasswordVerify.tsx (3 hunks)
  • packages/kit/src/views/CloudBackup/pages/Detail/index.tsx (1 hunks)
  • packages/kit/src/views/Onboarding/pages/CreateWalet/BeforeShowRecoveryPhrase.tsx (1 hunks)
  • packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx (3 hunks)
  • packages/kit/src/views/Setting/pages/Protection/index.tsx (3 hunks)
  • packages/shared/src/errors/errors/appErrors.ts (6 hunks)
💤 Files with no reviewable changes (1)
  • apps/mobile/ios/OneKeyWallet.xcodeproj/project.pbxproj
🔇 Additional comments (121)
packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx (1)

1-6: 短小明快,导入语句清晰,不存在明显问题。

packages/kit/src/provider/Container/AppStateLockContainer/index.tsx (1)

4-4: 导入 Spinner 提高加载可视化
这个改动能让用户在等待时看到加载动画,避免空白页。实现简单、体验良好。

packages/kit/src/components/Password/container/PasswordSetupContainer.tsx (7)

5-13: 导入的组件看起来都在使用范围内。


14-14: 引入 EPasswordMode,方便区分密码类型。


18-18: 使用 usePasswordModeAtom 管理密码模式非常合理。


27-27: 引入 PassCodeProtectionDialogContent,用于显示保护提示。


82-82: 从全局 Atom 读取 passwordMode,逻辑清晰。


86-135: 密码或验证码的设置流程看起来正常。错误捕获和提示都很完善。


153-153: 给 PasswordSetup 传入 passwordMode,保证两处数据源同步。

packages/kit/src/components/Password/components/PasswordVerify.tsx (17)

15-22: 使用组件库的表单和输入,接口清晰,无明显问题。


23-23: 引入 EPasswordMode,为区分密码或验证码做铺垫。


32-33: 导入 PassCodeInput,该组件有助于更好处理数字 PIN。


37-37: 在类型定义里加上 passwordMode,有助于处理不同验证模式。


45-46: 新加入 alertText、confirmBtnDisabled,可控制 UI 提示与按钮状态。


49-51: IPasswordVerifyForm 里新增 passCode,完善结构。


57-58: 组件新增 alertText、confirmBtnDisabled,便于动态控制。


60-60: 接收 passwordMode,用于区分输入类型。


69-69: 默认值包含 passCode 字段,初始化字段更加统一。


80-82: 据 passwordMode 设置焦点,让用户体验更直观。


94-96: 用 watch 动态侦听密码或验证码字段,能及时响应用户输入。


98-111: biologyAuthIconName 的逻辑清晰,根据平台和验证类型来确定图标。


Line range hint 117-137: rightActions 中根据输入状态切换图标和动作,交互合理。


145-151: 确认按钮是否禁用可避免重复点击,流程更安全。


155-163: 错误状态时主动 setError 或 clearErrors,用户反馈清晰易懂。


197-264: 新增 PassCodeInput 逻辑,让数字 PIN 的输入和验证变得简单直观。


266-284: 在数字 PIN 模式下预留了切换生物验证按钮,操作灵活。

packages/kit/src/components/Password/components/PasswordSetup.tsx (17)

1-1: 引入 useEffect、useMemo、useState,便于管理组件状态。


6-6: import EPasswordMode:方便区分密码或验证码。


8-8: 启用 platformEnv,可调整在不同环境下的逻辑。


10-14: 导入常量和正则,思路明确。


16-16: PassCodeInput 组件的接入,便于处理数字 PIN。


21-23: IPasswordSetupForm 新增 passwordMode、passCode、confirmPassCode,使结构更完整。


27-27: IPasswordSetupProps 里加上 passwordMode,方便接收模式参数。


35-45: useEffect 同步外部传入的 passwordMode,与本组件 state 保持一致。


51-54: defaultValues 新增 passCode、confirmPassCode,初始化更全面。


59-62: passCodeFirstStep 用于流程分段,逻辑更清晰。


63-71: confirmBtnTextMemo 随状态变化返回不同文案,用户体验更好。


73-74: onPassCodeNext 简化处理,先收集第一次输入再对比确认。


78-193: 密码模式下的表单校验完整,逻辑函数清晰易维护。


195-280: passCode 下的校验规则简洁,分步骤确认,减少用户输入错误。


282-283: 在第二步才显示生物验证容器,也避免了界面杂乱。


293-295: 在按钮点击时,根据是否是第一次确认来决定调用哪一个方法,流程分明。


300-320: 切换密码与数值 PIN 模式,保留重置操作,增强灵活性。

packages/kit/src/components/Password/container/PasswordVerifyContainer.tsx (20)

1-1: 引入相关 Hook 和 State,用于处理不同验证场景,结构合理。


9-16: 导入多项常量和枚举,为后续逻辑分支做准备。


21-21: usePasswordModeAtom 让组件获取当前密码模式,方便调整验证逻辑。


27-27: 引入 resetUtils,后面可用于重置应用或状态。


33-33: 导入 usePasswordProtection,用来做错误次数保护。


35-35: IPasswordVerifyForm 提供必要类型约束,保持一致性。


56-56: 从全局获取 passwordMode,确保验证流程与全局模式同步。


57-63: biologyAuthAttempts 动态决定人脸或指纹最大尝试次数,逻辑明晰。


66-66: 判断是否扩展环境加锁且无缓存,避免重复输入。


Line range hint 82-82: useEffect 设置默认状态为 DEFAULT,且在组件卸载时复位状态,避免残留。


95-103: 初始化密码状态并在组件卸载时重置密码验证,确保清理得当。


105-117: 解构 usePasswordProtection,可简化属性传递,使用方便。


118-127: isBiologyAuthEnable 包含多条件判断,保证只有在合适时开启生物验证。


168-185: onBiologyAuthenticateExtLockAndNoCachePassword 合理地处理错误提示并控制次数。


Line range hint 190-239: onBiologyAuthenticate 按照生物验证逻辑区分流程,出错时还会增计数。


254-265: 使用 useCallback 时带上相应依赖,避免潜在闭包问题。


Line range hint 280-306: onInputPasswordAuthenticate 内先标记 VERIFYING,再进一步校验,能防止并发点击。


309-363: 错误计数递增并锁定逻辑实现得当,超过上限后执行重置操作,安全性更好。


373-386: 依赖收集全面,避免在回调内遗漏必要状态,模块化程度高。


392-394: PasswordVerify 组件加了 passwordMode、alertText 等,使交互更灵活。

packages/kit-bg/src/services/ServicePassword/index.ts (8)

53-59: 这些常量与枚举能清晰区分密码和数值 PIN,后续逻辑更好维护。


282-300: validatePasswordValidRules 根据 passwordMode 校验长度,安全策略更明确。


318-323: validatePassword 新增 passwordMode,流程区分更容易管理。


Line range hint 331-340: 分支逻辑简洁,不同场景下都能保证基本验证到位。


361-369: setPasswordSetStatus 添加 passMode 字段,能跟踪当前模式设置情况。


374-384: setPassword 时增加了 passwordMode,校验更精确,保护强度更高。


397-406: updatePassword 同步支持密码模式校验,提升一致性。


431-443: verifyPassword 时注入 passwordMode,可更好分模块处理。

packages/kit/src/components/Password/utils.ts (1)

8-8: 正则表达式用途简单明了,可提高输入校验的可读性。
无需额外改动,命名易懂,功能明确。

packages/kit/src/components/Password/container/PassCodeProtectionSwitch.tsx (2)

4-18: 组件功能清晰,逻辑直观。
使用 Switch 控件来存储保护开关的做法简单。你在此处管理全局状态时,建议保持与其他相似开关一致的命名及交互方式,以便后期维护。


20-20: 默认导出组件命名合理。
命名和文件名一致,便于他人快速定位和复用。

packages/kit-bg/src/services/ServicePassword/types.ts (4)

10-13: 枚举名称简洁,表达清晰。
EPasswordMode 直接说明两种模式,为后续逻辑分支提供更好的可读性。


15-27: 常量区分明确,适配不同需求。
各个与 Passcode 相关的常量命名清晰,易于维护并扩展。


29-30: 生物验证次数设置合乎逻辑。
分别区分 Face 和 Fingerprint,有效提高可维护性与扩展性。


32-33: 密码长度限制合理,有足够的安全余量。
PASSWORD_MIN_LENGTHPASSWORD_MAX_LENGTH 范围适合大部分场景。

packages/kit/src/components/Password/container/PasswordUpdateContainer.tsx (8)

7-8: 按需引入 Enum 和 Atom。
保持 import 序列简单,让代码易读。


25-25: 解构 State,简化使用模式。
[passwordMode] = usePasswordModeAtom() 让代码更直观。


28-30: 根据模式动态选择密码字段。
具备良好灵活性,可同时处理 password 或 passcode。


36-36: 传递加密文本时需留意安全传输。
请确认后续流程中对加密过的密码进行了安全处理。


42-42: 更新密码时携带正确的 mode 参数。
不会影响外部逻辑,组件职责分离明确。


46-46: 提示信息直观,引导性好。
文案简洁,让用户快速理解操作结果。


52-52: 友好地提醒新旧密码一致。
错误信息直接,可有效避免用户困惑。


63-63: 透传 passwordMode 到 PasswordSetup。
便于组件间场景切换,扩展性高。

packages/kit/src/components/Password/components/PassCodeInput.tsx (3)

13-14: 常量命名清晰,易读。
定义了一个清晰的 PIN_CELL_COUNT 常量,表达了固定长度,命名简单直接,无歧义。


38-47: 参数定义简洁,可读性良好。
对组件 PassCodeInput 的各个 props 进行了简洁的定义,使用 ?: 来标明可选属性,增强灵活度与可读性。


105-110: 完成回调判断逻辑恰当。
当输入长度抵达 PIN_CELL_COUNT 且未禁用 onComplete 时才触发回调,符合预期。

packages/kit/src/components/Password/hooks/usePasswordProtection.ts (1)

9-29: 命名直观,区分度高。
命名如 unlockPeriodPasswordArraypasswordErrorProtectionTimeOver 意义清晰,让阅读者容易理解逻辑。

packages/kit/src/views/Onboarding/pages/CreateWalet/BeforeShowRecoveryPhrase.tsx (1)

55-55: 文案切换从“password”改为“passcode”,保持统一性。
此处按全局改动,此种改动能让用户更好地识别并符合产品术语一致性。

packages/kit/src/views/Setting/pages/Protection/index.tsx (3)

14-14: 新增 PassCodeProtectionSwitch 引入,提升可读性。
新增的组件能与其余设置选项保持风格统一,使逻辑更易维护。


54-54: 更改文案 ID 为“passcode”术语,增强一致性。
与其他变更一脉相承,统一改为 “passcode”,避免用户疑惑。


89-90: 新增 PassCode Protection 区域,结构合理。
新增区块包含标题与描述,结合 PassCodeProtectionSwitch 组件,突出重点功能延伸性。界面划分清晰,用户体验直观。

Also applies to: 93-103

packages/kit/src/components/Password/container/PasswordVerifyPromptMount.tsx (2)

30-30: 标题文案更新看起来不错。
更换成“passcode”能保持术语一致性。


58-58: 校验弹窗标题改动无误。
请确认是否有旧调用点,防止文案不一致。

packages/kit/src/provider/Container/AppStateLockContainer/components/AppStateLock.tsx (1)

120-120: 文案改为“forgot passcode”统一术语。
更新后更一致,没发现问题。

apps/ext/src/ui/renderPassKeyPage.tsx (2)

82-82: 错误提示改为“auth_error_passcode_incorrect”正确反映用词。
文案更统一,功能逻辑无冲突。


93-93: 异常处理文案同步改为“passcode”形式很好。
与全局命名保持一致。

packages/kit-bg/src/states/jotai/atoms/password.ts (4)

8-8: 导入新枚举 EPasswordMode
与下面 passwordMode 功能相契合。


64-67: 定义新的四个字段很好。
为密码模式和错误保护提供更多灵活度。


74-77: 初始值中增加密码模式和错误保护设置。
默认值合理易懂。


86-94: passwordModeAtom 全局计算逻辑清晰。
若未设密码且在 native 环境,自动使用 PASSCODE。很好。

packages/components/src/forms/Form/index.tsx (3)

100-107: 新增 display?: 提高布局灵活性
使用可选的 display prop,让 Fieldset 更灵活。实现上很简洁。


118-118: 在组件参数中传递 display
参数解构正确,写法清晰。无多余依赖。


151-156: 使用 {...(display ? { display } : {})} 无问题
这种方式简洁好用,如果没传 display 就不会添加属性。不错。

packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx (3)

69-69: 标题改为 Set Passcode
改名和整体改用 passcode 保持一致。


83-83: 标题改为 Change Passcode
和其他地方的 passcode 术语统一,易读。


101-101: 再次改为 Change Passcode
术语一致,没问题。

development/spellCheckerSkipWords.js (1)

778-780: 跳过单词列表中新增 biometric 相关术语
可减少对生物识别词汇的拼写干扰,很合理。

packages/kit/src/views/CloudBackup/pages/Detail/index.tsx (1)

283-283: 错误文案改为“passcode incorrect”
与其他改动同步,术语统一,无功能影响。

packages/shared/src/errors/errors/appErrors.ts (6)

27-27: 行 27:已将 defaultKey 更新为 ETranslations.auth_error_passcode_incorrect,文本统一且无问题。


172-172: 行 172:defaultKey 改为 ETranslations.send_engine_incorrect_passcode,术语保持一致,没问题。


199-199: 行 199:defaultKey 改为 ETranslations.send_engine_passcode_not_set,用词保持一致,点赞。


211-211: 行 211:defaultKey 更换为 ETranslations.send_passcode_validation。命名更贴合本次术语替换。


222-222: 行 222:defaultKey 采用 ETranslations.auth_error_passcode_incorrect,符合新约定。


244-244: 行 244:defaultKey 相同替换为 ETranslations.auth_error_passcode_incorrect,配合其他类名调整一致。

packages/kit/src/views/CloudBackup/components/useResotrePasswordVerify.tsx (3)

20-20: 行 20:提示信息从 ETranslations.auth_enter_your_password 调整为 ETranslations.auth_enter_your_passcode,文案更高统一度。


30-30: 行 30:placeholder 也换成 ETranslations.auth_enter_your_passcode。用词一致,可读性提升。


59-59: 行 59:description 改为 ETranslations.backup_verify_app_passcode_to_import_data,风格配合本次改动,无冲突。

package.json (1)

121-121: 行 121:新增依赖 react-native-confirmation-code-field,适用于输入码场景。检查兼容性即可。

Comment on lines +8 to +29
const PassCodeProtectionDialogContent = () => {
const intl = useIntl();
return (
<YStack gap="$2">
<SizableText size="$bodySm" color="$textSubdued">
{intl.formatMessage({
id: ETranslations.auth_Passcode_protection_description,
})}
</SizableText>
<XStack justifyContent="space-between">
<SizableText size="$bodyMdMedium">
{intl.formatMessage({
id: ETranslations.Setting_Reset_app_description,
})}
</SizableText>
<PassCodeProtectionSwitch />
</XStack>
</YStack>
);
};

export default PassCodeProtectionDialogContent;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

组件结构简洁,布局合理。建议为文本内容增加更多可测试或辅助功能属性,便于自动化测试和辅助技术。

@@ -86,7 +85,7 @@ export function AppStateLockContainer({
opacity: 0,
}}
passwordVerifyContainer={
<Suspense>
<Suspense fallback={<Spinner size="large" />}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Suspense 使用 Spinner 更友好
提供了清晰的加载提示,用户体验更好。可考虑再加错误边界,避免阻塞流程。

Comment on lines +307 to +308
console.log('same__password', password);
console.log('same__newPassword', newPassword);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

打印原密码和新密码可能带来风险,建议删除或隐藏敏感输出。

-console.log('same__password', password);
-console.log('same__newPassword', newPassword);
+// 建议删除或通过安全日志替代,避免潜在敏感数据泄露
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.log('same__password', password);
console.log('same__newPassword', newPassword);
// 建议删除或通过安全日志替代,避免潜在敏感数据泄露

Comment on lines +50 to +57
const pinInputRef = useBlurOnFulfill({
value: pinValue,
cellCount: PIN_CELL_COUNT,
});
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
value: pinValue,
setValue: setPinValue,
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

避免重复设置本地状态时机。
控制 pinValue 的状态同时也在外部方法里调用 onPinCodeChange。请确认外部如果同步修改时,不会和内部逻辑冲突,建议搭配使用自定义 hook 与回调统一管理状态避免重复更新。

Comment on lines +60 to +88
const renderCell = ({
index,
symbol,
isFocused,
}: {
index: number;
symbol: string;
isFocused: boolean;
}) => {
let textChild = null;
if (symbol) {
textChild = enableMask ? '•' : symbol;
} else if (isFocused) {
textChild = <Cursor />;
}

return (
<Text
key={index}
style={[
...[cellStyles.cell],
...(isFocused ? [cellStyles.focusCell] : []),
]}
onLayout={getCellOnLayoutHandler(index)}
>
{textChild}
</Text>
);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

渲染单元格函数逻辑明确,但可进一步简化。
当前 renderCell 逻辑清晰,但如需扩展更多定制,也可考虑提取成独立子组件,提高复用与可测试性。

Comment on lines +60 to +81
const intervalRef = useRef<ReturnType<typeof setInterval>>();
useEffect(() => {
if (alertText) {
intervalRef.current = setInterval(() => {
if (passwordErrorProtectionTime < Date.now()) {
setPasswordErrorProtectionTimeOver(true);
setPasswordErrorProtectionTimeMinutesSurplus(0);
} else {
const timeMinutes =
(passwordErrorProtectionTime - Date.now()) / 60_000 + 1;
setPasswordErrorProtectionTimeMinutesSurplus(timeMinutes);
}
}, 1000 * 50);
} else if (intervalRef.current) {
clearInterval(intervalRef.current);
}
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [alertText, passwordErrorProtectionTime]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

定时器清理逻辑明确,稍作优化更佳。
intervalRef 做了合理清理,确保组件卸载后不再触发。间隔 50 秒可根据需求适当调整,或使用渐进更新以减少延迟对用户体验的影响。

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🔭 Outside diff range comments (1)
packages/kit/src/components/Password/components/PasswordVerify.tsx (1)

Line range hint 57-283: 主逻辑适配多模式
组件根据 passwordMode 在密码或数值输入间切换,包含错误聚焦、自动聚焦等体验优化。注意保留生物识别的容错处理,避免重复触发。如果后期要扩展更多模式,可考虑抽离公共逻辑以简化代码。

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2bfc8fa and fa6f0fa.

⛔ Files ignored due to path filters (2)
  • apps/mobile/ios/Podfile.lock is excluded by !**/*.lock
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (27)
  • apps/ext/src/ui/renderPassKeyPage.tsx (2 hunks)
  • apps/mobile/ios/OneKeyWallet.xcodeproj/project.pbxproj (0 hunks)
  • development/spellCheckerSkipWords.js (1 hunks)
  • package.json (1 hunks)
  • packages/components/src/forms/Form/index.tsx (3 hunks)
  • packages/kit-bg/src/services/ServicePassword/index.ts (6 hunks)
  • packages/kit-bg/src/services/ServicePassword/types.ts (1 hunks)
  • packages/kit-bg/src/states/jotai/atoms/password.ts (3 hunks)
  • packages/kit/src/components/Password/components/PassCodeInput.tsx (1 hunks)
  • packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx (1 hunks)
  • packages/kit/src/components/Password/components/PasswordSetup.tsx (2 hunks)
  • packages/kit/src/components/Password/components/PasswordVerify.tsx (8 hunks)
  • packages/kit/src/components/Password/container/PassCodeProtectionSwitch.tsx (1 hunks)
  • packages/kit/src/components/Password/container/PasswordSetupContainer.tsx (4 hunks)
  • packages/kit/src/components/Password/container/PasswordUpdateContainer.tsx (3 hunks)
  • packages/kit/src/components/Password/container/PasswordVerifyContainer.tsx (9 hunks)
  • packages/kit/src/components/Password/container/PasswordVerifyPromptMount.tsx (2 hunks)
  • packages/kit/src/components/Password/hooks/usePasswordProtection.ts (1 hunks)
  • packages/kit/src/components/Password/utils.ts (1 hunks)
  • packages/kit/src/provider/Container/AppStateLockContainer/components/AppStateLock.tsx (1 hunks)
  • packages/kit/src/provider/Container/AppStateLockContainer/index.tsx (2 hunks)
  • packages/kit/src/views/CloudBackup/components/useResotrePasswordVerify.tsx (3 hunks)
  • packages/kit/src/views/CloudBackup/pages/Detail/index.tsx (1 hunks)
  • packages/kit/src/views/Onboarding/pages/CreateWalet/BeforeShowRecoveryPhrase.tsx (1 hunks)
  • packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx (3 hunks)
  • packages/kit/src/views/Setting/pages/Protection/index.tsx (3 hunks)
  • packages/shared/src/errors/errors/appErrors.ts (6 hunks)
💤 Files with no reviewable changes (1)
  • apps/mobile/ios/OneKeyWallet.xcodeproj/project.pbxproj
🔇 Additional comments (110)
packages/kit/src/components/Password/container/PasswordSetupContainer.tsx (7)

5-12: 导入组件看起来很整洁
这几行导入的组件对界面细节很有帮助,清晰明了。


14-14: 新增枚举引用
引入 EPasswordMode 明确密码类型,方便后续区分。


18-18: 拓展密码模式状态
通过 usePasswordModeAtom 获取密码模式,解耦管理,设计合理。


27-27: 新增 PassCodeProtectionDialogContent
添加对话框内容组件,增强交互体验。


82-82: 获取 passwordMode
直接从全局 atom 获取,有效减少重复逻辑。


86-144: onSetupPassword 函数逻辑完善
整体流程清晰,涵盖编码、存储、提示和对话框。错误处理与最终 finally 块都到位。若需要支持自定义错误提示,可考虑在 catch 中细分错误类型。


153-153: 向子组件传递 passwordMode
这样能让子组件灵活使用模式,避免重复应用全局逻辑。

packages/kit/src/components/Password/components/PasswordVerify.tsx (4)

15-23: 新增表单与枚举导入
导入 FormEPasswordMode 等组件,简化验证流程并支持多模式。


32-33: 引入 PassCodeInput
便于构建数值型输入布局,提升可读性和可维护性。


37-46: 接口扩展
passwordModealertTextconfirmBtnDisabled 这些新增字段能更好地控制组件外观与逻辑。


49-51: 增加 passCode
让表单同时支持密码与数值型验证,结构更灵活。

packages/kit/src/components/Password/components/PasswordSetup.tsx (14)

1-1: useEffect 等钩子合理使用
顶部整合了必要的 React API,集成状态、逻辑更顺畅。


6-6: EPasswordMode 导入
新枚举可扩展密码与数字模式。今后若要增加更多模式,维护更便利。


8-14: platformEnv 和 utils
引入环境变量及工具函数,让组件根据平台调整能力,拆分逻辑更可控。


16-23: IPasswordSetupForm 新字段
passCodeconfirmPassCode 等,多模式更灵活,代码可读性较好。


27-35: 接收 passwordMode
父组件传入模式,避免重复读取全局状态,对组件解耦有益。


41-45: currentPasswordMode useState
通过本地 state 动态跟随 props 更新,移除直接副作用。易于调试,也方便切换模式。


51-54: form defaultValues
同时初始化 password 与 passCode,能避免不必要的表单警告或空引用。


59-62: passCodeConfirm 状态
用来区分第一次与第二次输入 PIN,逻辑直观,很好地减少 UI 拆分复杂度。


63-71: 按钮文案根据场景切换
使用 confirmBtnTextMemo 动态切换 “下一步” 与 “设定”,文案更友好。


78-193: 密码模式分支
EPasswordMode.PASSWORD 下,通过两段逻辑校验密码长度与一致性,避免不正确的输入流入下游。


195-280: 数值模式分支
使用 PassCodeInput 管理 PIN。包含“下一步”与“确认”两步校验,提升安全性。需关注自动聚焦等细节,防止用户体验卡顿。


281-283: 注入生物识别设置容器
先确认是否完成第一次输入才显示,避免页面布局混乱。


293-295: 按钮点击事件
根据阶段和模式切换函数逻辑,简单直接。


300-320: 模式切换按钮
允许用户在数字与字母密码间自由切换。form.reset() 避免了跨模式残余数据的干扰。

packages/kit/src/components/Password/container/PasswordVerifyContainer.tsx (14)

1-1: 初始导入完备
React Hooks、类型声明与基础函数都有引入,便于扩展。


9-16: 引入密码模式常量
这些常量清晰定义了生物识别和数字密码的限制,便于统一管理。


21-21: usePasswordModeAtom
直接在容器里取得当前模式,好处是减少重复 passing。


27-27: resetUtils 导入
带来重置功能,结合错误次数可自动保护安全。


33-33: usePasswordProtection
集中管理密码输入失败次数、时间等逻辑,增强安全性和可维护性。


56-66: 获取 passwordMode 并判断锁定逻辑
isExtLockAndNoCachePassword 条件巧妙结合扩展场景与是否有缓存密码,避免混淆。


69-71: 重置密码状态
进入组件时清理验证状态,退出时重置,避免旧错误状态遗留。


95-103: 默认状态与依赖清理
使用 useEffect 初始化验证状态后,离开时自动重置,有效防止内存泄漏。


106-117: 密码保护 hooks
usePasswordProtection 拿到计数器、状态、提示文案等,易于统一管理逻辑。


123-127: 锁屏与生物识别
在扩展中,若缓存密码缺失则不允许生物识别,逻辑清楚。


168-185: 生物识别失败次数处理
当尝试次数达到阈值,禁用生物识别并抛出错误,以防暴力破解。


Line range hint 222-248: verifyPassword 带有 passwordMode
可根据模式验证密码或数值,生物识别时默认空密码验证。若要扩展多级校验,可考虑分离校验逻辑。


Line range hint 280-363: onInputPasswordAuthenticate
收敛了多处安全防护:

  1. 加密密码并校验模式类型
  2. 失败时递增错误次数并检查是否超限重置
  3. 设置提示文案防止无反馈
    符合安全需求。

392-394: 向 PasswordVerify 传参
alertTextconfirmBtnDisabledpasswordMode,可让子组件灵活控制输入框与提示信息。

packages/kit-bg/src/services/ServicePassword/index.ts (7)

53-59: 导入 EPasswordMode 与相关常量
区分主密码与数字密码的最小/最大长度,后续校验更准确。


282-300: validatePasswordValidRules
结合 passwordMode 确定长度要求,做了 PASSCODE 与 PASSWORD 区分。有效抵御简单拖拽式暴力破解。


318-334: validatePassword 新增 passwordMode
验证逻辑更强大,可在 DB 校验前先确认本地规则,防止传入不合法数据。


361-369: setPasswordSetStatus
多带上 passMode 防止用户仅设置了密码却没有记录模式。


374-384: setPassword
先验证,再存生物识别与缓存,上链 localDb,最后标记已设置密码模式,容错优先级恰当。


397-411: updatePassword
改密码流程完整,包含验证、地址本更新、回滚机制;更新模式状态确保下次登录一致。


431-443: verifyPassword
通过 verifyPassword({ passwordMode }) 识别具体类型,并在生物识别时逻辑分支处理。结果与密码一起缓存,一次解锁后可复用。

packages/kit/src/components/Password/utils.ts (1)

8-8: 正则检查:这行改动看上去很科学。
新增的正则可有效限制输入字符,只保留数字和点号。对 Passcode 校验非常实用。

packages/kit/src/components/Password/container/PassCodeProtectionSwitch.tsx (1)

1-20: 实现思路清晰:组件命名单一,逻辑透明。
切换开关使用简便易懂,配合状态管理性能应无明显问题。观察异步更新是否及时响应即可。

packages/kit-bg/src/services/ServicePassword/types.ts (4)

10-13: 分离密码模式:设计合乎逻辑。
EPasswordMode 区分了 passcode 与 password,减少后期维护负担。


15-27: 常量命名:易懂且用途明确。
提供专门的 map 和阈值,提升可读性与可维护性。


29-30: 人脸与指纹常量:延伸性不错。
初步预留生物识别扩展,后续对接更灵活。


32-33: 密码长度常量:约束合理,增强安全性。
最小 8 位,最大 128 位,兼顾安全性与范围适度。

packages/kit/src/components/Password/components/PassCodeProtectionDialogContent.tsx (1)

1-29: 组件职责单一:文案展示与开关集成。
界面层结构简洁明了,可读性好;与 Switch 组件相互配合流畅。

packages/kit/src/components/Password/container/PasswordUpdateContainer.tsx (8)

7-8: 这两个新导入用于引用密码模式及其原子状态,用法看起来没问题。


25-25: 使用 passwordMode 作为状态管理,让画面可动态显示密码或验证码,逻辑清晰。


28-30: 这里根据模式选择最终密码的来源,写法简单直观。请确保外部数据正确传入。


36-36: 对新密码进行加密操作,流程合理,注意加密或解密时处理异常。


42-42: 将模式作为参数传给 updatePassword,便于后端区分处理。实现合理。


46-46: 成功提示文本改为 Passcode 形式,与新逻辑保持一致。


52-52: 错误提示换成 Passcode,建议确认是否与全部提示保持统一。


63-63: 将 passwordMode 传给组件,便于切换输入模式。组件配置显得完整。

packages/kit/src/views/CloudBackup/components/useResotrePasswordVerify.tsx (3)

20-20: 将提示改为“输入你的 Passcode”,与整体改动一致,文案更直观。


30-30: 占位符也改用相同文案,体验一致性良好。


59-59: 描述信息更换为 Passcode 字样,可避免用户混淆密码与码。

packages/kit/src/components/Password/components/PassCodeInput.tsx (12)

1-2: 文件头部导入 useEffectuseState,基础钩子用法正常。


3-14: 导入 CodeField 与常量,明确 PIN 长度,结构清晰。


15-29: 样式对象简洁,重点突出焦点状态与边框区分。


31-39: 这里收集所有回调与控制选项,功能配置一目了然。


48-49: pinValue 初始状态与 set 函数声明,便于实时更新输入值。


50-53: 使用 useBlurOnFulfill 管理焦点,满足指定长度后失焦。


54-57: useClearByFocusCell 提供清除功能,当聚焦单元时重置内容。


58-59: 使用本地布尔状态 enableMask,允许切换明文显示。


60-89: 按输入状态渲染符号,或用 Cursor 标识焦点,UI 逻辑清楚。


90-95: 根据 pinCodeFocus 控制焦点,让外部也可触发聚焦,灵活度好。


96-124: onChangeText 中触发回调,一旦长度到达最大则调用 onComplete,流程合理。


127-127: 默认导出组件,写法无误,可被其他文件直接引入。

packages/kit/src/components/Password/hooks/usePasswordProtection.ts (6)

1-8: 文件头部导入必要依赖并声明常量,准备工作合理。


9-32: 初始化 hook 里各项状态,可灵活管理多种场景。代码布局直观。


33-50: alertText 根据条件拼装文案,与国际化逻辑相配合,易读易扩展。


61-82: useEffect 中定时更新剩余时间,时间到后清理定时器,流程正确。


83-99: 通过返回值暴露各状态及 set 函数,方便外部调用。


101-101: 导出默认 hook,便于跨组件共享密码保护逻辑。

packages/kit/src/views/Onboarding/pages/CreateWalet/BeforeShowRecoveryPhrase.tsx (1)

55-55: 命名更新非常清晰。
好评!这样能让用户更明确区分“passcode”和“password”。

packages/kit/src/views/Setting/pages/Protection/index.tsx (5)

14-14: 新引入的 PassCodeProtectionSwitch。
功能命名清晰,易于理解,值得采纳。


54-54: “settings_passcode_bypass”命名修正。
与其他地方保持用词一致,改法准确。


89-91: 提示文本改成“passcode bypass”描述。
这段文案读起来简洁,符合更新的用词。


93-100: 新增「PassCode protection」设置部分。
新增的功能模块易读易懂,布局紧凑。


101-103: 重置应用功能的说明文字。
文案简练明了,引导效果不错。

packages/kit/src/components/Password/container/PasswordVerifyPromptMount.tsx (2)

30-30: 标题文案替换为“set passcode”。
改动准确,通用性更强。


58-58: 标题文案替换为“enter passcode”。
与全局一致,提升用户理解。

packages/kit/src/provider/Container/AppStateLockContainer/components/AppStateLock.tsx (1)

120-120: “login_forgot_passcode”按钮文本。
改成passcode后,更匹配系统语言环境,读起来通畅。

apps/ext/src/ui/renderPassKeyPage.tsx (2)

82-82: 命名变更与Passcode概念保持一致。
此处使用ETranslations.auth_error_passcode_incorrect能让错误提示更直观,整体逻辑无问题。


93-93: 重复的错误信息提示处理一致。
同样更改为auth_error_passcode_incorrect保持风格统一,继续保持。

packages/kit-bg/src/states/jotai/atoms/password.ts (3)

8-8: 导入新枚举提升可读性。
EPasswordMode的引入让密码模式更清晰,建议保持此做法。


74-77: 初始化值确保一致性。
默认值都写明了,后续使用时避免意外情况。


86-93: 动态切换passwordMode逻辑合理。
如果未设置密码并且是原生平台,则默认切换为PASSCODE,符合需求。

packages/components/src/forms/Form/index.tsx (3)

100-107: 新增display属性更灵活。
允许设置多种CSS display类型,让布局更好适配不同需求。


118-118: 函数Field接收display参数。
让调用者更自由地配置字段可见性或布局。此改动简洁明了。


151-156: 条件应用display可读性高。
使用解构后传入 fieldset,逻辑清晰易懂。

packages/kit/src/views/Setting/pages/List/SecuritySection/index.tsx (2)

69-69: 改用“passcode”与整体统一。
这里将“set_password”改为“set_passcode”,用词一致,易懂。


101-101: 同类标题改动保持前后一致。
“global_change_passcode”与其他地方同步,让UI文案更统一。

packages/kit/src/views/CloudBackup/pages/Detail/index.tsx (1)

283-283: 改用“passcode”更精准
保持术语一致,读者更容易理解。请确保相关界面文案也做同步。

packages/shared/src/errors/errors/appErrors.ts (5)

27-27: 改为passcode相关key
用词统一能减少用户困惑。可继续检查其他地方是否同样更新。


172-172: 修正错误key
请确认前端提示也改成passcode,保证一致。


199-199: 更新默认错误key为passcode
好做法,用户更清楚提示含义。


211-211: 更改为passcode验证
术语统一,减少疑惑。


222-222: passcode提示一致性
统一错误信息,让用户更理解。

packages/kit/src/provider/Container/AppStateLockContainer/index.tsx (2)

4-4: 新增Spinner组件
加载时给用户更明显反馈,操作体验更好。


88-88: Suspense中添加交互提示
加上Spinner可让用户知道系统正在处理。

package.json (1)

121-121: 新增验证码字段依赖
便于更好管理passcode输入场景,统一UI体验。

Comment on lines +307 to +308
console.log('same__password', password);
console.log('same__newPassword', newPassword);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

查看相同密码日志
仅打印到控制台,需要时可在生产环境移除调试信息,避免混淆或者意外泄露。

id: ETranslations.settings_passcode_bypass_desc,
})}
</SizableText>
<Divider my="$5" mx="$5" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

分割线逻辑。
確認下分割线使用是否统一风格,没问题就好。

Comment on lines +64 to +67
passwordMode: EPasswordMode;
enablePasswordErrorProtection: boolean;
passwordErrorAttempts: number;
passwordErrorProtectionTime: number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

新增字段强化错误保护功能。
enablePasswordErrorProtectionpasswordErrorAttemptspasswordErrorProtectionTime为后续扩展埋下伏笔,用于限制错误输入尝试。

@@ -80,7 +80,7 @@ const ChangePasswordItem = () => {
reason: EReasonForNeedPassword.Security,
});
const dialog = Dialog.show({
title: intl.formatMessage({ id: ETranslations.global_change_password }),
title: intl.formatMessage({ id: ETranslations.global_change_passcode }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

变更对话框标题,让用户更轻松理解。
把“change_password”替换为“change_passcode”,减少歧义,表意更准确。

@@ -241,7 +241,7 @@ export class PasswordAlreadySetFailed extends OneKeyError {
super(
normalizeErrorProps(props, {
defaultMessage: 'PasswordAlreadySetFaield',
defaultKey: ETranslations.auth_error_password_incorrect,
defaultKey: ETranslations.auth_error_passcode_incorrect,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

修复重复key为passcode
检查所有相似地方,别混用“password”。

Comment on lines +778 to +780
'biometric',
'biometrics',
'Biometric',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

添加的生物识别相关词汇看起来不错!

这些新增的拼写检查跳过词很合理,与密码设置功能的更新相符。

建议考虑是否还需要添加其他相关术语,比如:

  • 'fingerprint'(指纹)
  • 'faceID'(面容ID)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant