2024.06.22_숙제

[이규희]

MemberController.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

//메일 전송하기(아이디찾기, 비밀번호 찾기)     private String mailSend(String toMail, String title, String mailFlag, String part) throws MessagingException {         HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes()).getRequest();         String content = "";                  // 메일 전송을 위한 객체 : MimeMessage(), MimeMessageHelper()         MimeMessage message = mailSender.createMimeMessage();         MimeMessageHelper messageHelper = new MimeMessageHelper(message, true, "UTF-8");                  // 메일보관함에 작성한 메세지들의 정보를 모두 저장시킨후 작업처리         messageHelper.setTo(toMail);            // 받는 사람 메일 주소         messageHelper.setSubject(title);    // 메일 제목                  // 메세지 보관함의 내용(content)에 , 발신자의 필요한 정보를 추가로 담아서 전송처리한다.         if(part.equals("findMid")) {             content = content.replace("\n", "<br>");             content += "<h2>안녕하세요 GH Bank입니다.</h2><br>"                     + "<h3>GH Bank의 보안 시스템에 따라 귀하의 아이디 찾기 요청이 접수되었습니다.<br>"                     + "아래는 귀하의 계정에 대한 아이디 정보입니다.<br>";             content += "<br><hr><h3>"+mailFlag+"</h3><hr><br>";             content += "아이디를 사용하여 [GH Bank] 홈페이지에 접속하시고, 필요 시 비밀번호 재설정도 진행해 주시기 바랍니다.<br>"                     + "감사합니다.<br></h3>";             content += "[GH Bank] 드림";         }         else if(part.equals("newPassword")) {             // 메세지 보관함의 내용(content)에 , 발신자의 필요한 정보를 추가로 담아서 전송처리한다.             content = content.replace("\n", "<br>");             content += "<h2>안녕하세요 GH Bank입니다.</h2><br>"                     + "<h3>GH Bank의 보안 시스템에 따라 귀하의 비밀번호 재설정 요청이 접수되었습니다.<br>"                     + "아래의 임시 비밀번호를 사용하여 로그인 한 후, 즉시 새로운 비밀번호로 변경해 주시기 바랍니다.<br>"                     + "보안을 위해 임시 비밀번호를 타인과 공유하지 마시고, 새로운 비밀번호는 이전에 사용한 적 없는 비밀번호로 설정해 주시기 바랍니다.<br>"                     + "감사합니다.<br></h3>";             content += "<br><hr><h3>"+mailFlag+"</h3><hr><br>";             content += "[GH Bank] 드림";         }         messageHelper.setText(content, true);                  // 메일 전송하기         mailSender.send(message);                  return "1";     }          @ResponseBody     @RequestMapping(value = "/memberFindMid", method = RequestMethod.POST)     public String memberFindMid(String name, String email) throws MessagingException {         MemberVO vo = memberService.getMemberNameCheck(name);         if(vo != null && vo.getEmail().equals(email)) {             String mid = vo.getMid();                      // 회원정보와 일치하는 아이디를 메일로 전송처리한다.         String part = "findMid";         String title = "[GH Bank] 아이디 찾기 안내";         String mailFlag = "아이디 : " + mid;         String res = mailSend(email, title, mailFlag, part);                                   if(res == "1") return "1";         }                  return "0";     } Colored by Color Scripter

cs

memberLogin.jsp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c:set var="ctp" value="${pageContext.request.contextPath}" /> <%     // 로그인창에 아이디 체크 유무에 대한 처리     // 쿠키를 검색해서 cMid가 있을때 가져와서 아이디입력창에 뿌릴수 있게 한다.     Cookie[] cookies = request.getCookies();     if(cookies != null) {         for(int i=0; i<cookies.length; i++) {             if(cookies[i].getName().equals("cMid")) {                 pageContext.setAttribute("mid", cookies[i].getValue());                 break;             }         }     } %> <!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>memberLogin.jsp</title>   <%@ include file = "/WEB-INF/views/include/bs4.jsp" %>   <style>       .spinner-container {       position: fixed;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       display: none;       z-index: 9999; /* 다른 요소들보다 위에 표시되도록 합니다 */     }   </style>   <script>     'use strict';          // 처음 로딩시는 아이디찾기/비밀번호 찾기(가려진상태)     $(function(){         $("#searchMid").hide();         $("#searchPassword").hide();     });          // 비밀번호 찾기버튼 누르면(보이기)     function pwdSearch() {         $("#searchPassword").show();         $("#searchMid").hide();     }          //아이디 찾기버튼 누르면(보이기)     function midSearch() {         $("#searchMid").show();         $("#searchPassword").hide();     }           // 임시비밀번호 등록시켜주기   function newPassword() {       let mid = $("#midSearch").val().trim();       let email = $("#emailSearch2").val().trim();       if(mid == "" || email == "") {           alert("가입시 등록한 아이디와 메일주소를 입력하세요");           $("#midSearch").focus();           return false;       }              $.ajax({           url  : "${ctp}/member/memberNewPassword",           type : "post",           data : {               mid   : mid,               email : email           },           beforeSend: function() {               // AJAX 요청이 시작되기 전에 스핀 태그 표시               $("#spinner-password").css("display", "inline-block");           },           success:function(res) {               // AJAX 요청이 성공하면 스핀 태그 숨김               $("#spinner-password").css("display", "none");                              if(res != "0") alert("새로운 비밀번호가 회원님 메일로 발송 되었습니다.\n메일주소를 확인하세요.");               else alert("등록하신 정보가 일치하지 않습니다.\n확인후 다시 처리하세요.");           },           error : function() {               // AJAX 요청이 실패해도 스핀 태그를 숨김               $("#spinner-password").css("display", "none");               alert("전송오류!!")           }       });   }           //이메일로 아이디 보내주기   function findMid() {       let name = $("#nameSearch").val().trim();       let email = $("#emailSearch1").val().trim();       if(name == "" || email == "") {           alert("가입시 등록한 이름과 메일주소를 입력하세요");           $("#nameSearch").focus();           return false;       }              $.ajax({           url  : "${ctp}/member/memberFindMid",           type : "post",           data : {               name   : name,               email : email           },           beforeSend: function() {               $("#spinner-mid").css("display", "inline-block");           },           success:function(res) {               $("#spinner-mid").css("display", "none");                              if(res != "0") alert("회원님의 아이디를 메일로 발송 했습니다.\n메일주소를 확인하세요.");               else alert("등록하신 정보가 일치하지 않습니다.\n확인후 다시 처리하세요.");           },           error : function() {               $("#spinner-mid").css("display", "none");               alert("전송오류!!")           }       });   }   </script> </head> <body> <jsp:include page="/WEB-INF/views/include/nav.jsp" /> <jsp:include page="/WEB-INF/views/include/slide2.jsp" /> <p><br/></p> <div class="container">   <form name="myform" method="post">     <table class="table table-bordered text-center">       <tr>         <td colspan="2"><font size="5">로 그 인</font></td>       </tr>       <tr>         <th>아이디</th>         <td><input type="text" name="mid" value="${mid}" autofocus required class="form-control"/></td>       </tr>       <tr>         <th>비밀번호</th>         <td><input type="password" name="pwd" value="1234" required class="form-control"/></td>       </tr>       <tr>         <td colspan="2">           <input type="submit" value="로그인" class="btn btn-success mr-2"/>           <input type="reset" value="다시입력" class="btn btn-warning mr-2"/>           <input type="button" value="회원가입" xxxxonclick="location.href='${ctp}/member/memberJoin';" class="btn btn-primary mr-4"/>         </td>       </tr>     </table>     <table class="table p-0">         <tr>             <td class="text-center">                 <input type="checkbox" name="idSave" checked /> 아이디 저장 &nbsp;&nbsp;&nbsp;                     [<a href="xxxxjavascript:midSearch()">아이디 찾기</a>] /                         [<a href="xxxxjavascript:pwdSearch()">비밀번호 찾기</a>]                         </td>         </tr>     </table>   </form>   <div id="searchPassword">     <hr/>       <table class="table table-bordered p-0 text-center">         <tr>           <td colspan="2" class="text-center">             <font size="4"><b>비밀번호 찾기</b></font>             (가입시 입력한 아이디와 메일주소를 입력하세요)           </td>         </tr>         <tr>           <th>아이디</th>           <td><input type="text" name="midSearch" id="midSearch" class="form-control" placeholder="아이디를 입력하세요"/></td>         </tr>         <tr>           <th>메일주소</th>           <td><input type="text" name="emailSearch2" id="emailSearch2" class="form-control" placeholder="메일주소를 입력하세요"/></td>         </tr>         <tr>           <td colspan="2" class="text-center">             <input type="button" value="새비밀번호발급" xxxxonclick="newPassword()" class="form-control btn btn-outline-primary" placeholder="메일주소를 입력하세요"/>                  <div id="spinner-password" class="spinner-container">                       <div id="spinner" class="spinner-border text-muted"></div>                     </div>           </td>         </tr>       </table>   </div>   <div id="searchMid">     <hr/>       <table class="table table-bordered p-0 text-center">         <tr>           <td colspan="2" class="text-center">             <font size="4"><b>아이디 찾기</b></font>             (가입시 입력한 이름과 메일주소를 입력하세요)           </td>         </tr>         <tr>           <th>이름</th>           <td><input type="text" name="nameSearch" id="nameSearch" class="form-control" placeholder="이름을 입력하세요"/></td>         </tr>         <tr>           <th>메일주소</th>           <td><input type="text" name="emailSearch1" id="emailSearch1" class="form-control" placeholder="메일주소를 입력하세요"/></td>         </tr>         <tr>           <td colspan="2" class="text-center">             <input type="button" value="아이디 찾기" xxxxonclick="findMid()" class="form-control btn btn-outline-primary" placeholder="메일주소를 입력하세요"/>               <div id="spinner-mid" class="spinner-container">                       <div id="spinner" class="spinner-border text-muted"></div>                     </div>           </td>         </tr>       </table>   </div> </div> <p><br/></p> <jsp:include page="/WEB-INF/views/include/footer.jsp" /> </body> </html> Colored by Color Scripter

cs

실행화면

[행복]

beforeSend명령어를 활용한 spinner 사용예제~ 아주 좋아요..
다양한 방법들이 많이 있죠..
응용 잘 보았습니다. 수고하셨어요