
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">
<div class="login-content flex ">
<div class="login-logo flex justify-end"></div>
<div class="flex justify-between login-wrap gd-12">
<div class="login-imgbox">
<input type="file" @change="handleFileUpload" id="fileUpload" accept="image/*"
style="display: none;">
<label for="fileUpload" style="display: block; width: 100%; height: 100%; cursor: pointer;">
<img v-if="imagePreview" :src="'data:image/jpeg;base64,' + imagePreview" alt="Image preview"
style="width: 100%; height: 100%;">
<div v-else style="width: 100%; height: 100%;" class="login-img"></div>
</label>
</div>
<div class="flex-column gd-6">
<h1 class="mb1">LOGIN</h1>
<div class="user-name">
<p>{{ member.usernm }}</p>
</div>
<div class="login-box ">
<div class="login-user mb2">
<p>아이디</p>
<input type="text " v-model="member.userid" ref="userid" @keyup.enter="getUserInfoById()">
</div>
<div class="login-pw mb2">
<p>비밀번호</p>
<input type="password" v-model="member.newwrd" ref="password" @focus="getUserInfoById()">
</div>
<div class="flex justify-between mb2 button-wrap">
<div class="flex align-center">
<input type="checkbox" class="ui-checkbox" id="a" v-model="saveId">
<label for="a">ID 저장하기</label>
</div>
<button class="small-btn " @click="pwchange()">비밀번호 변경하기</button>
</div>
<button class="blue-btn large-btn "
style="padding: 10px !important; font-size: 1.5rem !important;" @click="login">로그인</button>
</div>
<!-- 비밀번호 변경 페이지 -->
<div class="pwchange-modal pt10" v-show="isActive">
<div class="flex justify-between pwchange-header">
<h1 class="mt1 mb4">비밀번호 변경</h1>
<button @click="pwChangeBtn()"></button>
</div>
<div class="login-box ">
<div class="pwchange-user mb2">
<p>비밀번호 변경</p>
<input type="password" v-model="changePw.changedPwd">
</div>
<div class="pwchange-pw mb2">
<p>비밀번호 확인</p>
<input type="password" v-model="changePw.CheckPwd">
</div>
<button class="blue-btn large-btn "
style="padding: 10px !important; font-size: 1.5rem !important;"
@click="updatePassword()">비밀번호 변경하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Cookies from 'js-cookie';
import { useStore } from 'vuex';
import store from '../AppStore';
export default {
data() {
return {
//이미지 미리보기
imagePreview: null,
isActive: false,
//회원 객체
member: {
userid: null,
usernm: null,
oldwrd: null,
newwrd: null,
requestURL: null,
},
//비밀번호 변경
changePw: {
changedPwd: null,
CheckPwd: null,
},
store: useStore(),
//ID저장
saveId: false,
//비밀번호 변경일자(2달 초과 여부)
passwordHaveToChange: false,
//회원정보 유효성
checkedUser : false,
}
},
methods: {
// login() {
// this.$emit('login');
// },
handleFileUpload(event) {
const file = event.target.files[0];
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = e => {
this.imagePreview = e.target.result;
};
reader.readAsDataURL(file);
}
},
//패스워드 변경 화면이동
async pwchange() {
//비밀번호 미입력
if(!this.member.newwrd){
alert("비밀번호를 입력하세요.")
return;
}
this.member.requestURL = "PASSWORDCHANGE"
//사용자 유효 검사
await this.getUserInfo();
if(this.checkedUser){
this.isActive = true;
} else {
alert('회원정보가 일치하지 않습니다.')
this.isActive = false;
}
},
// pwChangeBtn() {
// this.isActive = false;
// },
//사용자 아이디로 이름, 이미지 조회
getUserInfoById: function () {
const vm = this;
axios({
url: '/getMemberById.json',
method: 'post',
headers: {
'Content-Type': 'application/json;'
},
data: vm.member
}).then(function (response) {
console.log(response.data)
//1.회원 이름
vm.member.usernm = response.data.resultData.getNameById.resultData.member.usernm;
vm.imagePreview = response.data.resultData.getImageById.resultData.member.base64Image;
//2.회원 이미지
}).catch(function (error) {
console.log(error);
alert("유효하지 않은 ID 입니다.");
vm.$refs.userid.focus();
});
},
//ID 저장기능
cookieInit: function () {
if (this.saveId) {
Cookies.set('userId', this.member.userid, { expires: 7 });
} else {
Cookies.remove('userId')
}
},
//로그인
login: function () {
const vm = this;
if(!vm.member.newwrd){
alert("비밀번호를 입력하세요.")
return;
}
vm.passwordExpiryCheck();
if (vm.passwordHaveToChange) {
alert("Password변경이 2달이상 지났습니다.. Password를 변경해주세요.")
vm.isActive = true;
return;
}
axios({
url: '/login.json',
method: 'post',
headers: {
'Content-Type': 'application/json;'
},
data: vm.member
}).then(function (response) {
if (response.data.checkMessage.status > 0) {
store.commit('setLoginUser', response.data.resultData.LoginUserInfo);
vm.cookieInit();
vm.$router.push({ path: '/Cm001.page', query: {} });
console.log(store.state.loginUser);
}
}).catch(function (error) {
console.log(error);
});
},
//비밀번호 최근 변경일자 확인
passwordExpiryCheck: function () {
const vm = this;
axios({
url: '/checkPasswordExpiry.json',
method: 'post',
headers: {
'Content-Type': 'application/json;'
},
data: vm.member
}).then(function (response) {
if(response.data.checkMessage.status !== 200) {
alert(response.data.checkMessage.message);
return;
}
vm.passwordHaveToChange = response.data.resultData.haveToChangePassword;
}).catch(function (error) {
console.log(error);
});
},
//아이디 비밀번호로 회원 조회(T/F)
getUserInfo: function() {
const vm = this;
return new Promise((resolve, reject) => {
axios({
url: '/getUserInfo.json',
method: 'post',
headers: {
'Content-Type': 'application/json;'
},
data: vm.member
}).then(function(response) {
vm.checkedUser = response.data.resultData.result;
resolve(response);
}).catch(function(error) {
console.log(error);
reject(error);
});
});
},
//비밀번호 변경
updatePassword: function() {
const vm = this;
//비밀번호 유효성 검사
if(!vm.passwordValidCheck()){
return;
}
axios({
url: '/updatePassword.json',
method: 'post',
headers: {
'Content-Type': 'application/json;'
},
data: {
userid : vm.member.userid,
newwrd : vm.member.newwrd,
changeWrd : vm.changePw.CheckPwd
}
}).then(function (response) {
if(response.data.resultData.result){
alert("비밀번호 변경에 성공하였습니다.")
vm.isActive = false;
vm.changePw.CheckPwd = null;
vm.changePw.changedPwd = null;
vm.member.newwrd = null;
} else {
alert("비밀번호 변경에 실패하였습니다.")
}
}).catch(function (error) {
console.log(error);
});
},
//비밀번호 유효성 검사
passwordValidCheck: function() {
if(!this.changePw.CheckPwd){
alert("비밀번호를 입력하세요.")
return false;
}
if(this.changePw.CheckPwd !== this.changePw.changedPwd){
alert("비밀번호가 일치하지 않습니다.")
return false;
}
if(this.changePw.CheckPwd.length > 20){
alert("비밀번호는 20자리를 넘을 수 없습니다.")
return false;
}
return true;
}
},
watch: {
},
computed: {
},
created() {
const savedId = Cookies.get('userId');
if (savedId) {
this.member.userid = savedId;
this.saveId = true;
}
},
mounted() {
if(this.member.userid){
console.log("쿠키확인!!!")
this.getUserInfoById();
}
}
}
</script>
<style scoped></style>