reset_customer_password
Generate a Forgot Password form
Inputs
| Input | Type | Name | Required | Notes |
|---|---|---|---|---|
| customer[email] | Required when the merchant enables email registration | |||
| Phone number | phone | customer[phone] | Required when the merchant enables phone number registration | Phone number format: international closed phone number, e.g. Mainland China phone number: 15600000000 |
| Area code | text | customer[code] | Required when the merchant enables phone number registration | The area code is the international phone code, e.g. Mainland China phone code: 86 |
| Password | password | customer[password] | Required | |
| Verification code | text | customer[verifycode] | Required |
Example
{{#form 'reset_customer_password' id="reset-password-form"}}
<div class="account">
<label for="email">Email</label>
<input type="text" name="customer[email]" placeholder="Email" />
</div>
<div class="verifycode">
<input type="text" name="customer[verifycode]" placeholder="Verification Code" />
<button class="verifycode-button">Send</button>
</div>
<div class="password">
<label for="password">Password</label>
<input type="password" name="customer[password]" placeholder="Password" />
</div>
<div class="password">
<label for="passwordConfirm">Confirm Password</label>
<input type="password" name="customer[passwordConfirm]" placeholder="Confirm Password" />
</div>
<div class="submit">
<input class="submit-button" type="submit" value="Reset Password">
</div>
{{/form}}
Used in conjunction
The above code needs to be used in conjunction with the following script.
class PasswordNew {
constructor() {
this.form = document.querySelector('#reset-password-form');
this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
this.verifyCodeButton = this.form.querySelector('.verifycode-button');
this.verifyCodeButton.addEventListener(
'click', this.onSendVerifyCodeHandler.bind(this)
);
this.passwordNew = new window.Shopline.customerAccount.PasswordNew(this.form)
}
// Send email or SMS verification code logic
onSendVerifyCodeHandler(e) {
e.preventDefault();
if (this.verifyCodeButton.getAttribute('aria-disabled') === 'true') return;
this.verifyCodeButton.setAttribute('aria-disabled', true);
this.passwordNew.sendVerifyCode()
.then(response => {
if (response.errorMessage) {
this.verifyCodeError = true;
// Handle send failure exception scenarios
}
})
.finally(() => {
if (!this.verifyCodeError) {
this.verifyCodeButton.removeAttribute('aria-disabled');
}
})
}
// Register logic
onSubmitHandler(e) {
e.preventDefault();
this.passwordNew.submit()
.then(response => {
window.location.href = '/user/signIn';
})
.catch(error => {
// Handle registration failure exception scenarios
console.log(error)
})
}
}
window.Shopline.loadFeatures(
[
{
name: 'customer-account-api',
version: '0.3'
}
],
function(error) {
if (error) {
throw error;
}
new PasswordNew();
}
);
Was this article helpful to you?