<!DOCTYPE html>
<html>
  <head>
    <title>
      Registration Form
    </title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet'>
    <link
      crossorigin='anonymous'
      href='https://use.fontawesome.com/releases/v5.4.1/css/all.css'
      integrity='sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz'
      rel='stylesheet'
      >
    <style>
      html,
      body {
        display: flex;
        justify-content: center;
        height: 100%;
      }

      body,
      div,
      h1,
      input,
      p {
        padding: 0;
        margin: 0;
        outline: none;
        font-family: Roboto, Arial, sans-serif;
        font-size: 16px;
        color: #666;
      }

      h1 {
        padding: 10px 0;
        font-size: 32px;
        font-weight: 300;
        text-align: center;
      }

      p {
        font-size: 12px;
      }

      hr {
        color: #a9a9a9;
        opacity: 0.3;
      }

      button {
        float: right;
      }
    </style>
  </head>
  <body>
    <noscript>
      This page requires JavaScript enabled to work.
    </noscript>
    <div class='main-block'>
      <h1>
        Registration
      </h1>
      <div>
        <hr>
        <label for='email'>
          <i class='fas fa-envelope'></i>
        </label>
        <input type='text' name='email' id='email' placeholder='Email' required/>
        <hr>
        <label for='name'>
          <i class='fas fa-user'></i>
        </label>
        <input type='text' name='name' id='name' placeholder='Name' required/>
        <hr>
        <label for='password'>
          <i class='fas fa-unlock-alt'></i>
        </label>
        <input type='password' name='password' id='password' placeholder='Password' required/>
        <hr>
        <button id="submit">
          Submit
        </button>
      </div>
      <script lang='javascript' type='module'>
        window.onload = () => {
          let btn = document.getElementById('submit')
          !!btn
            ? btn.addEventListener('click', (event) => {
              let email = document.getElementById('email')?.value;
              let name = document.getElementById('name')?.value;
              let password = document.getElementById('password')?.value;
              fetch('/login', {
                  data: { email, name, password },
                  headers: { 'X-CSRF-Token': '{{ csrf_token }}' },
                  method: 'POST'
                }
              )
              .then(resp => alert(resp.statusText))
              .catch(err => alert(err.detail))
            })
            : void 0;
        };
      </script>
    </div>
  </body>
</html>