password_reset_form.html

{% extends 'base.html' %}


{% block content %}

<style type="text/css">
  .form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
  }
  .form-signin .checkbox {
    font-weight: 400;
  }
  .form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="email"] {
    margin-bottom: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .h3{
    text-align: center;
  }
</style>


<form id="id_password_reset_form" method="POST" class="form-signin">{% csrf_token %}
  <h1 class="h3 mb-3 font-weight-normal">Reset password</h1>
    <input name="email" class="form-control" placeholder="Email address" type="email" id="id_email" required="true" >
  <button id="id_submit_btn" class="btn btn-lg btn-primary btn-block" >Send reset email</button>  
</form>


<script type="text/javascript">

  var submitButton = document.getElementById('id_submit_btn');
  var form = document.getElementById('id_password_reset_form');

  // Add a listener to the click event
  submitButton.addEventListener('click', function (e) {

      AndroidTextListener.onLoading(true)

      e.preventDefault();
      var email = document.getElementById("id_email").value
      
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/api/account/check_if_account_exists/?email=' + email);
      xhr.onload = function() {
          if (xhr.status === 200) {
              var response = JSON.parse(xhr.responseText)
              if(response.response == email){
                console.log(email + " is a valid email!")
                form.submit()
                AndroidTextListener.onSuccess(email)
              }
              else{
                console.log(email + " is NOT valid email!")
                AndroidTextListener.onError("That email doesn't exist on our servers.")
              }
          }
          else {
              console.log(xhr.status)
          }
          AndroidTextListener.onLoading(false)
      };
      xhr.send();

  });

</script>


{% endblock %}