-
[스프링 인 액션] Chapter 4 - 스프링 시큐리티 :: 각 폼에 로그아웃 버튼 추가하고 사용자 정보 보여주기개발서적읽기/Spring in Action 제 5판 2020. 7. 30. 16:03
마지막으로, 로그아웃 버튼과 사용자 정보를 보여주는 필드를 각 폼에 추가할 것이다.
우선, 사용자가 타코를 생성할 수 있는 디자인 페이지로 이동하는 참조와
로그아웃 버튼을 home.html에 추가하자.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Taco Cloud</title>
</head>
<body>
<h1>Welcome to...</h1>
<img th:src="@{/images/TacoCloud.png}"/>
<form method="POST" th:action="@{/logout}" id="logoutForm">
<input type="submit" value="Logout"/>
</form>
<a th:href="@{/design}" id="design">Design a taco</a>
</body>
</html>다음으로, 사용자가 원하는 타코를 생성할 수 있는 디자인 페이지에
로그아웃 버튼을 추가하자. design.html 페이지를 수정하자.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Taco Cloud</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>Design your taco!</h1>
<h2>Feelin' hungry, <span th:text="${user.fullname}">NAME</span>?</h2>
<img th:src="@{/images/TacoCloud.png}"/>
<form method="POST" th:action="@{/logout}" id="logoutForm">
<input type="submit" value="Logout"/>
</form>
<form th:method="POST" th:object="${design}" th:action="@{/design}" id="tacoForm">
<span class="validationError"
th:if="${#fields.hasErrors('ingredients')}"
th:errors="*{ingredients}">Ingredient Error</span>
<div class="grid">
<div class="ingredient-group" id="wraps">
<h3>Designate your wrap:</h3>
<div th:each="ingredient : ${wrap}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="proteins">
<h3>Pick your protein:</h3>
<div th:each="ingredient : ${protein}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="cheeses">
<h3>Choose your cheese:</h3>
<div th:each="ingredient : ${cheese}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="veggies">
<h3>Determine your veggies:</h3>
<div th:each="ingredient : ${veggies}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="sauces">
<h3>Select your sauce:</h3>
<div th:each="ingredient : ${sauce}">
<input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
</div>
<div>
<h3>Name your taco creation:</h3>
<input type="text" th:field="*{name}"/>
<span class="validationError"
th:if="${#fields.hasErrors('name')}"
th:errors="*{name}">Name Error</span>
<br/>
<button>Submit your taco</button>
</div>
</form>
</body>
</html>그리고 사용자가 생성한 타코를 주문할 수 있는 주문 페이지에 로그아웃 버튼을 추가하자.
orderForm.html 이다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Taco Cloud</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<form method="POST" th:action="@{/logout}" id="logoutForm">
<input type="submit" value="Logout"/>
</form>
<form method="POST" th:action="@{/orders}" th:object="${order}"
id="orderForm">
<h1>Order your taco creations!</h1>
<img th:src="@{/images/TacoCloud.png}"/>
<h3>Your tacos in this order:</h3>
<a th:href="@{/design}" id="another">Design another taco</a><br/>
<ul>
<li th:each="taco : ${order.tacos}"><span th:text="${taco.name}">taco name</span></li>
</ul>
<div th:if="${#fields.hasErrors()}">
<span class="validationError">
Please correct the problems below and resubmit.
</span>
</div>
<h3>Deliver my taco masterpieces to...</h3>
<label for="deliveryName">Name: </label>
<input type="text" th:field="*{deliveryName}"/>
<span class="validationError"
th:if="${#fields.hasErrors('deliveryName')}"
th:errors="*{deliveryName}">Name Error</span>
<br/>
<label for="deliveryStreet">Street address: </label>
<input type="text" th:field="*{deliveryStreet}"/>
<span class="validationError"
th:if="${#fields.hasErrors('deliveryStreet')}"
th:errors="*{deliveryStreet}">Street Error</span>
<br/>
<label for="deliveryCity">City: </label>
<input type="text" th:field="*{deliveryCity}"/>
<span class="validationError"
th:if="${#fields.hasErrors('deliveryCity')}"
th:errors="*{deliveryCity}">City Error</span>
<br/>
<label for="deliveryState">State: </label>
<input type="text" th:field="*{deliveryState}"/>
<span class="validationError"
th:if="${#fields.hasErrors('deliveryState')}"
th:errors="*{deliveryState}">State Error</span>
<br/>
<label for="deliveryZip">Zip code: </label>
<input type="text" th:field="*{deliveryZip}"/>
<span class="validationError"
th:if="${#fields.hasErrors('deliveryZip')}"
th:errors="*{deliveryZip}">Zip Error</span>
<br/>
<h3>Here's how I'll pay...</h3>
<label for="ccNumber">Credit Card #: </label>
<input type="text" th:field="*{ccNumber}"/>
<span class="validationError"
th:if="${#fields.hasErrors('ccNumber')}"
th:errors="*{ccNumber}">CC Num Error</span>
<br/>
<label for="ccExpiration">Expiration: </label>
<input type="text" th:field="*{ccExpiration}"/>
<span class="validationError"
th:if="${#fields.hasErrors('ccExpiration')}"
th:errors="*{ccExpiration}">CC Num Error</span>
<br/>
<label for="ccCVV">CVV: </label>
<input type="text" th:field="*{ccCVV}"/>
<span class="validationError"
th:if="${#fields.hasErrors('ccCVV')}"
th:errors="*{ccCVV}">CC Num Error</span>
<br/>
<input type="submit" value="Submit order"/>
</form>
</body>
</html>이제는 타코 클라우드 애플리케이션에서 필요한 스프링 시큐리티 구성,
커스텀 사용자 스토어 구성, 로그인 페이지 작성, 인증된 사용자 정보 파악이 모두 완료되었다.
애플리케이션을 시작하고 http://localhost:8080 으로 접속해보자.
'개발서적읽기 > Spring in Action 제 5판' 카테고리의 다른 글
[스프링 인 액션] Chapter 5 - 구성 속성 사용하기 :: 우리의 구성 속성 생성하기 (0) 2020.07.31 [스프링 인 액션] Chapter 5 - 구성 속성 사용하기 :: 자동-구성 세부 조정하기 (0) 2020.07.31 [스프링 인 액션] Chapter 4 - 스프링 시큐리티 :: 사용자 인지하기 (0) 2020.07.30 [스프링 인 액션] Chapter 4 - 스프링 시큐리티 :: 웹 요청 보안 처리하기 (0) 2020.07.30 [스프링 인 액션] Chapter 4 - 스프링 시큐리티 :: 스프링 시큐리티 구성하기 (0) 2020.07.30 댓글
