{% extends 'base.html' %}


{% block content %}
<div class="row row-deck row-cards">
  <h1>Registration</h1>
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <h4>Registration will assign you a UUID, please remember this UUID to login!</h4>
        
        <button id="regbtn" class="btn btn-primary ms-auto">Register</button>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="card">
      <div class="card-body">
        <h4>If you already have a UUID, enter it below to login</h4>

        <div class="mb-3">
          <label class="form-label">Enter ID</label>
          <input type="text" class="form-control" placeholder="User ID" id="uuidid" />
        </div>
        
        <button id="loginbtn" class="btn btn-primary ms-auto">Login</button>
      </div>
    </div>
  </div>
</div>

<script>
    document.getElementById("regbtn").addEventListener('click', () => {
      var r = new XMLHttpRequest();
      r.open("POST", "/api/createuser", true);
      r.onreadystatechange = function () {
        r.onload = function () {
          window.location.reload();
        }
      };

      r.setRequestHeader("Content-Type", "application/json")
      // Send data in below way from JS
      r.send();
    });

    document.getElementById("loginbtn").addEventListener('click', () => {
      var r = new XMLHttpRequest();
      r.open("POST", "/api/login", true);
      r.onreadystatechange = function () {
        r.onload = function () {
          window.location.reload();
        }
      };

      r.setRequestHeader("Content-Type", "application/json")
      // Send data in below way from JS
      r.send(JSON.stringify({
        "id": document.getElementById('uuidid').value
      }));
    });
</script>
{% endblock %}