BUG: Improve password validation

[mbeps]

Describe the bug

When entering an inappropriate password (too short), the system does not display any errors and there is no clean message informing the user whether the account has been created or not.

Reproducing the bug

1. Try to sign up using email and password
2. Enter password that is too short new1

Expected behavior

• The account should not be created with such a weak password. The system should force the user to use a strong password. If the requirements are not met, return an error informing the user that the password should be longer.

Screenshots

Platforms

Desktop (please complete the following information):

• OS:
• Browser:
• Version:

Smartphone (please complete the following information):

• Device:
• OS:
• Browser:
• Version:

Additional context

Severity:

• [ ] High (completely break the functionality and usability of the site)
• [x] Medium (significant disruption or degrade user experience)
• [ ] Low (only cause minor disruption keeping the site functional)

[mbeps]

The snippet bellow can be inserted into onSubmit in src/components/Modal/Auth/Signup.tsx. This will check whether:

• Password is at least 8 characters long
• Has at least 1 special character, 1 number and 1 capital letter. If the password does not meet the requirements, it will use the standard mechanisms defined for raising errors meaning that it is a drop in addition to the current code.

  if (
  signUpForm.password.length < 8 ||
  !/\d/.test(signUpForm.password) ||
  !/[!@#$%^&*(),.?":{}|<>]/.test(signUpForm.password) ||
  !/[A-Z]/.test(signUpForm.password)
  ) {
  // If the password doesn't meet the requirements
  setError("Password must be at least 8 characters long, contain at least 1 number and special character and at least 1 capital letter"); // Set error
  return; // Return so that the function doesn't continue
  }

[mbeps]

Separating each requirement would be better as it would allow the user to know exactly which requirement was not met. The current implementation is confusing as the user may not know immediately why the requirement was not met.

    if (signUpForm.password.length < 8) {
      setError("Password must be at least 8 characters long");
      return;
    }
    if (!/\d/.test(signUpForm.password)) {
      setError("Password must contain at least 1 number");
      return;
    }
    if (!/[!@#$%^&*(),.?":{}|<>]/.test(signUpForm.password)) {
      setError("Password must contain at least 1 special character");
      return;
    }
    if (!/[A-Z]/.test(signUpForm.password)) {
      setError("Password must contain at least 1 capital letter");
      return;
    }

[mbeps]

16 Fixed