fix(web): show the 2FA setup step label with spacing and translatable order

[yaser-k]

Agent

• Tool: Claude Code
• Tool version: 2.1.282
• Model (full id): claude-opus-5-5
• Host (CLI / IDE / GitHub coding agent / other): Claude Code on the web
• Date (UTC): 2026-09-25

Links

• Closes Two-factor setup dialog shows "Step1of 3:Scan QR Code" (no spaces, word order not translatable) #7574
• Related: none

User request

• Verbatim:

Prompt

This repository is my fork (https://github.com/yaser-k/new-api-fork) of QuantumNous/new-api. This session fixes one small upstream bug so that I can send it to QuantumNous/new-api as a pull request later. Read AGENTS.md and web/AGENTS.md first and follow them, and read .agents/skills/i18n-translate/SKILL.md before touching any locale file.

Setup

1. Add https://github.com/QuantumNous/new-api to this session as a read-only repository. Use it only to fetch; never push, open PRs or issues, or comment there.
2. In the fork clone, add it as the upstream remote (git remote add upstream https://github.com/QuantumNous/new-api), run git fetch upstream main, then git remote set-url --push upstream DISABLED.
3. Create the branch fix/2fa-setup-step-label from upstream/main. Do not base it on any other branch of the fork.
4. Install the web dependencies: cd web && bun install (if bun cannot download through the network proxy, use npm install --no-package-lock).

The bug

The Two-Factor Authentication setup dialog (web/src/features/security/components/dialogs/two-fa-setup-dialog.tsx) builds its description from separate pieces: t('Step'), the step number, t('of 3:') and the step label, with no spaces between them. In English it renders as Step1of 3: followed directly by the label, and the other locales have the same problem. Because the sentence is assembled from fragments, translators also cannot change the word order.

The fix

1. First confirm the bug on upstream/main: render the dialog in a test and show the actual description text in English and in Simplified Chinese.
2. Replace the fragments with one interpolated key (for example 'Step {{current}} of {{total}}: {{label}}'), with values for all seven required locales (en, zh, zh-TW, fr, ja, ru, vi), written through the skill's add-missing-keys.mjs script (temporary: create, run, delete) and followed by bun run i18n:sync. Keep the total as a value, not a hard-coded 3.
3. If 'Step' or 'of 3:' is no longer used anywhere after the change, handle the leftover keys the way the i18n skill says to.
4. Add a focused regression test that checks the exact description for at least English and Simplified Chinese, and show that it fails on upstream/main without your fix.
5. Keep the change minimal: no other text, layout or behavior changes.

Verify

In web/: bun run typecheck, bun run lint (the changed files must have no errors; compare with upstream/main), bun run test, bun run build, bun run i18n:sync. Show the exact commands and results.

Hand-off

Commit with a clear message (for example fix(web): show the 2FA setup step label with spacing and translatable order) and push fix/2fa-setup-step-label to origin (my fork) only.

Then end with a short, factual report for me, which I will use to file the upstream issue and PR myself:

• actual text before the fix and after, in English and Simplified Chinese;
• the page path where the dialog opens, the browser and version you tested with, the theme, and any browser console errors;
• the files changed and why, in one line each;
• the verification commands and their results, including the fail-before result.

Rules

• Do NOT open a pull request, file an issue, or comment anywhere on GitHub, in either repository.
• Never push to upstream.
• Do not add anything about any specific deployment, business, market or customers; the repository is public.

• Later constraints or corrections from the user (quote, or none): none

Out of scope — refuse

• Matched: no
• If yes, what was told to the user (stop here; do not open a PR): not applicable

Open gate — do not open unless all are satisfied

• Out of scope (including pass-through-only forwarding): no
• Usage / configuration / integration (answered instead of opening): no
• Required issue facts present without invention: yes (Two-factor setup dialog shows "Step1of 3:Scan QR Code" (no spaces, word order not translatable) #7574)
• Verification is actual commands or steps and observed results, not only go build or tests passed: yes
• Body is short and factual; no unfiltered AI-generated text: yes
• Open: yes
• If no, what was told to the user (stop here): not applicable

Kind

• Bug fix
• New feature
• Performance / refactor
• Docs
• Other:

Issue facts

• Actual behavior: Step1of 3:Scan QR Code (en), 步骤1共 3 个：扫描二维码 (zh)
• Impact: all locales; translators cannot reorder the sentence
• Frequency: always
• Evidence that the problem is in new-api rather than the client or upstream: two-fa-setup-dialog.tsx renders the fragments side by side
• Applicable types and their fields: frontend: /security, Chromium 141, light theme, no console errors. Relay, billing, deployment: not applicable

Change

One key, Step {{current}} of {{total}}: {{label}}, with total = stepLabels.length. Added to the seven locales with the i18n skill's script, then i18n:sync. Regression test added.

Research

Duplicate / prior art

• Search queries (issues, PRs): 2FA, Step1, of 3, 两步验证, two-fa-setup
• What already existed and why this is not a duplicate: none found

Docs and code

• https://docs.newapi.ai/ : not applicable
• https://deepwiki.com/QuantumNous/new-api : not applicable
• README / repo docs: web/AGENTS.md, .agents/skills/i18n-translate/SKILL.md
• Code paths and what they imply for this change: 'of 3:' is used only in this dialog

Alternatives considered

• Option A: spaces between the fragments. Word order stays fixed.
• Option B: Trans. Not needed; no markup.
• Why this approach: each locale can order the sentence.

Files

Path	Why
web/src/features/security/components/dialogs/two-fa-setup-dialog.tsx	one interpolated key
web/src/i18n/locales/{en,zh,zh-TW,fr,ja,ru,vi}.json	new key
web/src/features/security/components/__tests__/two-fa-setup-dialog.test.tsx	regression test

Behavior

• Before: Step1of 3:Scan QR Code / 步骤1共 3 个：扫描二维码
• After: Step 1 of 3: Scan QR Code / 第 1 步，共 3 步：扫描二维码
• Explicit non-goals / leftover work: Step and of 3: are now unused but left in the locales. I can remove them here if preferred.

Verification

• Commands and results (in web/):
  • new test: 3 passed; on main, 3 failed (Step1of 3:Scan QR Code, 步骤1共 3 个：扫描二维码, Step2of 3:Save Backup Codes)
  • bun run typecheck: exit 0
  • bun run lint: same 182 errors as main; changed files clean
  • bun run test: 167 files, 2114 tests passed
  • bun run build, bun run i18n:sync: exit 0, no changes
• Manual steps and observed result: local build, /security, Enable 2FA: the dialog shows the After text
• UI: text only; see Behavior
• Tests added or updated, or why none: two-fa-setup-dialog.test.tsx (en step 1, zh step 1, en step 2)
• Databases / providers / platforms exercised: SQLite, headless Chromium 141
• Not verified: other browsers, dark theme

Risks

• Failure modes: none; text only
• Billing / quota / auth impact: none
• Follow-ups: native review of the fr, ja, ru and vi wording is welcome

Scope check

• Single focused change: yes
• Secrets included: no
• Out of scope (Coding Plan / reverse-engineered channel / third-party wrapper / Codex / pass-through-only forwarding): no

This change was AI-generated (Claude Code) and reviewed by the submitter.

Summary by CodeRabbit

• Improvements
  • The two-factor authentication setup dialog now clearly announces the current step, total number of steps, and step name in its accessible description.
  • Step progress is available in English, French, Japanese, Russian, Vietnamese, Traditional Chinese, and Simplified Chinese.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 4fbebd4e-c9e3-42c1-bdc6-19de25e1fbd0

📥 Commits

Reviewing files that changed from the base of the PR and between c2b7a9a and 6d614c0.

📒 Files selected for processing (9)

• web/src/features/security/components/__tests__/two-fa-setup-dialog.test.tsx
• web/src/features/security/components/dialogs/two-fa-setup-dialog.tsx
• web/src/i18n/locales/en.json
• web/src/i18n/locales/fr.json
• web/src/i18n/locales/ja.json
• web/src/i18n/locales/ru.json
• web/src/i18n/locales/vi.json
• web/src/i18n/locales/zh-TW.json
• web/src/i18n/locales/zh.json

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The two-factor setup dialog now formats its step description with a translated template that includes the current step, total steps, and step label. Translation entries were added or updated in seven locales, and tests check the English and Simplified Chinese descriptions.

Changes

Localized 2FA setup step description

Layer / File(s)	Summary
Translated step description and validation web/src/features/security/components/dialogs/two-fa-setup-dialog.tsx, web/src/features/security/components/__tests__/two-fa-setup-dialog.test.tsx, web/src/i18n/locales/*.json	The dialog uses one translated template with the current step, total, and label. Locale entries were added or updated, and tests check the initial English and Simplified Chinese descriptions and the next English step.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 6d614

The dialog now uses one interpolated description with locale-specific wording, and the French translation is confirmed. No material merge-blocking issue is established.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (7 skipped: 7 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The change satisfies issue #7574. TwoFASetupDialog uses one t('Step {{current}} of {{total}}: {{label}}', ...) template. It passes step + 1, stepLabels.length, and the localized step label. Th…
Out of Scope Changes check	✅ Passed	The changed files remain within issue #7574. They update the 2FA dialog, add the related English and locale translation entries, and add focused regression tests. No unrelated behavior or files appear…
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: improving spacing and translation order for the 2FA setup step label.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (7 skipped: 7 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit reads the steps aloud,
In words that flow without a crowd.
One of three, then two of three,
Each locale says it naturally.
The setup path is clear to see.}

_{Comment @coderabbitai help to get the list of available commands.}