Web Components · Account
<mmm-reset-password>
Two-step password reset — request a reset link by email / phone, then confirm the new password on the link target. URL-driven: shows the request form at /reset-password and the confirmation form at /reset-password/{token}.
Overview
Auto-detects step from the URL — without a token in the path, it shows the request form; with a token, it shows the new-password + confirm form. Success and failure states render inline. After a successful reset, the form redirects to /login.
Quick start
<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>
<mmm-reset-password></mmm-reset-password>Attributes
AttributeTypeDefaultDescription
theme-modestringlightlight or dark — swaps the default palette.background-colorstring#f5f5f5 (light) / #121212 (dark)Page background.panel-backgroundstring#ffffff (light) / #1f1f1f (dark)Reset-box background.font-familystringtheme description fontCard font family.heading-font-weightstringtheme heading weight / 600Heading font weight.text-primary-colorstringtheme primary text / #111Primary text colour.text-secondary-colorstringtheme secondary text / #666Subtitle / helper-text colour.input-stroke-colorstringtheme input stroke / #dddInput border.button-colorstringtheme button fill / #000Submit button background.link-colorstringtheme hyperlink / #0066cc"Back to login" link colour.border-radiusstringtheme border radiusCard / input / button border-radius.button-font-sizestringtheme button size / 14pxButton font size.button-font-weightstringtheme button weight / 500Button font weight.button-font-familystringtheme button font / inheritButton font family.link-font-weightstringtheme link weight / 500"Back to login" link weight.Live preview
Examples
1. Default
<mmm-reset-password></mmm-reset-password>2. Brand-coloured card
<mmm-reset-password
button-color="#c8a8ff"
heading-font-weight="700"
border-radius="0.5rem">
</mmm-reset-password>