How to create a Login/Register Form with Tailwind CSS and JavaScript

#javascript #tailwindcss #tutorial

This Thursday, we are going to build a login form using Tailwind CSS and JavaScript just like we did in the tutorial with Tailwind CSS and Alpine.js.

See it live and get the coee

What are authentication forms?

Authentication forms are crucial components of web and application security, serving as the primary method for verifying the identity of users. These forms can be implemented in various ways, catering to different security needs, user experiences, and application contexts.

Here's a list of how authentication forms can be used across different scenarios:

Traditional Username and Password: A standard method where users enter their username and password to gain access.
Multi-Factor Authentication (MFA): Enhances security by requiring users to provide two or more verification factors, such as a password and a code sent via SMS or an authenticator app.
Social Media Logins: Allows users to log in using their existing social media accounts (Facebook, Google, Twitter), simplifying the login process.
Single Sign-On (SSO): Permits access to multiple applications or services with one set of credentials, commonly used in corporate environments.
Biometric Authentication: Employs unique biological traits (fingerprints, facial recognition, voice recognition) for user verification, increasingly common in mobile devices.
Email Link Authentication: Sends a temporary login link to the user's email, enabling login without entering a password, enhancing convenience and security.
SMS/Text Message Verification: Sends a one-time code to the user's mobile phone as part of a two-factor authentication process.
Magic Link Authentication: Sends a seamless login link via email, SMS, or other messaging services, eliminating the need for a password.
Captcha Verification: Adds a challenge-response test to ensure the login action is performed by a human, helping prevent automated attacks.

and many more.

Use cases:

Subscription Plans: Offering various subscription tiers tailored to different user needs.
Product Pricing: Dynamically adjusting product prices based on user-selected features or usage metrics.
Service Packages: Providing customizable service packages with different levels of features or support.
Membership Levels: Offering different membership levels with varying access and benefits.
Software Licensing: Implementing tiered licensing models for software products based on usage or functionality. and other similar uses cases...

Now, let's build the structure of the form.

Understanding the markup

The structure of the form

ìd="loginFormContainer": This is the HTML structure that will be used to create the form container.
form id="loginForm": This is the HTML structure that will be used to create the form.

The email input field

id="login_email": This is the input field that will be used to store the email of the user.
id="emailError": This is the Error message that will be displayed if the email is not filled in.

The password input field

id="login_email": This is the input field that will be used to store the password of the user.
id="togglePassword": This is the button that will be used to toggle the visibility of the password input field.
id="passwordError": This is the Error message that will be displayed if the password is not filled in or does not meet the requirements.

Classes are omited for brevity and clarity.

<div id="loginFormContainer">
  <form id="loginForm">
    <div>
      <label for="login_email">Email</label>
      <input type="email" id="login_email" placeholder="Enter your email" required />
      <p id="emailError"> Email is required </p>
    </div>
    <div>
      <label for="login_password">Password</label>
      <div class="relative">
        <input type="password" id="login_password" placeholder="Enter your password" required />
        <span id="togglePassword">Show</span>
      </div>
      <p> Password must contain at least one capital letter and a special character. </p>
      <p id="passwordError"> Password does not meet requirements </p>
    </div>
    <div>
      <button type="submit">Login</button>
    </div>
  </form>
</div>

The script

Creating the login form

document.addEventListener("DOMContentLoaded", () => {: This is the event listener that will be triggered when the DOM is fully loaded.
const loginForm = document.getElementById("loginForm");: This is the variable that will be used to target the login form element.
const loginEmail = document.getElementById("login_email");: This is the variable that will be used to target the login email input field.
const loginPassword = document.getElementById("login_password");: This is the variable that will be used to target the login password input field.
const emailError = document.getElementById("emailError");: This is the variable that will be used to target the email error message.
const passwordError = document.getElementById("passwordError");: This is the variable that will be used to target the password error message.
const togglePassword = document.getElementById("togglePassword");: This is the variable that will be used to target the toggle password button.

 const loginForm = document.getElementById("loginForm");
 const loginEmail = document.getElementById("login_email");
 const loginPassword = document.getElementById("login_password");
 const emailError = document.getElementById("emailError");
 const passwordError = document.getElementById("passwordError");
 const togglePassword = document.getElementById("togglePassword");

Validating the email input field

const passwordPattern = /^(?=.*[A-Z])(?=.*\W).+$/;: This is the regular expression that will be used to validate the password.
let showPassword = false;: This is the variable that will be used to store the state of the password input field.

const passwordPattern = /^(?=.*[A-Z])(?=.*\W).+$/;
let showPassword = false;

Handling the toggle password button

togglePassword.addEventListener("click", () => {: This is the event listener that will be triggered when the toggle password button is clicked.
showPassword = !showPassword;: This is the line that will be used to toggle the visibility of the password input field.
loginPassword.type = showPassword ? "text" : "password";: This is the line that will be used to change the type of the password input field.
togglePassword.textContent = showPassword ? "Hide" : "Show";: This is the line that will be used to update the text content of the toggle password button.

togglePassword.addEventListener("click", () => {
    showPassword = !showPassword;
    loginPassword.type = showPassword ? "text" : "password";
    togglePassword.textContent = showPassword ? "Hide" : "Show";
});      togglePassword.textContent

Handling the login form submission

loginForm.addEventListener("submit", (event) => {: This is the event listener that will be triggered when the login form is submitted.
event.preventDefault();: This is the line that will be used to prevent the default form submission behavior.

Validating the email input field

if (!loginEmail.value) {: This is the line that will be used to check if the email input field is empty.
emailError.classList.remove("hidden");: This is the line that will be used to remove the hidden class from the email error message.
} else {: This is the line that will be used to check if the email input field is not empty.
emailError.classList.add("hidden");: This is the line that will be used to add the hidden class to the email error message.

if (!loginEmail.value) {
    emailError.classList.remove("hidden");
} else {
    emailError.classList.add("hidden");
}

Validating the password input field

if (!passwordPattern.test(loginPassword.value)) {: This is the line that will be used to check if the password input field does not meet the requirements.
passwordError.classList.remove("hidden");: This is the line that will be used to remove the hidden class from the password error message.
} else {: This is the line that will be used to check if the password input field meets the requirements.
passwordError.classList.add("hidden");: This is the line that will be used to add the hidden class to the password error message.

if (!passwordPattern.test(loginPassword.value)) {
    passwordError.classList.remove("hidden");
} else {
    passwordError.classList.add("hidden");
}

Handling the action of the login form submission

if (loginEmail.value && passwordPattern.test(loginPassword.value)) {: This is the line that will be used to check if the email input field is not empty and the password input field meets the requirements.
alert("Login successful");: This is the line that will be used to display an alert message when the login form is submitted.

if (loginEmail.value && passwordPattern.test(loginPassword.value)) {
    // Perform login action here
    alert("Login successful");
}

The full structure

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.getElementById("loginForm");
    const loginEmail = document.getElementById("login_email");
    const loginPassword = document.getElementById("login_password");
    const emailError = document.getElementById("emailError");
    const passwordError = document.getElementById("passwordError");
    const togglePassword = document.getElementById("togglePassword");

    const passwordPattern = /^(?=.*[A-Z])(?=.*\W).+$/;
    let showPassword = false;

    togglePassword.addEventListener("click", () => {
        showPassword = !showPassword;
        loginPassword.type = showPassword ? "text" : "password";
        togglePassword.textContent = showPassword ? "Hide" : "Show";
    });

    loginForm.addEventListener("submit", (event) => {
        event.preventDefault();

        if (!loginEmail.value) {
            emailError.classList.remove("hidden");
        } else {
            emailError.classList.add("hidden");
        }

        if (!passwordPattern.test(loginPassword.value)) {
            passwordError.classList.remove("hidden");
        } else {
            passwordError.classList.add("hidden");
        }

        if (loginEmail.value && passwordPattern.test(loginPassword.value)) {
            // Perform login action here
            alert("Login successful");
        }
    });
});

Conclusion

In this tutorial, we learned how to create a login form using Tailwind CSS and JavaScript. We covered topics such as creating a login form, handling form submissions, validating user input, and displaying error messages using Tailwind CSS. We also explored how to use Tailwind CSS to style the form and add animations to the login button. Remember to make your login form responsive and user-friendly, secure and to test it thoroughly to ensure it works as expected.

Hope you enjoyed this tutorial and have a great day!