<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">Password</label>
      <input type="password" class="form-control" name="password" id="password">
    </div>

    <button type="submit" class="btn btn-primary">Add</button>
  </form>
  <br>
  <div class="btn btn-primary" id="delete">Delete</div>
  <br>
  <div class="btn btn-primary" id="get"> 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({"password": 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({"password": password}),
      })
      const data = await response.json();
      console.log(data);
      document.getElementById('text').textContent = JSON.stringify(data, null, 2);
    }

    document.getElementById('delete').addEventListener('click', deleteUser);
    document.getElementById('get').addEventListener('click', getUser);

  </script>
</div>