{% extends "base.html" %} {% block content %}

<script>
  document.addEventListener("readystatechange", () => {
    if (document.readyState === "complete") {
      /**
       * @type {HTMLInputElement}
       */
      const nameInput = document.getElementById("input-name");
      /**
       * @type {HTMLInputElement}
       */
      const passwordInput = document.getElementById("input-password");
      /**
       * @type {HTMLInputElement}
       */
      const emailInput = document.getElementById("input-name");
      /**
       * @type {HTMLInputElement}
       */
      const pwConfInput = document.getElementById("input-password");
      /**
       * @type {HTMLInputElement}
       */
      const inviteCodeInput = document.getElementById("input-password");
      /**
       * @type {HTMLButtonElement}
       */
      const button = document.getElementById("submit-button");
      button.addEventListener("click", async (event) => {
        const name = nameInput.value;
        const password = passwordInput.value;
        if (password !== pwConfInput.value) {
          // TODO better handle errors
          alert("passwords do not match")
          return
        }
        const invite_code = inviteCodeInput.value
        const email = emailInput.value
        const result = await fetch("/login", {
          method: "POST",
          body: JSON.stringify({ name, password, invite_code, email }),
          headers: {'Content-Type': 'application/json'}
        });
        if (result.ok) {
          window.location = '/me'
        } else {
          console.dir(result)
          // TODO handle error!
        }
      });
    }
  });
</script>

<img
  id="biglogo"
  class="spinny"
  onclick="start_animation()"
  src="logo.png"
  alt="logo"
/>
<h1>Rochester Food Not Bombs!</h1>

<h3>Login:</h3>

<div>
  <label for="name">Your name</label>
  <input type="text" id="input-name" />
</div>
<div>
  <label for="password">Your password</label>
  <input type="password" id="input-password" />
</div>
<div>
  <label for="password">Confirm your password</label>
  <input type="password" id="input-password" />
</div>
<div>
  <label for="invite_code">Invitation Code</label>
  <input type="password" id="input-invitation" />
</div>
<div>
  <label for="email">Entering an email makes web site administration easier</label>
  <input type="email" name="email" id="input-email" />
</div>
<div>
  <button id="submit-button" type="submit">Log in</button>
</div>

{% endblock %}