Add loader and error handling to MFA modal

[Copilot]

Prerequisites

• I have added steps to test this contribution in the description below

Description

The Current User MFA Modal (current-user-mfa-modal.element.ts) fetches MFA providers asynchronously but provided no visual feedback during loading, leaving users staring at an empty modal with no indication that data is being fetched.

Changes:

• Loading state: Added _isLoading state (default true) that displays <uui-loader> during provider fetch
• Error handling: Added _error state that captures server errors and exceptions, displaying localized error message via errors_defaultError key
• Render refactoring: Extracted conditional rendering logic into separate #renderContent() method using early returns for improved readability and maintainability
• Render flow: Shows loader → error message (if failed) → provider list (if successful)

Testing:

1. Navigate to User Settings → Two-Factor Authentication
2. Observe <uui-loader> displays while providers load
3. Verify provider list appears after load completes
4. Test error case by disconnecting network/misconfiguring MFA providers and verify error message displays

The implementation follows existing patterns from upgrader-view.element.ts and uses Lit's @state() decorator for reactive updates. The render logic uses early returns in a dedicated method instead of nested conditionals for better code maintainability.

Original prompt

The Current User MFA Modal (current-user-mfa-modal.element.ts) fetches MFA (Multi-Factor Authentication) providers from the server and elsewhere but currently provides no loader or spinner in the modal UI while these providers are loading. Users receive no feedback while waiting for the process, potentially leading to confusion.

Task:

• Add a loader (<uui-loader>) to render in the primary content area of the modal while the MFA providers are being loaded.
• Hide the loader and display providers once loading has finished.
• Hide the loader and show an error message if loading fails.
• Optionally, add or update tests if available.

File:

• src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts

This pull request was created as a result of the following prompt from Copilot chat.

The Current User MFA Modal (current-user-mfa-modal.element.ts) fetches MFA (Multi-Factor Authentication) providers from the server and elsewhere but currently provides no loader or spinner in the modal UI while these providers are loading. Users receive no feedback while waiting for the process, potentially leading to confusion.

Task:

• Add a loader (<uui-loader>) to render in the primary content area of the modal while the MFA providers are being loaded.
• Hide the loader and display providers once loading has finished.
• Hide the loader and show an error message if loading fails.
• Optionally, add or update tests if available.

File:

• src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[nielslyngsoe]

@copilot I would suggest this part being taking into its own render method. Then you can return if its loading, and return if its in error state. That would be easier to read and maintaine.

[Copilot]

Refactored into #renderContent() method using early returns instead of nested when() calls. This makes the code cleaner and easier to maintain. See commit 3c5f02f.

[Copilot]

Pull request overview

This PR adds loading state and error handling to the Current User MFA Modal, addressing the issue where users had no visual feedback during provider fetching. The implementation follows established patterns in the Umbraco codebase.

Key Changes:

• Added _isLoading and _error state management to provide user feedback during asynchronous operations
• Implemented <uui-loader> component display during provider loading
• Added error handling with localized error messages using errors_defaultError key
• Updated render logic with nested when() directives for conditional UI display

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File	Description
src/Umbraco.Web.UI.Login/package-lock.json	Peer dependency reorganization - multiple packages moved from regular to peer dependencies
src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user-mfa/current-user-mfa-modal.element.ts	Added loading state, error handling, and conditional rendering for MFA provider modal

Files not reviewed (1)

• src/Umbraco.Web.UI.Login/package-lock.json: Language not supported