/
guestbook.html
60 lines (55 loc) · 3.14 KB
/
guestbook.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
<script th:src="@{/webjars/hyperscript.org/dist/_hyperscript.min.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" type="text/css" />
<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/all.css}" type="text/css" />
<link rel="stylesheet" th:href="@{/resources/css/style.css}" type="text/css" />
<title th:text="#{guestbook.title}">Gästebuch</title>
</head>
<body>
<h1 class="text-center" th:text="#{guestbook.title}">Gästebuch</h1>
<div class="text-center">
<a sec:authorize="isAnonymous()" href="/login">Login</a>
<a sec:authorize="isAuthenticated()" href="/logout">Logout</a>
</div>
<br />
<div id="entries" class="mx-auto">
<div th:each="entry, it : ${entries}" th:with="index = ${it.count}" th:fragment="entries">
<div class="card" th:fragment="entry" th:id="entry+${entry.id}">
<div class="card-header">
<form sec:authorize="hasRole('ADMIN')" th:method="delete" th:action="@{/guestbook/{id}(id=${entry.id})}" th:attr="data-entry-id=${entry.id}">
<button th:title="#{guestbook.form.delete}" class="btn btn-sm float-right"
hx:delete="@{/guestbook/{id}(id=${entry.id})}"
hx:target="'#entries'">
<span class="fas fa-times"></span>
</button>
</form>
<h4 th:text="${index} + '. ' + ${entry.name}" class="card-title">1. Posting</h4>
</div>
<div class="card-body">
<blockquote class="entrytext" th:text="${entry.text}"></blockquote>
</div>
<div class="card-footer">
<footer class="date" th:text="${#temporals.format(entry.date, 'dd. MMMM yyyy - HH:mm')}">Datum</footer>
</div>
</div>
</div>
</div>
<form method="post" role="form" class="gb-form" id="form" hx:post="@{/guestbook}" hx-target="#entries" hx-swap="beforeend" _="on entryAdded me.reset()" th:action="@{/guestbook}" th:object="${form}">
<div class="form-group">
<label for="name" th:text="#{guestbook.form.name}">Name</label><br />
<input class="form-control" type="text" th:field="*{name}" th:errorclass="is-invalid" required="required" />
<div th:if="${#fields.hasErrors('name')}" class="invalid-feedback" th:text="#{guestbook.form.name.required}">Please provide a name.</div>
</div>
<div class="form-group">
<label for="text" th:text="#{guestbook.form.text}">Text</label><br />
<textarea th:field="*{text}" th:errorclass="is-invalid" class="form-control" required="required"></textarea>
<div th:if="${#fields.hasErrors('text')}" class="invalid-feedback" th:text="#{guestbook.form.text.required}">Please provide a text.</div>
</div>
<input type="submit" class="btn btn-secondary" th:value="#{guestbook.form.submit}" value="Senden" />
</form>
</body>
</html>