feat(auth-service): email linking from auth service [LFXV2-502]

[mauriciozanettisalomao]

Overview

Jira ticket https://linuxfoundation.atlassian.net/browse/LFXV2-502

Implements email linking functionality that integrates with the Auth0 authentication service, allowing users to verify and link alternate email addresses to their accounts through a secure OTP verification flow.

Notes:

For now, to focus on removing non-auth-service integrations from the profile, we’ve disabled the delete email action until we implement it. The set primary email action is also on hold, as we need to check if it’s supported on the Auth0 side.

Changes

• Backend Email Service: Added verifyAndLinkEmail(), linkIdentity(), and related methods to handle the complete email verification and linking workflow
• Profile Controller: Implemented new endpoints for sending email verification codes and verifying/linking emails:
  • POST /api/profile/emails/send-verification - Sends OTP verification code
  • POST /api/profile/emails/verify - Verifies OTP and links email to account
• NATS Integration: Added new NATS subjects for auth-service communication:
  • EMAIL_LINKING_SEND_VERIFICATION - Request verification code
  • EMAIL_LINKING_VERIFY - Verify OTP code
  • USER_IDENTITY_LINK - Link identity to user account
• Frontend Components: Created email verification modal component for user-facing OTP verification flow
• Authentication: Extended Auth0 scope to include update:current_user_metadata for identity linking operations

Technical Details

The implementation follows a three-step process:

1. Send verification code to alternate email
2. Verify OTP code and obtain id_token
3. Link the verified identity to the primary user account

Screenshots:

Modal to provide the OTP

Incorrect code behavior

Expired code behavior

Successful verification behavior

[github-actions]

Conventional Commits FTW!

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds a complete email verification feature: frontend modal and profile UI updates, new client methods, server endpoints and EmailService using NATS request/reply, plus shared NATS subject enum additions and new user-email types.

Changes

Cohort / File(s)	Summary
Email Verification Modal apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html, apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts	New standalone Angular modal implementing a 6‑digit OTP UI with a 5‑minute countdown, per‑digit inputs (keyboard/paste handling), submit/resend flows, expired/error states, and client UserService integration for verify/resend.
Profile Email Frontend apps/lfx-one/src/app/modules/profile/email/profile-email.component.html, apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts	Modified add‑email flow to call send verification and open the modal; added emailFieldError signal, DialogService usage/provider and dialog lifecycle handling, inline error placement, simplified labels/tooltips, and temporary stubs for delete/set‑primary actions.
Client User Service apps/lfx-one/src/app/shared/services/user.service.ts	Added sendEmailVerification(email) and verifyAndLinkEmail(email, otp) methods that POST to new backend endpoints and return typed observables.
Server Controller & Routes apps/lfx-one/src/server/controllers/profile.controller.ts, apps/lfx-one/src/server/routes/profile.route.ts	Added controller methods sendEmailVerification and verifyAndLinkEmail and POST routes /api/profile/emails/send-verification and /api/profile/emails/verify; rewrote getUserEmails to fetch and map NATS-backed user emails.
Backend Email Service apps/lfx-one/src/server/services/email.service.ts	New EmailService orchestrating NATS flows: send verification, verify OTP, link identity, and combined verifyAndLinkEmail; includes payload/response decoding, validation, error mapping, and logging.
Backend User Service apps/lfx-one/src/server/services/user.service.ts	Added getUserEmails(req, userArg) to request and decode user emails via NATS (USER_EMAILS_READ) with timeout/availability handling and logging.
Shared NATS Subjects & Types packages/shared/src/enums/nats.enum.ts, packages/shared/src/interfaces/user-profile.interface.ts	Removed USERNAME_TO_USER_INFO; added USER_EMAILS_READ, EMAIL_LINKING_SEND_VERIFICATION, EMAIL_LINKING_VERIFY, USER_IDENTITY_LINK; added AlternateEmail, UserEmailsData, UserEmailsResponse interfaces.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as Client UI / Modal
    participant API as Backend API
    participant NATS as NATS Service

    User->>UI: Request verification for email
    UI->>API: POST /api/profile/emails/send-verification { email }
    API->>NATS: EMAIL_LINKING_SEND_VERIFICATION
    NATS-->>API: ack / success
    API-->>UI: { success: true }
    UI-->>User: Open verification modal (timer starts)

    User->>UI: Submit 6‑digit code
    UI->>API: POST /api/profile/emails/verify { email, otp }
    API->>NATS: EMAIL_LINKING_VERIFY
    NATS-->>API: { otp verified, id_token }
    API->>NATS: USER_IDENTITY_LINK (with id_token)
    NATS-->>API: identity linked
    API-->>UI: { success: true }
    UI-->>User: Modal closes — email linked

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

• Pay extra attention to:
  • Modal component: timer lifecycle, OTP input/paste handling, signal cleanup on destroy.
  • EmailService: multi‑step NATS interactions, error mapping, handling id_token for identity linking.
  • Controller/routes and UserService: request/response shapes, validation, and consistency with new shared interfaces.

Possibly related PRs

• feat(profile): implement complete email management system #92 — related changes to profile email management and verification endpoints/UI.

Suggested labels

deploy-preview

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR description indicates Auth0 integration with custom OTP flow, but the linked issue LFXV2-502 specifically requires an Authelia mock implementation using KV storage. The implementation appears to target Auth0 rather than the mock Authelia system specified in the linked issue.	Clarify whether this PR addresses the Auth0 implementation (separate from LFXV2-502) or if the Authelia mock implementation with KV storage is included. Ensure alignment with the linked issue requirements.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: implementing email linking functionality integrated with the auth service, specifically referencing the Jira ticket LFXV2-502.
Description check	✅ Passed	The description provides comprehensive context about the email linking functionality, including backend changes, endpoints, NATS integration, frontend components, and technical implementation details directly related to the changeset.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the email linking verification flow: new components for OTP entry, service methods for verification, NATS integration, and profile management updates. No extraneous changes detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/lfxv2-502-email-linking-from-auth-service

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 12134c9 and a8917d8.

📒 Files selected for processing (1)

• apps/lfx-one/src/server/services/user.service.ts (2 hunks)

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

• apps/lfx-one/src/server/services/user.service.ts

---

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

[Copilot]

Pull Request Overview

This PR implements email linking functionality that integrates with Auth0 authentication, enabling users to verify and link alternate email addresses through a secure OTP verification workflow.

Key Changes:

• Added backend email verification service with NATS integration for Auth0 communication
• Created new API endpoints for sending verification codes and verifying/linking emails
• Implemented frontend verification modal component with 6-digit OTP input and timer functionality

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/shared/src/interfaces/user-profile.interface.ts	Added TypeScript interfaces for alternate emails and user email data structures
packages/shared/src/enums/nats.enum.ts	Defined new NATS subjects for email linking and identity management operations
apps/lfx-one/src/server/services/email.service.ts	Implemented core email verification service with OTP handling and identity linking
apps/lfx-one/src/server/services/user.service.ts	Added getUserEmails method to fetch user email data via NATS
apps/lfx-one/src/server/routes/profile.route.ts	Registered new email verification and linking API endpoints
apps/lfx-one/src/server/controllers/profile.controller.ts	Implemented controller methods for email verification flow and updated getUserEmails to use NATS
apps/lfx-one/src/app/shared/services/user.service.ts	Added frontend service methods for email verification API calls
apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts	Updated email management component to trigger verification modal and handle responses
apps/lfx-one/src/app/modules/profile/email/profile-email.component.html	Modified UI to display email field errors and simplified email management text
apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts	Created modal component with OTP input handling, timer, and paste functionality
apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html	Implemented modal UI with 6-digit code input, countdown timer, and error messaging

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (5)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html (1)

51-102: Bring data-testid names in line with our convention

The new modal test ids (digit-*-input, resend-link, resend-code-button, etc.) don’t follow the required [section]-[component]-[element] format. Please rename them accordingly (e.g., profile-emailVerificationModal-digit-1-input, profile-emailVerificationModal-resend-link, profile-emailVerificationModal-resend-code-button), and update all new ids in this template so automated tests remain consistent. As per coding guidelines.

Also applies to: 128-149

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

69-71: Guard the valueChanges subscription lifecycle

valueChanges.subscribe in the constructor never tears down, so the component holds a live subscription for its entire lifetime. Pipe it through takeUntilDestroyed() (from @angular/core/rxjs-interop) so Angular disposes it when the component is destroyed.

-import { toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
@@
-    this.addEmailForm.get('email')?.valueChanges.subscribe(() => {
+    this.addEmailForm
+      .get('email')
+      ?.valueChanges.pipe(takeUntilDestroyed())
+      .subscribe(() => {
       this.emailFieldError.set(null);
     });

apps/lfx-one/src/server/services/email.service.ts (2)

85-149: Consider error codes instead of string matching.

Lines 115 and 201 use string matching (includes('already linked')) to detect specific error cases. This is fragile and could break if error messages change.

Consider having the auth service return structured error responses with error codes:

-        if (result.error?.includes('already linked')) {
+        if (result.errorCode === 'EMAIL_ALREADY_LINKED') {
           throw ServiceValidationError.forField('email', 'This email address is already linked to an account', {

This would require coordinating with the auth service to return errorCode fields in error responses.

---

255-317: Consider basic token format validation.

The method only checks token presence but doesn't validate format. While the auth service will validate tokens, a basic JWT format check (three base64 segments separated by dots) could provide faster feedback for malformed tokens.

   // Validate tokens
   if (!userToken || !linkWithToken) {
     throw ServiceValidationError.forField('token', 'User token and link token are required', {
       operation: 'link_identity',
       service: 'email_service',
       path: '/nats/user-identity/link',
     });
   }
+
+  // Basic JWT format validation (three segments separated by dots)
+  const jwtRegex = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
+  if (!jwtRegex.test(userToken) || !jwtRegex.test(linkWithToken)) {
+    throw ServiceValidationError.forField('token', 'Invalid token format', {
+      operation: 'link_identity',
+      service: 'email_service',
+      path: '/nats/user-identity/link',
+    });
+  }

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

78-136: Consider simplifying code concatenation.

Line 87 manually concatenates all six digit values. This could be more maintainable using Object.values or an array approach.

-    const code = `${this.verificationForm.value.digit1}${this.verificationForm.value.digit2}${this.verificationForm.value.digit3}${this.verificationForm.value.digit4}${this.verificationForm.value.digit5}${this.verificationForm.value.digit6}`;
+    const code = Object.values(this.verificationForm.value).join('');

This is more concise and would work even if the number of digits changes in the future.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 53a3893 and e6001d5.

📒 Files selected for processing (11)

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html (1 hunks)
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1 hunks)
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.html (4 hunks)
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (7 hunks)
• apps/lfx-one/src/app/shared/services/user.service.ts (1 hunks)
• apps/lfx-one/src/server/controllers/profile.controller.ts (6 hunks)
• apps/lfx-one/src/server/routes/profile.route.ts (1 hunks)
• apps/lfx-one/src/server/services/email.service.ts (1 hunks)
• apps/lfx-one/src/server/services/user.service.ts (2 hunks)
• packages/shared/src/enums/nats.enum.ts (1 hunks)
• packages/shared/src/interfaces/user-profile.interface.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces

Files:

• apps/lfx-one/src/app/shared/services/user.service.ts
• packages/shared/src/interfaces/user-profile.interface.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/server/services/email.service.ts
• apps/lfx-one/src/server/services/user.service.ts
• apps/lfx-one/src/server/controllers/profile.controller.ts
• packages/shared/src/enums/nats.enum.ts
• apps/lfx-one/src/server/routes/profile.route.ts

**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}

📄 CodeRabbit inference engine (CLAUDE.md)

Include required license headers on all source files

Files:

• apps/lfx-one/src/app/shared/services/user.service.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html
• packages/shared/src/interfaces/user-profile.interface.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/server/services/email.service.ts
• apps/lfx-one/src/server/services/user.service.ts
• apps/lfx-one/src/server/controllers/profile.controller.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.html
• packages/shared/src/enums/nats.enum.ts
• apps/lfx-one/src/server/routes/profile.route.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Do not nest ternary expressions

Files:

• apps/lfx-one/src/app/shared/services/user.service.ts
• packages/shared/src/interfaces/user-profile.interface.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/server/services/email.service.ts
• apps/lfx-one/src/server/services/user.service.ts
• apps/lfx-one/src/server/controllers/profile.controller.ts
• packages/shared/src/enums/nats.enum.ts
• apps/lfx-one/src/server/routes/profile.route.ts

apps/lfx-one/src/**/*.html

📄 CodeRabbit inference engine (CLAUDE.md)

apps/lfx-one/src/**/*.html: Always add data-testid attributes when creating new Angular components for reliable test targeting
Use data-testid naming convention [section]-[component]-[element]

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.html

packages/shared/src/interfaces/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Place all TypeScript interfaces in the shared package at packages/shared/src/interfaces

Files:

• packages/shared/src/interfaces/user-profile.interface.ts

packages/shared/src/enums/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Place all enums in the shared package at packages/shared/src/enums

Files:

• packages/shared/src/enums/nats.enum.ts

🧠 Learnings (2)

📚 Learning: 2025-09-16T03:32:46.518Z

Learnt from: CR
PR: linuxfoundation/lfx-v2-ui#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T03:32:46.518Z
Learning: Applies to packages/shared/src/interfaces/**/*.ts : Place all TypeScript interfaces in the shared package at packages/shared/src/interfaces

Applied to files:

• packages/shared/src/interfaces/user-profile.interface.ts

📚 Learning: 2025-09-16T03:32:46.518Z

Learnt from: CR
PR: linuxfoundation/lfx-v2-ui#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T03:32:46.518Z
Learning: Applies to packages/shared/src/enums/**/*.ts : Place all enums in the shared package at packages/shared/src/enums

Applied to files:

• packages/shared/src/enums/nats.enum.ts

🧬 Code graph analysis (6)

apps/lfx-one/src/app/shared/services/user.service.ts (1)

packages/shared/src/interfaces/user-profile.interface.ts (1)

• AddEmailRequest (53-55)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

• Component (30-345)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

packages/shared/src/interfaces/user-profile.interface.ts (1)

• UserEmail (25-35)

apps/lfx-one/src/server/services/email.service.ts (2)

apps/lfx-one/src/server/services/nats.service.ts (1)

• NatsService (13-133)

packages/shared/src/constants/api.constants.ts (1)

• NATS_CONFIG (28-43)

apps/lfx-one/src/server/services/user.service.ts (2)

packages/shared/src/interfaces/user-profile.interface.ts (1)

• UserEmailsResponse (183-187)

packages/shared/src/constants/api.constants.ts (1)

• NATS_CONFIG (28-43)

apps/lfx-one/src/server/controllers/profile.controller.ts (2)

apps/lfx-one/src/server/services/email.service.ts (1)

• EmailService (68-348)

packages/shared/src/interfaces/user-profile.interface.ts (3)

• UserEmail (25-35)
• EmailManagementData (69-72)
• AddEmailRequest (53-55)

🔇 Additional comments (10)

apps/lfx-one/src/server/controllers/profile.controller.ts (3)

7-7: LGTM - Imports and service initialization.

The imports and EmailService field initialization follow the same pattern as existing services in the controller.

Also applies to: 10-10, 19-19, 30-30

---

465-509: LGTM - Email verification endpoint.

The endpoint has appropriate validation, logging, and error handling. The EmailService performs additional validation including email format checking.

---

511-573: Verify authorization checks in the auth-service microservice repository.

The SSR server correctly delegates identity linking authorization to a separate NATS-based auth service. The endpoint passes both the user's bearer token and the identity token from OTP verification. However, the auth service implementation is in a separate microservice repository (not in this codebase), so I cannot verify that it performs the required authorization checks.

To complete this verification, manually confirm in the auth-service repository that the user-identity/link NATS handler validates:

• Bearer token validity and user identity
• User authorization to link the email to their account
• Email is not already linked to another user

The current SSR code correctly delegates the responsibility; verification requires inspecting the auth-service implementation directly.

apps/lfx-one/src/server/services/email.service.ts (3)

14-73: LGTM - Interface definitions and constructor.

The internal interfaces are well-structured for the three-step verification flow. The NatsService is properly instantiated and manages connection pooling internally.

---

162-243: LGTM - OTP verification logic.

The method properly validates the 6-digit OTP format and handles error cases appropriately. The string matching concern is addressed in a previous comment.

---

329-347: LGTM - Orchestration logic is sound.

The method properly chains the OTP verification and identity linking steps, with appropriate validation between steps.

packages/shared/src/enums/nats.enum.ts (1)

13-19: LGTM - NATS subject additions.

The new enum members follow consistent naming conventions and are appropriately categorized with inline comments. They align with the email verification and linking flow implemented in the EmailService.

Based on learnings

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (3)

29-49: LGTM - Timer and form initialization.

The 5-minute timer and 6-digit form setup with per-digit validation are appropriate for the OTP verification flow.

---

51-70: LGTM - Lifecycle hooks.

Proper initialization with auto-focus and cleanup with the destroy$ subject for subscription management.

---

211-309: LGTM - Keyboard navigation and paste handling.

The keyboard event handlers provide excellent UX with backspace, arrow key navigation, and comprehensive paste support. The duplicate paste logic concern is addressed in the previous comment.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

132-132: Remove debug console.log.

Debug logging should be removed before merging to production.

Apply this diff:

           // Set error message AFTER reset to prevent it from being cleared
           this.errorMessage.set(errorMsg);
-          console.log('Error message signal value:', this.errorMessage());
         },
       });

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e6001d5 and 3b3e6b1.

📒 Files selected for processing (3)

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html (1 hunks)
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1 hunks)
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (7 hunks)

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

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.html

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts

**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}

📄 CodeRabbit inference engine (CLAUDE.md)

Include required license headers on all source files

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Do not nest ternary expressions

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts

🧬 Code graph analysis (2)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

• Component (30-345)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

packages/shared/src/interfaces/user-profile.interface.ts (1)

• UserEmail (25-35)

🔇 Additional comments (4)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (2)

100-102: Feature flags properly documented.

The temporarily disabled features are clearly marked with inline comments and hard-coded flags. This approach provides transparency about the current implementation status.

---

152-186: Modal result handling is well-structured.

The three distinct outcomes (success, alreadyLinked, cancelled) are handled appropriately with different UI responses—inline errors for field-level issues and toasts for system-level feedback.

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (2)

56-73: Lifecycle management is correct.

The use of takeUntilDestroyed() via destroyRef properly handles cleanup for the form subscription and timer intervals when the component is destroyed.

---

75-135: Error handling covers multiple scenarios well.

The method distinguishes between "already linked," OTP verification failures, and generic errors, providing appropriate feedback for each case. The sequence of resetting the form before setting the error message prevents the error from being immediately cleared.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (4)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (3)

130-152: Consider extracting error message detection logic.

The error message extraction and "already linked" detection logic (lines 134-143) is somewhat complex and similar patterns appear in the modal's error handling. Consider extracting this to a helper method to improve maintainability.

Example refactor:

private isAlreadyLinkedError(error: any): boolean {
  const specificMessage = error.error?.errors?.[0]?.message || '';
  const genericMessage = error.error?.message || error.message || '';
  const errorText = (specificMessage + ' ' + genericMessage).toLowerCase();
  return errorText.includes('already linked');
}

Then use it in both places:

if (this.isAlreadyLinkedError(error)) {
  this.emailFieldError.set('This email address is already in use.');
} else {
  // ... generic error handling
}

---

156-190: Extract duplicate error message string to a constant.

The error message "This email address is already in use." appears on both line 143 and line 181. Extract this to a private constant to maintain consistency.

Apply this diff:

 export class ProfileEmailComponent {
   private readonly userService = inject(UserService);
   private readonly confirmationService = inject(ConfirmationService);
   private readonly messageService = inject(MessageService);
   private readonly dialogService = inject(DialogService);
   private readonly destroyRef = takeUntilDestroyed();
+  
+  private readonly EMAIL_ALREADY_LINKED_ERROR = 'This email address is already in use.';

   // Dialog reference
   private dialogRef: DynamicDialogRef | undefined;

Then use it:

-            this.emailFieldError.set('This email address is already in use.');
+            this.emailFieldError.set(this.EMAIL_ALREADY_LINKED_ERROR);

-        this.emailFieldError.set('This email address is already in use.');
+        this.emailFieldError.set(this.EMAIL_ALREADY_LINKED_ERROR);

---

207-234: Consider removing commented-out code blocks.

The setPrimary method contains a large commented-out implementation (lines 215-233). Since this feature is temporarily disabled and tracked in the TODO comment, consider removing the commented code to reduce clutter. The implementation can be retrieved from git history when needed.

This same suggestion applies to the deleteEmail method (lines 245-274).

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

99-126: Consider extracting error handling logic to a shared utility.

The error extraction and classification logic (lines 99-126) has similarities with the parent component's error handling. Consider creating a shared error utility to handle email verification errors consistently across components.

Example utility:

// shared/utils/email-error.util.ts
export interface EmailVerificationError {
  isAlreadyLinked: boolean;
  isInvalidOtp: boolean;
  message: string;
}

export function parseEmailVerificationError(error: any): EmailVerificationError {
  const specificMessage = error.error?.errors?.[0]?.message || '';
  const genericMessage = error.error?.message || error.message || '';
  const errorCode = error.error?.error_code || '';
  const errorType = error.error?.error_type || '';
  const errorText = (specificMessage + ' ' + genericMessage + ' ' + errorCode).toLowerCase();
  
  return {
    isAlreadyLinked: errorText.includes('already linked'),
    isInvalidOtp: errorCode === 'OTP_VERIFICATION_FAILED' || errorType === '_MicroserviceError',
    message: errorText,
  };
}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3b3e6b1 and 3894895.

📒 Files selected for processing (2)

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1 hunks)
• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (8 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces

Files:

• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}

📄 CodeRabbit inference engine (CLAUDE.md)

Include required license headers on all source files

Files:

• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Do not nest ternary expressions

Files:

• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

🧠 Learnings (2)

📓 Common learnings

Learnt from: mauriciozanettisalomao
Repo: linuxfoundation/lfx-v2-ui PR: 130
File: apps/lfx-one/src/server/controllers/profile.controller.ts:303-370
Timestamp: 2025-10-31T14:39:34.327Z
Learning: The synthetic timestamps (created_at, updated_at, verified_at) in the getUserEmails transformation for apps/lfx-one/src/server/controllers/profile.controller.ts are temporary placeholders. Real timestamps will be included in the NATS response once the Auth0 backend implementation is complete.

📚 Learning: 2025-10-31T14:39:34.327Z

Learnt from: mauriciozanettisalomao
Repo: linuxfoundation/lfx-v2-ui PR: 130
File: apps/lfx-one/src/server/controllers/profile.controller.ts:303-370
Timestamp: 2025-10-31T14:39:34.327Z
Learning: The synthetic timestamps (created_at, updated_at, verified_at) in the getUserEmails transformation for apps/lfx-one/src/server/controllers/profile.controller.ts are temporary placeholders. Real timestamps will be included in the NATS response once the Auth0 backend implementation is complete.

Applied to files:

• apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts
• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

🧬 Code graph analysis (2)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

packages/shared/src/interfaces/user-profile.interface.ts (1)

• UserEmail (25-35)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

• Component (30-349)

🔇 Additional comments (6)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (2)

68-76: LGTM! Subscription cleanup properly implemented.

The form subscription now uses takeUntilDestroyed() which properly cleans up the subscription when the component is destroyed, addressing the memory leak concern from the previous review.

---

18-18: LGTM! DynamicDialog integration properly configured.

The DynamicDialog imports, module registration, and service injection are correctly set up to support the new email verification modal flow.

Also applies to: 23-23, 43-43, 47-47, 54-55

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (4)

1-3: LGTM! Required license header present.

The file includes the required Linux Foundation license header as per coding guidelines.

---

142-162: LGTM! Timer cleanup properly implemented.

The timer implementation now correctly prevents multiple concurrent intervals by tracking and unsubscribing the previous subscription (lines 144-146) before starting a new one. Combined with takeUntilDestroyed(), this ensures proper cleanup both on resend and component destroy.

---

57-74: LGTM! Thoughtful form subscription implementation.

The ngOnInit logic properly:

• Retrieves email from dialog config
• Starts the countdown timer
• Subscribes to form changes with proper cleanup via takeUntilDestroyed()
• Conditionally clears errors only when user is actively typing (line 70), preventing unwanted error clearing during programmatic form resets

---

164-201: LGTM! Resend flow properly implemented.

The resendCode method correctly:

• Manages loading state with the resending signal
• Resets all timer and form state on success
• Restarts the timer (which properly handles cleanup)
• Provides appropriate user feedback via toasts

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

96-135: Consider extracting error parsing logic.

The error handling correctly manages multiple backend formats (ServiceValidationError vs. microservice errors), and the special handling for "already linked" is appropriate. However, the parsing logic (lines 101-126) could be extracted to a helper method to improve testability and maintainability.

For example:

private parseVerificationError(error: any): { isAlreadyLinked: boolean; message: string } {
  const specificMessage = error.error?.errors?.[0]?.message || '';
  const genericMessage = error.error?.message || error.message || '';
  const errorCode = error.error?.error_code || '';
  const errorType = error.error?.error_type || '';
  const errorText = (specificMessage + ' ' + genericMessage + ' ' + errorCode).toLowerCase();
  
  if (errorText.includes('already linked')) {
    return { isAlreadyLinked: true, message: '' };
  }
  
  if (errorCode === 'OTP_VERIFICATION_FAILED' || errorType === '_MicroserviceError') {
    return { isAlreadyLinked: false, message: 'Invalid or expired verification code. Please try again.' };
  }
  
  return { isAlreadyLinked: false, message: 'Invalid verification code. Please try again.' };
}

Then simplify the error handler:

error: (error) => {
  console.error('Failed to verify code:', error);
  const parsed = this.parseVerificationError(error);
  
  if (parsed.isAlreadyLinked) {
    this.dialogRef.close({ alreadyLinked: true, email: this.email });
    return;
  }
  
  this.verificationForm.reset();
  this.errorMessage.set(parsed.message);
}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3894895 and 12134c9.

📒 Files selected for processing (1)

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}

📄 CodeRabbit inference engine (CLAUDE.md)

Include required license headers on all source files

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Do not nest ternary expressions

Files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

🧠 Learnings (2)

📓 Common learnings

Learnt from: mauriciozanettisalomao
Repo: linuxfoundation/lfx-v2-ui PR: 130
File: apps/lfx-one/src/server/controllers/profile.controller.ts:303-370
Timestamp: 2025-10-31T14:39:34.327Z
Learning: The synthetic timestamps (created_at, updated_at, verified_at) in the getUserEmails transformation for apps/lfx-one/src/server/controllers/profile.controller.ts are temporary placeholders. Real timestamps will be included in the NATS response once the Auth0 backend implementation is complete.

📚 Learning: 2025-10-31T14:39:34.327Z

Learnt from: mauriciozanettisalomao
Repo: linuxfoundation/lfx-v2-ui PR: 130
File: apps/lfx-one/src/server/controllers/profile.controller.ts:303-370
Timestamp: 2025-10-31T14:39:34.327Z
Learning: The synthetic timestamps (created_at, updated_at, verified_at) in the getUserEmails transformation for apps/lfx-one/src/server/controllers/profile.controller.ts are temporary placeholders. Real timestamps will be included in the NATS response once the Auth0 backend implementation is complete.

Applied to files:

• apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts

🧬 Code graph analysis (1)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (1)

apps/lfx-one/src/app/modules/profile/email/profile-email.component.ts (1)

• Component (30-349)

🔇 Additional comments (5)

apps/lfx-one/src/app/modules/profile/email/email-verification-modal/email-verification-modal.component.ts (5)

1-24: LGTM! Clean component setup.

The license header, imports, and component configuration follow Angular best practices. Using a standalone component with localized MessageService provider is appropriate for this modal.

---

25-56: Well-structured state management.

The use of signals for reactive state and a simple FormGroup with pattern validation is clean. Timer subscription tracking ensures proper cleanup.

---

57-74: LGTM! Thoughtful initialization logic.

The conditional error clearing (only when value is truthy) prevents the message from disappearing on reset, which is good UX. Timer starts appropriately on init.

---

141-161: Excellent timer implementation.

The timer correctly prevents multiple concurrent intervals (lines 143-145) and uses takeUntilDestroyed() for automatic cleanup, which resolves the issues from previous reviews. The form disabling on expiry is appropriate.

---

163-200: LGTM! Clean resend flow.

The resend logic properly resets all state (timer, form, flags) and restarts the timer. The toast notifications provide clear user feedback.