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-wrap flex-center">
<div class="login-content">
<div class="logo">
<img src="../../../resources/img/logo.png" alt="" />
</div>
<div class="login-zone">
<div class="input-wrap">
<input type="text" placeholder="아이디를 입력하세요." class="login-input" v-model="userLogin.user_id"/>
<input type="password" placeholder="비밀번호를 입력하세요." class="login-input" v-model="userLogin.user_password"/>
</div>
<div class="found-zone flex-center">
<router-link to="">아이디찾기</router-link>
<router-link to="">비밀번호 찾기</router-link>
<router-link to="/register.page">회원가입</router-link>
</div>
</div>
<button class="blue-btn large-btn" v-on:click="login()">로그인</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userLogin: {
user_id: null,
user_password: null,
},
};
},
methods: {
// 로그인
login: function () {
const vm = this;
// 특수 문자 검사
const special_pattern = /[`~!@#$%^&*|\\\'\";:\/?]/gi;
// 아이디를 입력하지 않았을 경우
// 공백만 입력하였을 경우
// 특수문자가 입려되었을 경우
if (vm.userData.user_id == null || vm.userLogin.user_id.replace(/\s/gi, '') == '' || special_pattern.test(vm.userLogin.user_id) == true) {
alert("아이디를 입력해주시기 바랍니다.");
return;
}
// 비밀번호를 입력하지 않았을 경우
// 공백만 입력하였을 경우
// 특수문자가 입려되었을 경우
if (vm.userLogin.user_password == null || vm.userLogin.user_password.replace(/\s/gi, '') == '') {
alert("비밀번호를 입력해주시기 바랍니다.");
return;
}
axios({
url: '/login.json',
method: 'post',
headers: { "Content-Type": "application/json; charset=UTF-8" },
data: vm.userData,
})
.then(function (response) {
console.log("login - response", response.data);
if (response.data > 0) {
alert("로그인 성공하였습니다.");
vm.$router.push({ path: '/', query: {} });
} else {
alert("로그인 실패하였습니다. 아이디와 비밀번호를 다시 입력해주시기 바랍니다.");
return;
}
})
.catch(function (error) {
console.log("login - error", error);
alert("로그인에 오류가 발생하였습니다.");
});
},
},
watch: {},
computed: {},
components: {},
mounted() {
console.log('main mounted');
},
};
</script>
<style scoped>
.login-page {
width: 100%;
height: 100%;
}
.login-wrap {
width: 100%;
height: 100%;
}
.login-content {
min-width: 300px;
max-width: 400px;
padding: 30px;
border: 1px solid #eee;
border-radius: 10px;
background-color: #fff;
}
.logo {
width: 100%;
margin-bottom: 30px;
}
.logo > img {
display: block;
margin: 0 auto;
}
.login-input {
margin-left: 0;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #f1f5ff;
}
.login-input:last-child {
margin-bottom: 0;
}
.found-zone {
padding: 20px 0;
}
.found-zone > a {
font-size: 1.4rem;
padding: 0 10px;
}
.login-page .blue-btn {
margin-left: 0;
padding: 10px 0;
}
</style>