18일 내용
로그인 구현중..
19일 로그인 구현 완료
main화면 css 작업 중...
20일 오늘은 css 를 반절정도 마무리하고
board (커뮤니티 게시판)을 만들 생각이다.
그동안 진행했던 내용을 보자면
@GetMapping("/signin")
public String signin() {
return "/sign/signin";
}
@PostMapping("/signin")
@ResponseBody
public Map<String, Object> signinpost(@ModelAttribute Member member2,
@RequestBody Member member) {
Map<String, Object> result = new HashMap<>();
if(member.getEmail() == null || member.getEmail().isEmpty() || member.getPw() == null || member.getPw().isEmpty()) {
log.error("User entered email: " + member.getEmail() + " and password: " + member.getPw());
result.put("code", -1);
result.put("errorMsg", "Email과 Pw를 입력해주세요.");
} else {
Member existingMember = memberRepository.findByEmail(member.getEmail());
if (existingMember != null) {
String encodedPw = existingMember.getPw();
if (passwordEncoder.matches(member.getPw(), encodedPw)) {
session.setAttribute("email", existingMember.getEmail());
session.setAttribute("name", existingMember.getName());
session.setAttribute("id", existingMember.getId());
result.put("code", 1);
result.put("errorMsg", "로그인 성공");
logger.info("비밀번호 일치: " + existingMember.getEmail());
} else {
result.put("code", 2);
result.put("errorMsg", "Email과 Pw를 확인해주세요");
logger.error("비밀번호 불일치: " + existingMember.getEmail());
}
} else {
result.put("code", 3);
result.put("errorMsg", "사용자가 존재하지 않습니다");
}
}
return result;
}
}
유효성 검사를 진행하는 컨트롤러 코드와
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" th:href="@{/cssjs/signin.css}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>signin</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="main">
<a href="/">TRAVEL</a>
</div>
<div class="tab">
<ul>
<li>
<a href="#">
<button id="tabbt">Email 로그인</button>
</a>
</li>
<li>
<a href="#">
<button id="tabbt">1회용 로그인</button>
</a>
</li>
<li>
<a href="#">
<button id="tabbt">QR 로그인</button>
</a>
</li>
</ul>
</div>
</header>
<form action="/signin" method="post">
<div id="login">
<label for="emaillabel"></label>
<div class="id">
<input type="text" name="email" id="email" placeholder="Email을 입력해주세요"><br>
</div>
<span id="emailError" class="error-message"></span>
<label for="pwlabel"></label>
<div class="pw">
<input type="password" name="pw" id="pw" placeholder="Pw를 일렵해주세요"><br>
</div>
<span id="pwError" class="error-message"></span>
<div id="errorMsg" class="error-message"></div>
</div>
<div class="saveid">
<input type="checkbox">
<label for="keepLogin">로그인 상태 유지</label>
</div>
<button type="submit" th:text="로그인" class="btlogin" onclick="submitForm(event)">로그인</button>
</form>
<div class="tpa">
<a href="#">
<button id="logbt">
Facebook 계정으로 로그인
</button>
</a>
<button id="logbt">
Naver 계정으로 로그인
</button>
</a>
<a href="#">
<button id="logbt">
Google 계정으로 로그인
</button>
</a>
<a href="#">
<button id="logbt">
Apple 계정으로 로그인
</button>
</a>
</div>
</div>
</body>
<script>
async function submitForm(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var pw = document.getElementById("pw").value;
var pwError = document.getElementById('pwError');
var errorMsg = document.getElementById('errorMsg');
var emailError = document.getElementById('emailError');
if (!email || !pw) {
if (!email) {
emailError.innerText = 'Email을 입력해주세요';
errorMsg.innerText = '';
pwError.innerText = '';
} else {
pwError.innerText = 'Pw를 입력해주세요';
errorMsg.innerText = '';
emailError.innerText = '';
}
return false;
}
// const formData = new FormData();
// formData.append("email", email);
const response = await fetch('/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, pw })
// body: formData
});
const data = await response.json();
if (data.code === 1) {
window.location.href = "/"; // Redirect on successful login
} else {
errorMsg.innerText = data.errorMsg || 'Email과 Pw를 확인해주세요';
pwError.innerText = '';
}
return false;
}
</script>
</html>
로그인 뷰 템플릿코드이다.
post js 로 보내면서 오류를 접하게 됐는데 너무 어려웠다...
컨트롤러에서 처음에 제이슨 으로 처리해야하는데 뷰 형식으로 처리해버려서 그걸 찾는데도 시간을 많이 보냈다.. ㅠㅠ
그래서 리스폰스 바디를 사용했고 stingify 코드도 오류가 있었는데 처리하고 나서 까먹었당 ㅎ
아마도 modelattribute model2라는 애를써서 문제였고 requestbody로 처리해서 오류를 해결했었다.
(이건 있으나 없으나)
그 결과를 보자면
이렇게 css를 적용했다. 아직 다른계정으로 로그인을 구현하지 않은 상태고 뼈대와 기본적인 로그인을 구현한 상태이다.
보안상의 문제는 더 깊게 들어가 배우고 적용해야겠당...
유효성검사에 따른 에러 메시지는 email을 입력안했을 경우에는 email input 밑에 뜨게 했고 pw는 pw input 아래에 나오게 했다. 그리고 email과 pw를 틀렸을 경우에도 pw input 아래에 에러메시지가 나오게 했다.
19일에 한 main css를 보자면
css는 너무어려웠다..
특정 사이트를 클론을 해보았고 20%정도 구현했다..
더보기에는 호버를 이용해서 마우스를 올리면 드롭메뉴가 나오게 해놨고
하단에는 커뮤니티를 만들 예정이다.
이벤트는 뭐... 들어갈건 딱히 없지만 만들어둔 상태
이벤트 밑에 푸터를 만들어 정보를 보여줄 생각이었지만 나중에 구현할 것이다.
그리고 로그인은 session에 id 값이 존재하지 않는다면 로그인으로 있다면 로그아웃으로 바뀌게 해놨다.
로그인버튼은 signin주소로 보내고 로그아웃은 메인화면을 보여주지만 세션값을 삭제하도록 로직을 구성했다.
이상 오늘 아침까지의 현황
오늘은 board를 구현할것이다.