//login form

<section class="module">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-1 mb-sm-40">
            <h4 class="font-alt">Login</h4>
            <hr class="divider-w mb-10">
            <form class="form" name="loginForm" onSubmit="validateForm();" action="index_shop.html" method="post">
              <div class="form-group">
                <input class="form-control" id="username" name="usr" type="text" placeholder="username"/>
              </div>
              <div class="form-group">
                <input class="form-control" id="password" name="pwd" type="password" placeholder="password"/>
              </div>
              <div class="form-group">
                <button class="btn btn-round btn-b" type="submit" value="login">Login</button>
              </div>
              <div class="form-group"><a href="">Forgot Password?</a></div>
            </form>
          </div>

 //register form
          <div class="col-sm-5">
            <h4 class="font-alt">Register</h4>
            <hr class="divider-w mb-10">
            <form class="form" name="regForm" onsubmit="return Validate();" action="index_shop.html" method="post">
              <div class="form-group">
                <input class="form-control" id="Email" type="text" name="email" placeholder="Email"/>
                <div id="email_error"></div>
              </div>
              <div class="form-group">
                <input class="form-control" id="RegUser" type="text" name="username" placeholder="Username"/>
                <div id="name_error"></div>
              </div>
              <div class="form-group">
                <input class="form-control" id="RegPass" type="password" name="password" placeholder="Password"/>
              </div>
              <div class="form-group">
                <input class="form-control" id="confirmPass" type="password" name="confirmPass" placeholder="Re-enter Password"/>
                <div id="password_error"></div>
              </div>
              <div class="form-group">
                <button class="btn btn-block btn-round btn-b" type="submit" value="register">Register</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

//Login validatation

 function validateForm() {
            var user = document.loginForm.usr.value;
            var pass = document.loginForm.pwd.value;
            var username = "username";
            var password = "password";
            if ((user == username) && (pass == password)) {
                return true;
            }
            else {
                alert ("Login was unsuccessful, please check your username and password");
                return false;
            }
        }
//registerValidation

        var email = document.forms['regForm']['email'];
        var username = document.forms['regForm']['username'];
        var password = document.forms['regForm']['password'];
        var password_confirm = document.forms['regForm']['confirmPass'];

        var name_error = document.getElementById('name_error');
        var email_error = document.getElementById('email_error');
        var password_error = document.getElementById('password_error');

        username.addEventListener('blur', nameVerify, true);
        email.addEventListener('blur', emailVerify, true);
        password.addEventListener('blur', passwordVerify, true);

        function Validate() {
            // validate email
            if (email.value == "") {
                email.style.border = "1px solid red";
                document.getElementById('Email').style.color = "red";
                email_error.textContent = "Email is required";
                email.focus();
                return false;
            }
            // validate username
            if (username.value == "") {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username is required";
                username.focus();
                return false;
            }
            if (username.value.length < 3) {
                username.style.border = "1px solid red";
                document.getElementById('RegUser').style.color = "red";
                name_error.textContent = "Username must be at least 3 characters";
                username.focus();
                return false;
            }
            // validate password
            if (password.value == "") {
                password.style.border = "1px solid red";
                document.getElementById('RegPass').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.textContent = "Password is required";
                password.focus();
                return false;
            }
            // check if the two passwords match
            if (password.value != confirmPass.value) {
                password.style.border = "1px solid red";
                document.getElementById('pass_confirm_div').style.color = "red";
                password_confirm.style.border = "1px solid red";
                password_error.innerHTML = "The two passwords do not match";
                return false;
            }
        }
        // event handler functions
        function nameVerify() {
            if (username.value != "") {
                username.style.border = "1px solid #5e6e66";
                document.getElementById('RegUser').style.color = "#5e6e66";
                name_error.innerHTML = "";
                return true;
            }
        }
        function emailVerify() {
            if (email.value != "") {
                email.style.border = "1px solid #5e6e66";
                document.getElementById('Email').style.color = "#5e6e66";
                email_error.innerHTML = "";
                return true;
            }
        }
        function passwordVerify() {
            if (password.value != "") {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('RegPass').style.color = "#5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
            if (password.value === password_confirm.value) {
                password.style.border = "1px solid #5e6e66";
                document.getElementById('confirmPass').style.color = "#5e6e66";
                password_error.innerHTML = "";
                return true;
            }
        }

// Really just an abstraction of localStorage.setItem, it'll come in handy
function storeData(storageKey, myValueToStore) {
    localStorage.setItem(storageKey, myValueToStore);
}

// Really just an abstraction of localStorage.getItem, it'll come in handy
function getData(storageKey) {
    localStorage.getItem(storageKey);
}

function validateForm() {
      var user = document.loginForm.usr.value;
      var pass = document.loginForm.pwd.value;
      var username = "username";
      var password = "password";
      if ((user == username) && (pass == password)) {


          // User entered the correct input, lets store it so that we later can
          // ensure that he has done so
          storeData("validatedUserName", user); // Store the user with key "validatedUserName"


          return true;
      }
      else {
          alert ("Login was unsuccessful, please check your username and password");
          return false;
      }
  }

// In some sort of start up or initially running script:
var previouslyEnteredUserName = getData("validatedUserName");

// If we didn't find any value, our variable will be null, so we can use that
// to check for "login"
if (previouslyEnteredUserName !== null) {
    alert("Hello " + previouslyEnteredUserName + ", welcome back!");
}
else {
     alert("Hey, you have never logged in to this system! I don't have any username stored for you in my LocalStorage!");
}