Creating a sign up form with an automatic password generator in javascript

Can I learn kung fu without sparring? Are you learning javascript as I am? If you are great! You see, this is the first project I am single-handedly doing since I started learning javascript. I first wrote a password generator in Java then thought; "Well, since I'm learning js..."

I tried to think of a structure I wanted the login form to follow (even though it was just a signup page) but while working I had to redesign my plan several times. I learned a lot from that.

Talk is cheap. Show me the code...

The Password Complexity Rules

These are just some criteria I wanted the password to validate:

1. The password must be of at least 8 characters
2. The password must contain characters that fall within these categories:
   • Must contain uppercase letters(A through Z)
   • Must contain lowercase letters(a through z)
   • Must contain non-alphanumeric characters
   • Must contain Arabic numerals(0 through 9)
3. The password must not contain the user's name (neither first nor last name)

The Design

Ok now, let me work you through the implementation of my thought pattern.

First, I created a form with takes in the user's last name, first name, and password(which could be generated or customized)

Web view



Mobile view



The logic for password generation and validation can be broken down into a few steps.

• First comes the password generation function The password is generated from letters(upper and lower cases), numbers (0-9), and special characters.

/* To Generate the password*/
function generatePassword() {
  let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let symbols = "%!@#$^&*-+=|\\(){}:\"';,?";
  let password = "";

  for (let i = 0; i < 4; i++) {
    let randomNumber = Math.floor(Math.random() * 10);
    let lowerCaseLetter = alphabet.charAt(Math.random() * 26).toLowerCase();
    let upperCaseLetter = alphabet.charAt(Math.random() * 26).toUpperCase();
    let specialChar = symbols.charAt(Math.random() * symbols.length);

    password += randomNumber + lowerCaseLetter + upperCaseLetter + specialChar;
  }
  return shuffle(password);
}

• The shuffle() function is used to shuffle the string after the password is generated. Unlike Java, I could not just call an inbuilt function to shuffle the string. This is a custom-built function.

The aim of this is to minimize predictability


/* To shuffle the password string*/
function shuffle(str) {
  let arr = str.split("");
  let n = arr.length;

  for (let i = 0; i < n; i++) {
    let j = Math.floor(Math.random() * n);

    let temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr.join("");
}

• Then there's the validation function to ensure that the password contains neither the user's first nor last name, and also to ensure that the password is well-formed with letters(upper and lowercases), numbers, and special characters.

Since the user can enter a customized password, this function is important to ensure that it meets the password complexity rules already listed.


/* To Validate the password*/
function validatePassword(password, fname, lname) {
  if (password.includes(fname) || password.includes(lname)) {
    formAlert.style.display = "block";
    formAlert.innerHTML = "Password must not include first or last name";
    return false;
  } else if (
    !/\d/.test(password) ||
    !/[a-z]/.test(password) ||
    !/[A-Z]/.test(password) ||
    !/[%!@#$^&*-+=|\\(){}:\"';,?]/.test(password)
  ) {
    formAlert.style.display = "block";
    formAlert.innerHTML = "Password must be a mix of letters, numbers, and special symbols";
    return false;
  } else return true;
}

Is there a shorter way to do the RegExp comparison in this validation method? Please comment below or better contribute here.

• Other aspects of the validation are handled in the HTML like:
  • The minlength of the password field is 8
  • All input fields are required so no input is null
  • The type of the email field is email so a valid input is given

Bonus
I made a checkbox to toggle this visibility of the password.

The Results

• Password with user's name



• Malformed password



• Form filled with valid inputs





Please feel free to try out the form in here

The implementation of the code can be found in codepen.io and codebase in my repository

I am open to any constructive additions you may have.

Happy Coding! 🌱

                                                Babi 💞