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

    <fieldset>
      <ol>
        <li>
          <label for="input-email">Email</label>
          <input id="input-email" type="email" name="email" autofocus>
        </li>
      </ol>
    </fieldset>

    <p class="actions"><button type="submit" name="submit">Send recovery email</button></p>

    <p class="actions"><a id="input-login-link" href="" class="link">Log in</a></p>
  </form>
</div>
<div id="response-partial">
  <h1>Email sent</h1>
  <p>If your account exists, an email has been sent with a link to reset your password.</p>
  <p>If you do not receive your email in a couple of minutes, check your spam folder or try sending another email.</p>

  <ul class="actions">
    <li><a id="response-login-link" href="" class="link">Back to Log In</a></li>
    <li><a id="response-forgot-link"  href="" class="link">Back to Forgot Password</a></li>
  </ul>
</div>

<script>
  addControlLinks('<%= idpIndex %>', {
    'input-login-link': 'login',
    'response-login-link': 'login',
    'response-forgot-link': 'forgotPassword'
  });

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