<div id="input-partial">
  <h1>Reset password</h1>
  <form method="post" id="mainForm">
    <p class="error" id="error"></p>

    <fieldset>
      <ol>
        <li>
          <label for="password">New password</label>
          <input id="password" type="password" name="password" placeholder="">
        </li>
        <li>
          <label for="confirmPassword">Confirm new password</label>
          <input id="confirmPassword" type="password" name="confirmPassword" placeholder="">
        </li>
      </ol>
      <input type="hidden" id="recordId" name="recordId" value="">
    </fieldset>

    <p class="actions"><button type="submit" name="submit">Reset password</button></p>
  </form>
</div>
<div id="response-partial">
  <h1>Password reset</h1>
  <p>Your password was successfully reset.</p>
</div>

<script>
  const hidden = document.getElementById('recordId');
  const recordId = new URLSearchParams(location.search).get('rid');
  hidden.value = recordId;

  setVisibility('response-partial', false);
  function updateResponse() {
    // Swap visibility
    setVisibility('input-partial', false);
    setVisibility('response-partial', true);
  }
  addPostListener('mainForm', 'error', '', updateResponse);
</script>
