File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="page">
<div class="flex-column justify-center align-center content">
<div class="login-wrap pd30 border">
<h1 class="page-title text-ct mb30">아이디/비밀번호 찾기</h1>
<div>
<ul class="search-nav flex justify-center align-center">
<div class="gd-6 cursor" v-for="(title, idx) in searchTitle" :key="idx"
@click="searchTypeClick(title.id)"
:class="{ 'text-ct content-title2': true, 'search-selceted': searchType === title.id }">
<li class="pd10">
{{ title.name }}
</li>
</div>
</ul>
<div class="content pt30">
<p class="detail-bold text-ct mb10" v-show="searchType === 'id'">본인인증으로 아이디찾기</p>
<p class="detail-bold text-ct mb10" v-show="searchType === 'pw'">본인인증으로 비밀번호찾기</p>
<div class="find-img mb30">
<img src="../../../resources/img/find.png" alt="본인인증 찾기 아이콘" class="ma" />
</div>
<div v-if="!isSearch">
<div v-show="searchType === 'id'" class="mb30">
<p class="explanation pd10 small-text">
1. 본인임을 확인할 수 있는 휴대폰 본인 인증을 통해 아이디를 찾으실 수 있습니다.<br /><br />
2. 휴대폰 인증의 경우, 통신사 사정으로 메시지를 받지 못하는 경우가 발생될 수 있습니다.<br /><br />
3. 입력하신 정보는 본인확인용으로만 제공되며, 저장되지 않습니다.
</p>
</div>
<div v-show="searchType === 'pw'" class="mb30">
<p class="explanation pd10 mb30 small-text">
1. 가입하신 아이디와 본인임을 확인할 수 있는 휴대폰 본인 인증을 통해 비밀번호를 변경하실 수 있습니다.<br /><br />
2. 휴대폰 인증의 경우, 통신사 사정으로 메시지를 받지 못하는 경우가 발생될 수 있습니다.<br /><br />
3. 입력하신 정보는 본인확인용으로만 제공되며, 저장되지 않습니다.
</p>
</div>
<div class="flex justify-center no-gutters">
<NiceM :service="'prov'" @revData="requestEvent" />
<!-- prov = 실제 호출 devf = 실패시 테스트, devs = 성공테스트 -->
</div>
</div>
<div v-else>
<div v-if="searchType === 'id'">
<p class="content-sub-title text-ct mb20">본인인증이 성공적으로 완료되었습니다!</p>
<p class="detail-text text-ct mb30">ID : <strong>{{ searchId }}</strong></p>
<div class="flex justify-center">
<div class="gd-4">
<button class="large-btn blue-btn ml0" title="로그인" @click="loginPage()">로그인
<!-- <router-link :to="{ path: '/login.page' }">로그인</router-link> -->
</button>
</div>
</div>
</div>
<div v-else>
<div class="mb15">
<label for="id" class="detail-bold mb10 block">변경할 비밀번호</label>
<input type="password" v-model="changePwd" class="full-input" />
</div>
<div class="mb15">
<label for="pw" class="detail-bold mb10 block">변경할 비밀번호 확인</label>
<input type="password" v-model="changePwdCheck" class="full-input" @keyup.enter="checkPwd()" />
</div>
<button @click="checkPwd()" title="비밀번호 변경" class="large-btn blue-btn ml0">비밀번호 변경하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ProgressBar from '../../component/progressbar/ProgressBar.vue';
import NiceM from '../../component/nice/NiceM.vue';
import axios from 'axios';
import COMMON_UTIL from '../../../resources/js/commonUtil.js';
export default {
props: {
type: {
type: String,
required: true
}
},
data() {
return {
searchTitle: [{ id: 'id', name: '아이디찾기' }, { id: 'pw', name: '비밀번호찾기' }],
searchType: null,
isSearch: false,
mbrInfo: {
neis_pridtf_cd: null,
mbr_encpt_pswd: null
},
searchId: null,
changePwd: null,
changePwdCheck: null
};
},
methods: {
searchTypeClick: function (type) {
this.isSearch = false;
this.mbrInfo.neis_pridtf_cd = null;
this.searchType = type;
},
// NICE 인증 결과 확인
requestEvent: async function (eventType, niceObj) {
const vm = this;
// alert(eventType)
// 턴값 반환 있음
if (eventType == 'request') {
// niceObj.sErrorCode 빈값일때 정상 반환
// niceObj.sMobileNo 폰번호
// niceObj.sName 이름
// niceObj.sBirthDate 생년원일(14세 미만은 가입 불가)
// niceObj.sDupInfo 중복확인값(개인 고유 번호64Byte)
const res = await vm.isNiceDuplicated(niceObj.sDupInfo);
if(!res.data.success){
vm.mbrInfo.neis_pridtf_cd = niceObj.sDupInfo;
if (vm.searchType === 'id') {
vm.idSearch();
} else {
vm.isSearch = true;
}
} else {
alert("사용자 정보가 없습니다.")
}
}
},
loginPage: function() {
this.$router.push({ path: "/login.page"});
},
//본인인증 중복 검사
isNiceDuplicated: async function (sDupInfo) {
const vm = this;
try {
const response = await axios({
url: "/mbr/nice.json",
method: "post",
headers: {
"Content-Type": "application/json;",
},
data: { 'neisPridtfCd': sDupInfo }
});
return response
} catch (error) {
alert("본인인증 중복검사 오류, 다시 시도해주세요.");
}
},
idSearch: function () {
const vm = this;
axios({
url: '/mbr/idSearch.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: vm.mbrInfo
}).then(function (res) {
if(res.status == 200){
vm.searchId = res.data.data.lgn_id;
vm.isSearch = true;
}
}).catch(function (error) {
alert(error.response.data.message);
});
},
checkPwd: function () {
const vm = this;
if (!COMMON_UTIL.isEmpty(vm.changePwd) || vm.changePwd == '') {
alert("변경할 비밀번호를 입력해주세요.")
return;
} else if (!COMMON_UTIL.isEmpty(vm.changePwdCheck) || vm.changePwdCheck == '') {
alert("비밀번호 확인을 입력해주세요.")
return;
} else if (vm.changePwd !== vm.changePwdCheck) {
alert("비밀번호가 불일치합니다.");
return;
} else if (!COMMON_UTIL.pwCheck(vm.changePwd)) {
alert('비밀번호는 영문, 숫자, 특수문자를 포함한 6~20자이어야 합니다.')
return;
}
vm.mbrInfo.mbr_encpt_pswd = vm.changePwd;
axios({
url: '/mbr/pwSearch.json',
method: 'post',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
data: vm.mbrInfo
}).then(function (res) {
if(res.status == 200) {
alert('비밀번호 변경에 성공하였습니다. 로그인화면으로 이동합니다.')
vm.changePwd = null;
vm.changePwdCheck = null;
vm.$router.push({ path: '/login.page' });
}
}).catch(function (error) {
alert(error.response.data.message);
});
},
},
watch: {},
computed: {},
components: {
'ProgressBar': ProgressBar,
'NiceM': NiceM,
},
created() {
// const type = this.$route.params.type;
const type = this.$route.query.type;
if (type === 'id') {
this.searchType = type
} else if (type === 'pw') {
this.searchType = type
}
},
mounted() {
},
beforeDestroy() {
},
};
</script>