edit-profile.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/commons::head}">
    <title>Edit Profile</title>
</head>
<body>
<main>
    <section class="section full-height">

        <form class="welcome login"
              th:action="@{/users/{id}/profile(id=${userId})}"
              th:method="post"
              th:object="${userProfileDTO}">

            <div class="form-group">
                <h3>Edit Profile</h3>
                <div class="label-holder text-white d-flex justify-content-center">
                    <label for="firstName" class="h3 mb-2">First Name</label>
                </div>
                <input type="text"
                       id="firstName"
                       placeholder="Enter your first name" th:field="*{firstName}">
                <p class="text-light" th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></p>
            </div>

            <div class="form-group">
                <div class="label-holder text-white d-flex justify-content-center">
                    <label for="lastName" class="h3 mb-2">Last Name</label>
                </div>
                <input type="text"
                       id="lastName"
                       placeholder="Enter your last name" th:field="*{lastName}">
                <p class="text-light" th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></p>
            </div>

            <div class="form-group">
                <div class="label-holder text-white d-flex justify-content-center">
                    <label for="email" class="h3 mb-2">Email</label>

                </div>
                <input type="text"
                       id="email"
                       placeholder="Enter your email" th:field="*{email}">
                <p class="text-light" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></p>
            </div>

            <div class="form-group">
                <div class="label-holder text-white d-flex justify-content-center">
                    <label for="password" class="h3 mb-2">Change password</label>

                </div>
                <input type="password"
                       id="password"
                       placeholder="Enter your password" th:field="*{password}">
                <p class="text-light" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
            </div>

            <div class="form-group">
                <div class="label-holder text-white d-flex justify-content-center">
                    <label for="profilePicture" class="h3 mb-2">Profile Picture URL</label>
                </div>
                <input type="text"
                       id="profilePicture" th:field="*{profilePicture}">
                <p class="text-light" th:if="${#fields.hasErrors('profilePicture')}" th:errors="*{profilePicture}"></p>
            </div>
            <button class="profile-actions-button">
                Save
            </button>
        </form>

    </section>
</main>
<footer th:replace="~{fragments/commons::footer}"></footer>
</body>
</html>