로그인 페이지 구현 > 스프링 부트

[개발] 로그인 페이지 구현

필기자

2022-10-26 12:48 9,163 0

본문

templates/member/memberLoginForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}">

    <!-- 사용자 CSS 추가 -->
    <th:block layout:fragment="css">
        <style>
            .error {
                color: #bd2130;
            }
        </style>
    </th:block>

    <div layout:fragment="content">

        <form role="form" method="post" action="/members/login">
            <div class="form-group">
                <label th:for="email">이메일주소</label>
                <input type="email" name="email" class="form-control" placeholder="이메일을 입력해주세요">
            </div>
            <div class="form-group">
                <label th:for="password">비밀번호</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="비밀번호 입력">
            </div>
            <p th:if="${loginErrorMsg}" class="error" th:text="${loginErrorMsg}"></p>
            <button class="btn btn-primary">로그인</button>
            <button type="button" class="btn btn-primary" onClick="location.href='/members/new'">회원가입</button>
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
        </form>
    
    </div>

</html>

kr/hull/shop/controller/MemberController.java 수정

@RequestMapping("/members")
@Controller
@RequiredArgsConstructor
public class MemberController {
    private final MemberService memberService;
    private final PasswordEncoder passwordEncoder;

    .
    .
    .

    @GetMapping(value = "/login")
    public String loginMember(){
        return "/member/memberLoginForm";
    }

    @GetMapping(value = "/login/error")
    public String loginError(Model model){
        model.addAttribute("loginErrorMsg", "아이디 또는 비밀번호를 확인해주세요");
        return "/member/memberLoginForm";
    }
}