Improved the structure of Thymeleaf views. Added Ajax view for signup…

…. New AboutController. Jquery now bundled.
kolorobot · Nov 17, 2016 · 1340abf · 1340abf
1 parent 59781c5
commit 1340abf
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 45 deletions.
diff --git a/src/main/resources/archetype-resources/src/main/java/config/SecurityConfig.java b/src/main/resources/archetype-resources/src/main/java/config/SecurityConfig.java
@@ -46,7 +46,7 @@ protected void configure(AuthenticationManagerBuilder auth) throws Exception {
     protected void configure(HttpSecurity http) throws Exception {
         http
             .authorizeRequests()
-                .antMatchers("/", "/favicon.ico", "/resources/**", "/signup").permitAll()
+                .antMatchers("/", "/favicon.ico", "/resources/**", "/signup", "/about").permitAll()
                 .anyRequest().authenticated()
                 .and()
             .formLogin()

diff --git a/src/main/resources/archetype-resources/src/main/java/home/AboutController.java b/src/main/resources/archetype-resources/src/main/java/home/AboutController.java
@@ -0,0 +1,19 @@
+package ${package}.home;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+class AboutController {
+
+	@ModelAttribute("module")
+	String module() {
+		return "about";
+	}
+
+	@GetMapping("/about")
+	String about() {
+		return "home/about";
+	}
+}
diff --git a/src/main/resources/archetype-resources/src/main/java/home/HomeController.java b/src/main/resources/archetype-resources/src/main/java/home/HomeController.java
@@ -3,13 +3,19 @@
 import java.security.Principal;
 
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.GetMapping;
 
 @Controller
-public class HomeController {
+class HomeController {
+
+	@ModelAttribute("module")
+	String module() {
+		return "home";
+	}
 
 	@GetMapping("/")
-	public String index(Principal principal) {
+	String index(Principal principal) {
 		return principal != null ? "home/homeSignedIn" : "home/homeNotSignedIn";
 	}
 }
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/error/general.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/error/general.html
@@ -8,8 +8,9 @@
 </head>
 <body>
 <div class="container">
-    <div th:replace="fragments/alert :: alert (type='danger', message=${errorMessage})">Error: Error</div>
-    <div th:include="fragments/footer :: footer">&copy; 2013 The Static Templates</div>
+    <div th:replace="fragments/layout :: header"></div>
+    <div th:replace="fragments/components :: alert (type='danger', message=${errorMessage})">Error: Error</div>
+    <div th:replace="fragments/layout :: footer"></div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/alert.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/alert.html
diff --git a/...ain/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/components.html b/...ain/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/components.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
+</head>
+<body>
+<!-- Reusable alert -->
+<div th:fragment="alert (type, message)" class="alert alert-dismissable" th:classappend="'alert-' + ${type}">
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <span th:text="${message}">Test</span>
+</div>
+<!-- Reusable modal -->
+<div th:fragment="modal (id, title)" class="modal fade" th:id="${id}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                <h4 class="modal-title" id="modalLabel" th:text="${title}">My modal</h4>
+            </div>
+            <div class="modal-body" th:id="${id + '-body'}"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+</body>
+</html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/footer.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/fragments/footer.html
diff --git a/...ebapp/WEB-INF/views/fragments/header.html → ...ebapp/WEB-INF/views/fragments/layout.html b/...ebapp/WEB-INF/views/fragments/header.html → ...ebapp/WEB-INF/views/fragments/layout.html
@@ -4,6 +4,8 @@
     <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
 </head>
 <body>
+
+<!-- Header -->
 <div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
     <div class="container">
         <div class="navbar-header">
@@ -16,9 +18,12 @@
         </div>
         <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav">
-                <li class="active"><a href="#" th:href="@{/}">Home</a></li>
-                <li><a href="#about">About</a></li>
-                <li><a href="#contact">Contact</a></li>
+                <li th:classappend="${module == 'home' ? 'active' : ''}">
+                    <a href="#" th:href="@{/}">Home</a>
+                </li>
+                <li th:classappend="${module == 'about' ? 'active' : ''}">
+                    <a href="#about" th:href="@{/about}">About</a>
+                </li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li th:if="${#authorization.expression('!isAuthenticated()')}">
@@ -37,5 +42,12 @@
         <!--/.nav-collapse -->
     </div>
 </div>
+
+<!-- Footer -->
+<div th:fragment="footer" th:align="center">
+    &copy;&nbsp;<span th:text="${#temporals.format(#temporals.createNow(), 'yyyy')}">2016</span>
+    Demo project <span th:text="${@environment.getProperty('app.version')}"></span>
+</div>
+
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/about.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/about.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <title th:text="#{view.index.title}">Welcome!</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
+    <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
+    <script src="../../../resources/js/jquery.min.js" th:src="@{/resources/js/jquery.min.js}"></script>
+    <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
+</head>
+<body>
+<div th:replace="fragments/layout :: header"></div>
+<div class="container">
+    <p class="lead text-center">
+        About
+    </p>
+</div>
+<div th:replace="fragments/layout :: footer"></div>
+</body>
+</html>
diff --git a/...ain/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/homeNotSignedIn.html b/...ain/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/homeNotSignedIn.html
@@ -5,11 +5,11 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
     <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
-    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src="../../../resources/js/jquery.min.js" th:src="@{/resources/js/jquery.min.js}"></script>
     <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
 </head>
 <body>
-<div th:replace="fragments/header :: header">Header</div>
+<div th:replace="fragments/layout :: header"></div>
 <div class="container">
     <div class="text-center">
         <h1>Test</h1>
@@ -18,10 +18,27 @@ <h1>Test</h1>
             Get started quickly by signing up.
         </p>
         <p>
-            <a href="/signup" th:href="@{/signup}" class="btn btn-success btn-lg">Sign up</a>
+            <a class="btn btn-success btn-lg" id="signup">Sign up</a>
         </p>
     </div>
-    <div th:replace="fragments/footer :: footer">&copy; 2013 The Static Templates</div>
+    <div th:replace="fragments/layout :: footer">&copy; 2016 The Static Templates</div>
 </div>
+<script th:inline="javascript" type="text/javascript">
+    /* Fill in modal with content loaded with Ajax */
+    $(document).ready(function () {
+        $('#signup').on('click', function () {
+            $("#signup-modal").modal();
+            $("#signup-modal-body").text("");
+            $.ajax({
+                url: "signup",
+                cache: false
+            }).done(function (html) {
+                $("#signup-modal-body").append(html);
+            });
+        })
+    });
+</script>
+<!-- Signup modal -->
+<div th:replace="fragments/components :: modal(id='signup-modal', title='Signup')"></div>
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/homeSignedIn.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/home/homeSignedIn.html
@@ -5,20 +5,21 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
     <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
-    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src="../../../resources/js/jquery.min.js" th:src="@{/resources/js/jquery.min.js}"></script>
     <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
 </head>
 <body>
-<div th:replace="fragments/header :: header">&nbsp;</div>
+<div th:replace="fragments/layout :: header"></div>
 <div class="container">
     <!-- /* Handle the flash message */-->
     <th:block th:if="${message != null}">
         <!-- /* The message code is returned from the @Controller */ -->
-        <div th:replace="fragments/alert :: alert (type=${#strings.toLowerCase(message.type)}, message=#{${message.message}(${#authentication.name})})">&nbsp;</div>
+        <div th:replace="fragments/components :: alert (type=${#strings.toLowerCase(message.type)}, message=#{${message.message}(${#authentication.name})})">&nbsp;</div>
     </th:block>
-    <p>
+    <p class="lead text-center">
         Welcome to the Spring MVC Quickstart application!
     </p>
+    <div th:replace="fragments/layout :: footer"></div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/signin/signin.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/signin/signin.html
@@ -7,9 +7,10 @@
     <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
 </head>
 <body>
+<div th:replace="fragments/layout :: header"></div>
 <form class="form-narrow form-horizontal" action="#" method="post" th:action="@{/authenticate}">
     <th:block th:if="${param.error != null}">
-        <div th:replace="fragments/alert :: alert (type='danger', message='Sign in error. Please try again.')">Alert</div>
+        <div th:replace="fragments/components :: alert (type='danger', message='Sign in error. Please try again.')">Alert</div>
     </th:block>
     <fieldset>
         <legend>Please Sign In</legend>
@@ -46,5 +47,6 @@
         </div>
     </fieldset>
 </form>
+<div th:replace="fragments/layout :: footer"></div>
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/signup/signup.html b/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/views/signup/signup.html
@@ -5,14 +5,15 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link href="../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen" th:href="@{/resources/css/bootstrap.min.css}"/>
     <link href="../../../resources/css/core.css" rel="stylesheet" media="screen" th:href="@{/resources/css/core.css}" />
-    <script src="http://code.jquery.com/jquery-latest.js"></script>
+    <script src="../../../resources/js/jquery.min.js" th:src="@{/resources/js/jquery.min.js}"></script>
     <script src="../../../resources/js/bootstrap.min.js" th:src="@{/resources/js/bootstrap.min.js}"></script>
 </head>
 <body>
-<form class="form-narrow form-horizontal" method="post" th:action="@{/signup}" th:object="${signupForm}">
+<div th:replace="fragments/layout :: header"></div>
+<form class="form-narrow form-horizontal" method="post" th:action="@{/signup}" th:object="${signupForm}" th:fragment="signupForm">
     <!--/* Show general error message when form contains errors */-->
     <th:block th:if="${#fields.hasErrors('${signupForm.*}')}">
-        <div th:replace="fragments/alert :: alert (type='danger', message='Form contains errors. Please try again.')">Alert</div>
+        <div th:replace="fragments/components :: alert (type='danger', message='Form contains errors. Please try again.')">Alert</div>
     </th:block>
     <fieldset>
         <legend>Please Sign Up</legend>
@@ -42,5 +43,6 @@
         </div>
     </fieldset>
 </form>
+<div th:replace="fragments/layout :: footer"></div>
 </body>
 </html>
diff --git a/src/main/resources/archetype-resources/src/main/webapp/resources/js/jquery.min.js b/src/main/resources/archetype-resources/src/main/webapp/resources/js/jquery.min.js