<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/base_layout}">


<body>

<section layout:fragment="contentFragment">

  <div class="container">
    <div class="mt-2">
      <h3 class="text-center">비밀번호 초기화</h3>
    </div>

    <div class="container-md container-sm d-flex flex-column flex-wrap align-items-center justify-content-center">
      <div class="card col-lg-4 col-md-8">
        <div class="card-body">
          <form name="passwordResetRequest" id="passwordResetRequest" role="form" th:action="@{/forgot_password.do}" method="post">
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
            <div class="form-floating">
              <input id="email" type="text" class="form-control mb-3" name="email" maxlength="30" required/>
              <label class="form-label" for="email">User ID</label>
            </div>
          </form>

          <div th:if="${param.expired != null}">
            <p>비밀번호 초기화 링크가 만료되었습니다.</p>
          </div>
          <div th:if="${#strings.isEmpty(error) == false}">
            <p th:text="${error}"></p>
          </div>
        </div>
        <div class="card-footer">
          <div class="d-flex flex-wrap align-items-center justify-content-center">
            <button type="button" class="btn btn-primary btn_reset">초기화 요청</button>
          </div>
        </div>
      </div>
      <form th:if="${param.success != null}" class="col-lg-4 col-md-8" name="resetPassword" role="form" th:action="@{/reset_password.do}" method="get">
        <div class="card mt-2 ">
          <div class="card-body">
              <div class="form-floating">
                <input id="resetToken" type="text" class="form-control mb-3" name="token" placeholder="Reset Token" required/>
                <label class="form-label">Token</label>
              </div>
          </div>
          <div class="card-footer">
            <div class="d-flex flex-wrap align-items-center justify-content-center">
              <button type="submit" class="btn btn-primary">초기화 페이지 열기</button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="mt-2 text-center">
      <span class="text-muted"><a th:href="@{/login}">로그인</a></span>
    </div>
  </div>

</section>
</body>


<th:block layout:fragment="contentScript">
  <script>
    $(function() {
      document.getElementById('passwordResetRequest').email.focus();
      let btnReset = document.querySelector('.btn_reset');

      btnReset.addEventListener('click', function(event) {
        let form = document.getElementById('passwordResetRequest');
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        } else {
          form.submit();
        }
        form.classList.add('was-validated');
      });

    });
  </script>

</th:block>

</html>
