{% extends "base.html" %}

{% block content %}
<user-update-password id="user-update-password" inline-template>
  <div>
    <h1>Change password</h1>
    <form id="password-form" @submit.prevent="submitPassword">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
      <input autocomplete="username" name="username" type="text" value="{{user.username}}" style="display:none;">
      <div>
        <label for="id_new_password">New password:</label>
        <input autocomplete="new-password" id="id_new_password"
               name="new_password" placeholder="New password" required=""
               type="password" v-model="newPassword" ref="newPassword">
      </div>
      <div>
        <label for="id_new_password2">Confirm password:</label>
        <input autocomplete="new-password" id="id_new_password2"
               name="new_password2" placeholder="Type password again"
               required="" type="password" v-model="newPassword2">
        <div v-if="newPassword != newPassword2">Password and confirmation do not match.</div>
      </div>
      <div class="form-group">
        <label for="id_password">Password:</label>
        <input autocomplete="current-password" id="id_password"
               name="password" placeholder="Password" required=""
               type="password" v-model="password" ref="password">
        <p class="invalid-feedback">
        </p>
      </div>
      <div>
        <button type="submit" name="submit" value="Submit">Update</button>
      </div>
    </form>
  </div>
</user-update-password>
{% endblock %}