Building Scalable Applications with Thymeleaf and Spring Boot/

...

/

Creating User Form

Creating User Form

Let's extend the create user form by adding role and password fields.

We'll cover the following...

We used the DatabaseInitializer to create some users, but now we also need to make the “Create User” form work again with both the role and password fields.

User role selection

We’ll start by adding the user role selection using an HTML <select> for this (sometimes called a dropdown or combobox).

Let’s add the following to edit.html:

Press + to interact
<div class="sm:col-span-2">
    <label for="userRole" class="block text-sm font-medium text-gray-700">User
        Role</label>
    <select id="userRole"
            class="max-w-lg block focus:ring-green-500 focus:border-green-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
            th:field="*{userRole}"> 
        <option th:each="role : ${possibleRoles}"
                th:text="#{'UserRole.' + ${role.name()}}"
                th:value="${role.name()}">User 
        </option>
    </select>
</div>

The <select> needs to bind to the userRole field in the CreateUserFormData object.

  • We need to add an <option> tag for each possible role. We will update the UserController to add the list of possible roles in the model under the possibleRoles key. This list will contain UserRole enum instances.

The value ...