[{"value":"forgot-password.png","id":"forgot-passwordpng","hLevel":2,"level":1},{"value":"Location","id":"location","hLevel":2,"level":1},{"value":"Content","id":"content","hLevel":2,"level":1,"children":[{"value":"Customer Password Reset Form","id":"customer-password-reset-form","hLevel":3,"level":2}]},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Providing \"Account Verification\" Options","id":"providing-account-verification-options","hLevel":3,"level":2}]}]

customers/forgot_password

The customers/forgot_password template displays the page for resetting a customer's account password.

Location

The customers/forgot_password template can be found in the theme's template directory under templates > customers:

└── theme
    ├── layout
    ├── templates
    |   └── customers
    |     ├── forgot_password.json
    |     ...
    ...

Content

You can embed the customer password reset form within the customers/forgot_password template or in a section of the template.

Customer Password Reset Form

To add the password reset form, utilize the Handlebars form helper with the parameter 'reset_customer_password'. Within the form helper block, include the following:

Field	Type	Form Name
Email	email	customer[email]
Phone	text	customer[phone]
Password	password	customer[password]
Confirm Password	password	customer[password_confirm]
Code	text	customer[code]

Tip

Support both email and phone number reset options. The code field is necessary only for phone number resets, used in conjunction with it.

Example code:

{{#form "reset_customer_password"}}
  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="customer[email]">
  </div>
  <div class="password">
    <label>Password</label>
    <input type="password" name="customer[password]">
  </div>
  <div class="password_confirm">
    <label >Password confirm</label>
    <input type="password" name="customer[password_confirm]">
  </div>
   <div class="verifycode">
    <label >Verification code</label>
    <input type="text" name="customer[verifycode]">
  </div>
  <div class="submit">
    <input type="submit" value="Reset password">
  </div>
{{/form}}

Usage

When using the customers/forgot_password template, ensure familiarity with the following:

Tip

If utilizing JSON templates, enclose code within a section referenced by the template.

Providing "Account Verification" Options

Account verification is necessary for password resets. Utilize loadFeatured to import the customer-account-api SDK for handling the logic of sending a verification code to the user's account:

{{#form "reset_customer_password"}}
  <div class="field">
    <input
      id="Phone"
      class="field__input"
      type="tel"
      name="customer[phone]"
      required
      placeholder="Phone"
    />
    <label for="Phone" class="field__label body3">
      Phone
    </label>
  </div>
  <div class="field__suffix">
    <select name="customer[code]" id="country-select">
      {{#for all_country_dialing_code as |item|}}
        <option value="{{item.dialing_code}}" data-iso-code="{{item.iso_code}}">{{item.name}}</option>
      {{/for}}
    </select>
  </div>
  <div class="field">
    <div class="field__container">
      <input
        type="text"
        id="VerifyCode"
        class="field__input"
        name="customer[verifycode]"
        required
        placeholder="Verify Code"
      />
      <label for="VerifyCode" class="field__label">
        Verify Code
      </label>
    </div>
    <div class="field__suffix">
      <button class="send-code-button">
        Send
      </button>
    </div>
  </div>
{{/form}}