Pre-requisites

  • Backend repo made and deployed
  • User database made
  • User database customized to what you need it for
  • API controller that handles requests

What your login page should have

  • A form (where the user enters in their email, password, etc.)
  • Script (to send the data in a POST request to the backend)
  • A strategy of saving data once the user is logged in (JWT, local storage, etc. (HIGHLY RECOMMENDED TO USE JWT & NOT USE LOCAL STORAGE LIKE I DID))
  • Redirecting the user once they are logged in (redirect to home page, account page, etc.)

Ideally, these events happen in this order:

  1. User enters in their email and password
  2. User clicks submit which calls a function to send the data to the backend
  3. Data is sent to the backend which verifys the user and sends back data
  4. Data is saved in (whatever method you chose)
  5. User is redirected to the home page/account page/etc.

Form & Submit Button

Steps 1 & 2

<div id="loginScreen">
    <!-- form action is what calls the javascript function when the login button is pressed -->
    <form action="javascript:login_user()">
        <p id="email" class="normal">
            <!-- Email input -->
            <label>Email:
                <input class="normal" type="text" name="uid" id="uid" required>
            </label>
        </p>
        <!-- Password input -->
        <p id="passwordd" class="normal">
            <label>Password:
                <input class="normal" type="password" name="password" id="password" required>
            </label>
        </p>
        <!-- Login button -->
        <p id="logind" class="normal">
            <button>Login</button>
        </p>
    </form>
</div>

User input —> POST Request —> Backend —> Response —> Save data —> Redirect

Step 3, 4, 5

function login_user() {

    // The url is the backend url
    var url = "your backend url here";
    // The login_url is the backend url + endpoint used for user login POSTs
    const login_url = url + 'backend endpoint used for user login POSTs';

    // The body is what is sent to the backend
    const body = {
        // email is defined by what the user enters in the email field
        email: document.getElementById("uid").value,
        // password is defined by what the user enters in the password field
        password: document.getElementById("password").value,
    };

    // Print the body to the console (used for testing purposes so you can check if its working right)
    console.log(JSON.stringify(body));

    // If this part looks confusing, it is the code that sends the body (user input) to the backend
    // First we have to configure the request to what we want it to do
    // The variable requestOptions is what defining what exactly the request is doing
    const requestOptions = {
        // We use POST instead of GET because we are sending data to the backend
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'include',
        body: JSON.stringify(body),
        // These headers are needed for the backend to know what kind of data we are sending and how to handle it
        headers: {
            "content-type": "application/json",
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Origin": "*",
        },
    };

    // This is the part that actually sends the request to the backend
    // The fetch() function is what sends the request
    fetch(login_url, requestOptions)
        // This part is what happens when the backend responds
        .then(response => {
            // If the response is not ok (200) then print an error message
            if (!response.ok) {
                const errorMsg = 'Login error: ' + response.status;
                console.log(errorMsg);
                return;
            }
            // Success!!
            // Using local storage for now, but we can change this to cookies later
            // Set the local storage items to the user input (email and password)
            localStorage.setItem("localEmail", document.getElementById("uid").value);
            localStorage.setItem("localPassword", document.getElementById("password").value);

            //printing in console for testing purposes
            console.log(localStorage.getItem("localEmail"));
            console.log(localStorage.getItem("localPassword"));

            // Set the loggedIn item to true (I used this to check if the user is logged in)
            localStorage.setItem("loggedIn", "true");

            // Redirect to the account details page
            window.location.href = "whatever page you want to redirect to";
        });
}

All code

title: Account Login layout: post —

Account Login