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="login-page page">
<div class="flex-column justify-center align-center content">
<div class="login-wrap pd30">
<div class="login-title text-ct mb40 user-login">
<p v-show="tabView === 'id'">아이디 찾기</p>
<p v-show="tabView === 'pw'">비밀번호 초기화</p>
</div>
<ul class="flex align-center find-tab mb30 pd10">
<li
v-for="(tab, idx) in tabList"
:key="idx"
@click="showTab(tab.id)"
:class="{
'gd-6 pd5 text-ct radius': true,
'tab-active': tabView === tab.id,
}"
>
{{ tab.name }}
</li>
</ul>
<div class="tab-content">
<div
class="flex-column justify-center content"
v-show="tabView === 'id'"
style="min-height: 275px"
>
<div>
<div class="input-group mb20">
<label for="name" class="login-label">이름</label>
<input
type="text"
name=""
id="name"
class="full-input login-input"
v-model="mbrVO.mbrNm"
placeholder="이름을 입력하세요"
ref="mbrNm"
/>
</div>
<div class="input-group mb20">
<label for="eml" class="login-label">이메일</label>
<input
type="text"
name=""
id="eml"
class="full-input login-input"
v-model="mbrVO.eml"
placeholder="이메일을 입력하세요"
@keyup.enter="fnSearchId"
ref="eml"
/>
</div>
<button
class="large-btn green-btn point-font fw-bold"
@click="fnSearchId"
>
조회
</button>
</div>
</div>
<div
class="flex-column justify-center content"
v-show="tabView === 'pw'"
style="min-height: 275px"
>
<div>
<div class="input-group mb20">
<label for="lgnId" class="login-label">아이디</label>
<input
type="text"
name=""
id="lgnId"
class="full-input login-input"
v-model="mbrVO.lgnId"
placeholder="아이디를 입력하세요"
ref="lgnId"
/>
</div>
<div class="input-group mb20">
<label for="mbrNm" class="login-label">이름</label>
<input
type="text"
name=""
id="mbrNm"
class="full-input login-input"
v-model="mbrVO.mbrNm"
placeholder="이름을 입력하세요"
ref="mbrNm"
/>
</div>
<div class="input-group mb20">
<label for="eml" class="login-label">이메일</label>
<input
type="text"
name=""
id="eml"
class="full-input login-input"
v-model="mbrVO.eml"
placeholder="이메일을 입력하세요"
@keyup.enter="fnSearchPswd"
ref="eml"
/>
</div>
<button
class="large-btn green-btn point-font fw-bold"
@click="fnSearchPswd"
>
초기화
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import validateParams from "../../../resources/js/validateParams";
// API
import { searchIdProc } from "../../../resources/api/mbrInfo";
import { resetPswdProc } from "../../../resources/api/mbrInfo";
export default {
mixins: [validateParams],
data: () => {
return {
tabList: [
{ id: "id", name: "아이디 찾기" },
{ id: "pw", name: "비밀번호 초기화" },
],
mbrVO: {
lgnId: null,
mbrNm: null,
eml: null,
},
tabView: "id",
};
},
created() {
const tab = this.$route.query.tab;
if (tab) {
this.tabView = tab;
}
},
methods: {
// tab conten 보여주기
showTab(content) {
this.tabView = content;
},
// axios: 아이디 찾기
async fnSearchId() {
// 유효성검사
if (!this.validationId()) {
return;
}
// 데이터 세팅
let data = this.mbrVO;
// 실행
try {
const response = await searchIdProc(data);
let lgnId = response.data.data;
let isCheck = confirm(
"아이디 조회에 성공했습니다.\n회원님의 아이디는 " +
lgnId +
"입니다.\n로그인 페이지로 이동하시겠습니까?"
);
if (isCheck) {
this.$router.push({
path: "/login.page",
});
}
} catch (error) {
alert(
"입력한 정보와 일치하는 회원이 존재하지 않습니다.\n다시 시도하세요."
);
this.mbrVO = {
mbrNm: null,
eml: null,
};
}
},
// axios: 비밀번호 찾기
async fnSearchPswd() {
// 유효성검사
if (!this.validationPswd()) {
return;
}
// 데이터 세팅
let data = this.mbrVO;
// 실행
try {
const response = await resetPswdProc(data);
if (response.status == 200) {
let isCheck = confirm(
"비밀번호 초기화에 성공했습니다.\n로그인 페이지로 이동하시겠습니까?"
);
if (isCheck) {
this.$router.push({
path: "/login.page",
});
}
}
} catch (error) {
alert(
"입력한 정보와 일치하는 회원이 존재하지 않습니다.\n다시 시도하세요."
);
this.mbrVO = {
mbrNm: null,
eml: null,
};
}
},
// 아이디찾기 유효성검사
validationId() {
// 이름
if (!this.validateNm(this.mbrVO.mbrNm)) {
return false;
}
// 이메일
if (!this.validateEmlFull(this.mbrVO.eml)) {
return false;
}
return true;
},
// 비밀번호초기화 유효성검사
validationPswd() {
// 아이디
if (!this.validateNm(this.mbrVO.lgnId)) {
return false;
}
// 이름
if (!this.validateNm(this.mbrVO.mbrNm)) {
return false;
}
// 이메일
if (!this.validateEmlFull(this.mbrVO.eml)) {
return false;
}
return true;
},
},
};
</script>