register.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="~{fragment/commans::head}"></head>
<body class="bg-secondary">
<header th:include="~{fragment/commans::nav}">
</header>
<main role="main" class="bg-secondary">
    <div class="jumbotron">
        <div class="container text-light ">
            <h1 class="display-3 ">
                <strong class="bg-blur rounded border-left border-white pl-3 border-bottom">
                    Register</strong></h1>
        </div>
        <div class="container bg-blur rounded p-5 mt-5 w-75">
            <form th:action="@{/users/register}" th:method="post" th:object="${userRegisterBindingModel}"
                  class=" text-center text-light">
                <div class="form-group row">
                    <label for="username" class="col-sm-2 col-form-label">Username</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{username}"
                                th:errorclass="is-invalid"
                                type="text"
                                class="form-control"
                                id="username"
                               aria-describedby="usernameHelpInline" placeholder="Username">
                        <small id="usernameHelpInline" class="invalid-feedback bg-danger text-light rounded">
                            Username length must be between 5 and 20 characters.
                        </small>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="firstName" class="col-sm-2 col-form-label">First name</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{firstName}"
                                type="text" class="form-control" id="firstName"
                               aria-describedby="firstNameHelpInline" placeholder="First name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="lastName" class="col-sm-2 col-form-label">Last name</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{lastName}"
                                th:errorclass="is-invalid"
                                type="text" class="form-control" id="lastName"
                               aria-describedby="lastNameHelpInline" placeholder="Last name">
                        <small id="lastNameHelpInline" class="invalid-feedback bg-danger text-light rounded">
                            Last name length must be between 5 and 20 characters.
                        </small>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="email" class="col-sm-2 col-form-label">Email</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{email}"
                                th:errorclass="is-invalid"
                                type="text" class="form-control" id="email"
                               aria-describedby="emailHelpInline" placeholder="[email protected]">
                        <small id="emailHelpInline" class="invalid-feedback bg-danger text-light rounded">
                            Enter valid email address.
                        </small>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="password" class="col-sm-2 col-form-label">Password</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{password}"
                                th:errorclass="is-invalid"
                                type="password" class="form-control" id="password"
                               aria-describedby="passwordHelpInline" placeholder="Password">
                        <small id="passwordHelpInline" class="invalid-feedback bg-danger text-light rounded">
                            Password length must be more than 3 characters long.
                        </small>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="confirmPassword" class="col-sm-2 col-form-label">Confirm Password</label>
                    <div class="col-sm-10">
                        <input
                                th:field="*{confirmPassword}"
                                th:errorclass="is-invalid"
                                type="password" class="form-control" id="confirmPassword"
                               aria-describedby="confirmPasswordHelpInline" placeholder="Confirm Password">
                        <small id="confirmPasswordHelpInline" class="invalid-feedback bg-danger text-light rounded">
                            Password length must be more than 3 characters long.
                        </small>
                    </div>
                </div>
                <button type="submit" class="btn btn-info w-50">Register</button>
            </form>
            <hr class="bg-light">
        </div>
    </div>
</main>
<footer th:include="~{fragment/commans::footer}">
</footer>
</body>
</html>