Go read my login blog first if you havent already

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 signup 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)
  • 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, password, name, etc.
  2. User clicks submit which calls a function to send the data to the backend
  3. Data is sent to the backend which makes a user in the database
  4. User is redirected to the home page/account page/etc.

Form

Step 1 & 2

<div id="loginScreen">
    <!-- Calls function once button is pressed -->
    <form action="javascript:signUpRequest()">
        <!-- Where user inputs name -->
        <p id="name" class="normal">
            <label>Name:
                <input class="normal" type="text" name="legalName" id="legalName" required>
            </label>
        </p>
        <!-- Where user inputs email -->
        <p id="email" class="normal">
            <label>Email:
                <input class="normal" type="text" name="uid" id="uid" required>
            </label>
        </p>
        <!-- Where user inputs password -->
        <p id="passwordd" class="normal">
            <label>Password:
                <input class="normal" type="password" name="password" id="password" required>
            </label>
        </p>
        <!-- Submit button -->
        <p id="logind" class="normal">
            <button>Sign Up</button>
        </p>
    </form>
</div>

Making the user in the database

Step 3 & 4

// Purpose: To create a new user in the database
function signUpRequest() {
    var requestOptions = {
        // Post because we are sending data to the server
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        credentials: 'include',
    };

    // Defines the data from the form
    let fetchName = document.getElementById("legalName").value
    let fetchEmail = document.getElementById("uid").value
    let fetchPassword = document.getElementById("password").value

    // Sends the data to the server
    // THIS IS NOT USING A BODY
    // For some reason, I was running into bad method errors when I tried to use a body. Only parameters in POSTMAN worked so I did this instead.
    // Makes the user in the database
    fetch(`https://stocktify.stu.nighthawkcodingsociety.com/api/person/post?email=${fetchEmail}&password=${fetchPassword}@123&name=${fetchName}`, requestOptions)
    .then(response => {
        // If the response is not ok, then there is an error
        if (!response.ok) {
            const errorMsg = 'Login error: ' + response.status;
            console.log(errorMsg);
            return;
        }
        // Success!!!
        // Redirect to Database location
        console.log("success")
        window.location.href = "/Stocktify/login";
    });
}

All code

title: Account Sign Up layout: post —

Account Sign Up