Untitled

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>PRSN</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/main.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  </head>
  <body>
    <div id="credentialcontainer">
      <div id="credentialcontainer_logo"><img src="images/logo.png"></div>
      <div id="credentialcontainer_content">
        <span id="login">Have an account? Login now!</span>
      </div>
    </div>

    <script src="clientjs/socket.io.js"></script>
    <script>
        var socket = io();

        $('form#login').submit(function(){
          var credentials = {
            username: $('#username').val(),
            password: $('#password').val()
          };
          socket.emit('login request', credentials);
          return false;
        });

        socket.on('success', function(data) {
          var user = document.cookie = {username: data.username, password: data.password};
          $('#statusdiv').text(data.message + data.username).attr("class", "green");
          console.log(user.username, user.password);
        });

        socket.on('unsuccessful', function(message) {
            $('#statusdiv').text(message).attr("class", "red");
        });

        function showLogin () {
          var html = `
          <h1>LOGIN</h1>
          <form id="login" action="">
              <input id="username" placeholder="username" /><br />
              <input id="password" placeholder="password" /><br />
              <button>SUBMIT</button>
          </form>
          <div id="statusdiv"></div>
          `;

          $('#credentialcontainer_content').html(html);
        }

        $('#login').click(function(e) {
          e.preventDefault();
          showLogin();
        });

        $('form').on("submit", function(e) {
          e.preventDefault();
        });

    </script>
  </body>
  </html>