JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<form id="userReg" method="post" action="javascript: return false;">
    <div class="item text">
        <label>Username:</label>
        <div class="field">
            <input type="text" name="user_name" id="nameUSER" />
        </div>
    </div>
    <div class="item text">
        <label>Password:</label>
        <div class="field">
            <input type="password" name="password" />
        </div>
    </div>
    <div class="button-wrapper">
        <div class="item button button-default">
            <div class="field">
                <input type="button" id="registerUser" value="Register" />
            </div>
        </div>
    </div>
    <input type="hidden" name="id_entry" value="0" />
</form>
<fieldset name="Login" id="logUser">
    <legend>Login</legend>
    <input type="text" name="first_name" id="firstName" />
    <br />
    <input type="password" id="passWord" />
    <br />
    <div class="item button">
        <div class="field">
            <input type="button" id="logIN" value="login" />
        </div>
    </div>
    <p id="result"></p>
    <p id="negative"></p>
</fieldset>

JavaScript

var User = {
    index: window.localStorage.getItem("User:index"),
    $form: document.getElementById("userReg"),
    $button_register: document.getElementById("registerUser"),
    $button_login: document.getElementById("logIN"),
    self: this,

    init: function () {
        // initialize storage index
        if (!User.index) {
            window.localStorage.setItem("User:index", User.index = 1);
        }

        User.$button_register.addEventListener("click", function (e) {
            alert('testing');
            var entry = {
                id: parseInt(User.$form.id_entry.value),
                user_name: User.$form.user_name.value,
                password: User.$form.password.value
            };
            if (entry.id == 0) {
                User.storeAdd(entry);
            }
        }, true);

 User.$button_login.addEventListener("click", function (entry) {
            for (var i = 0; i < localStorage.length; ++i) {
                var key = localStorage.key(i);
                var reg = new RegExp("User\:\\d+$");
                //Only process user entries
                if(reg.test(key)) {
                    
                    var value = localStorage[key];
                    entry = JSON.parse(window.localStorage.getItem(key));
                    console.log(entry.user_name);
                    console.log(entry);
                } // end if
            }

            if (document.getElementById("firstName").value == entry.user_name) {
                alert("You have logged in");
                if (document.getElementById("firstName").value == undefined) {
                    alert("error");

                }
            } else {
                document.getElementById("negative").innerHTML = "Username or Password does not match"
            }


        }, true);


    },

    storeAdd: function (entry) {
        entry.id = User.index;
        window.localStorage.setItem("User:index", ++User.index);
       ...