ChangePassword

Purpose

The ChangePassword component renders the “Change password” form and submits the new password using the theme services layer.

It includes:

Password + Confirm Password inputs

Client-side validation (required fields + password strength rules + match validation)

Show/hide password toggle

Toast feedback for success/failure

Redirect to /login on success

Inputs (model contract)

Model shape (storefront example)

{
  "name": "ChangePassword",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirChangePassword",
    "name": "ChangePassword",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": "Sample cssClass"
  },
  "translations": {
    "changePassword": "Sample translation",
    "buttonText": "Sample translation",
    "errorEmptyField": "Sample translation",
    "...": "..."
  }
}

Required fields

settings.id
Used for wrapper id: comp-{{ id }}

Optional fields

settings.cssClass
Applied to wrapper only when non-empty and not (UNDEFINED).

JavaScript

Global object

The component exposes an Alpine-ready object:

It’s used directly from the template via:

x-data="changepassworddefault"

State fields (what they represent)

fields: []
Cached list of form inputs (all [name] fields except disabled + submit).

errors: {}
Per-field error code mapping:

"required" / "weak" / "unmatched" / "" (empty string means no error)

isSending: false
Used to disable UI / show loading state while submitting.

errorUpLowCase, errorLength, errorSymbolNum
Password strength breakdown flags (used to show the “weak password must…” checklist).

init

Collects input fields inside the component, caches them in this.fields, and attaches blur listeners that call validateField(...).

validateField

Validates a single field and updates this.errors, field classes (valid/invalid), the .icon-state indicator, and (for the main password field) the password-strength flags.

toggleVisibility

Toggles a password input between type="password" and type="text", updating the related icon classes.

updateFormValidity

Returns true only if every field:

has no error code in this.errors[field.name], and

is not empty when required

Implementation:

iterates all this.fields

checks err and requiredEmpty

clearForm

Resets the form UI and state:

clears value for each field

removes valid / invalid classes

resets .icon-state classes

clears the errors object

checkForm

Validates the form and submits the change-password request via servicesreusabledefault.changePassword(...), showing toast feedback and redirecting to /login on success.

Global Alpine stores (used by ChangePassword)

Alpine.store("toast")

Used for user feedback:

clears existing messages before validation/submit

shows error toast when API fails

shows success toast when API succeeds

Common pattern:

Alpine.store("toast").removeAll();
Alpine.store("toast").add(message, "ic-warning", "error");

Dependencies

Alpine.js (for x-data, x-show, event handlers)

Alpine.store("toast")

servicesreusabledefault.changePassword(...) (theme services API)

Browser supports standard DOM APIs (the component uses querySelector/getElementById)

Notes

The component depends on the reset token being present in the URL. The token is read as the last segment of window.location.href.

On success it redirects to /login after 1 second.

Password validation accepts unicode lowercase/uppercase letters and checks for symbol/number requirements.

Extras

Template behavior (Liquid + Alpine)

The form is initialized with:

x-data="changepassworddefault"

On submit it calls:

@submit.prevent="checkForm(successMessage, errorMessage)"

The password visibility toggle is handled via checkbox inputs that call:

toggleVisibility($event)
(on click and on Enter key press for accessibility)

Validation messages are shown conditionally using:

x-show="errors['change-password'] === 'required'"

x-show="errors['change-password'] === 'weak'"

x-show="errors['change-confirm-password'] === 'unmatched'"

ChangePassword

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

State fields (what they represent)#

init#

validateField#

toggleVisibility#

updateFormValidity#

clearForm#

checkForm#

Global Alpine stores (used by ChangePassword)#

Alpine.store("toast")#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#