<div class="container">
  <form action="/user" method="post">
    <div class="mb-3">
      <label class="form-label">Name</label>
      <select name="name" class="form-select">
        {{#each keys}}
        <option value="{{this}}">{{this}}</option>
        {{/each}}
      </select>
    </div>

    <div class="mb-3">
      <label class="form-label">Value</label>
      <input type="text" class="form-control" name="value">
    </div>

    <div class="mb-3">
      <label class="form-label">Password</label>
      <input type="password" class="form-control" name="reqPassword" id="password">
    </div>

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

  <script>

    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>