GGWEB/src/main/webapp/WEB-INF/jsp/anonymous/findPwd.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script type="text/javascript">
  $(document).on('click', '#sendEmail', function (){
    sendEmail();
  })
  $(document).on('click', '#certifyNumCheck', function (){
    certifyNumCheck();
  })
  $(document).on('click', '#passwordUpdate', function (){
    passwordUpdate();
  })



  function sendEmail(){
    if(inputCheck()){
      $.ajax({
        url: "/sendEmail",
        type: "GET",
        data: {
          userid: $("#userid").val(),
          email: $("#email").val()
        },
        success: function (result) {
          sendEmailAfter(result)
        },
        error: function (request, status, error) {
          alert("인증번호 전송에 실패하였습니다.\n 관리자에게 문의해주세요.");
        }
      });
    }
  }
  function inputCheck(){
    if(!$("#userid").val()){
      alert("아이디를 입력해주세요.")
      return false;
    }
    if(!$("#email").val()){
      alert("이메일을 입력해주세요.")
      return false;
    }
    return true;
  }
  function sendEmailAfter(result){
    switch (result) {
      case "userNull":
        alert("입력된 계정 정보가 없습니다.")
        break;
      case "mailError":
        alert("인증번호 전송에 실패하였습니다.\n 관리자에게 문의해주세요.");
        break;
      case "mailSend":
        alert("인증번호 전송에 성공하였습니다.\n 인증번호를 확인해주세요.")
        $("#sendEmail").attr("disabled", true)
        $("#step1").hide();
        $("#step2").show();
        break;
    }
  }

  function certifyNumCheck(){
    $.ajax({
      url: "/certifyNumCheck",
      type: "GET",
      data: {
        userid: $("#userid").val(),
        certification_num: $("#certification_num").val()
      },
      success: function (result) {
        certifyNumCheckAfter(result);
      },
      error: function (request, status, error) {
        alert("에러가 발생하였습니다. 관리자에게 문의해주세요.");
      }
    });
  }
  function certifyNumCheckAfter(result){
    switch (result){
      case "InfoNull":
        alert("인증번호 발급 정보가 없습니다. 다시 진행해주세요.");
        multiModal.hide();
        break;
      case "numberNotMatch":
        alert("저장된 인증번호와 같지 않습니다.");
        break;
      case "isChecked":
        alert("인증을 마친 번호입니다. 다시 진행해주세요.");
        multiModal.hide();
        break;
      case "expirationTimeAfter":
        alert("인증번호 유효시간이 만료되었습니다. 다시 진행해주세요.");
        multiModal.hide();
        break;
      case "OK":
        alert("인증되었습니다.");
        $("#certifyNumCheck").attr("disabled", true)
        $("#step2").hide();
        $("#step3").show();
        break;
    }
  }
  function passwordUpdate(){
    if(passwordCheck()){
      $.ajax({
        url: "/passwordUpdate",
        type: "POST",
        data: {
          userid: $("#userid").val(),
          certification_num: $("#certification_num").val(),
          password: $("#password").val()
        },
        beforeSend: function (xhr){
          xhr.setRequestHeader($("[name='_csrf_header']").val(), $("[name='_csrf']").val());
        },
        success: function (result) {
          passwordUpdateAfter(result);
        },
        error: function (request, status, error) {
          alert("에러가 발생하였습니다. 관리자에게 문의해주세요.");
        }
      });
    }
  }
  function passwordCheck(){
    const password = $("#password").val()
    const passwordConfirm = $("#passwordConfirm").val()
    if(!password){
      alert("새 비밀번호를 입력해주세요.")
      return false;
    }
    if(!passwordConfirm){
      alert("재입력을 입력해주세요.")
      return false;
    }
    if(password !== passwordConfirm){
      alert("비밀번호가 같지 않습니다.")
      return false;
    }
    return true;
  }
  function passwordUpdateAfter(result){
    switch (result) {
      case "OK":
        alert("변경되었습니다.\n 변경된 비밀번호로 로그인 해주세요.");
        multiModal.hide();
        break;
      case "InfoNull":
        alert("인증절차가 유효하지 않습니다.\n 다시 진행해주세요.");
        multiModal.hide();
        break;
      case "numberNotMatch":
        alert("인증번호가 맞지 않습니다.\n 다시 진행해주세요.");
        multiModal.hide();
        break;
      default:
        alert("변경에 실패하였습니다.");
    }
  }
</script>

<div class="row justify-content-end" id="step1">
  <div class="col-12 row m-1">
    <label for="userid" class="col-4 text-end">아이디</label>
    <div class="col-8">
      <input type="text" class="form-control" id="userid">
    </div>
  </div>
  <div class="col-12 row m-1">
    <label for="email" class="col-4 text-end">이메일</label>
    <div class="col-8">
      <input type="email" class="form-control" id="email">
    </div>
  </div>
  <div class="col-8">
    <button type="button" id="sendEmail" class="btn btn-primary m-3">인증번호 발송</button>
  </div>
</div>
<div class="row justify-content-end" id="step2" style="display: none">
  <div class="col-12 row m-1">
    <label for="certification_num" class="col-4 text-end">인증번호</label>
    <div class="col-8">
      <input type="email" class="form-control" id="certification_num">
    </div>
  </div>
  <div class="col-8">
    <button type="button" id="certifyNumCheck" class="btn btn-primary m-3">인증번호 확인</button>
  </div>
</div>
<div class="row justify-content-end" id="step3" style="display: none">
  <div class="col-12 row m-1">
    <label for="password" class="col-4 text-end">새 비밀번호</label>
    <div class="col-8">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <div class="col-12 row m-1">
    <label for="passwordConfirm" class="col-4 text-end">재입력</label>
    <div class="col-8">
      <input type="password" class="form-control" id="passwordConfirm">
    </div>
  </div>
  <div class="col-8">
    <button type="button" id="passwordUpdate" class="btn btn-primary m-3">비밀번호 변경</button>
    <input type="hidden" name="_csrf_header" value="${_csrf.headerName}"/>
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
  </div>
</div>