<html>
  <head>
  </head>
  <body>
    <form id="register-form" action="/register" method="post">
      <input placeholder="username" type="text" name="username">
      <input placeholder="password" type="password" name="password">
      <input placeholder="email" type="text" name="email">
      <input type="submit">
    </form>
    <script type='text/javascript'>
      const form = document.getElementById('register-form');
      form.addEventListener('submit', (event) => {
        const data = new FormData(form);
        const postRepresentation = new URLSearchParams();
        postRepresentation.set('username', data.get('username'));
        postRepresentation.set('password', data.get('password'));
        postRepresentation.set('email', data.get('email'));

        event.preventDefault();

        fetch('/register', {
          method: 'POST',
          body: postRepresentation,
          credentials: 'same-origin',
        })
          .then((response) => {
            if (response.status === 201) {
              window.location = '/login.html';
            } else {
              window.location = '/500.html';
            }
          });
      });
    </script>
  </body>
</html>
