<!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-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="@{/reset_password.do}" method="post" th:object="${passwordReset}">
            <input type="hidden" name="token" th:value="${tokenValue}">
            <div class="form-floating">
              <input class="form-control mb-3" th:classappend="${#fields.hasErrors('password')}? 'is-invalid'" name="password" id="password" th:field="*{password}" type="password"
                     size="20" value="" maxlength="100" required>
              <label for="password" class="must" th:text="#{comUssUmt.userManagePasswordUpdt.pass}"></label>
              <th:block th:each="err : ${#fields.errors('password')}">
                <div th:text="${err}" class="invalid-feedback"></div>
              </th:block>
            </div>
            <!-- 비밀번호확인 -->
            <div class="form-floating">
              <input class="form-control mb-3" th:classappend="${#fields.hasErrors('password2')}? 'is-invalid'" name="password2" id="password2" th:field="*{password2}"
                     type="password" size="20" value="" maxlength="100" required>
              <label for="password2" class="must" th:text="#{comUssUmt.userManagePasswordUpdt.passConfirm}"></label>
              <th:block th:each="err : ${#fields.errors('password2')}">
                <div th:text="${err}" class="invalid-feedback"></div>
              </th:block>
            </div>
          </form>
          <div th:if="${param.success != null}">
            <p>비밀번호 초기화 되었습니다.</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>
    </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').password.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>
