<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Login</title>
  <link rel='stylesheet' href='/css/bootstrap.min.css' />
  <link rel="stylesheet" type="text/css" href="/css/jquery.bracket.min.css" />
  <link rel='stylesheet' href='/css/style.css' />

  <script type='text/javascript' src='/js/jquery-3.1.1.min.js'></script>
  <script type='text/javascript' src='/js/jquery.bracket.min.js'></script>
  <script type='text/javascript' src='/js/bootstrap.min.js'></script>
  <script type='text/javascript' src='/socket.io/socket.io.js'></script>

  <script>
    $(document).ready(function() {
      let pass;

      function sendPass() {
        email = $("#email").val();
        pass = $("#password").val();
        $.post("/login", {
          passwd: pass
        }, function(data) {
          console.log(data);
          if (data === 'done') {
            window.location.href = "/admin";
          } else {
            $("#alertbox").html("Wrong Password");
            $("#alertbox").show();
          }
        });
      }


      $('.input').keypress(function (e) {
        if (e.which == 13) {
          sendPass();
        }});
      $("#submit").click(function(){
        sendPass();
      });
    });
  </script>
</head>
<body>

  <h1>{{mainHeader}}</h1>
  <div style="text-align:center;">
    <div id="alertbox" class="alert alert-danger" style="display:none;" role="alert"></div><br>
    <input class="input" type="password" size="40" placeholder="Password" id="password"><br><br>
    <input type="submit" class="btn btn-primary" value="Submit" id="submit">
  </div>

</body>

</html>
