JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<div>
    <fieldset>
        <legend>Login</legend>
        <label>Username:</label>
        <input type="textbox" id="login_username" value="" />
        <br />
        <label>Password:</label>
        <input type="password" id="login_password" value="" />
        <input type="Button" id="login_button" value="Log In" />
        <br />
    </fieldset>
    
    <fieldset>
        <legend>Sign Up</legend>
        <label>Name:</label><input type="textbox" id="signup_name" value="" /><Br /> 
        <label>Email:</label><input type="textbox" id="signup_email" value="" /><br />
        <label>Validate Email:</label><input type="textbox" id="signup_validateemail" value="" />
        <input type="Button" id="signup_button" value="Sign Up" />
    </fieldset>
</div>
<br />
<span id="logged_in"></span>

JavaScript

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

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

function signUp(){
 var values = [document.getElementById("signup_name").value;,
document.GetElementById("signup_email").value;,docuemtn.GetElementById.value;]
 var email = document.getEmelentById("signup_email").value;
    var email_Varification = document.getElementById("signup_validateemail").value;
   var empty = notEmpty(values);
    var validEmail = validateEmail(email, email_Varification);
    if (values && validEmail){
        return true;
    }else{
        return false;
    }
}

function notEmpty(){
var result = {};
var values = ['test', 'test', 'test'];
for (var i = 0; i < values.length; i++){
    if (values[i] == ""){
        result = {
            status: 'empty',
            message: 'please enter all info'
            
        };
        break;
    }{ return false;}
}return result;
}

function validateEmail(email, email_verification) {

    if (email == email_verification) {

        for (var i = 0; i < dataStore.length; i++) {
            if (dataStore[i]['email'] == email) {
                var result = {
                    status: 'email exists'
                };
                break;
            } else {
                result = {
                    status: 'no match found signed up'
                }
            }
        }
    } else {

        result = {
            status: 'emails do not match'
        };
    }



    return result;
}



function login() {
    /* check the username and password using validLogin() function
       the returned result will be an associative array object
       we store the result from validLogin() in a variable called response
       the variable response is the result of validLogin()
       if login is valid: response will be {status: 'success', message: 'valid login'}
  ...