duke-encounters/src/main/resources/templates/register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="partials :: head"></head>
<body>
<div class="container" id="main">
<nav class="navbar-inverse navbar-default navbar-fixed-top">
<div class="container">
<div th:replace="partials :: navbar-header"></div>
<div class="collapse navbar-collapse" id="mainNavigation">
<ul class="nav navbar-nav">
<li><a th:href="@{/encounters}">Encounters</a></li>
<li><a th:href="@{/search}">Search</a></li>
</ul>
<form th:replace="partials :: navbar-search-form"></form>
<ul th:replace="partials :: navbar-menu"></ul>
</div>
</div>
</nav>
<div class="row" id="welcome">
<div class="col-12">
<h1>Register</h1>
<p class="lead">Already have a user? Please <a th:href="@{/login}">login</a> directly.</p>
</div>
</div>
<div class="row" id="register">
<div class="col-12">
<form class="form-horizontal" action="#" th:action="@{/register}" th:object="${dukeEncountersUser}"
method="post" role="form">
<div th:if="${#fields.hasAnyErrors()}" class="alert alert-danger">
<p th:each="err : ${#fields.allErrors()}" th:text="${err}">
Validation error
</p>
</div>
<div th:class="${#fields.hasErrors('firstname')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="firstname">First name</label>
<div class="col-sm-10">
<input type="text" autofocus="autofocus" id="firstname" name="firstname" th:field="*{firstname}"
class="form-control"/>
</div>
</div>
<div th:class="${#fields.hasErrors('lastname')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="lastname">Last name</label>
<div class="col-sm-10">
<input type="text" id="lastname" name="lastname" th:field="*{lastname}" class="form-control"/>
</div>
</div>
<div th:class="${#fields.hasErrors('username')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="username">Username</label>
<div class="col-sm-10">
<input type="text" id="username" name="username" th:field="*{username}" class="form-control"/>
</div>
</div>
<div th:class="${#fields.hasErrors('email')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10">
<input type="text" id="email" name="email" th:field="*{email}" class="form-control"/>
</div>
</div>
<div th:class="${#fields.hasErrors('password')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="password">Password</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" id="password" name="password" th:field="*{password}"
class="form-control"/>
</div>
</div>
<div th:class="${#fields.hasErrors('confirmPassword')} ? 'form-group has-error has-feedback' : 'form-group'">
<label class="col-sm-2 control-label" for="confirmPassword">Confirm password</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" id="confirmPassword" name="confirmPassword"
th:field="*{confirmPassword}" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success pull-right">Create User</button>
</div>
</div>
</form>
</div>
</div>
</div>
<footer th:include="partials :: footer"></footer>
<div th:replace="partials :: scripts"></div>
</body>
</html>