{% extends 'auth/layout/login_app.html' %}
{% load static %}

{% block content %}
<div class="login-box">
  <div class="login-logo">
    <a href="#"><img src="{% static 'dist/img/logo/Strivest_black_text.png' %}" height="35px" alt="strivest logo"></a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">You are only one step a way from your new password, recover your password now.</p>

      <form action="/admin/reset-password-update/" method="post" id="reset_password_form">
        {% csrf_token %}
        <input type="hidden" name="userId" id="userId" value="{{uid}}">
        <div class="input-group mb-4">
          <input type="password" id="newPassword" name="newPassword" class="form-control" placeholder="Password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
          <div class="errorMsg"></div>
        </div>

        <div class="input-group mb-4">
          <input type="password" id="confirmPassword" name="confirmPassword" class="form-control" placeholder="Confirm Password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
          <div class="errorMsg"></div>
        </div>

        <div class="row">
          <div class="col-12">
            <button type="submit" class="btn btn-primary btn-block" id="reset_password_btn">Change password</button>
          </div>
        </div>
      </form>

      <p class="mt-3 mb-1">
        <a href="/admin/login">Login</a>
      </p>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->
{% endblock %}

{% block custom_js %}
<script>
  $(function(){

    $.validator.addMethod("checkPwdCase", function(value) {
      return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(value);
    });
    
    $.validator.addMethod("checkUpperCase", function(value) {
      return /[A-Z]/.test(value);
    });

    $.validator.addMethod("checkLowerCase", function(value) {
      return /[a-z]/.test(value);
    });

    $.validator.addMethod("checkDigitCase", function(value) {
      return /[0-9]/.test(value);
    });

    $.validator.addMethod("checkSpecialCase", function(value) {
      return /[!@#$%^&*(),.?":{}|<>]/.test(value);
    });

    $('#newPassword').on('keypress', function(event) {
        if (event.which === 32) {
            event.preventDefault();
        }
    });

    $('#confirmPassword').on('keypress', function(event) {
        if (event.which === 32) {
            event.preventDefault();
        }
    });

  });
  $("#reset_password_btn").click(function(){
    $("#reset_password_form").validate({
      rules: {
        "newPassword":{
          required:true,
          minlength:8,
          checkPwdCase: true,
        },
        "confirmPassword":{
          required:true,
          equalTo: "#newPassword"
        }
      },
      messages:{
        "newPassword":{
          required:"Please enter new password",
          minlength:"Password must be at least 8 characters",
          checkPwdCase:"Password must contain at least 1 uppercase letter, 1 lowercase letter, 1 digit & 1 special character"
        },
        "confirmPassword":{
          required:"Please enter confirm password",
          equalTo:"New password & confirm password must be same"
        }
      },
      errorPlacement: function(error, element) {
        error.appendTo(element.closest(".input-group").find('.errorMsg'));
        error.addClass(['error-msg','error-msg-position','error-msg-font-size']);
        //error.appendTo(element.closest("div"));
        //error.addClass(['error-msg', 'error-msg-font-size']);
      }
    });
  });
</script>
{% endblock %}