Skip to content

Component Name: resetPassword

Last Updated: 2025-10-22 Source Code: https://github.com/AANP-IT/I2C.Salesforce.Metadata/tree/STAGING/force-app/main/default/lwc/resetPassword

API Name: c-resetPassword Type: Form Component Target: lightningCommunity__Page, lightningCommunity__Default

Business Purpose

The resetPassword component provides a password change interface for authenticated AANP users. Despite its name suggesting "reset," this component actually handles password changes (not email-based resets), requiring the current password for security. It includes comprehensive real-time password validation with visual feedback indicators to ensure users create strong, policy-compliant passwords.

CRITICAL NOTE: There is a naming/functionality mismatch - the component is named "resetPassword" but the class is "RegisterAccountForm" and it functions as a password change tool (requires current password), not a password reset tool (which typically doesn't require current password and works via email tokens).

User Interface

Visual Description

  • Layout: Single-column centered card with 2-column password entry form
  • Key UI Elements:
  • Header Section: Full-width blue background with white "Change Your Password" title
  • Form Card: White card on light gray background with shadow
  • Password Fields (Left Column):
    • Current Password input (required)
    • New Password input (required)
    • Re-enter New Password input (required)
  • Validation Indicators (Right Column):
    • Real-time checklist with 6 requirements
    • Dynamic icons: Red X (failed) → Green checkmark (passed)
    • Requirements: Length (8+), uppercase, lowercase, number, special char, password match
  • Submit Button: Large rounded pill button with loading spinner
  • Success/Error Messages: Centered above button (green success, red error)
  • Responsive:
  • Desktop: 2-column layout (passwords left, requirements right)
  • Mobile: Single column stacked layout
  • Centered card constrainedto col-lg-8 col-xl-7

Screenshots

  • Desktop view: Side-by-side password fields and requirements checklist
  • Mobile view: Stacked vertical layout
  • Validation active: Green checkmarks appearing as requirements met
  • Success state: Green "Password changed successfully" message

Component Structure

Files

  • resetPassword.html - Template/markup
  • resetPassword.js - JavaScript controller
  • resetPassword.css - Custom styling
  • resetPassword.js-meta.xml - Metadata configuration

HTML Template Structure

<template>
  <section class="container-fluid">
    <!-- Blue header -->
    <div class="membership">
      <div class="membership-background"></div>
      <div class="container">
        <h1 class="text-white">Change Your Password</h1>
      </div>

      <!-- Form card -->
      <div class="container-lg">
        <div class="card">
          <form onsubmit={handleFormSubmit}>
            <div class="card-body bg-light">
              <h4>Change Your Password</h4>

              <!-- Password section -->
              <div class="bg-white shadow">
                <div class="row">
                  <!-- Left: Password fields -->
                  <div class="col-12 col-md-6">
                    <c-form-input label="Current Password" type="password" />
                    <c-form-input label="New Password" type="password" />
                    <c-form-input label="Re-enter New Password" type="password" />
                  </div>

                  <!-- Right: Requirements checklist -->
                  <div class="col-12 col-md-6">
                    <div>Passwords must:</div>
                    <div data-check="length_ch">
                      <span class="icon cross-icon"></span>
                      <span>Be at least 8 characters in length</span>
                    </div>
                    <div data-check="uppercase_ch">
                      <span class="icon cross-icon"></span>
                      <span>Contain 1 uppercase letter</span>
                    </div>
                    <!-- ... 4 more requirements ... -->
                    <div data-check="match_ch">
                      <span class="icon cross-icon"></span>
                      <span>Match the "Re-enter Password" field</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Messages and button -->
              <div if:true={formErrorMessage} class="is-invalid">{formErrorMessage}</div>
              <div if:true={successMessage} class="is-valid">{successMessage}</div>
              <button type="submit" disabled={isFormLoading}>
                <template lwc:if={isFormLoading}>
                  <div class="spinner-border"></div>
                </template>
                <template lwc:else>Change Password</template>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
</template>

Key Template Features: - Bootstrap responsive grid (2-column on desktop, stacked on mobile) - Custom c-form-input components for password fields - Real-time validation indicators with data-check attributes - Conditional rendering for loading/success/error states - Dynamic icon classes (check-icon vs cross-icon) - Inline SVG icons via CSS mask

JavaScript Controller

Properties (API)

No public @api properties - this is a standalone page component.

Tracked Properties

@track formHasErrors

  • Type: Boolean
  • Purpose: Tracks if form has validation errors
  • Updated When: Set by validateForm() method

@track isFormLoading

  • Type: Boolean
  • Purpose: Controls loading state during password update
  • Updated When: Set to true on submit, false after Apex call completes

@track account

  • Type: Object
  • Purpose: Stores password form data
  • Structure: 
    {
  currentPassword: "",    // User's current password
  password: "",           // New password
  confirmPassword: ""     // Password confirmation
}

Non-Tracked Properties

formErrorMessage

  • Type: String
  • Default: ''
  • Purpose: Displays error message from Apex on password update failure

successMessage

  • Type: String
  • Default: ''
  • Purpose: Displays "Password changed successfully" on success

Wire Adapters

None - component uses imperative Apex calls and form inputs.

Public Methods

None - component has no @api methods.

Event Handlers

handleInputChange(event)

handleInputChange(event) {
  const { fieldName, value } = event.detail;
  this.account[fieldName] = value;
}

Triggered By: c-form-input components (generic handler, not currently used) Event Type: Custom event from c-form-input Event Detail: { fieldName, value } Action: Updates account object property

handleCurrentPasswordChange(event)

handleCurrentPasswordChange(event) {
  this.account.currentPassword = event.detail.value;
}

Triggered By: Current Password input field change Event Type: Custom 'input' event from c-form-input Event Detail: { value: string } Action: Updates currentPassword in account object

handlePasswordChange(event)

handlePasswordChange(event) {
  this.account.password = event.detail.value;
  this.validatePassword();
}

Triggered By: New Password input field change Event Type: Custom 'input' event from c-form-input Event Detail: { value: string } Action: 1. Updates password in account object 2. Triggers real-time validation with visual feedback

handlePasswordRepeatChange(event)

handlePasswordRepeatChange(event) {
  this.account.confirmPassword = event.detail.value;
  this.validatePassword();
}

Triggered By: Re-enter Password input field change Event Type: Custom 'input' event from c-form-input Event Detail: { value: string } Action: 1. Updates confirmPassword in account object 2. Triggers validation including password match check

handleFormSubmit(event)

async handleFormSubmit(event) {
  event.preventDefault();
  this.isFormLoading = true;

  const isValid = this.validateForm();
  const isPasswordValid = this.validatePassword();
  console.log("account", this.account); // SECURITY ISSUE

  if (isValid && isPasswordValid) {
    this.resetPassword();
  } else {
    this.isFormLoading = false;
  }
}

Triggered By: Form submit (button click or Enter key) Event Type: Submit event Action: 1. Prevents default form submission 2. Sets loading state 3. Validates all form inputs 4. Validates password requirements 5. Logs account data to console (SECURITY CONCERN - passwords logged) 6. Calls resetPassword() if valid, else clears loading state

Private Methods

validateForm()

Purpose: Validates all form inputs using c-form-input components Called By: handleFormSubmit() Returns: Boolean (true if all inputs valid, false otherwise) Implementation: - Queries all c-form-input components in template - Calls validateInput() on each - Sets formHasErrors based on results

validatePassword()

Purpose: Validates password against policy requirements with real-time visual feedback Called By: handlePasswordChange(), handlePasswordRepeatChange(), handleFormSubmit() Returns: Boolean (true if all requirements met, false otherwise) Implementation: - Defines 5 regex patterns (length, uppercase, lowercase, number, special char) - Tests password against each pattern - Updates icon classes (check-icon vs cross-icon) for each requirement - Checks password match separately - Returns early with cross icons if both fields empty - Uses toggleIconClass() to update UI

Password Requirements: - /^.{8,}$/ - At least 8 characters - /[A-Z]/ - Contains uppercase letter - /[a-z]/ - Contains lowercase letter - /[0-9]/ - Contains number - /[!@#$%^&*(),.?":{}|<>]/ - Contains special character - Passwords must match

toggleIconClass(element, addClass, removeClass)

Purpose: Utility to add/remove CSS classes for validation icons Parameters: - element - DOM element - addClass - Class to add - removeClass - Class to remove Implementation: Safely adds/removes classes with null checks

resetPassword()

Purpose: Calls Apex to update password and handles response Called By: handleFormSubmit() when valid Implementation: 

async resetPassword() {
  try {
    await updateUserPassword({
      oldPassword: this.account.currentPassword,
      newPassword: this.account.password,
      verifyNewPassword: this.account.confirmPassword
    })
    this.successMessage = 'Password changed successfully';
    this.formErrorMessage = '';
    setTimeout(() => {
      this.navigateToMyAccount();
    }, 2000)
  }
  catch (error) {
    console.error("Password change error:", { error });
    this.formErrorMessage = error?.body?.message;
  }
  this.isFormLoading = false;
}

Error Handling: Catches Apex errors and displays message Success Flow: Shows success message for 2 seconds, then navigates

Purpose: Navigates user to My Account page after successful password change Called By: resetPassword() after 2-second delay Implementation: Uses NavigationMixin to navigate to /my-account

Events

Events Dispatched

None - this component does not dispatch custom events.

Events Handled

inputchange / cinput (from c-form-input)

Source: c-form-input child components Purpose: Capture password field changes Handlers: handleCurrentPasswordChange, handlePasswordChange, handlePasswordRepeatChange

Styling (CSS)

CSS Variables Used

  • None - uses standard CSS properties

Custom CSS Classes

Layout & Background: - .membership-background - Transparent background - .membership - Transparent background - .bg-light-gray - #ededed background - .branding-dark-blue-bg - #0c3863 (primary brand color) - .branding-blue-bg - #3072d7 (secondary brand color)

Typography & Sections: - .box-section-heading - Blue underline, dark blue text, Open Sans font family - .text-light-gray - #434343 - .text-dark-gray - #6d6d6d - .branding-dark-blue-text - #0c3863

Validation Icons: - .icon - 1em x 1em inline block - .check-icon - Green checkmark (#00a874) using SVG data URI mask - .cross-icon - Red X (#de2f3d) using SVG data URI mask

Form Elements: - .form-control - 39px height - .is-invalid - Red border and text (#ae2a19) - .is-valid - Green text (#00a874) - .error-message - Red text (#ae2a19)

Buttons: - .btn.branding-dark-blue-bg[disabled] - Gray background, disabled cursor, reduced opacity

Other: - .option-blue-bg - Blue background with white text - .cursor-pointer - Pointer cursor - .avatar-icon - 150x150 avatar with blue background

SLDS Classes

Not used - component uses Bootstrap classes: - container, container-fluid, container-lg - row, col-* - card, card-body - btn, btn-lg - shadow, bg-white, bg-light - text-center, text-white - rounded-pill - spinner-border, spinner-border-sm

Responsive Breakpoints

  • Mobile (<768px): Single column layout, full width
  • Tablet/Desktop (>=768px): col-md-6 creates 2-column password/requirements layout
  • Large screens: Container constrained to col-lg-8 col-xl-7 for optimal reading width

Dependencies

Lightning Web Components (Base)

  • LightningElement - Base class
  • track decorator - For reactive properties
  • NavigationMixin - For post-password-change navigation

Custom LWC Components

  • c-form-input - Password input fields with validation (3 instances)

Apex Classes

  • AccountController.updateUserPassword(oldPassword, newPassword, verifyNewPassword):
  • Updates user password
  • Parameters: current password, new password, password confirmation
  • Returns: Success/failure
  • Throws error with message on failure

Salesforce Objects & Fields

  • User: Password updated via Apex (no direct field access)

Static Resources

None

Labels

All text hardcoded (no custom labels): - "Change Your Password" - "Current Password", "New Password", "Re-enter New Password" - "Passwords must:" - All 6 password requirements text - "Password changed successfully"

Community Services

  • @salesforce/community/basePath - Base URL for navigation

Configuration

Component Meta XML

<targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
</targets>

Available On: - Experience Builder pages - Community/Portal pages

Design Properties

None - no configurable properties in App Builder.

User Interactions

Actions Available to Users

  1. Enter Current Password
  2. Trigger: Type in current password field

  3. Result: Password captured (no validation feedback)

  4. Enter New Password

  5. Trigger: Type in new password field

  6. Result:

    • Real-time validation feedback
    • Icons update instantly (red X → green checkmark)
    • All 5 password requirements checked

  7. Enter Password Confirmation

  8. Trigger: Type in re-enter password field

  9. Result:

    • Match validation updates
    • Green checkmark shows when passwords match

  10. Submit Password Change

  11. Trigger: Click "Change Password" button or press Enter
  12. Result:
    • Button shows loading spinner
    • Validation occurs
    • Apex call updates password
    • Success: Green message → auto-navigate to My Account after 2 seconds
    • Failure: Red error message displayed

Validation & Error Handling

Client-Side Validation: - Current Password: Required field (via c-form-input) - New Password: Required + must meet all 5 requirements - Confirm Password: Required + must match new password

Password Requirements: - Minimum 8 characters - At least 1 uppercase letter - At least 1 lowercase letter - At least 1 number (0-9) - At least 1 special character (!@#$%^&*(),.?":{}|<>) - Must match confirmation field

Error Messages: - Validation Failure: Visual feedback via red X icons - Apex Failure: Error message from server displayed in red - Example: "Your old password is incorrect"

Loading States: - Button shows spinner during Apex call - Button disabled during loading - Success message shows for 2 seconds before navigation

Data Flow

Input Data Flow

User types in password fields
    ↓
c-form-input oninput event
    ↓
handlePasswordChange() / handlePasswordRepeatChange()
    ↓
account object updated
    ↓
validatePassword() called
    ↓
Real-time validation feedback displayed

Output Data Flow

User clicks Change Password
    ↓
handleFormSubmit() validates form + password
    ↓
resetPassword() calls Apex with 3 passwords
    ↓
AccountController.updateUserPassword()
    ↓
Success: Show message → Wait 2s → Navigate to My Account
Failure: Display error message from Apex

Performance Considerations

Render Optimization: - Minimal reactive properties (3 tracked) - Conditional rendering for loading/messages - No complex computations

Data Volume: - Minimal data (3 password strings) - No server calls until submit

API Call Optimization: - Single Apex call on submit - No caching needed (password changes are one-time operations)

Validation Performance: - Real-time validation runs on every keystroke - 5 regex tests + 1 equality check per keystroke - Direct DOM manipulation for icon updates (queries 6 elements) - Consideration: Could benefit from debouncing on slower devices

Accessibility (a11y)

ARIA Labels: - Form labels properly associated with inputs (via c-form-input) - Button has aria-label="Submit" - Gap: Validation checklist lacks ARIA live region

Keyboard Navigation: - Tab order: Natural (current password → new password → confirm → submit button) - Enter key submits form - All inputs keyboard accessible

Screen Reader Support: - Password fields have labels - Loading spinner has role="status" and aria-hidden="true" - Gap: Real-time validation changes not announced to screen readers - Gap: No aria-live region for success/error messages

Color Contrast: - Green checkmark (#00a874) and red X (#de2f3d) provide good contrast - Blue button (#0c3863) on white meets WCAG AA - Error red (#ae2a19) has sufficient contrast - Passes WCAG AA: Likely yes, but formal audit recommended

Focus Management: - No explicit focus management - Gap: Focus not moved to error messages on failure - Gap: Success message appears but focus not managed before navigation

Testing

Jest Tests

Test File: Not present in repository Coverage: 0% - No tests found

Recommended Test Scenarios: - [ ] Component renders correctly - [ ] Password validation triggers on input - [ ] All 5 password requirements validated correctly - [ ] Password match validation works - [ ] Icons update correctly (cross → check) - [ ] Form validation prevents invalid submission - [ ] Apex method called with correct parameters - [ ] Success message displays and navigation occurs - [ ] Error message displays on Apex failure - [ ] Loading state shows/hides correctly - [ ] Button disabled during loading

Manual Testing Checklist

  • [ ] Desktop browser (Chrome, Firefox, Safari)
  • [ ] Mobile browser (iOS Safari, Android Chrome)
  • [ ] Tablet view
  • [ ] Password requirements validation
  • [ ] Password match validation
  • [ ] Submit with invalid data blocked
  • [ ] Correct password submission succeeds
  • [ ] Incorrect current password rejected
  • [ ] Success message and navigation
  • [ ] Error message display
  • [ ] Loading spinner functionality
  • [ ] Keyboard navigation
  • [ ] Screen reader compatibility

Usage Examples

In Experience Builder

  1. Drag "Reset Password" component to password change page
  2. Component has no configuration properties
  3. Typically placed on /change-password or /my-account/settings page
  4. Save and activate page

In Parent Component

Not designed for embedding - standalone page component.

Programmatic Access

Not applicable - no public @api methods.

Changes & History

Current Implementation Notes: - CRITICAL: Component named "resetPassword" but class is "RegisterAccountForm" - Requires current password (this is password change, not password reset) - Uses Bootstrap styling instead of SLDS - Real-time validation with visual feedback - 2-second delay before navigation after success

⚠️ Pre-Go-Live Concerns

CRITICAL - Fix Before Go-Live

  • Naming Mismatch: Component file "resetPassword" but class "RegisterAccountForm" - extremely confusing for maintenance
  • Functionality Mismatch: Named "reset" but functions as "change" (requires current password) - could confuse users and developers
  • Security Vulnerability: Line 44 logs entire account object including passwords to console in production
  • Password Logging: Sensitive data exposed in browser console - major security risk

HIGH - Address Soon After Go-Live

  • Component Identity: Clarify if this should be password reset (email-based, no current password) or password change (requires current password)
  • Validation Accessibility: Real-time validation changes not announced to screen readers
  • Testing: No automated tests for critical security component
  • Error Handling: Generic error messages may not help users understand failures
  • Navigation Target: Hardcoded /my-account may not be appropriate for all contexts

MEDIUM - Future Enhancement

  • Code Reuse: Password validation logic duplicated with registerAccountForm - should be shared utility
  • Debouncing: Add debounce to validation to reduce DOM queries on every keystroke
  • Success Feedback: 2-second delay is arbitrary - consider user preference or immediate navigation
  • Error Messages: Externalize to custom labels for i18n
  • Component Renaming: Rename to "changePassword" to match functionality
  • Class Renaming: Rename "RegisterAccountForm" to match component purpose

LOW - Monitor

  • Console Logging: Additional console.error statements for debugging
  • Magic Number: 2000ms setTimeout is hardcoded
  • CSS Organization: Many unused styles (avatar-icon, radio/checkbox styles)
  • Performance: Multiple DOM queries for validation could be optimized

Maintenance Notes

Complexity: Medium - Complex validation logic with DOM manipulation Recommended Review Schedule: Quarterly security review

Key Maintainer Notes: - CRITICAL: Component has identity crisis - naming suggests reset, functionality is change - This component requires authenticated user session - Password validation regex must match server-side Salesforce password policy - Changes to c-form-input component will affect functionality - Real-time validation depends on data-check attributes in HTML - Success navigation goes to /my-account - update if account page URL changes - Apex method AccountController.updateUserPassword must remain compatible - Component uses Bootstrap, not SLDS - styling updates must account for this

Browser Compatibility: - Chrome: 90+ - Firefox: 88+ - Safari: 14+ - Mobile: iOS 14+, Android 10+ - Uses CSS mask for icons (not supported in IE11)

Security Considerations: - URGENT: Remove console.log of account object (line 44) - exposes passwords - Ensure HTTPS only (passwords transmitted) - Password requirements must match Salesforce user password policy - Server-side validation is ultimate authority (client-side can be bypassed) - Monitor for brute force attempts on current password - Consider rate limiting password change attempts - Audit Apex class for proper password handling