login.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Faborite Books</title>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="css/login.css" />
</head>
<body class="text-center">
<form class="form-signin" id="form-login">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input
type="email"
id="email"
class="form-control"
placeholder="Email address"
required
autofocus
/>
<label for="inputPassword" class="sr-only">Password</label>
<input
type="password"
id="password"
class="form-control"
placeholder="Password"
required
/>
<button class="btn btn-lg btn-primary btn-block btn-login" type="submit">
Sign in
</button>
<p class="mt-5 mb-3 text-muted">© 2019</p>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>login.css
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type='email'] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type='password'] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}login.js
function getToken() {
return localStorage.getItem('token');
}
async function login(event) {
event.preventDefault();
event.stopPropagation();
const emailElement = document.querySelector('#email');
const passwordElement = document.querySelector('#password');
// email, password String으로 값 저장!!!!
const email = emailElement.value;
const password = passwordElement.value;
console.log(email, password);
try {
const res = await axios.post('https://api.marktube.tv/v1/me', {
email,
password,
});
const { token } = res.data;
if (token === undefined) {
return;
}
localStorage.setItem('token', token);
location = '/';
} catch (error) {
const data = error.response.data;
if (data) {
const state = data.error;
if (state === 'USER_NOT_EXIST') {
alert('사용자가 존재하지 않습니다.');
} else if (state === 'PASSWORD_NOT_MATCH') {
alert('비밀번호가 틀렸습니다.');
}
}
}
}
function bindLoginButton() {
const form = document.querySelector('#form-login');
form.addEventListener('submit', login);
}
async function main() {
// 버튼에 이벤트 연결
bindLoginButton();
// 토큰 체크
const token = getToken();
if (token !== null) {
location.assign('/');
return;
}
}
document.addEventListener('DOMContentLoaded', main);잊지말자
email, password String으로 값 저장!!!!
const email = emailElement.value;
const password = passwordElement.value;
