JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<div id="sign_up">
    <fieldset>
        <legend>Sign up</legend>
        <label>Name:</label>
        <input type="text" id="sign_up_name" value="" /> <br/>
        <label>Password:</label>
        <input type="password" id="sign_up_password" value="" /> <br/>
        <label>Email:</label>
        <input type="text" id="sign_up_email" value="" /> <br/>
        <label>Email verification:</label>
        <input type="text" id="sign_up_email_verification" value="" /> <br/>
        <button id="sign_up_button">Sign up</button>
        <span id="signed_up"></span>
    </fieldset>
</div>

<div id="login">
    <fieldset>
        <legend>Login</legend>
        <label>Username:</label>
        <input type="text" id="login_username" value="" /> <br/>
        <label>Password:</label>
        <input type="password" id="login_password" value="" /> <br/>
        <button id="login_button">Login</button> 
        <span id="logged_in"></span>
    </fieldset>
</div>

JavaScript

dataStore = [
    {
        'username':'benjamin', 
        'password':'button'
    },
    {
        'username':'gary',
        'password':'pyne'
    }
];

document.getElementById("login_button").onclick=function(){login()};
document.getElementById("sign_up_button").onclick=function(){signUp()};

/* Sign up section */

function signUp(){
    // get all the form values
    var name = document.getElementById("sign_up_name").value
    var password = document.getElementById("sign_up_password").value
    var email = document.getElementById("sign_up_email").value
    var email_verification = document.getElementById("sign_up_email_verification").value
    
    var values = [name,password,email,email_verification]
    
    // check none of our form values are empty
    var empty = missingFields(values);
    if(empty){
        document.getElementById('signed_up').innerHTML = 'You must enter information for all of the fields.';
        return; // stops any further processing, we don't need to go any further.
    } else {
        // perform email validation
        var response = validateEmail(email, email_verification);
        
        if(response['status'] == 'success') {
            // user has entered all the signup information, the email doesn't exist as a username in our dataStore
            // add the new details to our dataStore
            dataStore.push({username: email, password: password});
            
            // display successfull signup message
            document.getElementById('signed_up').innerHTML = 'Thank you for signing up.';
        } else {
            // display unsucessfull message from validateEmail()
            document.getElementById('signed_up').innerHTML = response['message'];
        }
    }
        
}

function missingFields(values){
    result = false;
    for(var i = 0; i < values.length; i++){
        if(values[i] == '') {
            result = true;
            break;
        }
    }
    return result;
}

function...