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="container">
<div class="page-titleZone flex justify-between align-center" style="width: 25%; margin: 0 auto">
<p class="main-title flex80">비밀번호 변경</p>
</div>
<br />
<div class="row form-box" style="width: 25%; margin: 0 auto">
<div class="content-titleZone">
<p class="box-title">비밀번호 수정</p>
</div>
<div class="table-zone">
<table class="form-table2">
<colgroup>
<col style="width: 30%" />
<col style="width: 70%" />
</colgroup>
<tbody>
<tr>
<th>현재 비밀번호</th>
<td>
<input type="password" class="full-input" id="userPassword" v-model="userEditData.userPassword" />
</td>
</tr>
<tr>
<th>새 비밀번호</th>
<td>
<input type="password" class="full-input" id="changePassword" v-model="changePw" />
</td>
</tr>
<tr>
<th>새 비밀번호 확인</th>
<td>
<input type="password" class="full-input" id="" v-model="changePwConfirm" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-end">
<button class="blue-btn small-btn" @click="checkUserPassword">저장</button>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import store from "../AppStore";
export default {
data() {
return {
userId: store.state.loginUser.user_id,
userEditData: {
userId: null,
userPassword: null,
userNm: null,
userEmail: null,
},
userOriginData: {},
changePw: null,
changePwConfirm: null,
};
},
methods: {
getUserData: function () {
var vm = this;
axios({
url: "/mypage/" + vm.userId,
method: "get",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
})
.then(function (response) {
vm.userEditData = response.data.resultData.selectUserData;
vm.userOriginData = Object.assign({}, vm.userEditData);
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
checkUserPassword: async function () {
var vm = this;
if (vm.$isEmpty(vm.userEditData.userPassword)) {
vm.$showAlert("비밀번호 수정", "현재 비밀번호를 입력해주세요.");
document.getElementById("changePassword").focus();
return;
}
if (vm.$isEmpty(vm.changePw)) {
vm.$showAlert("비밀번호 수정", "새 비밀번호를 입력해주세요.");
document.getElementById("changePassword").focus();
return;
}
if (!vm.$pwCheck(vm.changePw)) {
vm.$showAlert("비밀번호 수정", "새 비밀번호 형식이 올바르지 않습니다.<br/>영어 대문자와 특수 문자를 최소 1개 이상 사용한, 최소 8자 최대 16자 사이의 암호 사용해주세요.");
document.getElementById("changePassword").focus();
return;
}
if (vm.$isEmpty(vm.changePwConfirm)) {
vm.$showAlert("비밀번호 수정", "새 비밀번호 확인을 해주세요.");
return;
}
if (vm.changePw !== vm.changePwConfirm) {
vm.$showAlert(
"비밀번호 확인",
"새 비밀번호가 일치하지 않습니다. 다시 입력해주세요."
);
return;
}
if (vm.userEditData.userPassword === vm.changePw) {
vm.$showAlert("내정보 수정", "수정된 정보가 없습니다.");
return;
}
axios({
url: "/mypage",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: vm.userEditData,
})
.then(function (response) {
if (response.data.resultData.checkUserPassword >= 1) {
vm.updateUserPassword();
} else {
vm.$showAlert(
"비밀번호 수정",
"현재 비밀번호가 일치하지 않습니다."
);
document.getElementById("userPassword").focus();
}
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
updateUserPassword: function () {
var vm = this;
vm.userEditData.userPassword = vm.changePw;
axios
.put("/mypage/password", vm.userEditData)
.then(function (response) {
vm.$showAlert("비밀번호 수정", "비밀번호가 수정되었습니다.");
vm.userEditData.userPassword = null;
vm.changePw = null;
vm.changePwConfirm = null;
})
.catch(function (error) {
this.$showAlert(
"에러 발생",
"에러가 발생했습니다. 관리자에게 문의해 주세요."
);
});
},
},
mounted() {
this.getUserData();
},
};
</script>