<div class="container">
  <form action="/user" method="post">
    <div class="mb-3">
      <label class="form-label">omdb_key</label>
      <input type="text" class="form-control" name="omdb_key">
    </div>
    <div class="mb-3">
      <label class="form-label">twitch_client_id</label>
      <input type="text" class="form-control" name="twitch_client_id">
    </div>
    <div class="mb-3">
      <label class="form-label">twitch_client_secret</label>
      <input type="text" class="form-control" name="twitch_client_secret">
    </div>
    <div class="mb-3">
      <label class="form-label">mac_address</label>
      <input type="text" class="form-control" name="mac_address">
    </div>
    <div class="mb-3">
      <label class="form-label">Password</label>
      <input type="password" class="form-control" name="pass" id="password">
    </div>

    <button type="submit" class="btn btn-primary">Add</button>
  </form>
  <br>
  <div class="btn btn-primary" id="delete" onclick="deleteUser()">Delete</div>
  <br>
  <div class="btn btn-primary" id="get" onclick="getUser()"> Get</div>
  <br>
  <div id="text"></div>

  <script>

    async function deleteUser() {
      const password = document.getElementById('password').value;
      const response = await fetch('/user', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ "pass": password }),
      })
      const data = await response.json();
      document.getElementById('text').innerHTML = data.message;
    }

    async function getUser() {
      const password = document.getElementById('password').value;
      const response = await fetch('/user', {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ "pass": password }),
      })
      const data = await response.json();
      document.getElementById('text').textContent = JSON.stringify(data, null, 2);
    }

  </script>
</div>