-
Notifications
You must be signed in to change notification settings - Fork 5
Frontend/licensee change email #922
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Frontend/licensee change email #922
Conversation
WalkthroughThe changes implement a multi-step email update and verification flow for licensee (practitioner) users. Licensees updating their email now trigger a modal to enter a verification code sent to the new address. The update includes new API methods, UI modal logic, localization strings, and supporting CSS and mocks, with staff and licensee flows separated. Changes
Sequence Diagram(s)sequenceDiagram
participant LicenseeUser
participant UserAccountComponent
participant DataApi
participant UserDataApi
participant Modal
LicenseeUser->>UserAccountComponent: Submit new email
UserAccountComponent->>DataApi: updateAuthenticatedLicenseeUserEmail(newEmail)
DataApi->>UserDataApi: PATCH /v1/provider-users/me/email
UserDataApi-->>DataApi: Response
DataApi-->>UserAccountComponent: Response
UserAccountComponent->>Modal: Show verification modal
LicenseeUser->>Modal: Enter verification code
Modal->>UserAccountComponent: Submit code
UserAccountComponent->>DataApi: verifyAuthenticatedLicenseeUserEmail(code)
DataApi->>UserDataApi: POST /v1/provider-users/me/email/verify
UserDataApi-->>DataApi: Response
DataApi-->>UserAccountComponent: Response
UserAccountComponent->>Modal: Show success or error
Assessment against linked issues
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧠 Learnings (2)📓 Common learnings
webroot/src/components/UserAccount/UserAccount.ts (15)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (10)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
webroot/src/components/Forms/_mixins/form.mixin.ts
(1 hunks)webroot/src/components/UserAccount/UserAccount.less
(1 hunks)webroot/src/components/UserAccount/UserAccount.ts
(5 hunks)webroot/src/components/UserAccount/UserAccount.vue
(1 hunks)webroot/src/locales/en.json
(1 hunks)webroot/src/locales/es.json
(1 hunks)webroot/src/network/data.api.ts
(1 hunks)webroot/src/network/mocks/mock.data.api.ts
(1 hunks)webroot/src/network/mocks/mock.data.ts
(4 hunks)webroot/src/network/userApi/data.api.ts
(1 hunks)webroot/src/network/userApi/interceptors.ts
(1 hunks)
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/provider-data-v1/handlers/registration.py:111-117
Timestamp: 2025-06-17T19:05:36.255Z
Learning: In CompactConnect PR #848, the user landonshumway-ia decided to leave timezone handling code in _should_allow_reregistration function as-is after testing in sandbox environment confirmed it works correctly. The user's reasoning was that reregistration is an edge case, the code has been tested and verified, and AWS is unlikely to change behavior that would break many clients. This represents a pragmatic engineering decision based on testing and risk assessment.
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/migration/provider_user_pool_migration_551/main.py:35-39
Timestamp: 2025-06-10T03:16:16.896Z
Learning: In the provider user pool migration (provider_user_pool_migration_551), the FilterExpression intentionally only checks for the existence of compactConnectRegisteredEmailAddress. The migration should only remove currentHomeJurisdiction if compactConnectRegisteredEmailAddress is also present, targeting records that went through the old registration process. Records with only currentHomeJurisdiction but no compactConnectRegisteredEmailAddress should be left untouched.
webroot/src/components/Forms/_mixins/form.mixin.ts (2)
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.ts:77-89
Timestamp: 2025-05-28T19:57:53.185Z
Learning: In TypeScript, when dealing with union types that include arrays, direct assignment after filtering can cause compilation errors. The pattern `(formInput.value as Array<string>) = ...` is valid syntax for type assertion on the left-hand side of assignments and can be used as a workaround when TypeScript struggles with type inference on complex nested properties.
Learnt from: rmolinares
PR: csg-org/CompactConnect#843
File: webroot/src/components/Forms/InputDate/InputDate.ts:0-0
Timestamp: 2025-06-04T22:04:14.373Z
Learning: In the InputDate component (webroot/src/components/Forms/InputDate/InputDate.ts), immediate validation on every keystroke is intentional design behavior. The team prefers to alert users to encourage expected date format completion rather than deferring validation until the date is complete. This provides immediate feedback to guide users toward proper MM/dd/yyyy format completion.
webroot/src/network/mocks/mock.data.ts (3)
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#769
File: backend/compact-connect/lambdas/python/common/tests/resources/dynamo/provider.json:5-5
Timestamp: 2025-04-29T01:57:43.684Z
Learning: The provider.json test data contains both "providerDateOfUpdate" and "dateOfUpdate" fields which serve different purposes, and both should be maintained in the test files.
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#769
File: backend/compact-connect/lambdas/python/provider-data-v1/tests/function/test_handlers/test_encumbrance.py:138-147
Timestamp: 2025-04-29T02:52:40.532Z
Learning: In CompactConnect tests, hardcoded values (like license type abbreviations 'slp') in test queries are sometimes used intentionally rather than using dynamic lookups. This is a deliberate design decision to make tests fail if default test data changes, requiring developers to consciously update related tests.
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/migration/provider_user_pool_migration_551/main.py:35-39
Timestamp: 2025-06-10T03:16:16.896Z
Learning: In the provider user pool migration (provider_user_pool_migration_551), the FilterExpression intentionally only checks for the existence of compactConnectRegisteredEmailAddress. The migration should only remove currentHomeJurisdiction if compactConnectRegisteredEmailAddress is also present, targeting records that went through the old registration process. Records with only currentHomeJurisdiction but no compactConnectRegisteredEmailAddress should be left untouched.
webroot/src/components/UserAccount/UserAccount.vue (4)
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.vue:26-30
Timestamp: 2025-05-28T16:13:19.506Z
Learning: In the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.vue), the formInput.labelSubtext property rendered with v-html contains only developer-controlled content, not user-controlled content, so XSS concerns do not apply.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/LicenseCard/LicenseCard.ts:414-443
Timestamp: 2025-06-24T00:02:39.944Z
Learning: In LicenseCard component's clickUnencumberItem method (webroot/src/components/LicenseCard/LicenseCard.ts), complex event handling for checkbox interactions is intentionally designed to ensure consistent behavior across checkbox input, wrapper label, and outer selection parent elements for custom UI requirements. This complexity should be preserved rather than simplified.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.less:17-26
Timestamp: 2025-05-28T16:10:55.628Z
Learning: The `.add-email-help` element in the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.less) is display-only and not meant to handle interaction states like hover or focus. It should not have cursor: pointer or interactive styling.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/PrivilegeCard/PrivilegeCard.ts:0-0
Timestamp: 2025-06-19T23:43:25.512Z
Learning: In Vue form components, when programmatically setting form input values, it's more efficient to validate just the specific form element being updated (e.g., `formInput.validate()`) rather than calling `validateAll()` on the entire form.
webroot/src/components/UserAccount/UserAccount.less (2)
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.less:17-26
Timestamp: 2025-05-28T16:10:55.628Z
Learning: The `.add-email-help` element in the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.less) is display-only and not meant to handle interaction states like hover or focus. It should not have cursor: pointer or interactive styling.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/styles.common/_inputs.less:115-118
Timestamp: 2025-06-24T00:17:31.188Z
Learning: The team intentionally uses broad CSS selectors like `.dp__input_wrap div { position: static; }` to fix styling issues with the Vue Date-Picker library. They have experience with these styles working well, keep the library version pinned in yarn.lock, and have established processes to re-test everything when updating the library version. This approach is acceptable given their testing discipline and version control.
webroot/src/components/UserAccount/UserAccount.ts (7)
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/LicenseCard/LicenseCard.ts:414-443
Timestamp: 2025-06-24T00:02:39.944Z
Learning: In LicenseCard component's clickUnencumberItem method (webroot/src/components/LicenseCard/LicenseCard.ts), complex event handling for checkbox interactions is intentionally designed to ensure consistent behavior across checkbox input, wrapper label, and outer selection parent elements for custom UI requirements. This complexity should be preserved rather than simplified.
Learnt from: rmolinares
PR: csg-org/CompactConnect#851
File: webroot/src/pages/RegisterLicensee/RegisterLicensee.ts:0-0
Timestamp: 2025-06-09T19:57:51.519Z
Learning: In the RegisterLicensee component, when handling DOM element availability issues, the developer prefers using Vue Watchers over retry mechanisms with requestAnimationFrame to avoid infinite recursion risks and maintain Vue's reactive patterns.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.vue:26-30
Timestamp: 2025-05-28T16:13:19.506Z
Learning: In the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.vue), the formInput.labelSubtext property rendered with v-html contains only developer-controlled content, not user-controlled content, so XSS concerns do not apply.
Learnt from: rmolinares
PR: csg-org/CompactConnect#905
File: webroot/src/components/UpdateHomeJurisdiction/UpdateHomeJurisdiction.vue:32-41
Timestamp: 2025-07-03T15:35:57.893Z
Learning: In the CompactConnect frontend codebase, the team prefers to keep non-dynamic text directly in Vue templates rather than moving it to computed properties in TypeScript modules, as this approach prevents cluttering the TS files with template labels.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/styles.common/_inputs.less:115-118
Timestamp: 2025-06-24T00:17:31.188Z
Learning: The team intentionally uses broad CSS selectors like `.dp__input_wrap div { position: static; }` to fix styling issues with the Vue Date-Picker library. They have experience with these styles working well, keep the library version pinned in yarn.lock, and have established processes to re-test everything when updating the library version. This approach is acceptable given their testing discipline and version control.
Learnt from: rmolinares
PR: csg-org/CompactConnect#843
File: webroot/src/components/Forms/InputDate/InputDate.ts:0-0
Timestamp: 2025-06-04T22:04:14.373Z
Learning: In the InputDate component (webroot/src/components/Forms/InputDate/InputDate.ts), immediate validation on every keystroke is intentional design behavior. The team prefers to alert users to encourage expected date format completion rather than deferring validation until the date is complete. This provides immediate feedback to guide users toward proper MM/dd/yyyy format completion.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/PrivilegeCard/PrivilegeCard.ts:0-0
Timestamp: 2025-06-19T23:43:25.512Z
Learning: In Vue form components, when programmatically setting form input values, it's more efficient to validate just the specific form element being updated (e.g., `formInput.validate()`) rather than calling `validateAll()` on the entire form.
🧬 Code Graph Analysis (1)
webroot/src/network/data.api.ts (1)
webroot/src/network/userApi/data.api.ts (1)
userDataApi
(391-391)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: CheckWebroot
🔇 Additional comments (11)
webroot/src/network/userApi/interceptors.ts (1)
22-23
: LGTM! Proper endpoint authorization configuration.The new email-related endpoints are correctly added to the
licenseeUserEndPoints
array, ensuring they use licensee authentication tokens as expected for user-specific operations.webroot/src/network/mocks/mock.data.ts (1)
1499-1500
: LGTM! Well-structured mock data updates.The changes properly update the test email addresses to use the RFC 2606 reserved domain "example.com" and consistently add the
compactConnectRegisteredEmailAddress
field across all licensee entries, supporting the new email verification workflow.Also applies to: 1749-1750, 1816-1817, 1905-1906
webroot/src/components/Forms/_mixins/form.mixin.ts (1)
38-42
: LGTM! Excellent form data quality improvement.The type-safe string trimming logic ensures cleaner form submissions by removing leading/trailing whitespace from string values while preserving non-string values unchanged. This is a solid defensive programming practice.
webroot/src/locales/en.json (1)
843-848
: LGTM - Well-structured localization strings for email verificationThe new email verification strings are clear, informative, and follow the existing naming conventions. The subtext appropriately informs users about the 15-minute code expiration.
webroot/src/network/data.api.ts (1)
392-408
: LGTM - Consistent API delegation for email update and verificationThe new methods follow the established delegation pattern and are properly documented. The separation of email update and verification into distinct methods provides good security separation.
webroot/src/locales/es.json (1)
842-847
: LGTM - Accurate Spanish translations maintain consistencyThe Spanish translations are accurate and maintain the same informative tone as the English versions. The key consistency ensures proper internationalization support.
webroot/src/network/userApi/data.api.ts (1)
256-276
: LGTM - Well-designed email update and verification API methodsThe implementation follows proper REST conventions with PATCH for email updates and POST for verification. The endpoints are appropriately scoped to the authenticated user and follow established patterns in the codebase.
webroot/src/network/mocks/mock.data.api.ts (1)
362-374
: LGTM! Mock implementation aligns with the email verification flow.The mock methods correctly simulate the email update and verification process, with appropriate error handling when the verification code is missing.
webroot/src/components/UserAccount/UserAccount.vue (1)
12-76
: Well-implemented email verification modal with good accessibility features.The modal implementation includes proper keyboard navigation with tab trap and escape key handling. The conditional content based on verification success state provides a good user experience.
webroot/src/components/UserAccount/UserAccount.less (1)
35-145
: Clean and responsive modal styles.The styles are well-structured with appropriate responsive breakpoints. The verification code input styling and success state presentation enhance the user experience.
webroot/src/components/UserAccount/UserAccount.ts (1)
204-222
: Good implementation of email change validation.The method correctly checks if the email has changed before making the API call, preventing unnecessary requests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
♻️ Duplicate comments (1)
webroot/src/components/UserAccount/UserAccount.ts (1)
144-153
: Email field disability logic is correctly implemented.The email field is properly disabled for staff users (
isDisabled: this.isStaff
) and enabled for licensees, which aligns with the PR objectives. Licensees can update their email through the verification flow, while staff users cannot modify their email through this interface.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
webroot/src/components/Forms/_mixins/mixins.spec.ts
(1 hunks)webroot/src/components/UserAccount/UserAccount.ts
(5 hunks)webroot/src/components/UserAccount/UserAccount.vue
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- webroot/src/components/UserAccount/UserAccount.vue
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/provider-data-v1/handlers/registration.py:111-117
Timestamp: 2025-06-17T19:05:36.255Z
Learning: In CompactConnect PR #848, the user landonshumway-ia decided to leave timezone handling code in _should_allow_reregistration function as-is after testing in sandbox environment confirmed it works correctly. The user's reasoning was that reregistration is an edge case, the code has been tested and verified, and AWS is unlikely to change behavior that would break many clients. This represents a pragmatic engineering decision based on testing and risk assessment.
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/migration/provider_user_pool_migration_551/main.py:35-39
Timestamp: 2025-06-10T03:16:16.896Z
Learning: In the provider user pool migration (provider_user_pool_migration_551), the FilterExpression intentionally only checks for the existence of compactConnectRegisteredEmailAddress. The migration should only remove currentHomeJurisdiction if compactConnectRegisteredEmailAddress is also present, targeting records that went through the old registration process. Records with only currentHomeJurisdiction but no compactConnectRegisteredEmailAddress should be left untouched.
webroot/src/components/UserAccount/UserAccount.ts (9)
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/LicenseCard/LicenseCard.ts:414-443
Timestamp: 2025-06-24T00:02:39.944Z
Learning: In LicenseCard component's clickUnencumberItem method (webroot/src/components/LicenseCard/LicenseCard.ts), complex event handling for checkbox interactions is intentionally designed to ensure consistent behavior across checkbox input, wrapper label, and outer selection parent elements for custom UI requirements. This complexity should be preserved rather than simplified.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.vue:26-30
Timestamp: 2025-05-28T16:13:19.506Z
Learning: In the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.vue), the formInput.labelSubtext property rendered with v-html contains only developer-controlled content, not user-controlled content, so XSS concerns do not apply.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#822
File: webroot/src/components/Forms/InputEmailList/InputEmailList.less:17-26
Timestamp: 2025-05-28T16:10:55.628Z
Learning: The `.add-email-help` element in the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.less) is display-only and not meant to handle interaction states like hover or focus. It should not have cursor: pointer or interactive styling.
Learnt from: landonshumway-ia
PR: csg-org/CompactConnect#848
File: backend/compact-connect/lambdas/python/migration/provider_user_pool_migration_551/main.py:35-39
Timestamp: 2025-06-10T03:16:16.896Z
Learning: In the provider user pool migration (provider_user_pool_migration_551), the FilterExpression intentionally only checks for the existence of compactConnectRegisteredEmailAddress. The migration should only remove currentHomeJurisdiction if compactConnectRegisteredEmailAddress is also present, targeting records that went through the old registration process. Records with only currentHomeJurisdiction but no compactConnectRegisteredEmailAddress should be left untouched.
Learnt from: rmolinares
PR: csg-org/CompactConnect#851
File: webroot/src/pages/RegisterLicensee/RegisterLicensee.ts:0-0
Timestamp: 2025-06-09T19:57:51.519Z
Learning: In the RegisterLicensee component, when handling DOM element availability issues, the developer prefers using Vue Watchers over retry mechanisms with requestAnimationFrame to avoid infinite recursion risks and maintain Vue's reactive patterns.
Learnt from: rmolinares
PR: csg-org/CompactConnect#905
File: webroot/src/components/UpdateHomeJurisdiction/UpdateHomeJurisdiction.vue:32-41
Timestamp: 2025-07-03T15:35:57.893Z
Learning: In the CompactConnect frontend codebase, the team prefers to keep non-dynamic text directly in Vue templates rather than moving it to computed properties in TypeScript modules, as this approach prevents cluttering the TS files with template labels.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/styles.common/_inputs.less:115-118
Timestamp: 2025-06-24T00:17:31.188Z
Learning: The team intentionally uses broad CSS selectors like `.dp__input_wrap div { position: static; }` to fix styling issues with the Vue Date-Picker library. They have experience with these styles working well, keep the library version pinned in yarn.lock, and have established processes to re-test everything when updating the library version. This approach is acceptable given their testing discipline and version control.
Learnt from: rmolinares
PR: csg-org/CompactConnect#843
File: webroot/src/components/Forms/InputDate/InputDate.ts:0-0
Timestamp: 2025-06-04T22:04:14.373Z
Learning: In the InputDate component (webroot/src/components/Forms/InputDate/InputDate.ts), immediate validation on every keystroke is intentional design behavior. The team prefers to alert users to encourage expected date format completion rather than deferring validation until the date is complete. This provides immediate feedback to guide users toward proper MM/dd/yyyy format completion.
Learnt from: jsandoval81
PR: csg-org/CompactConnect#873
File: webroot/src/components/PrivilegeCard/PrivilegeCard.ts:0-0
Timestamp: 2025-06-19T23:43:25.512Z
Learning: In Vue form components, when programmatically setting form input values, it's more efficient to validate just the specific form element being updated (e.g., `formInput.validate()`) rather than calling `validateAll()` on the entire form.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: CheckWebroot
🔇 Additional comments (5)
webroot/src/components/Forms/_mixins/mixins.spec.ts (1)
37-47
: LGTM! Test properly verifies string trimming functionality.The test correctly validates that the
formValues
getter trims whitespace from string values, ensuring the form mixin's new trimming behavior is working as expected.webroot/src/components/UserAccount/UserAccount.ts (4)
48-54
: LGTM! Well-structured data properties for email verification state.The new data properties properly track the email verification modal state and provide clear separation of concerns for the multi-step verification process.
163-176
: LGTM! Clean separation of staff and licensee update flows.The refactored
handleSubmit
method properly delegates to specific update methods based on user type, improving code organization and maintainability.
260-287
: LGTM! Well-implemented email verification with proper error handling.The email verification method properly handles validation, API calls, error states, and success flows. The focus management and store updates are appropriately handled.
225-239
: Add null safety for DOM element access.The modal open/close methods access DOM elements without null checking, which could cause runtime errors if elements don't exist.
Apply this diff to add null safety:
async openEmailVerificationModal(): Promise<void> { this.isEmailVerificationModalDisplayed = true; this.initFormInputs(); await nextTick(); - document.getElementById(this.formData.emailVerificationCode.id)?.focus(); + const emailInput = document.getElementById(this.formData.emailVerificationCode.id); + if (emailInput) emailInput.focus(); } async closeEmailVerificationModal(): Promise<void> { this.isEmailVerificationModalDisplayed = false; this.isEmailVerificationModalSuccess = false; this.emailVerificationErrorMessage = ''; this.initFormInputs(); await nextTick(); - document.getElementById(this.formData.submitUserUpdate.id)?.focus(); + const submitButton = document.getElementById(this.formData.submitUserUpdate.id); + if (submitButton) submitButton.focus(); }⛔ Skipped due to learnings
Learnt from: jsandoval81 PR: csg-org/CompactConnect#822 File: webroot/src/components/Forms/InputEmailList/InputEmailList.less:17-26 Timestamp: 2025-05-28T16:10:55.628Z Learning: The `.add-email-help` element in the InputEmailList component (webroot/src/components/Forms/InputEmailList/InputEmailList.less) is display-only and not meant to handle interaction states like hover or focus. It should not have cursor: pointer or interactive styling.
@jlkravitz This is ready for your review. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good! just one accessibility issue i found
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@isabeleliassen good to merge!
Requirements List
Description List
Testing List
yarn test:unit:all
should run without errors or warningsyarn serve
should run without errors or warningsyarn build
should run without errors or warnings...+
variation of your current address will make this easier, since you won't need a separate inbox accountCloses #532
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Style
Chores