<template> <div class="userIDsearch-wrap"> <div> <div class="w1400"> <div class="login-sec"> <div class="IDsearch-logo"> <h1> 아이디/비밀번호 찾기 </h1> </div> <div class="userIDsearch-box-button"> <div @click="IDsearchBox = 'inbox'" :style="{ backgroundColor: IDsearchBox === 'inbox' ? '#3f87f7' : 'white', color: IDsearchBox === 'inbox' ? 'white' : 'black' }"> <input type="radio" id="inbox" value="inbox" v-model="IDsearchBox"> <label for="inbox">아이디 찾기</label> </div> <div @click="IDsearchBox = 'outbox'" :style="{ backgroundColor: IDsearchBox === 'outbox' ? '#3f87f7' : 'white', color: IDsearchBox === 'outbox' ? 'white' : 'black' }"> <input type="radio" id="outbox" value="outbox" v-model="IDsearchBox"> <label for="outbox">비밀번호 찾기</label> </div> </div> <div class="IDsearch-content" v-if="IDsearchBox == 'inbox'"> <div> <p>아이디 찾는 방법을 선택해주세요.</p> </div> <!-- <div> <details> <summary>내정보로 찾기</summary> <ul> <li>이름<input type="text"></li> <li>생년월일<input type="text"></li> <li> <div> 성별 </div> <div class="info-pw-maill idsearch" style="padding: 0;"> <div> <input type="radio" name="gender"> <span>남</span> <input type="radio" name="gender"> <span>여</span> </div> </div> </li> </ul> <button>아이디 찾기</button> </details> </div> --> <div> <div class="IDsearch-content-two"> <details> <summary>등록된 이메일로 찾기</summary> <div> <p>내 정보에 등록된 이메일을 입력해주세요.</p> <ul> <li>이름<input type="text" v-model="user_nm"></li> <li>이메일<input type="text" v-model="user_eml" @keyup.enter="userIdSearch"></li> </ul> <button class="blue-btn" @click="userIdSearch">아이디 찾기</button> </div> </details> </div> </div> </div> <div v-if="IDsearchBox == 'outbox'" class="userpwsearch"> <div> <p>회원님의 아이디와 이메일을 입력해주세요.</p> <ul> <li>ID<input type="text" v-model="user_id"></li> <li>이메일<input type="text" v-model="user_eml" @keyup.enter="userPasswordSearch"></li> </ul> <button class="blue-btn" @click="userPasswordSearch">비밀번호 찾기</button> </div> </div> </div> </div> </div> <!-- 모달 --> <div v-if="isModal1Open" class="pwchange2"> <div class="pwchange-div"> <div> <p>이메일로 전송된 인증번호를 입력해주세요.</p> <input type="text" v-model="userInput"> </div> <div> <div class="pwchange2-button"> <button @click="closeAllModals" class="dark-gray-btn">취소</button> <button @click="checkCodeAndOpenModal2" class="blue-btn">확인</button> </div> </div> </div> </div> <div v-if="isModal2Open" class="pwchange2"> <div class="pwchange-div"> <p>비밀번호 변경하기</p> <div> <ul> <li> <span>변경할 비밀번호</span> <input type="password" v-model="changePwd"> </li> <li> <span>비밀번호 확인</span> <input type="password" v-model="changePwdCheck" @keyup.enter="changePassword"> </li> </ul> </div> <div> <button @click="closeAllModals" class="dark-gray-btn">취소</button> <button @click="changePassword" class="blue-btn">변경하기</button> </div> </div> </div> </div> </template> <script> import axios from 'axios'; import { vModelCheckbox } from 'vue'; export default { data() { return { IDsearchBox: 'inbox', userInput: '', actualCode: '123456', isCodeMatched: false, isModal1Open: false, isModal2Open: false, // 아이디 비번 찾기 요소 user_nm: '', // 보내는 사람 이름 user_id: '', // 보내는 사람 아이디 user_eml: '', // 보내는 사람 이메일 passData: {}, // 비밀번호 찾을 때 데이터 changePwd : null, changePwdCheck : null, } }, created() { if (this.$route.query.mode === 'id') { this.IDsearchBox = 'inbox'; } else if (this.$route.query.mode === 'pw') { this.IDsearchBox = 'outbox'; } }, methods: { openModal1() { this.isModal1Open = true; }, openModal2() { this.isModal1Open = false; this.isModal2Open = true; }, closeAllModals() { this.isModal1Open = false; this.isModal2Open = false; }, // 아이디 찾기 위해 이름과 이메일을 보내는 메서드 userIdSearch: function () { const userData = { user_nm: this.user_nm, user_eml: this.user_eml, }; // Axios를 사용하여 서버로 유저 데이터 전송 axios.post('/user/userIdSearch.json', userData) .then(function (response) { console.log(response) if (response.data != false) { alert("메일이 발송되었습니다! 등록된 이메일을 확인해주세요"); window.location = '/Login.page'; } else { alert("존재하지 않는 아이디입니다!"); } }) .catch(error => { console.log("search - error : ", error); alert("오류 발생! 입력을 다시 확인해주세요!"); }); }, // 비밀번호 찾기 위해 id와 이메일을 보내는 메서드 userPasswordSearch: function () { const vm = this; const userData = { user_id: this.user_id, user_eml: this.user_eml, }; axios.post('/user/userPasswordSearch.json', userData) .then(function (response) { vm.passData = response.data; if (vm.passData.resultCheck != false) { alert("인증번호가 발송되었습니다. 메일을 확인해주세요!"); vm.openModal1(); } else { alert("아이디나 이메일을 다시 확인해주세요!"); } }) .catch(error => { console.log("search - error : ", error); alert("오류 발생! 입력을 다시 확인해주세요!"); }); }, //인증번호 확인 메서드 checkCodeAndOpenModal2: function () { const vm = this; if (vm.passData.authCode == vm.userInput) { alert("인증번호가 일치합니다. 비밀번호를 변경해주세요"); vm.openModal2(); } else { alert("인증번호가 다릅니다!"); } }, // 비밀번호 변경 메서드 changePassword: function() { const vm = this; let passwordRegex = /^[A-Za-z0-9]{6,20}$/; if (vm.changePwd == null){ alert("변경할 비밀번호를 입력해주세요.") return; } else if(vm.changePwdCheck == null) { alert("비밀번호 확인을 입력해주세요.") return; } else if (vm.changePwd !== vm.changePwdCheck) { alert("비밀번호가 불일치합니다."); return; } else if(!passwordRegex.test(vm.changePwd)){ alert('비밀번호는 6~20자의 영문, 숫자만 사용 가능합니다.') return; } axios({ url: '/user/userPwUpdate.json', method: 'post', headers: { 'Content-Type': 'application/json; charset=UTF-8', }, data: { 'user_id': vm.passData.user_id, 'user_pw': vm.changePwd } }).then(function (response) { if(response.data == 1){ alert('비밀번호 변경에 성공하였습니다.') window.location = '/Login.page'; } else { alert('비밀번호 변경에 실패하였습니다.') } }).catch(function (error) { console.log("companySelectOne - error : ", error); }); }, }, } </script>