티스토리 뷰
- recoverPassword
<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" th:href="@{/resources/stylesheets/common.css}">
<link rel="stylesheet" th:href="@{/member/resources/stylesheets/register.css}">
</head>
<body>
<th:block th:replace="~{fragments/body :: header}"></th:block>
<th:block th:replace="~{fragments/body :: cover}"></th:block>
<th:block th:replace="~{fragments/body :: footer}"></th:block>
</body>
</html>- body.html
<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<header class="--header" th:fragment="header">
<div class="--content">
<a class="--logo-container" th:href="@{/}">
<img class="--logo" th:src="@{/resources/images/apple-logo.png}">
</a>
<ul class="--menu --main">
<li class="--item">
<a class="--link" href="#">공지사항</a>
</li>
<li class="--item">
<a class="--link" href="#">자유게시판</a>
</li>
<li class="--item">
<a class="--link" href="#">Q&A</a>
</li>
</ul>
<ul class="--menu">
<li class="--item">
<a class="--link" href="#">로그인</a>
</li>
<li class="--item">
<a class="--link" href="#">회원가입</a>
</li>
</ul>
</div>
</header>
<div class="--cover" id="cover" th:fragment="cover">
<img alt="" class="--icon" th:src="@{/resources/images/loading.png}">
<span class="--text" rel="text">무언가를 불러오고 있습니다. 잠시만 기다려 주세요.</span>
</div>
<footer class="--footer" th:fragment="footer">
<div class="--content">
발
</div>
</footer>
</html>- register.html
<body>
<th:block th:replace="~{fragments/body :: header}"></th:block> <!--가상의 태그 헤더태그전체를 바꾸겠다.-->
<th:block th:replace="~{fragments/body :: cover}"></th:block> <!-- cover 중독되니깐 따로 빼기-->
<main class="--main main">
</main>
<th:block th:replace="~{fragments/body :: footer}"></th:block>- register.html
<link rel="stylesheet" th:href="@{/resources/stylesheets/common.css}">
<script defer th:src="@{/resources/scripts/common.js}"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
- head.html
<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="common">
<link rel="stylesheet" th:href="@{/resources/stylesheets/common.css}">
<script defer th:src="@{/resources/scripts/common.js}"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</th:block>
</html>오늘의 문제
[String] MemberController .postRecoverPassword (UserEntity user)
[Enum<? extends IResult>] MemberService .recoverPassword (UserEntity user)
목표: 전달 받은 UserEntity 객체가 가지는 'email' 값을 이메일로 가지는 회원이 테이블에 있으면 'success'를, 없다면 'failure'를 JSON 형태로 반환하는 로직을 작성한다.
- MemberController
@RequestMapping(value = "recoverPassword",
method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public String postRecoverPassword(UserEntity user) {
Enum<? extends IResult> result = this.memberService.recoverPassword(user);
JSONObject responseObject = new JSONObject();
responseObject.put("result", result.name().toLowerCase());
return responseObject.toString();
}
}
- MemberService
@Transactional
public Enum<? extends IResult> recoverPassword(UserEntity user) {
UserEntity recoverStudy = this.memberMapper.selectUserByEmail(user.getEmail());
if (recoverStudy == null) {
return CommonResult.FAILURE;
}
return CommonResult.SUCCESS;
}- recoverPassword.js
const form = window.document.getElementById('form');
const Warning = {
getElementById: () => form.querySelector('[rel="warningRow"]'),
show: (text) => {
const warningRow = Warning.getElementById();
warningRow.querySelector('.text').innerText = text;
warningRow.classList.add('visible');
},
hide: () => Warning.getElementById().classList.remove('visible')
};
form['emailSend'].addEventListener('click', () => {
Warning.hide();
if (form['email'].value === '') {
Warning.show('이메일을 입력해주세요.');
form['email'].focus();
return;
}
Cover.show('계정확인을 하고 있습니다., \n\n 잠시만 기다려 주세요.')
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('email', form['email'].value);
xhr.open('POST', './recoverPassword');
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
Cover.hide();
if (xhr.status >= 200 && xhr.status < 300) {
const responseObject = JSON.parse(xhr.responseText);
switch (responseObject['result']) {
case'success':
alert('됨!');
break;
default:
Warning.show('해당 이메일을 사용하는 계정을 찾을 수 없습니다.');
form['email'].focus();
form['email'].select();
}
}else{
Warning.show('서버와 통신하지 못하였습니다. 잠시 후 다시 시도해 주세요.')
}
}
};
xhr.send(formData);
});
'웹 개발 > SpringBoot' 카테고리의 다른 글
| [Spring Boot] Password Reset(2) (3) | 2022.11.09 |
|---|---|
| [Spirng Boot] Password Reset (0) | 2022.11.09 |
| [Spring Boot] 공통된 내용을 util 경로로 이동한 암호화 (2) | 2022.11.08 |
| [Spring Boot] 회원 가입 구현하기 문제 (0) | 2022.11.08 |
| [Spring Boot] 비밀번호 암호화 (0) | 2022.11.08 |
댓글