Skip to content

feat(account): add 2-step verification section to security page#8562

Merged
wangsijie merged 4 commits intomasterfrom
wangsijie-log-12928-ootb-account-center-security-page-ui-2-step-verification
Mar 31, 2026
Merged

feat(account): add 2-step verification section to security page#8562
wangsijie merged 4 commits intomasterfrom
wangsijie-log-12928-ootb-account-center-security-page-ui-2-step-verification

Conversation

@wangsijie
Copy link
Copy Markdown
Contributor

@wangsijie wangsijie commented Mar 26, 2026

Summary

Add 2-step verification section to the account center security page, including:

  • New MfaSection component for managing MFA factors (TOTP, Email, Phone)
  • Align email/phone MFA factor rendering with console profile page pattern (plain text instead of status tag)
  • Translate all 2-step verification related phrases into all supported languages

Testing

Tested locally

Checklist

  • .changeset
  • unit tests
  • integration tests
  • necessary TSDoc comments

@wangsijie wangsijie requested a review from simeng-li as a code owner March 26, 2026 12:44
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 26, 2026

COMPARE TO master

Total Size Diff ⚠️ 📈 +32.2 KB

Diff by File
Name Diff
packages/account/src/assets/icons/factor-backup-code.svg 📈 +3.93 KB
packages/account/src/assets/icons/factor-totp.svg 📈 +3.02 KB
packages/account/src/assets/icons/factor-webauthn.svg 📈 +3.74 KB
packages/account/src/pages/Security/MfaSection/index.module.scss 📈 +1.74 KB
packages/account/src/pages/Security/MfaSection/index.tsx 📈 +9.16 KB
packages/account/src/pages/Security/index.tsx 📈 +62 Bytes
packages/account/src/utils/security-page.test.ts 📈 +137 Bytes
packages/account/src/utils/security-page.ts 📈 +308 Bytes
packages/phrases-experience/src/locales/ar/account-center.ts 📈 +668 Bytes
packages/phrases-experience/src/locales/de/account-center.ts 📈 +534 Bytes
packages/phrases-experience/src/locales/en/account-center.ts 📈 +514 Bytes
packages/phrases-experience/src/locales/es/account-center.ts 📈 +575 Bytes
packages/phrases-experience/src/locales/fr/account-center.ts 📈 +561 Bytes
packages/phrases-experience/src/locales/it/account-center.ts 📈 +546 Bytes
packages/phrases-experience/src/locales/ja/account-center.ts 📈 +548 Bytes
packages/phrases-experience/src/locales/ko/account-center.ts 📈 +513 Bytes
packages/phrases-experience/src/locales/pl-pl/account-center.ts 📈 +546 Bytes
packages/phrases-experience/src/locales/pt-br/account-center.ts 📈 +575 Bytes
packages/phrases-experience/src/locales/pt-pt/account-center.ts 📈 +584 Bytes
packages/phrases-experience/src/locales/ru/account-center.ts 📈 +714 Bytes
packages/phrases-experience/src/locales/th/account-center.ts 📈 +688 Bytes
packages/phrases-experience/src/locales/tr-tr/account-center.ts 📈 +531 Bytes
packages/phrases-experience/src/locales/uk-ua/account-center.ts 📈 +700 Bytes
packages/phrases-experience/src/locales/zh-cn/account-center.ts 📈 +508 Bytes
packages/phrases-experience/src/locales/zh-hk/account-center.ts 📈 +523 Bytes
packages/phrases-experience/src/locales/zh-tw/account-center.ts 📈 +517 Bytes

@github-actions github-actions Bot added size/xl and removed size/xl labels Mar 26, 2026
@wangsijie wangsijie changed the title fix(account): render email/phone MFA factors as plain text feat(account): add 2-step verification section to security page Mar 26, 2026
@github-actions github-actions Bot added feature Cool stuff size/xl and removed size/xl labels Mar 26, 2026
@wangsijie wangsijie force-pushed the wangsijie-log-12928-ootb-account-center-security-page-ui-2-step-verification branch from 4e69fd1 to 66cb390 Compare March 26, 2026 13:03
@github-actions github-actions Bot added size/xl and removed size/xl labels Mar 26, 2026
wangsijie and others added 4 commits March 30, 2026 10:53
Add MfaSection component to the account center Security page,
displaying user's configured MFA factors (TOTP, WebAuthn, BackupCode,
Email, Phone) with status indicators and action buttons for editing.

Reference: LOG-12928
Align email and phone MFA factor rendering in the security page
MfaSection with the console profile page pattern - show plain text
value instead of status tag, matching other factors' behavior.

Reference: LOG-12928
…uages

Translate newly added security section keys into all 17 supported languages and remove UNTRANSLATED comments.
The SecurityPageExperienceSettings type requires an mfa field, but the
test mocks were only providing socialConnectors.
@wangsijie wangsijie force-pushed the wangsijie-log-12928-ootb-account-center-security-page-ui-2-step-verification branch from 00fd7a6 to e009d10 Compare March 30, 2026 02:53
@github-actions github-actions Bot added size/xl and removed size/xl labels Mar 30, 2026
Copy link
Copy Markdown
Contributor

@simeng-li simeng-li left a comment

Choose a reason for hiding this comment

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

LGTM

@wangsijie wangsijie merged commit 836457b into master Mar 31, 2026
59 of 62 checks passed
@wangsijie wangsijie deleted the wangsijie-log-12928-ootb-account-center-security-page-ui-2-step-verification branch March 31, 2026 02:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants