Angular Concepts - Login Form

In the last article, we decided to develop a simple login form. Let’s start with the looks!

Take a look at the form below. For now, its just HTML and CSS!

If you try to interact with the form above and click on submit, you might see a warning from CodePen. Do not worry about it! We are not done just yet!

Let’s see what have we covered.

Must allow the user to enter username and password
Must have a submit button which would verify the credentials
Must validate the credentials. These would be hardcoded as admin/adminpass for our purpose
Must show an error if the credentials are wrong
Must display a success message if the credentials message is right

We will start programming. All we want is to make sure that we will tap into the button click event and validate the credentials.

validateCredentials function

function validateCredentials(e) {
  if (e.preventDefault) e.preventDefault();

  // Validate credentials here

  // Return false to prevent the default form behavior
  return false;
}

Hooking up validateCredentials

const form = document.getElementById("login-form");

form.addEventListener("submit", validateCredentials);

Next, we have to get the values from the input boxes and validate them. Once we know if the credentials are valid or not, we can display an appropriate message to the user. This is achieved by setting the display style of the message to block.

Validating credentials

function validateCredentials(e) {
  if (e.preventDefault) e.preventDefault();

  // Hide both the messages first
  document.getElementById("validmessage").style.display = "none";
  document.getElementById("invalidmessage").style.display = "none";

  // Get the values of username and password
  const user = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // Validate the credentials
  const valid = user === "admin" && password === "adminpass";

  // Display the appropriate message
  if (valid) {
    document.getElementById("validmessage").style.display = "block";
  } else {
    document.getElementById("invalidmessage").style.display = "block";
  }

  // Return false to prevent the default form behavior
  return false;
}

Finally, we have checked all the boxes!

Must allow the user to enter username and password
Must have a submit button which would verify the credentials
Must validate the credentials. These would be hardcoded as admin/adminpass for our purpose
Must show an error if the credentials are wrong
Must display a success message if the credentials message is right

But is this optimal?

This brings us to first code refactoring opportunity. Notice that we are using document.getElementById() a lot. Maybe we can create a function which does the same thing, but give it a smaller name, say $ ^[1] So we can define $ thus:

function $(id: string) {
  return document.getElementById(id);
}

But wait, we can further shorten this by using the arrow function:

const $ = (id: string) => document.getElementById(id);

Now this is what our script finally looks like:

const $ = (id: string) => document.getElementById(id);

function validateCredentials(event: Event) {
  event.preventDefault();

  // Hide both the messages first
  $("validmessage").style.display = "none";
  $("invalidmessage").style.display = "none";

  // Get the values of username and password
  const user = $("username").value;
  const password = $("password").value;

  // Validate the credentials
  const valid = user === "admin" && password === "adminpass";

  // Display the appropriate message
  if (valid) {
    $("validmessage").style.display = "block";
  } else {
    $("invalidmessage").style.display = "block";
  }

  // Return false to prevent the default form behavior
  return false;
}

const form = $("login-form");

form.addEventListener("submit", validateCredentials);

And here is the final result:

1. Do not confuse $ with jQuery. $ is just a conventional name.

Angular Concepts - Login Form

This is part 2 of series Angular Concepts

See Also: