{% extends "base.html" %}

{% block head %}
<script>
  function lmno_login_loadend(request, username) {
  if (request.status === 404) {
    add_message("danger", "User authentication failed. Please try again.");
    return;
  }

  /* Now that user is logged in, advance to the desired page (if any). */
  const url = new URL(window.location);
  const next_param = url.searchParams.get('next');
  if (next_param) {
    window.location.href = next_param;
    return;
  }

  /* Otherwise, just report the successful login. */
  add_message("success", `User ${username} logged in. Have fun.`);
}

function lmno_login(form) {
  const username = form.username.value;
  const password = form.password.value;

  console.log("In lmno_login with username: " + username);
  var request = new XMLHttpRequest();
  request.addEventListener("loadend", () => lmno_login_loadend(request, username));

  request.open("POST", "/login");
  request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  request.send(`{"username": "${username}", "password": "${password}"}`);
}
</script>
{% endblock %}

{% block page %}
<!-- The return false prevents the page from being reloaded -->
<form id="login-form" onsubmit="lmno_login(this); return false">
  <div class="form-field large">
    <label for="username">Username</label>
    <input type="text" id="username" required autofocus>
  </div>

  <div class="form-field large">
    <label for="Password">Password</label>
    <input type="password" id="password" required>
  </div>

  <div class="form-field large">
    <button type="submit">
      Login
    </button>
  </div>
</form>
{% endblock %}