WEB-1032: Fix 2FA email OTP not working in login

[kanishksingh23]

Description

TwoFactorAuthenticationComponent uses ChangeDetectionStrategy.OnPush but never calls markForCheck() after its asynchronous state updates. Under OnPush the view only refreshes when explicitly marked dirty, but every state change in this component happens inside async RxJS callbacks:

• Delivery methods loaded via getDeliveryMethods().subscribe() were never rendered, so the login screen showed Please select a delivery method with no radio options and a permanently-disabled Request OTP button.
• otpRequested / tokenValidityTime set after requestOTP() never revealed the OTP entry field.
• loading / resendOTPLoading spinner states were also not reflected.

Inject ChangeDetectorRef and call markForCheck() after each async state mutation (delivery-method load, requestOTP, validateOTP, resendOTP).

Verified end-to-end against the 2fa.mifos.community backend and a local Fineract instance: the email delivery method now renders, the Request OTP button enables on selection, and the OTP entry field appears.

Related issues and discussion

#WEB-1032

Screenshots, if any

Before

After

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Bug Fixes
  • Improved two-factor authentication UI responsiveness during asynchronous OTP delivery, request, validation, and resend flows.
  • Ensured the UI reliably refreshes loading indicators, form enable/disable states, OTP input visibility, and available delivery options.

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key: "pre_merge_checks"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• 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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 09a242ec-3cfd-487a-87c1-66104de8923e

📥 Commits

Reviewing files that changed from the base of the PR and between 7f6b594 and afc8f14.

📒 Files selected for processing (1)

• src/app/login/two-factor-authentication/two-factor-authentication.component.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/login/two-factor-authentication/two-factor-authentication.component.ts

---

Walkthrough

The two-factor authentication component injects ChangeDetectorRef and calls markForCheck() after asynchronous delivery-method, OTP request, validation, and resend state updates to support rendering with OnPush change detection.

Changes

Two-factor authentication rendering

Layer / File(s)	Summary
Async state rendering src/app/login/two-factor-authentication/two-factor-authentication.component.ts	Injects ChangeDetectorRef and marks the component for checking after asynchronous two-factor authentication state changes.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main fix: 2FA email OTP login flow not working.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

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