<!doctype html>
<html lang="en" data-bs-theme="dark">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <title>User</title>
</head>

<body>

  <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>

</body>

</html>