How to duplicate field for comparison in thymeleaf?

D

Denis Kuznetsov2019-05-26 11:31:44

Java

Denis Kuznetsov, 2019-05-26 11:31:44

hello i have a registration form

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
<!-- Include _menu.html -->
<th:block th:include="/_menu"></th:block>
<h1>Create a Person:</h1>
<form th:action="@{/register}"
      th:object="${personForm}" method="POST">
    Login:
    <input type="text" th:field="*{name}" />
    <br/>
    Email:
    <input type="text" th:field="*{email}" />
    <br/>
    Password:
    <input type="text" th:field="*{password}">
    <br/>
    Confirm password:
    <input type="text" th:field="*{doublePassword}">
    <input type="submit" value="Create" />
</form>
</body>
</html>

in which there is a password field and a form for repeating it, in order to process this I had to create a separate UserForm class, because the User itself did not have a field for the second password and was an entity for hibernate (that is, if I added a field there, then hibernate I would create a column that I don’t need)
here is my controller here using the get method, I map the page to the request and say that the form will be your attribute and you will fill in its fields (I can’t push the user there because he again doesn’t have a double password field) further I check the password match and the presence of the user in the database during the post request

@RequestMapping(value = { "/register" }, method = RequestMethod.GET)
    public String showAddPersonPage(Model model) {

        UserForm personForm = new UserForm();
        model.addAttribute("personForm", personForm);

        return "register";
    }

    @RequestMapping(value = {"/register"} , method = RequestMethod.POST)
    public String savePerson(Model model, @ModelAttribute("personForm") UserForm personForm) {

        if(personForm.checkPassword() &&
                userRepository.findByEmail(personForm.getEmail()) == null &&
                userRepository.findByName(personForm.getName()) == null) {

            AppUser user = new AppUser(personForm.getName(),
                    personForm.getEmail(),
                    personForm.getPassword());

            user.setEnabled(true);
            user.setRoles(Collections.singleton(Role.USER));
            userRepository.save(user);
            return "home";
         }

        return "register";
    }

the question is, is it possible to do this somehow without creating a UserForm inside the html file itself on thymeleaf or in the controller? Thanks in advance

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

O

Orkhan, 2019-05-26
@DennisKingsman

Hello!
You are very confused, to be honest ... even Spring has nothing to do with it, but more basic knowledge of html + js
Here, your form:

<form th:action="@{/register}"
      th:object="${personForm}" method="POST">
    Login:
    <input type="text" th:field="*{name}" />
    <br/>
    Email:
    <input type="text" th:field="*{email}" />
    <br/>
    Password:
    <input type="text" th:field="*{password}">
    <br/>
    Confirm password:
    <input type="text" th:field="*{doublePassword}">
    <input type="submit" value="Create" />
</form>

1) a little advice, use specific inputs. For example, if you need an email field, then use email, etc.
Respectively:

<form th:action="@{/register}"
      th:object="${personForm}" method="POST">
    Login:
    <input type="text" th:field="*{name}" />
    <br/>
    Email:
    <input type="email" th:field="*{email}" />
    <br/>
    Password:
    <input type="password" th:field="*{password}">
    <br/>
    Confirm password:
    <input type="password">
    <input type="submit" value="Create" />
</form>

2) Decide where exactly you want to validate the password match on the client or server. As for me, on the client it is better not to load the server once again.
If on the client, then using js, if on the server, then using java. Consider both options:
- On the server. Get both passwords from the form, compare using equals() and return the desired result. If the password is incorrect, then you can add a message through model.addAttribute()and display in the template

@RequestMapping(value = {"/register"} , method = RequestMethod.POST)
public String savePerson(Model model, @ModelAttribute("personForm") UserForm personForm) {


  if(!personForm.getPassword.equals(personForm.getPasswordConfirmation)) {
    model.addAttribute("passwordIncorrect", "Вы ввели некорректный пароль");
    return "register";
  }

    if(personForm.checkPassword() &&
            userRepository.findByEmail(personForm.getEmail()) == null &&
            userRepository.findByName(personForm.getName()) == null) {

        AppUser user = new AppUser(personForm.getName(),
                personForm.getEmail(),
                personForm.getPassword());

        user.setEnabled(true);
        user.setRoles(Collections.singleton(Role.USER));
        userRepository.save(user);
        return "home";
     }

    return "register";
}

- Processing on the client using js. The idea is that you deactivate the "Register" button and only if the passwords match then activate the button.
There are enough materials here. Google jquery password validation.
Here is an example:
Script - https://www.jqueryscript.net/form/Password-Strengt...
Demo - https://www.jqueryscript.net/demo/Password-Strengt...