Increase min length of customer activate account and reset password

[Julian87]

Hello!

Is it possible to increase the min. length from 5 to 12 for customer account passwords (account/activate & account/reset)? I can't find any settings or a way to set it in the theme liquid files.

Kind regards,

Julian

[okur90 · Accepted solution]

@Julian87 Add the following JavaScript code to your theme.liquid file.

document.addEventListener('DOMContentLoaded', function() {
  var passwordInput = document.querySelector('input[type="password"]');

  if (passwordInput) {
    passwordInput.addEventListener('input', function() {
      var minLength = 12;

      if (passwordInput.value.length < minLength) {
        passwordInput.setCustomValidity('Password must be at least ' + minLength + ' characters long.');
      } else {
        passwordInput.setCustomValidity('');
      }
    });
  }
});

This code will enforce a minimum password length of 12 characters on any input field with the type "password" on your site.

Make sure that you have the following line of code in your theme.liquid file to include jQuery in your theme.

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' | script_tag }}

[okur90 · Accepted solution]

@Julian87 Add the following JavaScript code to your theme.liquid file.

document.addEventListener('DOMContentLoaded', function() {
  var passwordInput = document.querySelector('input[type="password"]');

  if (passwordInput) {
    passwordInput.addEventListener('input', function() {
      var minLength = 12;

      if (passwordInput.value.length < minLength) {
        passwordInput.setCustomValidity('Password must be at least ' + minLength + ' characters long.');
      } else {
        passwordInput.setCustomValidity('');
      }
    });
  }
});

This code will enforce a minimum password length of 12 characters on any input field with the type "password" on your site.

Make sure that you have the following line of code in your theme.liquid file to include jQuery in your theme.

{{ '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' | script_tag }}

[Brett_Helium · Accepted solution]

Hey there! You can do this by adding regular expression validation directly to the HTML input element.

You will need to find the password and password confirmation input elements which are usually located in the main-activate-account.liquid and main-reset-password.liquid files. Then add the HTML attributes pattern="regex" and title="Your error message". Here's an example of this:

<div class="password">
  <label for="password">Password</label>
  <input
    type="password"
    name="customer[password]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
    > </div>

<div class="password_confirm">
  <label for="password_confirmation">Password Confirmation</label>
  <input
    type="password"
    name="customer[password_confirmation]"
    pattern="(?=.*\d)(?=.*\W)(?=.*[a-z])(?=.*[A-Z]).{12,20}$"
    title="Password must contain at least one number, one symbol, and one uppercase letter, and be at least 12 characters"
  >
</div>

Hopefully that helps you out! You can also read a little more details about this in the guide on our blog here: https://heliumdev.com/blog/shopify-strong-passwords-customer-account-activation-page

[basmet_harer1]

thank it's a very helpful solution and clear description thank you very much