<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>ThirtyOne Call</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

form {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  cursor: pointer;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}
  </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="/brobin_files/hacker.css" rel="stylesheet">
  </head>
<body>
    <div class="col-lg-6">
        <div class="well">
            <form class="form-horizontal" action="/login" method="POST">
                <fieldset>
                    <legend>Login</legend> 
                    <div class="form-group">
                        <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                        <div class="col-lg-10">
                            <input class="form-control" id="inputEmail" name="email" placeholder="Email" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                        <div class="col-lg-10">
                            <input class="form-control" id="inputPassword" name="password" placeholder="Password" type="password">
                        </div>
                    </div>
                   
                    <div class="form-group">
                        <div class="col-lg-10 col-lg-offset-2">
                          <h5>Don't have an account? <a href="/register">Register</a> or <a href="/onelinkcreateroom">Call</a> directly</h5>
                            <button type="submit"  class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <script>
        function jwtauth(){

            var email = document.getElementById('inputEmail').value;
            var password = document.getElementById('inputPassword').value;
        
            const user = {email: email, password: password };
            axios
    .post('/login', user)
    .then(function(response) {
      // Retrieve the token from the response
      const token = response.data.token;

      // Set the token in the request headers for subsequent requests
      axios.defaults.headers.common['x-access-token'] = token;

      // Redirect to the desired page
      window.location.href = '/welcome';
    })
    .catch(function(error) {
      console.log(error);
      // Handle the error if login fails
    });


           //console.log(result);
        
        
        
        
        
        }
    </script>
</body>
</html>