doc(MFA): add enable 2FA sample code

[ArgoZhang]

Link issues

fixes #5993

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Add a new page for enabling two-factor authentication (2FA) with QR code registration in the BootstrapBlazor tutorial section

New Features:

• Added a new registration page for two-factor authentication
• Implemented QR code generation for authenticator app setup

Enhancements:

• Improved login page layout with better spacing
• Added sample code for 2FA registration process

Documentation:

• Updated tutorial navigation to include a link to 2FA registration page

[sourcery-ai]

Reviewer's Guide

This pull request implements a new sample page for enabling Two-Factor Authentication (2FA) using an authenticator app. This involves generating a QR code for app setup and verifying the entered code. Existing MFA tutorial pages were updated to include a link to this new registration flow, and a minor layout adjustment was made to the login sample page.

Sequence Diagram for 2FA Registration Process

sequenceDiagram
    title Sequence Diagram for 2FA Registration Process
    actor User
    participant RegisterPage as "Register.razor"
    participant TotpSvc as "ITotpService"
    participant NavMgr as "NavigationManager"

    Note over RegisterPage: Page Initialization (OnInitialized)
    RegisterPage->>TotpSvc: GenerateOtpUri(OtpOptions)
    activate TotpSvc
    TotpSvc-->>RegisterPage: otpUri (for QR Code)
    deactivate TotpSvc
    RegisterPage-->>User: Displays QR Code and input field

    User->>RegisterPage: Enters verification code
    User->>RegisterPage: Clicks "Save" button (triggers OnRegister)
    activate RegisterPage
    RegisterPage->>TotpSvc: Compute(secretKey)  // To get expected code
    activate TotpSvc
    TotpSvc-->>RegisterPage: expectedOtpCode
    deactivate TotpSvc
    alt User's entered code matches expectedOtpCode
        RegisterPage->>NavMgr: NavigateTo("/tutorials/mfa/two-factor/app")
    else User's entered code is invalid
        Note over RegisterPage: User remains on page, can retry
    end
    deactivate RegisterPage

Loading

File-Level Changes

Change	Details	Files
Added a new 2FA registration page with QR code generation and code verification.	Created a new Razor component (Register.razor) for the 2FA setup process. Implemented QR code generation using TotpService for authenticator app configuration. Added logic to verify the Time-based One-Time Password (TOTP) entered by the user. Introduced CSS (Register.razor.css) to style the new 2FA registration page.	src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Register.razor src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Register.razor.css
Updated the existing MFA tutorial page to link to the new 2FA registration page.	Added a hyperlink to navigate to the new 'Enable Two-factor methods' page.	src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/TwoFactor.razor
Adjusted the layout of the login sample page.	Modified the flex container class for the password section to justify-content-between for better alignment.	src/BootstrapBlazor.Server/Components/Samples/Tutorials/MFA/Login.razor

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#5993	Add sample code for enabling 2FA in the specified component.	✅

Possibly linked issues

• doc(MFA): add enable 2FA sample code #5993: The PR adds the required sample code and UI for enabling 2FA documentation, directly addressing the issue.
• doc(MFA): add enable 2FA sample code #5993: The PR adds sample code documentation for enabling 2FA, which fixes the issue requesting MFA sample code.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

• The layout adjustment in Login.razor appears to be a separate concern from adding the 2FA sample code; consider addressing it in a dedicated PR.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (d456d8c) to head (4c403f5).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #5994   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          670       670           
  Lines        30616     30616           
  Branches      4353      4353           
=========================================
  Hits         30616     30616           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.