customer_login​

{{#form 'customer_login' id="customer-login-form"}}
  <div class="account">
    <label for="email">{{ t 'user.username' }}</label>
    <input type="text" name="customer[email]" placeholder="{{ t 'user.username' }}" />
  </div>
  <div class="password">
    <label for="password">{{ t 'user.password' }}</label>
    <input type="password" name="customer[password]" placeholder="{{ t 'user.password' }}" />
  </div>
  <div class="submit">
    <input class="submit-button" type="submit" value="{{ t 'user.signIn' }}">
  </div>
{{/form}}

class Login {
  constructor() {
    this.form = document.querySelector('#customer-login-form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.login = new window.Shopline.customerAccount.Login(this.form)
  }
  // Login Logic
  onSubmitHandler(e) {
    e.preventDefault();
    this.login.submit()
      .then(response => {
        window.location.href = '/user/center';
      })
      .catch(error => {
        // Handling login failure exception scenarios
      })
  }
}
// Initialize user login JS SDK
window.Shopline.loadFeatures(
  [
    {
      name: 'customer-account-api',
      version: '0.3'
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    new Login();
  }
);

{{#form 'customer_login' id="customer-login-form"}}
  <div class="account">
    <label for="email">{{ t 'user.username' }}</label>
    <input type="text" name="customer[email]" placeholder="{{ t 'user.username' }}" />
  </div>
  <div class="password">
    <label for="password">{{ t 'user.password' }}</label>
    <input type="password" name="customer[password]" placeholder="{{ t 'user.password' }}" />
  </div>
  <div class="submit">
    <input class="submit-button" type="submit" value="{{ t 'user.signIn' }}">
  </div>
  <div id="third-login-container"></div>
{{/form}}

class Login {
  constructor() {
    this.form = document.querySelector('#customer-login-form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.login = new window.Shopline.customerAccount.Login(this.form, {
      thirdLogin: {
        container: this.form.querySelector('#third-login-container'), // Third party login button container
        handleSuccess: () => { // Third party login is successful, you can customize the jump address
          window.location.href = '/user/center';
        },
        handleError: (error) => { // Third party login failed, error message returned
          console.log(error)
        }
      }
    })
  }
  // Login Logic
  onSubmitHandler(e) {
    e.preventDefault();
    this.login.submit()
      .then(response => {
        window.location.href = '/user/center';
      })
      .catch(error => {
        // Handling login failure exception scenarios
        console.log(error)
      })
  }
}
// Initialize user login JS SDK
window.Shopline.loadFeatures(
  [
    {
      name: 'customer-account-api',
      version: '0.3'
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }
    new Login();
  }
);

{{#form 'customer_login' id="customer-login-form"}}
<div class="account">
<label for="email">{{ t 'user.username' }}</label>
<input type="text" name="customer[acct]" placeholder="{{ t 'user.username' }}" />
</div>
<div class="password">
<label for="password">{{ t 'user.password' }}</label>
<input type="password" name="customer[password]" placeholder="{{ t 'user.password' }}" />
</div>
{{#if form.register_config.activation_tag}}
<div class="verifycode" style="display: none;">
  <input type="text" name="customer[verifycode]" placeholder="{{ t 'user.code' }}" />
  <button class="verifycode-button" id="customer-login-activate-send-btn">{{ t 'user.send' }}</button>
</div>
{{/if}}
<div class="submit">
<input class="submit-button" type="submit" value="{{ t 'user.signIn' }}">
</div>
{{/form}}

  class Login {
    constructor() {
      this.form = document.querySelector('#customer-login-form');
      this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
      this.verifyCodeFormItem = this.form.querySelector('.verifycode');
      this.submitBtn = this.form.querySelector('.submit-button');
      this.verifyCodeButton = this.form.querySelector('.verifycode-button');
      this.verifyCodeButton.addEventListener(
        'click', this.onSendVerifyCodeHandler.bind(this)
      );
      this.login = new window.Shopline.customerAccount.Login(this.form, {
        activate: {
          verifyCodeBtn: 'customer-login-activate-send-btn'
        }
      })
    }
    // Sending email or SMS verification code
    onSendVerifyCodeHandler(e) {
      e.preventDefault();
      if (this.verifyCodeButton.getAttribute('aria-disabled') === 'true') return;
      this.verifyCodeButton.setAttribute('aria-disabled', true);
      
      this.login.sendVerifyCode()
        .then(response => {
          if (response.errorMessage) {
            this.verifyCodeError = true;
            // Handling send failure exception scenarios
          }
        })
        .finally(() => {
          if (!this.verifyCodeError) {
            this.verifyCodeButton.removeAttribute('aria-disabled');
          }
        })
    }
    // Login Logic
    onSubmitHandler(e) {
      e.preventDefault();
      this.login.submit()
        .then(response => {
          window.location.href = '/user/center';
        })
        .catch(error => {
          // Handling login failure exception scenarios
          console.log('----submit error', error);
          if (error.code === 'needActivate') {
            // Account can be activated. Display the verification code input box and modify the text as needed
            this.verifyCodeFormItem.style.display = 'block';
            this.submitBtn.value = 'activate';
          }
        })
    }
  }
  
  // Initialize user login JS SDK
  window.Shopline.loadFeatures(
    [
      {
        name: 'customer-account-api',
        version: '0.3'
      }
    ],
    function(error) {
      if (error) {
        throw error;
      }
      new Login();
    }
  );